Need Mustache Examples to apply custom formating

Dashboard Server
,
1

Hi there,

 

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

https://support.squaredup.com/v3/Reference/Tiles/CustomLabelling#how-to-use-custom-labeling-display-logical-disks-with-a-custom-label-the-mustache-helper

 

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

 

Ruben

2

Example if statement:

{{#if displayName.toLowerCase() == 'server1.domain.com'}} srv01 {{elseif displayName.toLowerCase() == 'server2.domain.com'}} srv02 {{elseif displayName.toLowerCase() == 'server3.domain.com'}} srv03 {{else}} {{displayName}} {{/if}}

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

Substrings, I always use this resource:

https://www.w3schools.com/jsref/jsref_substring.asp

Mustache is just using javascript methods against the string.

Replace:

https://www.w3schools.com/jsref/jsref_replace.asp

The Tutorials on the left include everything you could need!

 

Let us know how you get on :slight_smile:

3

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

thank you!

4

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:

5

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

6

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
7

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}} %

2 Likes
8

Appreciated. Thank you :slight_smile:

9

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
10

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}

Becomes

{{ 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.