Shorten Handlebars expressions

Handlebars is a versatile expression language used for rendering dynamic content in OL Connect templates. However, in certain cases, the expressions can become lengthy, especially when combined with helpers like formatters or block helpers. This can affect the layout of your template, such as tables, in the Design view. To address this, you can employ techniques to shorten your Handlebars expressions without compromising functionality and improving maintainability.

In this tutorial, we’ll explore two different approaches to achieving this: creating a custom expression with a shortened name using a Text Helper, and using a custom helper registered in a Control script.

The following images show a dynamic table in Design and Preview mode. The length of the expressions affects the layout of the table in Design mode significantly.

Let’s have a look on how to solve this by creating shorter expressions. Note that these techniques are not limited to expressions in cells of dynamic tables, they can be applied to any expression.

Abbreviating an expression using a Text Helper

The first troublesome expression is {{treatmentcode}}. It makes the Code column too wide. To create a shorter expression for this data field:

1. In the Scripts panel, choose Handlebars Text Helper from the New Script menu. The Edit Text Helper dialog appears.

2. Enter a Name for the Helper. In this example, we’ve chosen “_tc”. The Helper’s name is what you use as the expression. Therefore, in this case, you should enter {{_tc}} as the expression in the table cell. Ensure the name is unique.

   We added an underscore at the beginning of the expression to distinguish it from standard expressions. This isn’t required, but we find it helpful.

3. The treatmentcode field of our example is located in the ‘details’-table of the Data Model. To have the Helper return the value of this field, set the Data scope of the Helper to record.details.
4. Click the downward pointing arrow in the first row in the column Field. Select the treatmentcode field from the list that appears.
5. Click OK to save the Helper.
6. Replace the {{treatmentcode}} expression in the table cell with the new {{_tc}} expression.

The following images show the dynamic table in Design and Preview mode.

In addition to connecting a data field to a custom expression, the Text Helper interface enables you to combine multiple fields, include a prefix and/or suffix, and format the data value.

The {{total}} and {{balance}} expressions in our table use the currencyNoSymbol formatter, which ensures that the value conforms to the currency format based on the current Locale. You can also configure this formatter within the Text Helper interface, as shown in the image below:

Using this configuration for our total and balance data fields, along with shorter expressions ({{_tot}} and {{_bal}}), transforms our table to resemble the image below.

Registering a Custom Helper in a Control Script

Certain expressions do not align with the functionality of the Text Helper. The expression in the Covered column includes an if statement (known as a block helper) to dynamically set the value of the column. When there is no value given for the covered field (or the value is 0), the expression displays the string ‘n/a’; otherwise, it displays the covered field’s value with the currencyNoSymbol formatter applied.

To simplify this expression, we can create a custom helper and implement the logic in JavaScript.

To register a custom helper:

1. In the Scripts panel, choose Control Script from the New Script menu. The Edit Script dialog appears.
2. Enter a name for the script file, for example Handlebars Helpers. A single script file may contain one or more custom helpers.
3. Delete the sample code and enter the following:

Handlebars.registerHelper('_cov', function(){
	
})

This registers a custom helper that will use {{_cov}} as the expression. Again, we use the underscore at the beginning of the expression to distinguish it from standard expressions.

4. The code below validates the covered field’s value using an if statement. If the value is falsy (in our scenario, 0 or 0.0), the code outputs the string ‘n/a’. Otherwise, it formats the value using the OL Connect’s currencyNoSymbol formatter, which excludes the currency symbol from the formatted value — unlike the currency formatter, which includes the currency symbol.

const value = this.covered
if(!value) {
    return 'n/a'
} else {
    return formatter.currencyNoSymbol( value )
}

The same could be written using the conditional (ternary) operator which is a shorthand for an if...else statement.

return this.covered ? formatter.currencyNoSymbol(this.covered) : 'n/a'

The full code in the shortest possible form:

Handlebars.registerHelper('_cov', function(){
    return this.covered ? formatter.currencyNoSymbol(this.covered) : 'n/a'
})

5. Click OK to save the Control Script.
6. Replace the expression in the table cell with our custom helper: {{_cov}}

This completes the various scenarios.

Our sample resources: