Merge data into client-side template

Description

Merge Javascript into a client-side template and set the inner HTML to the result.

Used with the UX component.

This action allows you to define a data and a template, merge the data into the template and then set the innerHTML of a div, placeholder control, or Panel with the resulting HTML.

Download Component

When you open the builder, the genie shows this screen:

You can either specify static data to merge into the template, or you can specify the name of a Javascript function that will return the data to merge into the template. Similarly, you can specify a static template, or the name of a Javascript function that will dynamically create the template.

 Template Data Properties

Method for specifying the data

Specify if the data to be merged into the template is defined now, is obtained at run-time by calling a Javascript function, or is read from the current row in a List control Choices include Static, JavascriptFunction, List.

Static data

Specify the JSON data to merge into the template.

Javascript function for data

Specify the name of the Javascript function. This function must return an object, or an array of objects.

List name

Specify the name of the List control from which the data to merge into the template will be read.

 Template Definition Properties

Sample data for use in template builder

(Optional) Since the data used by this action is obtained at run-time using a Javascript function, in order to see what fields are available in the Template Builder, you can specify some sample, representative, data now so that the Template Builder can show you the available fields in your data.

Method for specifying the template

Specify if the template is defined now, or is obtained at run-time by calling a Javascript function. Choices include Static, JavascriptFunction.

Template

Template property.

Javascript for template

(Optional/Advanced) Your template can use Javascript functions for advanced features. You can define your template functions here, or by going to the Javascript Functions pane in the UX builder.

Local CSS

Your template can custom CSS classes. These can either be defined here, in CSS defined in the 'Local CSS' property of the UX builder, or in CSS that is linked. This option allows you to specify the CSS here.

Javascript function for template definition

Javascript function for template definition property.

 Target Properties

Type

Specify where the template should be shown after the data has been merged into it. Choices include Placeholder, Div, Panel.

Placeholder name

Specify the Id of the placeholder where the rendered template should be shown. Choices include.

Div

Specify the Id of the div where the rendered template should be shown.

Panel

Specify the Id of the target Panel Card Choices include.

See Also