ScriptX logotype
  • Getting started
  • Documentation
  • Samples
  • Pricing
Free Trial Downloads
  • Home
  • Getting started
  • Documentation
  • Samples
  • Pricing
Developers ›  Knowledge Bank ›  Articles ›  Dialogs

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:

  1. 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="8f351de0-5990-45c3-8fd2-8037b878939f"
                data-meadco-server="http://127.0.0.1:41191"
                data-meadco-license-path="warehouse"
                data-meadco-license-revision="0"
                data-meadco-syncinit="true"
            >
            </script>
            
            
  2. 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="8f351de0-5990-45c3-8fd2-8037b878939f"
                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 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:

  1. 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>       
                
            
  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.

See also:
  • This article was abstracted from the "Then To Now" walk-through.
  • Knowledge Bank
  • 'How To' Guides
    • ScriptX.Services
      • Introduction
      • Getting started
      • Evaluate with modern code
      • Maintaining investment in current code
        • Stage 1: Adding UI
        • Stage 2: Printing with ScriptX.Services
        • Stage 3: Summary and review
        • Stage 4: Error reporting
        • Stage 5: Prompted printing
        • Stage 6: Preparing for advanced uses
        • Stage 7: WaitForSpoolingComplete
        • Stage 8: Recommendations for some common issues
      • Printing with the API
      • MeadCoScriptXJS Library
      • Installing ScriptX.Services
        • For Windows PC
        • For On Premise Devices hosted on Windows Server
        • For On Premise Devices hosted on Windows 10/11
        • Configure options For On Premise Devices
        • Cloud
      • Orchestrator
      • Debugging
      • License deployment
        • For Windows PC
        • For On Premise Devices
      • Samples
        • Configure for Windows PC
        • Configure for On Premise
        • Configure for Cloud
    • Security Manager
      • Deploying a license or revision
    • ScriptX.Add-on
      • Introduction
      • Installing ScriptX on client PCs
      • Basic printing with ScriptX
      • Advanced printing features
      • Backwards compatibility
      • How to check if ScriptX is installed
      • License deployment
      • Quick start with Visual Studio
        • ASP.NET MVC
        • ASP.NET Web Forms
      • Nuget Packages
        • MeadCoScriptXJS Library
        • Installer helpers
        • ASP.NET WebForms Controls
        • Helpers for ASP.NET MVC
      • Client-side printing samples
  • Technical Reference
    • ScriptX.Services
      • Web service API
        • Service Description
          • (GET)
        • Licensing
          • licensing (GET)
          • licensing (POST)
          • licensing/ping (GET)
        • Printer
          • settings (GET)
          • current (GET)
          • current (PUT)
          • connection (PUT)
          • connection (DELETE)
        • PrintHtml
          • settings (GET)
          • deviceinfo (GET)
          • htmlPrintDefaults (GET)
          • print (POST)
          • status (GET)
          • download (GET)
          • canceljob (PUT)
        • PrintPdf
          • print (POST)
          • status (GET)
          • download (GET)
        • PrintDirect
          • print (POST)
      • Orchestrator API
        • v1
          • GET
        • v2
          • PUT
          • GET
      • ScriptX.Services compatibility roadmap
    • Security Manager
      • How it works
      • License Expiry
      • Testing for a valid license
      • About the license file (.mlf)
        • LICENSE
        • APPLICENSE
        • TITLE
        • DOMAINS
        • DOMAIN
        • PERMISSION
      • API
        • Apply
        • License
        • result
        • validLicense
    • ScriptX.Add-on
      • factory
        • baseUrl
        • ComponentVersionString
        • IsUniqueIDAvailable
        • OnDocumentComplete
        • relativeUrl
        • ResetUniqueID
        • ScriptXVersion
        • SecurityManagerVersion
        • Shutdown
        • UniqueID
      • printing
        • AddPrinterConnection
        • BatchPrintPDF
        • BatchPrintPDFEx
        • bottomMargin
        • collate
        • copies
        • currentPrinter
        • DefaultPrinter
        • disableUI
        • duplex
        • duplex2
        • EnumJobs
        • EnumPrinters
        • footer
        • GetJobsCount
        • GetMarginMeasure
        • header
        • headerFooterFont
        • IsSpooling
        • IsTemplateSupported
        • leftMargin
        • onafterprint
        • onbeforeprint
        • onbeforeunload
        • onpagesetup
        • onuserpagesetup
        • onuserprint
        • onuserprintpreview
        • orientation
        • OwnQueue
        • pageHeight
        • PageSetup
        • pageWidth
        • paperSize
        • paperSource
        • paperSource2
        • portrait
        • Preview
        • Print
        • printBackground
        • printer
        • PrintHTML
        • PrintHTMLEx
        • PrintPDF
        • PrintSetup
        • printToFileName
        • RemovePrinterConnection
        • rightMargin
        • SetMarginMeasure
        • SetPageRange
        • SetPreviewZoom
        • SetPrintScale
        • Sleep
        • templateURL
        • topMargin
        • TotalPrintPages
        • unprintableBottom
        • unprintableLeft
        • unprintableRight
        • unprintableTop
        • WaitForSpoolingComplete
      • printerControl
        • attributes
        • Bins
        • Forms
        • isLocal
        • isNetwork
        • isShared
        • Jobs
        • location
        • name
        • Pause
        • port
        • Purge
        • Resume
        • serverName
        • shareName
        • status
      • Job
        • Delete
        • Pause
        • Restart
        • Resume
      • enhancedFormatting
        • allFooterHeight
        • allHeaderHeight
        • allPagesFooter
        • allPagesHeader
        • extraFirstFooterHeight
        • extraFirstPageFooter
        • firstFooterHeight
        • firstHeaderHeight
        • firstPageFooter
        • firstPageHeader
        • pageRange
        • printingPass
      • rawPrinting
        • printer
        • printDocument
        • printString
    • Change and history logs
    • Articles
      • v1.15.x ScriptX Client Library
      • Dialogs with ScriptX.Services
      • Accessing protected content
      • Long term servicing (LTS)
 
ScriptX logotype
Home Getting started Documentation Samples Contact us

© 2025 Mead & Co Limited.

Follow us:
LinkedIn   GitHub
X

Warning:

This ScriptX.Add-on sample can only be viewed using Internet Explorer.