APPX HTML Client 5.5.0/5.5.1

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.

Troubleshooting

• The most common problem when upgrading the client is browser cache. Your browser will cache the javascript from the old version instead of loading the new code. Clear your browser cache. The specific steps to do this vary by browser and platform, consult your browsers documentation.
• If you have created your own login page based on 'client.html', make sure you update it with any changes to the standard 'client.html' when upgrading the HTML client.