Dialogs with ScriptX.Services
For example, prompted printing. This is one of a series of articles discussing aspects of working with ScriptX.Services.
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 can use 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.
Dialogs built on Bootstrap 5
Bootstrap 5 has no dependency on jQuery and so the exemplar implementation of Page Setup and Printer Settings dialogs have been updated to use Bootstrap 5.
To use these dialogs, all that is required is to change the library reference to use the minimised package including the UI impementations:
-
Change the reference to the client library to use the UI version for working with Bootstrap upto v4:
<!-- Add.on to scriptx.services compatibility --> <script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1/dist/meadco-scriptxservicesUI.min.js" data-meadco-license="3cfd70e2-f38f-4ab2-95f4-4ce4c1e39497" data-meadco-server="http://127.0.0.1:41191" data-meadco-license-path="warehouse" data-meadco-license-revision="0" data-meadco-syncinit="true" > </script> -
Or, change the reference to the client library to use the UI version for working with Bootstrap v5:
<!-- Add.on to scriptx.services compatibility --> <script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1/dist/meadco-scriptxservicesUI-2.min.js" data-meadco-license="3cfd70e2-f38f-4ab2-95f4-4ce4c1e39497" 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-scriptxservices
UI.min.js or meadco-scriptxservicesUI-2.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>
Developing your own dialogs
As a simple example, code may do the following (assuming that Bootstrap 4 and jQuery 3 are referenced:
-
HTML for the dialog
<div class="modal fade" id="dlg-printprompt"> <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Print</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="form-group row"> <label for="fld-printerselect" class="col-md-4 col-form-label text-right col-form-label-sm">Printer</label> <div class="col-md-8"> <select class="form-control col-form-label-sm custom-select custom-select-sm" id="fld-printerselect"></select> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="btn-doprint">Print</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> -
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'); } } -
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.