Implement an in document UI

This walk-through illustrates taking a classic document that has a controlled print experience and works only in Internet Explorer and making it work with ScriptX.Services in any browser on any platform using the minimum amount of development effort and making as few changes as possible (though more changes might be desirable).

Previously : Introduction - the for IE only original

ScriptX.Services cannot intercept the browser UI so we first create a simple UI within the document. This will work with both ScriptX.Add-on and ScriptX.Services.

We will need jQuery as it is a dependency for the ScriptX.Add-on to ScriptX.Services compatibility libraries so we will also use it to wire up the UI.

	
    <!-- new UI -->
    <div>
    <button id="btn-print">Print</button> <button id="btn-preview">Preview</button>
    </div>

	<!-- ScriptX.Print.Client library requires jquery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
	

	
	<!-- leave current script as is, it will work .. to minimise effort -->
	<script>
	function initView() {
	  // WARNING: use of .enhancedFormatting requires a license with Enhanced Formatting enabled.
	  factory.printing.enhancedFormatting.allPagesHeader = 
		"<div><center><img src='http://services.meadroid.com/images/sx-header.png'></center></div>";
	  factory.printing.enhancedFormatting.allPagesFooter = 
		"<div><center><img src='http://services.meadroid.com/images/sx-footer-final.png'></center></div>";
	  // Remove the above two lines if testing with a license without Enhanced Formatting enabled.
	  factory.printing.SetMarginMeasure(2); // set inches
	  factory.printing.header = "";
	  factory.printing.footer = "";
	  factory.printing.leftMargin = 1.0;
	  factory.printing.topMargin = 1.5;
	  factory.printing.rightMargin = 1.0;
	  factory.printing.bottomMargin = 1.5;
	}
	</script>

	<!-- new UI script -->
	<script type="text/javascript">
	$(window).on("load",function() {

	  viewInit();
		$("#btn-print").click(function() { 
			factory.printing.Print();
		});
	
		$("#btn-preview").click(function() { 
			factory.printing.Preview();
		});
	});
	</script>

As can be seen, we have retained the old viewInit() function. However as we use typical jQuery code for initialising event handlers for the UI buttons we have moved the call to viewInit() from the body tag to the jQuery "onload" event handler.

Browse to the sample

Open your browser (Internet Explorer) and go to the address  https://scriptxprintsamples.meadroid.com/ThenToNow/ThenUI

The buttons can be used to print and/or preview the page as well as using the options from the browser Print menu.

Next up: Stage 2 - Add ScriptX.Services scripts