This function allows you to provide your own custom layout template that can be used to customize a layout widget with your own design.
- name - the name of the template to load. Profound UI will expect a file placed under /www/YOUR-INSTANCE/htdocs/profoundui/userdata/layouts/NAME.html in your HTTP server instance.
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:
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.
- condition - the condition attribute determines whether an HTML tag is inserted in the page. If the condition evaluates to "false", the HTML element is not inserted into the display, otherwise it is inserted.
- repeat - the repeat attribute determines the number of times an HTML tag is repeated. If a repeat attribute evaluates to a positive number, it is repeated, otherwise it will be hidden.
- container - when a container attribute evalulates to "true", widgets can be placed inside of this element.
- stretch - when a stretch attribute evaluates to "true", this element is stretched to the size of its parent element.
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:
- Property-based variables - Specifies a property that can be selected in the Visual Designer and will be inserted in place of the variable. Properties can potentially be bound to host variables.
- property - the name of the widget property to evaluate.
- help - the help shown for this property in the Visual Designer.
- choices - the possible choices that can be provided in the Visual Designer.
- On line 2, the repeat attribute is used to repeat everything in the <tr> element (which includes everything up to the </tr> tag). A variable value is specified for the number of times to repeat the element. The value of the variable is determined by the "rows" widget property.
- On line 4, the <td> tag is repeated based on the number of columns selected in the "columns" widget property.
- On line 5, the <div> element is a container, so you can drag widgets into it in the Visual Designer. It is stretched so that it is always the full size of the <td> element that it is inside.