Skip to main content

Writing Your Own Component Helpers

Using Handlebars, you can create your own Helpers similar to the helpers we have built-in. 

For example, you can create a helper that checks a particular value that starts with a defined value. 

Helpers must be defined in the Javascript of the page or within a script tag in the Custom Footer code, not in the Component. 

Adding this code in the Javascript of the page will give us a new helper we can use in the custom component: 

Handlebars.registerHelper("starts_with", function(value1, value2) {
    if(value1.startsWith(value2)) {
        return value1;      
    }
});

In the custom component, we can use the code like so: 

{{starts_with field_43 "113-8214591"}}

If field_43 starts with that string, it will return field_43, otherwise, it won't. 

Mix and match helpers. 

You can use more than one helper at a time by passing the helper in parenthesis. 

{{#if (starts_with field_283 "113-8214591") }}

Yes it does start with that value. 

{{/if}}

Data parsing using helpers

Say we have a data table of Shopping Lists and want to group it by category, so we know what section of the grocery store to go to.

You can also create a helper to loop through and change the structure of the data. For example, you could use a custom helper if we wanted to group a shopping list by category.

Handlebars.registerHelper("groupData", function(data) {
    var parsedData = {
        list:{}
    };
    for (var i = 0; i < data.length ; i++) {
        var a = data[i];
        var cat = a.field_ID; // REPLACE WTIH THE CATEGORY FIELD ID
        if(typeof parsedData['list'][cat] === 'undefined'){
            parsedData['list'][cat] = [];
        }
        parsedData['list'][cat].push(a);
     }
     return parsedData;
});

Then, in the custom component, we can add the following.

<div class="custom-component">
    <h1>Shopping List</h1>
    {{#each (groupData records)}}
        {{#each this}}
    
            <h2>{{@key}}</h2>
            <ol class="continuous-list">
            {{#each this}}
                {{#unless field_64}}
                    <li>{{tb_link this tb-id="1"}} {{field_62}}</li>
                {{/unless}}
            {{/each}}
           
            </ol>
              
        {{/each}}
    {{/each}}
    <h1>Checked</h1>
    <ol class="continuous-list ">
        {{#each records}}
            {{#if field_64}}
                <li>{{tb_link this tb-id="2"}}<span class="strikethrough">{{field_62}}</span></li>
            {{/if}}
        {{/each}}
    </ol>
</div>
Back to top