Adding Static Image To Lightswitch Html 2013 Browse Screen

In my case, I have color coded some tiles in the HTML client and I want to add a simple color code key. I have the PNG file I want to use. I do not require the ability to upload or

Solution 1:

The easiest method of testing this approach would be to change your postRender to the following (which embeds the helper function within the postRender function):

myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
    functionGetImageProperty(imageSource) {
        return msls.promiseOperation(
            function (operation) {
                var image = newImage();
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                // XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.  // unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch) // still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)var xhr = newXMLHttpRequest();
                xhr.onload = function () {
                    var url = URL.createObjectURL(this.response);
                    image.onload = function () {
                        URL.revokeObjectURL(url);
                        canvas.width = image.width;
                        canvas.height = image.height;
                        ctx.drawImage(image, 0, 0);
                        var dataURL = canvas.toDataURL("image/png");
                        operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
                    };
                    image.onerror = function () {
                        operation.error("Image load error");
                    };
                    image.src = url;
                };
                xhr.open('GET', imageSource, true);
                xhr.responseType = 'blob';
                xhr.send();
            }
        );
    };
    GetImageProperty("content/images/Key.png").then(functiononComplete(result) {
        contentItem.screen.ImageProperty = result;
    }, functiononError(error) {
        msls.showMessageBox(error);
    });
};

This assumes that you named the local property ImageProperty as per my original post and the Image control on your screen is named ColorKey.

In the above example, I've also taken the opportunity to slightly simplify and improve the code from my original post. It also includes a simple error handler which may flag up if there is a problem with loading the image.

If this still doesn't work, you could test the process by changing the image source file-name to content/images/user-splash-screen.png (this png file should have been added as a matter of course when you created your LightSwitch HTML project).

As the GetImageProperty function is a helper routine, rather than embedding it within the postRender you'd normally place it within a JavaScript helper module. This will allow it to be easily reused without repeating the function's code. If you don't already have such a library and you're interested in implementing one, the following post covers some of details involved in doing this:

Lightswitch HTML global JS file to pass variable