WEBVTT 00:00.020 --> 00:04.730 Okay, now that we've got our reusable text inputs, let's put it to work and we'll head back to our 00:04.730 --> 00:05.750 product form. 00:05.780 --> 00:09.770 And I'll put the mode of untouched back in. 00:10.160 --> 00:14.090 And let's go down and take a look at what we're going to do inside our form. 00:14.720 --> 00:21.650 So the first step is to use the copy paste technique to take our grid with the size of 12 that contains 00:21.650 --> 00:23.480 the app text inputs. 00:23.480 --> 00:27.560 And we're going to paste it several times inside here. 00:27.560 --> 00:28.580 I think that's about right. 00:28.610 --> 00:29.480 We'll soon find out. 00:29.480 --> 00:35.420 But we're just going to update the name and the label and then make adjustments as we go along. 00:35.450 --> 00:43.490 So the next one will have our brand and a type, but I'll drop the grid size down to six for both of 00:43.490 --> 00:44.360 these. 00:44.480 --> 00:48.050 And the name will be the brand. 00:48.050 --> 00:51.380 And then the name of the next one will be the type. 00:51.380 --> 00:57.800 And we'll specify type as the label or not type there. 00:57.800 --> 00:59.750 And that should be brand of course. 00:59.970 --> 01:03.720 And then in the next one down we'll specify type. 01:03.720 --> 01:10.950 And below this we'll have we'll use grid size of six again for this next one as well. 01:10.950 --> 01:14.280 And instead of name this can be for the price. 01:14.280 --> 01:17.580 And we'll specify price as its label. 01:17.760 --> 01:22.410 And the name can be quantity in stock. 01:22.440 --> 01:26.490 And the good thing about the schema here, it does give us help. 01:26.490 --> 01:32.940 I've made a typo and it's not an obvious typo, and it's one that we could easily miss as we're typing 01:32.940 --> 01:33.210 this out. 01:33.210 --> 01:40.230 But if I hover over name, it tells us that quantity in stock is not assignable to type blah blah blah, 01:40.230 --> 01:44.100 and it tells us what types are available and it can even guess. 01:44.100 --> 01:45.480 Did I mean quantity in stock? 01:45.510 --> 01:46.530 Yeah, I did actually. 01:46.530 --> 01:48.810 So we can use that instead. 01:48.810 --> 01:50.820 And the warning goes away. 01:51.210 --> 01:58.290 And then for the label here we can just specify quantity in stock. 01:58.560 --> 02:08.890 And below this one we'll have our description and we'll give the label the description. 02:09.310 --> 02:14.770 And for this one we can specify that this is going to be a multi-line input. 02:16.420 --> 02:20.770 So inside here I'll specify multi-line. 02:20.770 --> 02:23.170 And then we can specify the number of rows. 02:23.170 --> 02:25.630 And I'll specify rows equal to. 02:25.660 --> 02:27.070 Let's just say four. 02:27.940 --> 02:31.900 And we could also do the same for the price and the quantity and stock. 02:31.930 --> 02:33.640 Actually not making a multi-line of course. 02:33.640 --> 02:35.260 But we can give them a type. 02:35.260 --> 02:40.090 And we can specify a type of number for both of these as well. 02:41.590 --> 02:43.840 So type of number. 02:43.870 --> 02:44.560 Okay. 02:44.560 --> 02:48.490 So we should be able to check how we're doing at this point. 02:48.550 --> 02:50.770 I've still got one more input to go actually. 02:50.770 --> 02:54.760 And let's see I've got the product name here. 02:54.760 --> 03:00.550 This needs to be the file which matches the name of our create product DTA. 03:00.670 --> 03:05.200 And for the label here I'm just going to specify image. 03:05.650 --> 03:11.200 And of course this is not going to be a text input, but we don't have the functionality yet to do anything 03:11.200 --> 03:12.130 different with this. 03:12.130 --> 03:15.580 So for the time being it's going to pretend it's a text input. 03:15.580 --> 03:19.090 And let's go and take a look at our form and see how we are doing. 03:19.810 --> 03:25.420 So let's just refresh this page and click on create. 03:25.420 --> 03:31.690 And without too much effort now, thanks to that reusable input, we now have our product form available. 03:31.690 --> 03:38.350 And if we click in and click around, we should have validation on all of these different elements, 03:38.890 --> 03:42.460 including the image as well, because that's empty. 03:42.880 --> 03:47.530 And in fact we even get the input is not an instance of file for this one. 03:47.530 --> 03:53.110 I know we don't have that yet, but we do have our various inputs, and we can see that if I start typing 03:53.110 --> 03:56.950 in the description, then we're going to get the message saying it needs to be at least ten characters 03:56.950 --> 04:00.350 until that goes away, the quantity in stock. 04:00.380 --> 04:01.970 It expects a number. 04:02.000 --> 04:03.320 It received nothing. 04:04.880 --> 04:08.120 So we give that a number and that goes away. 04:08.720 --> 04:15.770 And if I start typing in the price then it needs to be at least 100 for the price. 04:15.770 --> 04:23.930 We'll need to update the label there to give the admin a bit more information that the price is in cents, 04:23.960 --> 04:26.210 not in dollars. 04:26.330 --> 04:28.460 And then we've got our brands and our types. 04:28.460 --> 04:32.630 Now we need to give the admin user a selection to choose from here. 04:32.660 --> 04:34.400 At the moment these are just text inputs. 04:34.400 --> 04:35.690 But then we've got our product name. 04:35.690 --> 04:37.910 And we can't do anything about the image right now either. 04:37.910 --> 04:42.650 But we have our form and we have the content fields inside it. 04:42.650 --> 04:46.190 And what we'll take a look at next is what we're doing for the brands and the types. 04:46.190 --> 04:49.760 We'll give them a dropdown of options to choose from. 04:49.760 --> 04:55.550 And again we'll take a look at making something that is reusable, not just in this form, but in any 04:55.550 --> 04:56.780 other form that we create. 04:56.780 --> 04:58.790 And we'll take a look at that next.