1
00:00:00,750 --> 00:00:07,140
Let's take the example from the previous lecture, we showed you how to use the dropdown one step further

2
00:00:07,170 --> 00:00:13,770
and show you how to customize your dashboards using your own HTML.

3
00:00:14,070 --> 00:00:17,310
And to do that, we use the template node.

4
00:00:17,590 --> 00:00:19,920
The template node is down the bottom right here.

5
00:00:20,160 --> 00:00:29,970
Just drag it into your dropdown slow and connected to the dropdown node and to be a bit more correct

6
00:00:29,970 --> 00:00:36,780
about the purpose of this flow and to rename it to drop down and template.

7
00:00:38,170 --> 00:00:47,080
All right, what's happening inside the template is that you can set an arbitrary HTML that is compatible

8
00:00:47,320 --> 00:00:51,640
with the mustache logical template, as it's called.

9
00:00:51,670 --> 00:00:56,760
So here's a very simple and short and concise documentation for mustache.

10
00:00:57,010 --> 00:01:04,080
And you can see that basically anything that you put inside curly brackets is evaluated in this case.

11
00:01:04,090 --> 00:01:10,900
In our example, it's the message payload value or whatever else it is that you're passing through to

12
00:01:10,900 --> 00:01:12,670
the template node.

13
00:01:13,060 --> 00:01:18,610
And other than that, just the normal TEMEL simple HTML will work.

14
00:01:19,420 --> 00:01:26,200
We should also have a look at the template documentation in the note Ratel Doyce website, just to understand

15
00:01:26,200 --> 00:01:33,790
a little bit more about how it works and especially how to deal with arrays and simple loops inside

16
00:01:33,790 --> 00:01:34,570
mustache.

17
00:01:34,880 --> 00:01:36,820
But I'll keep it simple in this example.

18
00:01:37,210 --> 00:01:49,570
And what we do is have a template that allows us to control text color based on the value that we select

19
00:01:49,570 --> 00:01:50,320
in the dropdown.

20
00:01:50,470 --> 00:01:52,270
So it's quite a simple div.

21
00:01:53,610 --> 00:01:59,610
In the we got a paragraph, I could just say the color is.

22
00:02:01,440 --> 00:02:09,270
And then we'll pass a color from the dropdown and it will affect the way by which the text here is printed

23
00:02:09,480 --> 00:02:16,830
by manipulating the color attribute of the font tag, which is coming through from the message.

24
00:02:17,550 --> 00:02:18,150
All right.

25
00:02:18,420 --> 00:02:22,260
Let's place that in the dropdown group.

26
00:02:23,400 --> 00:02:27,210
And I'm going to give it a size of.

27
00:02:28,570 --> 00:02:30,360
Three by to see what it looks like.

28
00:02:31,560 --> 00:02:35,670
All right, deploy and then have a look at.

29
00:02:36,810 --> 00:02:37,630
The dashboard.

30
00:02:38,730 --> 00:02:45,930
So here's the widget and this is the template that we just created, let's go back and let's change

31
00:02:45,930 --> 00:02:46,890
the color to blue.

32
00:02:47,700 --> 00:02:48,440
It's now blue.

33
00:02:49,050 --> 00:02:50,610
Make it white.

34
00:02:52,130 --> 00:02:52,680
Black.

35
00:02:54,950 --> 00:03:03,830
Kareen, and so on, so right here, we've got just normal e-mail that is reacting to the selection

36
00:03:03,830 --> 00:03:06,800
of color that we make via a dropdown.

37
00:03:07,730 --> 00:03:14,270
Of course, you can make this the celebrities you want by trying out different configurations in the

38
00:03:14,420 --> 00:03:18,970
template e-mail so you can have any kind of HTML you want in here.

39
00:03:19,220 --> 00:03:27,090
It can also insert your own Cyesis information so that you can control the look and feel of your dashboards.

40
00:03:27,980 --> 00:03:33,420
This one will dashboard note that I want to show you in the next picture, and that is the form.

41
00:03:33,920 --> 00:03:35,440
Let's go and have a look at it now.