Skip to main content
Version: Upcoming 🦄

Dynamic Repeating Units

Dynamic repeating units function similarly to standard repeating units, as a repeatable set of controls at the tab level. However, with dynamic repeating units, each repeating unit is generated based on a provided data source. This allows you to create repeating sets of data corresponding to the rows of a data source.

In the HTML block templates, you can use special placeholders {{$.[PLACEHOLDER]}} to reference values from the data source. Once the dynamic repeating unit is generated, the placeholders are replaced with the corresponding values from the data source and then saved.

To define a dynamic repeating unit, use the dynamicRepeatingUnit property within the data-hf-repeating attribute.

Note

As with standard repeating units, it is mandatory to set the id attribute on the tab.

HTML Definition​

Dynamic Repeating Unit - declarative HTML definition
<li
    id="dynamic-ru-tab-01"
    data-hf-title="Dynamic RU Automatic"
    data-hf-repeating='{
        "dynamicRepeatingUnit": {
            "source": "{{HFFormPath}}/InventoryDB.json",
            "trigger": "automatic",
            "filter": "HFFormdefinition.Playground.filterDynamicRUDataSource"
        }
    }'
>
    <a href="#block_tab_dru_1"></a>
    <a href="#block_tab_dru_2"></a>
</li>
<li
    id="dynamic-ru-tab-02"
    data-hf-title="Dynamic RU Manual"
    data-hf-repeating='{
        "dynamicRepeatingUnit": {
            "source": "/api/catalogs/InventoryDB",
            "trigger": "manual",
            "filter": "HFFormdefinition.Playground.filterDynamicRUDataSource",
            "onFinished": "HFFormdefinition.Playground.onFinishDynamicRU"
        },
        "header": ["repeating1HeaderBlock1", "repeating1HeaderBlock2"]
    }'
>
    <a href="#block_tab_dru_3" data-hf-fullWidth="true"></a>
</li>

Options for Dynamic Repeating Units​

Dynamic-Repeating-Unit Options​

Use the dynamic-repeating-unit property to define the repeating unit as dynamic. These are the options available for the dynamic repeating unit object within the data-hf-repeating attribute. The object must be provided as valid JSON.

source - required​

The source of the data for the dynamic repeating unit. This can be a catalog URL ("/api/catalogs/[CATALOG_NAME]", a path to a JSON file placed in the FormDefinition folder or an array defined declaratively on the source property.
How to use:
Type: string | array

trigger - required​

The trigger that initiates the dynamic repeating unit. Possible values are "automatic" or "manual". The type "automatic" triggers the genereration of the dynamic repeating unit when the form is opened the first time. The type "manual" requires a manual trigger to generate the dynamic repeating unit.
How to use:
Type: string

filter​

The filter function that is used to filter the data source. The filter function must be defined in Custom Code within the FormDefinition file.
How to use:
Type: string

onFinished​

The function that is called when the dynamic repeating unit is generated. The function must be defined in Custom Code within the FormDefinition file.
How to use:
Type: string

Standard Repeating-Unit Options​

These are the options available from the standard repeating units defined on the data-hf-repeating attribute. Provide the object as a valid JSON.

id - required​

Set the ID of the tab.
How to use:
id="contact"
Type: string

alwaysShowHeaderFooter​

Define if Header and Footer is always visible even if there are no RepeatingUnits.
How to use:
"alwaysShowHeaderFooter"=true
Type: string

anchors​

En/disable linking anchors to the repeating unit by setting true or false. Default value is true.
How to use:
"anchors"=false
Type: boolean
Define the two blocks displayed as footer of all repeating units inside the tab. These blocks are inserted only once.
How to use:
"footer"=[repeating1FooterBlock1, repeating1FooterBlock2]
Type: string
Define the two blocks displayed as header of all repeating units inside the tab. These blocks are inserted only once.
How to use:
"header"=[repeating1HeaderBlock1, repeating1HeaderBlock2]
Type: string

max​

Default value is 99. Numbers from 1 to 99 can be used.
How to use:
"max"=10
Type: number

min​

Default value is 1. Numbers from 0 to 99 can be used.
How to use:
"min"=3
Type: number

order​

Switch between ascending and descending order of the RepeatingUnit items. Default value is "asc".
How to use:
"order"="desc"
Type: boolean
Very Important

If you use the option alwaysShowHeaderFooter: false to hide the header and footer, you cannot use the required: true option inside those blocks.

Using Data Source Values (with Placeholders)​

In the HTML block templates, special placeholders {{$.[PLACEHOLDER]}} can be used to reference values in the data source. The *PLACEHOLDER is the key corresponding to a value in the data source.

Dynamic Repeating Unit - Declarative HTML Definition
<div id="block_tab_dru_1" data-hf-block>
    <div class="grid column3">
        <div class="r1 c1">
            <input
                id="tf_dru_01"
                type="text"
                data-hf-control="HFWinJSCtrl.TextField"
                data-hf-options="{
                        label: '{{$.Description}}'
                    }"
            />
        </div>
        <div class="r1 c2">
            <input
                id="tf_dru_02"
                type="text"
                data-hf-control="HFWinJSCtrl.TextField"
                data-hf-options="{
                        label: 'In Stock',
                        defaultValue: '{{$.Stock}}'
                    }"
            />
        </div>
        <div class="r1 c3">
            <div
                id="id_numericfield01"
                data-hf-control="HFWinJSCtrl.NumericField"
                data-hf-options="{
                        label: 'Price',
                        defaultValue: {{$.Price}},
                        disabled: true
                    }"
            ></div>
        </div>
    </div>
</div>
<div id="dynamic-ru-tab-02" data-hf-block>
    <div class="grid column6">
        <div class="r1 c1 cspan2">{{$.Description}}</div>
        <div class="r1 c3">{{$.Title}}</div>
        <div class="r1 c4">{{$.Stock}}</div>
        <div class="r1 c5">{{$.Price | function: HFFormDefinition.Playground.addVAT}}</div>
        <div class="r1 c6">
            <input
                id="id_checkbox01"
                type="checkbox"
                value="value"
                data-hf-control="HFWinJSCtrl.CheckBox"
                data-hf-options="{
                        label: 'Get it!',
                        defaultValue: false,
                        style: 'backgroundHighlight',
                    }"
            />
        </div>
    </div>
</div>

Using Pipes​

You can use pipes to format data source values. A pipe is a function defined in the global scope of the form definition’s Custom Code. The pipe function receives the data source value as the first argument and the corresponding data source item as the second argument. The function’s return value is used for the placeholder.

Dynamic Repeating Unit - Declarative HTML Definition
<div class="r1 c5">{{$.Price | function: HFFormDefinition.Playground.addVAT}}</div>
Custom Code for function pipe
export function addVAT(value, dataItem) {
    const price = parseFloat(value) * 1.2; // + 20% VAT
    return price.toString();
}

Manually Initialize Dynamic Repeating Unit​

You can manually invoke a dynamic repeating unit by calling the initializeDynamicRepeatingUnit method on the HybridForms.API.RepeatingUnit object. Pass the tab ID of the repeating unit as the first argument.

    export function initializeDynamicRepeatingUnit() {
        HybridForms.API.RepeatingUnits.initializeDynamicRepeatingUnit('dru_tab_01').then(() => {
            console.log('CustomCode.initializeDynamicRepeatingUnit(): Dynamic RU initialized');
        });
    }