Let's take the example from the previous lecture, we showed you how to use the dropdown one step further
and show you how to customize your dashboards using your own HTML.
And to do that, we use the template node.
The template node is down the bottom right here.
Just drag it into your dropdown slow and connected to the dropdown node and to be a bit more correct
about the purpose of this flow and to rename it to drop down and template.
All right, what's happening inside the template is that you can set an arbitrary HTML that is compatible
with the mustache logical template, as it's called.
So here's a very simple and short and concise documentation for mustache.
And you can see that basically anything that you put inside curly brackets is evaluated in this case.
In our example, it's the message payload value or whatever else it is that you're passing through to
the template node.
And other than that, just the normal TEMEL simple HTML will work.
We should also have a look at the template documentation in the note Ratel Doyce website, just to understand
a little bit more about how it works and especially how to deal with arrays and simple loops inside
mustache.
But I'll keep it simple in this example.
And what we do is have a template that allows us to control text color based on the value that we select
in the dropdown.
So it's quite a simple div.
In the we got a paragraph, I could just say the color is.
And then we'll pass a color from the dropdown and it will affect the way by which the text here is printed
by manipulating the color attribute of the font tag, which is coming through from the message.
All right.
Let's place that in the dropdown group.
And I'm going to give it a size of.
Three by to see what it looks like.
All right, deploy and then have a look at.
The dashboard.
So here's the widget and this is the template that we just created, let's go back and let's change
the color to blue.
It's now blue.
Make it white.
Black.
Kareen, and so on, so right here, we've got just normal e-mail that is reacting to the selection
of color that we make via a dropdown.
Of course, you can make this the celebrities you want by trying out different configurations in the
template e-mail so you can have any kind of HTML you want in here.
It can also insert your own Cyesis information so that you can control the look and feel of your dashboards.
This one will dashboard note that I want to show you in the next picture, and that is the form.
Let's go and have a look at it now.