This function allows you to provide your own custom layout template that can be used to customize a layout widget with your own design.


In order for this template to be used in the Visual Designer, you will need to load it from a file in your /www/YOUR-INSTANCE/htdocs/profoundui/userdata/custom/widgets directory (or a similar location.) 

Create a file in the IFS named /www/YOUR-INSTANCE/htdocs/profoundui/userdata/custom/widgets/loadTemplate.js, and put the following inside:

pui.retrieveCustomLayoutTemplate("My Template");

Then put the contents of the template under /www/YOUR-INSTANCE/htdocs/profoundui/userdata/layouts/My Template.html.

Format Of a Custom Template:

A custom template is an HTML template that describes what your layout will look like.  The HTML can contain variables that are evaluated as well as special HTML attributes that control how a given HTML tag is used.

Special attributes:


Variables in a layout template are enclosed in curly braces, and are either evaluated when the display is rendered. To understand how a variable is used in your template, see "Template Example", below. There are two types of variables that can be provided, they are:

Template Example:

<table style="empty-cells: show; overflow: hidden;" width="100%" height="100%">
  <tr repeat="{ property: 'rows', help: 'Specifies the number of table rows for this layout.' }">
    <td style="border: { designValue: '1', runtimeValue: 0 }px dashed #666666;" 
        repeat="{ property: 'columns', help: 'Specifies the number of table columns for this layout.' }">
      <div stretch="true" container="true" style="position: relative; width: 100%; overflow: hidden;">

Example notes: