1
00:00:01,020 --> 00:00:06,390
I in this lecture, I'm going to show you how to use the dropdown widget, which is created using the

2
00:00:06,390 --> 00:00:13,170
dropdown node, most of going to use the dropdown widget later on in another lecture in this section

3
00:00:13,440 --> 00:00:17,010
to show you how to use the user interface HTML template.

4
00:00:17,370 --> 00:00:20,080
But first, let's have a look at the dropdown itself.

5
00:00:20,640 --> 00:00:29,470
Let's go to the dashboard group of notes and pick the dropdown node right here.

6
00:00:29,970 --> 00:00:36,900
And of course, as usual, I'm going to use a text output node to display the value that we've selected

7
00:00:36,900 --> 00:00:39,690
from the trip down to connect the two like this.

8
00:00:40,440 --> 00:00:47,190
And let's go into tab one and I'm going to add another group here, and I'm gonna call this.

9
00:00:49,190 --> 00:00:52,550
The dropdown group.

10
00:00:54,650 --> 00:00:57,770
And the one and make that.

11
00:00:59,230 --> 00:00:59,630
Eight.

12
00:01:00,240 --> 00:01:07,610
All right there with update and then allocate dropped down into the dropdown group.

13
00:01:08,190 --> 00:01:13,680
I'm can you give it the full width of eight blocks for the label?

14
00:01:13,690 --> 00:01:20,380
I'm going to say select a color, since this is going to be a list of colors and select an option for

15
00:01:20,380 --> 00:01:21,180
the placeholder.

16
00:01:21,580 --> 00:01:28,120
So let's put in a few colors green and the label would be green at a bunch of options here.

17
00:01:28,820 --> 00:01:32,650
Make this blue, red,

18
00:01:35,770 --> 00:01:41,050
white and give them one more, which can be black.

19
00:01:43,630 --> 00:01:49,150
As you can see, it's also possible to allow the user to select multiple items from the list and try

20
00:01:49,150 --> 00:01:49,990
that in a moment.

21
00:01:49,990 --> 00:01:53,350
But first, let's go for a single item from the list.

22
00:01:54,040 --> 00:02:00,010
OK, and then for the text and what we're going to allocate that to the same dropdown group and let's

23
00:02:00,010 --> 00:02:00,760
make it.

24
00:02:02,510 --> 00:02:12,230
Also for width, and I'm going to choose this layout right here and for the label.

25
00:02:14,330 --> 00:02:15,860
Something like this.

26
00:02:18,280 --> 00:02:26,350
We'll do all right, deploy and check it out, so select an option and say red and there's your red

27
00:02:26,560 --> 00:02:32,460
and black that you're black and so on, as you can see, it's pretty easy.

28
00:02:32,830 --> 00:02:35,470
Now, there's more that you can do with this, of course.

29
00:02:36,460 --> 00:02:42,580
And I'm going to show you how you can actually change colors that you use in a custom user interface

30
00:02:42,580 --> 00:02:46,080
using HTML very soon in an upcoming lecture.

31
00:02:46,510 --> 00:02:54,470
But I want to modify the experiment here slightly so that we can choose multiple items from the list.

32
00:02:54,510 --> 00:03:01,690
So I'm going to enable this radio button here to choose multiple selections and see what that looks

33
00:03:01,690 --> 00:03:03,040
like in the output.

34
00:03:03,640 --> 00:03:07,930
So you can choose blue, red and white.

35
00:03:08,650 --> 00:03:12,820
And you can see that now these values come through in an array.

36
00:03:13,330 --> 00:03:14,650
COMMENTATOR Limited array.

37
00:03:15,070 --> 00:03:17,380
Skarbek Right.

38
00:03:17,380 --> 00:03:20,110
So choose something else.

39
00:03:21,450 --> 00:03:21,960
A..

40
00:03:23,050 --> 00:03:31,130
Pretty simple at this point, you know how to use a dropdown note that creates a dropdown widget.

41
00:03:31,510 --> 00:03:33,160
Let's take this one step further.

42
00:03:33,160 --> 00:03:39,880
In the next lecture, we'll show you how to use a user interface template node and basically customize

43
00:03:40,390 --> 00:03:43,410
your dashboard using your own Hectorville.