Prompted printing

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 : Stage 4 - Error reporting

ScriptX.Add-on uses the native Windows UI for Print/Page Setup dialogs and for prompted printing.

Inside its sandbox, Javascript does not have access to these dialogs and so for ScriptX.Services these dialogs must be written in the browser using html, css and javascript and in the future may be Blazor or similar technology.

Applications may be using any number of application frameworks or toolsets so the  ScriptX.Services Client Library provides simple extension points for an application to provide the dialog implementations:

• function MeadCo.ScriptX.Print.UI.PageSetup(fnCallback)

  Called to display the application page setup dialog with a single argument of a callback function that must be called when the dialog is closed. The callback must be called with a single argument of true if the dialog was accepted or false if the user cancelled the dialog or the dialog closed.

• MeadCo.ScriptX.Print.UI.PrinterSettings(fnCallBack)

  Called to display the application print settings dialog with a single argument of a callback function that must be called when the dialog is closed. The callback must be called with a single argument of true if the dialog was accepted or false if the user cancelled the dialog or the dialog closed.

  This dialog is required to be displayed with prompted printing and should at the least allow the user to select a printer.

The implementations of these dialogs can mirror the standard Windows dialogs or can be more specific to the requirements of the application. For example, the Printer Settings dialog might only list available printers and not provide colation or copies options.

Dialogs built on jQuery and Bootstrap

The  ScriptX.Services Client Library already requires jQuery. Bootstrap is a commonly used CSS framework also using jQuery so the libraries include an exemplar implementation of Page Setup and Printer Settings dialogs.

To use these dialogs, all that is required is to change the library reference to use the minimised package including the UI impementations:

<!-- Add.on to scriptx.services compatibility -->
<script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1.7.1/dist/meadco-scriptxservicesUI.min.js"
    data-meadco-license="09df1dc1-cba3-48a8-aebe-ef2f287b51cd"
    data-meadco-server="http://127.0.0.1:41191"
    data-meadco-license-path="warehouse"
	data-meadco-license-revision="0"
	data-meadco-syncinit="true"
>
</script>

Note the use of meadco-scriptxservicesUI.min.js instead of meadco-scriptxservices.min.js

We can then enable prompted printing and add use of a page settings dialog:

<!-- new UI script -->
<script type="text/javascript">
$(window).on("load",function() {
    initView();
	$("#btn-print").click(function() {
		factory.printing.Print(true);
	});

	$("#btn-preview").click(function() {
		factory.printing.Preview();
	});

	$("#btn-setup").click(function() {
        if (factory.printing.PageSetup()) {
            console.log("Print setup changed by user.");
        }
	});
});
</script>

Open your browser (any browser) and go to the address  https:////scriptxprintsamples.meadroid.com/ThenToNow/now-stage5

Note if using a browser other than Internet Explorer that on using “Page Setup” the console will show a warning in the console:

PageSetup API in ScriptX.Print Service is not synchronous, there is no return value.
    

and the “Print setup changed by user.” message will not be logged if the dialog is accepted.

These issues will be addressed in the next article.

Developing your own dialogs

As a simple example, code may do the following (assuming that Bootstrap 4 and jQuery 3 are referenced:

1. HTML for the dialog

2. A function to initialise the dialog controls and implement the required extension function.

   // Initialise dialog with list of available printers
   // and hook into the cient library extension function
   function initPrintDialog() {
   
       // initialise dialog controls 
       var $printers = $('#fld-printerselect');
   
       $('#fld-printerselect > option').remove();
       for (var i = 0,name=""; name = factory.printing.EnumPrinters(i); i++) {
           $printers.append("<option>" + name);
       }
       $printers.val(factory.printing.printer);
   
       // Implement the function required by the client library
       // 1. Create the namespace 
       var ui = MeadCo.createNS("MeadCo.ScriptX.Print.UI");
       // 2. Add the required function to it.
       ui.PrinterSettings = function (fnCallBack) {
           var $dlg = $("#dlg-printprompt");
           var bAccepted = false;
   
           // *must* reattach handlers as callback function scoped variables will have changed
           $('#btn-doprint')
               .off("click")
               .on("click", function (ev) {
                   ev.preventDefault();
                   factory.printing.printer = $printers.val();
                   bAccepted = true;
                   $dlg.modal('hide');
               });
   
           $dlg
               .off('hidden.bs.modal')
               .on('hidden.bs.modal', function () {
                   if (typeof fnCallBack === "function") {
                       fnCallBack(bAccepted);
                   }
               });
   
           $dlg.modal('show');
       }
   }
   

3. Call the dialog initialisation as part of the initView() function.

   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 = 0.75
       factory.printing.topMargin = 1.5
       factory.printing.rightMargin = 0.75
       factory.printing.bottomMargin = 1.5
   
       initPrintDialog();
   }
   

And that is it. When factory.printing.Print(true); runs it will use the custom dialog.

Open your browser (any browser) and go to the address  https://scriptxprintsamples.meadroid.com/ThenToNow/now-stage5A

Next up: Stage 6 - Preparing for advanced uses.