• Load balancing. You could install multiple connectors as above and configure multiple ports and have different users connect on different ports by setting up different 'appx-client-settings.js' files on the web server. In this case, you would install the web server component multiple times into different folders then customize the 'appx-client-settings.js' file in each folder. For example, all users in a certain department use a settings file that uses ports 3014/3015, another department might use use a settings file that uses 3020/3021, etc. Each department would have it's own login page on the web server.

Designer Defined Widgets

Starting in Release 6.0, you can extend the function of the HTML client by adding your own widgets. This assumes some familiarity with HTML and jQuery.

To start, in the web server folder copy or rename the appx-client-customTemplate.js to appx-client-custom.js.

This file is in the 'js' subdirectory. For example:

[root@localhost]# cd js
[root@localhost js]# mv appx-client-customTemplate.js appx-client-custom.js

In this example we'll add a signature widget to an input process. First we add one of the standard APPX widgets to an input process, then we override it with our custom widget. The widget you choose to override must accept the input you are going to supply it with. For example, a picture widget doesn’t accept user input and so is not a good choice for the signature pad since it returns a file name.

In APPX:

1. Place a file chooser widget on the image where you want a signature block. Size it appropriately.
2. In the GUI attributes add the macro @SWT=999. 999 is a number that will be matched with a function in your appx-client-custom.js file. You can use any numbers in the range 201-999. 1-200 are reserved for standard APPX widget.

The example template already has a widget 999 defined, so you do not need to to anything special to activate it. For reference, here is the function:

appx_session.createWidgetTag[999] = function widget_signature(widget, $tag) {
    $tag = $("<canvas>").addClass("signaturepad");
    $(function () {
        /*Need a little delay to let canvas get placed on screen*/
        setTimeout(function () {
            /*Creating global so button clicks have access to signature pad*/
            appx_session.signaturePad = new SignaturePad($(".signaturepad")[0]);
            const data = appx_session.signaturePad.toData();
            setTimeout(function () {
                var ratio = Math.max(window.devicePixelRatio || 1, 1);
                $(".signaturepad")[0].width = $(".signaturepad")[0].offsetWidth * ratio;
                $(".signaturepad")[0].height = $(".signaturepad")[0].offsetHeight * ratio;
                $(".signaturepad")[0].getContext("2d").scale(ratio, ratio);
                appx_session.signaturePad.clear();
            }, 0);
            appx_session.signaturePad.onEnd = function () {
                var fileBlob;
                appx_session.signaturePadID = $(".signaturepad").attr("id");
                if (HTMLCanvasElement.prototype.toBlob !== undefined) {
                    /*toBlob for all browsers except IE/Edge... Microsoft likes to create their own standards.*/
                    $(".signaturepad")[0].toBlob(function (blob) {
                        fileBlob = blob;
                    });
                } else {
                    /*IE/Edge version*/
                    fileBlob = $(".signaturepad")[0].msToBlob();
                }
                /*Need slight delay to let blob get built.*/
                setTimeout(function () {
                    var fileName = "signature.png" + Date.now();
                    uploadFileToMongo(fileBlob, fileName, function () {
                        $("#" + appx_session.signaturePadID).val("$(sendFile)\\" + fileName);
                        $("#" + appx_session.signaturePadID).addClass("appxitem dirty");
                    });
                }, 50);
            }
        }, 50);
    });
    return $tag;
  }
}

The function defines the signature box and clears it. When the user exits the box, the graphic is converted to a blob & uploaded to the Mongo database. The URL to the file is returned to the APPX process.