1 00:00:00,720 --> 00:00:07,140 I in this lecture, I'm going to show you how to use the form note that allows you to create widgets 2 00:00:07,140 --> 00:00:13,800 that contain forms and through the form you could submit all sorts of data as part of your flow. 3 00:00:14,310 --> 00:00:15,840 So let's start with the example. 4 00:00:16,440 --> 00:00:25,320 Go to the dashboard a list of notes and pick the form note, drop it on to your new flow of create a 5 00:00:25,320 --> 00:00:27,090 new flow called form here. 6 00:00:27,720 --> 00:00:30,630 And I'm going to design this form in a moment. 7 00:00:30,630 --> 00:00:40,440 But what I want to do is to get that out of it and then present the data inside the dashboard in a text 8 00:00:40,770 --> 00:00:43,830 note like this one here to connect the two. 9 00:00:44,430 --> 00:00:55,920 And let's create a new group then to go into tab one and add a new group and call this group to form 10 00:00:56,850 --> 00:01:02,660 a group like this part of TAB one as far as we're concerned. 11 00:01:02,680 --> 00:01:04,290 Let's let's make it six. 12 00:01:04,830 --> 00:01:05,460 All right. 13 00:01:06,130 --> 00:01:09,660 So now I've got a place for the two new widgets. 14 00:01:09,660 --> 00:01:12,420 Let's go into the form widget. 15 00:01:13,100 --> 00:01:21,900 Going to give it a name and a reasonable name, which is going to be a prompt to the user to select 16 00:01:21,900 --> 00:01:23,060 their favorite colors. 17 00:01:24,570 --> 00:01:27,930 This widget is going to be part of the form group. 18 00:01:28,380 --> 00:01:29,670 Let's give the full width. 19 00:01:31,720 --> 00:01:35,810 And a six by five should be enough, we can adjust this later. 20 00:01:35,830 --> 00:01:42,850 Of course, now the form can contain various elements of different kinds, as you can see here, text, 21 00:01:42,850 --> 00:01:48,960 multiline number, etc. I'm going to create the first element to be a prompt for my name. 22 00:01:49,480 --> 00:01:54,970 So here's my name and it's going to be so that's the label. 23 00:01:54,970 --> 00:01:56,860 That's going to be the name of the element. 24 00:01:57,340 --> 00:02:01,020 And this is going to be of type text and this is required. 25 00:02:01,450 --> 00:02:09,520 And let's add a bunch of other labels which are going to be of type checkbook's and these are going 26 00:02:09,520 --> 00:02:10,960 to be my favorite colors. 27 00:02:10,960 --> 00:02:20,740 So the screen and that's going to be the name and let's say blue, red. 28 00:02:21,610 --> 00:02:22,750 And let's add one more. 29 00:02:24,660 --> 00:02:25,380 Hello. 30 00:02:27,790 --> 00:02:33,820 And name the yellow, and I would also like to add a date. 31 00:02:37,810 --> 00:02:40,780 I just called I just said that just to keep things simple. 32 00:02:41,200 --> 00:02:46,020 All right, now, when this form is rendered, they are going to be two buttons. 33 00:02:46,030 --> 00:02:48,950 One is going to be submit and the other one is going to be canceled. 34 00:02:49,870 --> 00:02:50,380 All right. 35 00:02:50,560 --> 00:02:51,490 Let's click on Done. 36 00:02:52,920 --> 00:03:00,840 And then go into the text output widget and let's say form output. 37 00:03:02,000 --> 00:03:02,660 Text. 38 00:03:04,790 --> 00:03:06,320 Make it for Whit's. 39 00:03:07,630 --> 00:03:12,160 Actually, I need to select the location first of the group, which is going to be the form group, 40 00:03:12,160 --> 00:03:18,670 and that way my my property's Windsor now knows how much space I've got available, so just make it 41 00:03:18,670 --> 00:03:19,210 seven. 42 00:03:20,380 --> 00:03:22,720 And that should be enough. 43 00:03:22,720 --> 00:03:24,940 Actually, I'll use this layout here. 44 00:03:24,940 --> 00:03:26,650 So the developer is below the label. 45 00:03:27,690 --> 00:03:28,980 Let's check it out. 46 00:03:29,170 --> 00:03:29,920 Deploy. 47 00:03:30,670 --> 00:03:31,240 Oh, hang on. 48 00:03:31,240 --> 00:03:32,800 This narrow form. 49 00:03:32,980 --> 00:03:33,910 Put your text. 50 00:03:35,310 --> 00:03:36,900 So the form outpoured. 51 00:03:38,850 --> 00:03:45,030 Not going to deploy, you can see that a red triangle here indicating an error in the form, so a year. 52 00:03:45,270 --> 00:03:49,260 The problem here is that I've gone beyond the limit of this group. 53 00:03:49,740 --> 00:03:53,820 I've made this widget too wide. 54 00:03:53,820 --> 00:03:55,380 So let's make it six by one. 55 00:03:55,380 --> 00:03:59,750 And that would allow us to continue to deploy. 56 00:04:00,420 --> 00:04:02,070 And that's sort of dashboard. 57 00:04:03,330 --> 00:04:06,250 And here is a form group. 58 00:04:06,270 --> 00:04:12,300 So if I tried to submit this without a name, I'm getting a bubble here telling me that I really need 59 00:04:12,300 --> 00:04:13,190 to put in my name. 60 00:04:13,740 --> 00:04:23,550 So here's my name and I can see that I've selected the first widget or the first element to be a checkbox, 61 00:04:23,550 --> 00:04:25,770 but the rest are text boxes. 62 00:04:25,800 --> 00:04:29,220 So let's go back and fix this and try again. 63 00:04:29,250 --> 00:04:31,680 So I want these to be checkboxes. 64 00:04:33,410 --> 00:04:36,500 As long as well as the last one like that. 65 00:04:36,720 --> 00:04:39,060 All right, done deploy. 66 00:04:39,920 --> 00:04:42,290 And now I've got the checkboxes. 67 00:04:42,320 --> 00:04:46,040 So let's say my favorite colors are blue and red. 68 00:04:46,490 --> 00:04:52,010 And then for the date, this should actually be a widget. 69 00:04:53,530 --> 00:04:56,200 Yeah, uh, a date. 70 00:04:59,240 --> 00:05:09,740 OK, continue from here and let's put in the date 2020, let's say there are six 14 and submit. 71 00:05:14,100 --> 00:05:21,030 And submit, so here's the output, he's simply a chastened document which contains the names of the 72 00:05:21,030 --> 00:05:23,970 elements with the values against each name.