Create Handlebars Helper Card

Click Editor to view the HTML which builds this card and to add handlebars classes.

Make sure Define source without mapping is checked, here the actual mapping of the data is defined.

In this template, there is already a d. added in front of Handlebars expression and this expression points to the correct JSON path.

Scroll down and you will find Handlebars block helper function each, it points to the correct JSON path of the items result set.

Replace {{dataSets.[0].data.d.LifeCycleStatusName}} with {{lcsHelper dataSets.[0].data.d.LifeCycleStatusName}} handlebar helper function.

{{lcsHelper dataSets.[0].data.d.LifeCycleStatusName}}

You will see a pop-up window alerting on missing helper function. Click Close to implement it.

We have not yet implemented lcsHelper function.

Click Handle… to switch to the Handlebars tab where missing Handlebars helper function can be implemented.

Replace existing source code with below.

Handlebars.registerHelper("lcsHelper", function (passedString) {
if (passedString.includes("A")) {
return new Handlebars.SafeString( "<img src='green.png' style=' width: 24px; height: 24px;'>");
}
if (passedString.includes("R")) {
return new Handlebars.SafeString("<img src='yellow.png' style=' width: 24px; height: 24px;'>");
}
return new Handlebars.SafeString( "<img src='red.png' style=' width: 24px; height: 24px;'>");
});

This Handlebars helper function will evaluate the passedString which is the LifeCycleStatusName JSON value. This function will insert an image depending on the status and return the related HTML snippet. If the Status is C (closed) than the function will not insert any image.

Navigate to Editor tab and click Handle….

Copy and paste the following code below the existing function:

Handlebars.registerHelper("gaCheckHelper", function (grossAmount) {
if (grossAmount > 500) {
return new Handlebars.SafeString( "<b> <font color=\"GreenYellow\">" + grossAmount + "</b> </font>");
}
return new Handlebars.SafeString( grossAmount);
});

This handlebars helper function will evaluate the grossAmount which is the grossAmount JSON value. If the value is above 500 it will Color it green.

Switch to HTML editor.

Replace {{GrossAmount}} with {{gaCheckHelper GrossAmount}} .

{{gaCheckHelper GrossAmount}}

gaCheckHelper handlebars helper function is getting the value GrossAmount passed in. GrossAmount does not need the path as this function is getting called in the Handlebars helper block with d.Items.results path.

As a result, the value above 500 is coloured green.

If the editor does not refreshed by itself, you can force it to reload by switching tabs. Click css and then back on HTML.

Click Save.