Visual builder {{Markdown}} compatibility with Handlebars {{Mustache}}

[yus4u]

Kibana version: 6.4

Elasticsearch version: 6.4

Server OS version: Cloud

Browser version: Chrome

Browser OS version: MacOS

Description of the problem including expected versus actual behavior:
I'm trying to use the conditions with the variables that can be used in the Markdown using Handlebars expressions. Plus using a custom CSS. my goal was to create a traffic light based on the variables.

1- It is not clear the documentation on how to use the CSS in the panel options.
2- It is not clear what features are possible to use from Handlebars expressions.

here my CSS file

html{
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}

.trafficlight{
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 20px;
position: relative;
border: solid 5px #333;
}

.trafficlight:before{
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -20px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}

.trafficlight:after{
background: #222;
background-image: linear-gradient(-90deg, #222 0%, #444 30%, #000);
content: "";
width: 50px;
height: 500px;
margin-left: 60px;
position: absolute;
top: 150px;
z-index: -1;
}

.protector{
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}

.protector:nth-child(2){
top: 140px;
}

.protector:nth-child(3){
top: 260px;
}

.red{
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
border: dotted 2px red;
box-shadow:
0 0 20px #111 inset,
0 0 10px red;
}

.yellow{
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
border: dotted 2px yellow;
position: absolute;
top: 145px;
left: 35px;
box-shadow:
0 0 20px #111 inset,
0 0 10px yellow;
}

.green{
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
border: dotted 2px lime;
position: absolute;
top: 270px;
left: 35px;
box-shadow:
0 0 20px #111 inset,
0 0 10px lime;
}

@Keyframes red{
0%{opacity: 1}
20%{opacity: 1}
40%{opacity: 1}
60%{opacity: .1}
80%{opacity: .1}
100%{opacity: .1}
}

@Keyframes yellow{
0%{opacity: .1}
20%{opacity: .1}
40%{opacity: 1}
50%{opacity: .1}
60%{opacity: .1}
80%{opacity: .1}
100%{opacity: .1}
}

@Keyframes green{
0%{opacity: .1}
20%{opacity: .1}
40%{opacity: .1}
60%{opacity: 1}
80%{opacity: 1}
83%{opacity: .1}
86%{opacity: 1}
89%{opacity: .1}
93%{opacity: 1}
96%{opacity: .1}
100%{opacity: 1}
}

---

Describe the feature:

[elasticmachine]

Pinging @elastic/kibana-app

[lukasolson]

Duplicate of #23418.

[yus4u]

Sorry, @lukasolson I don't see that ticket present my issue.
The Issue that I can't use the (if/else statements) in Kibana Markdown using the correct variables.
As you see in the first screenshot I can use the variables. But when I use the (if/else statements) I lose all the variables as you third screenshot.

thanks

[timroes]

Hi,

you can use all official [handlebars] (https://handlebarsjs.com/builtin_helpers.html) features. But handlebars doesn't support any larger/less comparison. That's also why you "lose" all the variables in your third screenshot, because that snippet isn't valid handlebars anymore.

Could you clarify a bit on your CSS question: do guy wish for better documentation in place? Is there something specific not working in your case and your want to know why (in which case the [forums] (https://discuss.elastic.co/c/kibana) are the best place to ask for help)?

Cheers
Tim