Need Mustache Examples to apply custom formating

Hi there,


I need support with mustaches. I went through the following document, but can’t accomplish what I like to do.


Could you please provide some examples for:

  • Condition ( if property == value ) then xxx else yyy
  • Condition ( if property >= value ) then xxx else yyy
  • Substring
  • Replace
  • other useful functions you used

Thanks in advance



Example if statement:

{{#if displayName.toLowerCase() == ''}} srv01 {{elseif displayName.toLowerCase() == ''}} srv02 {{elseif displayName.toLowerCase() == ''}} srv03 {{else}} {{displayName}} {{/if}}

Should just be a case of adjusting == as required, using whichever property works best.

Substrings, I always use this resource:

Mustache is just using javascript methods against the string.


The Tutorials on the left include everything you could need!


Let us know how you get on :slight_smile:

Got it. If I can just use plain JavaScript things become easier :slight_smile:

thank you!

Not a problem. Another bit of advice I can give, is that the mustache helper box can be a bit of a pain to type into, especially when using the JS methods. I find it easier to select the mustache items I will include, then drop down to the json editor to make your changes. Or just outright using your favourite text editor :wink:

Ah, that’s a nice one! :slight_smile:

From what I’m seeing there is a lot of power in this area but there is a lack of samples. One example that I don’t have yet is how to provide a trend line within a grid column.

1 Like

Here are the examples that I have so far for re-use: (these were provided by SquaredUp support):

Health state by text: {{#if (value == ‘Healthy’)}}{{elseif (value == ‘Potentially Overallocated’)}}{{else}}{{/if}}

Health state by value: {{#if value < 20}}{{value}}{{elseif value >= 20 && value <=40 }}{{value}}{{elseif value > 40 }}{{value}}{{/if}}

Bar chart for values: <img alt="Embedded Image"src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAacAAAAZCAMAAACihhEbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADMUExURQCPpwCPqACPqQCQqQCQqgCRqgCRqwCSqwCSrACTrACTrQCUrgCVrwCUrwCVsACWsACWsQCXsQCXsgCYsgCYswCZswCZtACZtQCatQCatgCbtgCbtwCctwCcuACduACduQCeugCfuwCeuwCfvACgvACgvQChvQChvgCivgCivwCjvwCjwACkwQCjwQCkwgClwgClwwCmwwCmxACnxACnxQCoxgCoxQCoxwCpxwCpyACqyACqyQCryQCrygCsygCsywCtzACUrQCtywCeuR0ryowAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJCSURBVGhD7ZXbVhpREAUH1BiTeCEqCiK5GIwmgIoiSIiS+P//ZHWfnpmzZsiah8hbV31Cre6dJDWo19Zqa3WEddxYD77ZQNjEt5sIW/hONN6LxgdxG2EHd3cQ9rCxF/zYQNjHg32Ew4NmUDlqHovQwrbYardO2upJB0876mkXP4nGZ9H4In5FOMNvZwg9PO8Fv58jXODlBcIP/CkafXHQV4b9q/7VEOEab67F0Y06usW70d0twjh4P4bJeCpOpvCAs+nsQfw1Q5jj7znCIz6JxkJcJAmFQqW4EUgj6VNqtIXwB5c0Uii0rJEUopEUihtZpUIjqVRo1F7aqLviRgaFyo1AGkmhuNF9KKSNtJAYNwJpNJ9JoUKjR4S/GBoJ4Z6s1H+22g6tDEpZKyllrUKphnYSrZV2OgyltFPz+CiUohWd2pB2ylqBtuqGUs+4pJVS3eryH60GUSu9Jm0lndJWhWuSVopek6GdJtE9yTWlrbRUVaskqYevV8sa2dfTn8fXKzV69Z8X35N1MtJ7CpWsU7inTnRP2kkbPUeNrFLWCKVRD0r3JBqlexqErzeUTqWfZ51AO2X3pBdlnezrKXpP2kl/nnXSRlTKfp5WSn9efk++T75Pvk9m3Mj3yfcpbeT7lN9T2sn3qfj78nvyffJ9MrSR4fvk+1TdyvfJ98n3CX2f8ntabSPD98n3qbqV75Pvk+8T+j7l97TaRobvk+9TdSvfJ98n3yf0fcrvabWNDN8n36fqVr5Pvk++T/gq+7RYvAAy+UTDp8jJTAAAAABJRU5ErkJggg==” width={{value*4}} height=15 /> Embedded Image {{value}} %


Appreciated. Thank you :slight_smile:

I put together a more detailed version of this content in a blog post available at: Samples for SquaredUp Custom templates or mustaches - Catapult Systems

1 Like

For those more inclined towards a JS way of doing things too… ie…

{{#if value < 20}} healthy {{elseif value >= 20 && value <=40 }} warning {{elseif value > 40 }} critical {{/if}


{{ value < 20 ? healthy : value > 40 ? critical : warning }}

Custom labelling is super flexible, and like said above very powerful. Anywhere you see the moustache picker… go wild.