Set widget content

Description:
Using an crs binding widgets, specify the HTML content for the widget and define the context that will be used for that widget. For the widget, either provide the element itself or a query to locate it, include the HTML content, and use a context object that contains a binding ID (bId) or the bId itself.

The HTML arguments can take various forms: they can be a direct HTML string, an HTML template from the binding templates store, or a function within the step context that returns an HTML string.

HTML string example:

{
    "type": "dom_binding",
    "action": "set_widget", 
    "args": {
        "element": "#my-widget",
        "html": "<div>${person.firstName}</div>",
        "context": "$context"
    }
}

HTML template example:

{
    "type": "dom_binding",
    "action": "set_widget", 
    "args": {
        "element": "#my-widget",
        "html": "$template.my-template",
        "context": "$context"
    }
}

my-template must be on the binding engine templates store.

HTML retrieved from a function example:

{
    "type": "dom_binding",
    "action": "set_widget", 
    "args": {
        "element": "#my-widget",
        "html": "$fn.getMyTemplate",
        "context": "$context"
    }
}

This process will generate an HTMLTemplateElement using the HTML content you provide and will also add it to the binding engine’s template store.

Clear crs binding widget

Description:
Clear the context and content of a crs binding widget.

{
    "type": "dom_binding",
    "action": "set_widget", 
    "args": {
        "element": "#my-widget"
    }
}

Dictionary to inflation template

Description:
Define the structure of an inflation template using a dictionary in JavaScript object notation. This approach is utilized to construct an inflation template, with the option to include a wrapper around the template definition. For instance, you can create an inflation template for a dynamic data grid, where the template represents the columns of the grid.

{
    "type": "dom_binding",
    "action": "create_inflation_template", 
    "args": {
        "template_id": "my-template",
        "source": {
            "id": { 
                "attributes": { ... }
            },
            "code": { 
                "styles": { ... }
            },
            "isActive": {
                "tag_name": "span" 
            }
        },
        "tag_name": "div",
        "wrapper": {
            "tag_name": "li"
        },
        "ctx": "context"
    }
}

This action will generate an HTMLTemplateElement and register it with the binding engine’s inflation store for future use. For each row that needs to be rendered, this template will serve as the basis to create a row, which will then be populated with the necessary values for each cell.

The source property is a dictionary where each key represents a field path used in the inflation process. In our example, we use a model with “id” and “code” properties and aim to create div elements for these properties. Within the source object of the intent definition, you’ll notice that the “id” and “code” properties are dictionaries. These, along with the ‘wrapper’ argument, are used in the DOM action “create_element” (see “create new element”). Our example illustrates this by including “attributes” and “styles”, but for comprehensive details, refer to the create element documentation.

Additionally, there’s a ‘tag_name’ argument property. This sets a default for the args used in element creation, making the args.tag_name for both ‘code’ and ‘description’ default to “div”, as shown in the example. However, this can be overridden if a particular element should not be a div. This is demonstrated with the ‘isActive’ property in the source property definition, where you can specify a different tag if needed.

If defined, the wrapper object serves as the parent for the source elements.

The provided definition will result in the specified HTML content within a template element.

<li>
    <div ... attributes ...>${id}</div>
    <div styles="... styles ....">${code}</div>
    <span>${isActive}</span>
</li>

This approach should be used only when static templates are not feasible. For instance, in the example of a data grid, where the structure and order of columns can change dynamically, the template is constructed based on data received from the server, making it impossible to predict the required template structure beforehand.

Create elements from template

Description:
Given a template and a collection of records, this process involves creating an instance of the template’s content for each record item, thereby generating new elements. If a parent element is specified, these newly created and inflated elements will be appended to it. This is done after clearing the existing children of the parent element, effectively replacing them with the elements created for each data item. If the ‘recycle’ option is set to true, the child elements of the parent are reused instead of creating new ones. These child elements are incorporated into the inflation process, with their data being updated accordingly. New items are only created if the number of data items exceeds the number of existing child elements. Conversely, if there are fewer data items than child elements, the surplus child elements are removed.

{
    "type": "dom_binding",
    "action": "elements_from_template", 
    "args": {
        "data": "$data.records",
        "template": "#my-template",
        "parent": "#my-list",
        "remove_template": true,
        "recycle": true
    }
}

If “remove_template” is true, it will remove the template from the inflation manager after this batch of elements were created.

The template arguments can be specified in two ways: either as a query path to select a template from the DOM or as an instance of an HTMLTemplateElement.