myapp.ScreenName.EntityName_render = function (element, contentItem) {

    var div = $("<div style='height:600px'/>");
    div.appendTo($(element));

    contentItem.value.oncollectionchange = function () {
        var p = c1ls.getGalleryProperties(contentItem);

        if (p.image !== null) {
            var list = [];
            list.push("<ul>");

            contentItem.value.data.forEach(function (r) {
                list.push("<li><img width='200' height='150' src='" + p.src(r) + "' title='" + r[p.caption] + "'/></li>");
            });

            list.push("</ul>");
            div.html(list.join("\r\n"));
            div.wijgallery();
        }
    };

    c1ls.renderControl(contentItem);
};

Remarks

This widget requires an absolute height value in order to render. If desired, change the default height (600px) of the generated DOM element.

This widget will not render until the screen collection to which it is bound is loaded (that is, when the oncollectionchange event fires). If the underlying query is re-executed with different sort or filter criteria, then the widget will re-render accordingly. The final line of code calls the c1ls.renderControl method to ensure proper rendering in tabs and popups, and to handle collections that have already been loaded.

The utility method c1ls.getGalleryProperties parses the child properties defined in the screen designer and returns an object with associated metadata. This object has the following properties:

• caption, the name of the property used for image captions.
• image, the name of the property used for the image data itself.
• base64, a boolean that indicates whether the image data is encoded in base64 format.
• src, a method that accepts a data row and returns a string for the src attribute of an <img> tag.

For each item in the collection, the generated code constructs an <li> tag with a thumbnail image of a fixed size (200 pixels wide, 150 pixels high). After the containing <ul> list is applied to the generated DOM element, the wijgallery constructor is called without arguments to render the image viewer. If desired, you can modify the generated code to set one or more options.

Copyright (c) GrapeCity, inc. All rights reserved.