Okay, now that we've got our reusable text inputs, let's put it to work and we'll head back to our
product form.
And I'll put the mode of untouched back in.
And let's go down and take a look at what we're going to do inside our form.
So the first step is to use the copy paste technique to take our grid with the size of 12 that contains
the app text inputs.
And we're going to paste it several times inside here.
I think that's about right.
We'll soon find out.
But we're just going to update the name and the label and then make adjustments as we go along.
So the next one will have our brand and a type, but I'll drop the grid size down to six for both of
these.
And the name will be the brand.
And then the name of the next one will be the type.
And we'll specify type as the label or not type there.
And that should be brand of course.
And then in the next one down we'll specify type.
And below this we'll have we'll use grid size of six again for this next one as well.
And instead of name this can be for the price.
And we'll specify price as its label.
And the name can be quantity in stock.
And the good thing about the schema here, it does give us help.
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
this out.
But if I hover over name, it tells us that quantity in stock is not assignable to type blah blah blah,
and it tells us what types are available and it can even guess.
Did I mean quantity in stock?
Yeah, I did actually.
So we can use that instead.
And the warning goes away.
And then for the label here we can just specify quantity in stock.
And below this one we'll have our description and we'll give the label the description.
And for this one we can specify that this is going to be a multi-line input.
So inside here I'll specify multi-line.
And then we can specify the number of rows.
And I'll specify rows equal to.
Let's just say four.
And we could also do the same for the price and the quantity and stock.
Actually not making a multi-line of course.
But we can give them a type.
And we can specify a type of number for both of these as well.
So type of number.
Okay.
So we should be able to check how we're doing at this point.
I've still got one more input to go actually.
And let's see I've got the product name here.
This needs to be the file which matches the name of our create product DTA.
And for the label here I'm just going to specify image.
And of course this is not going to be a text input, but we don't have the functionality yet to do anything
different with this.
So for the time being it's going to pretend it's a text input.
And let's go and take a look at our form and see how we are doing.
So let's just refresh this page and click on create.
And without too much effort now, thanks to that reusable input, we now have our product form available.
And if we click in and click around, we should have validation on all of these different elements,
including the image as well, because that's empty.
And in fact we even get the input is not an instance of file for this one.
I know we don't have that yet, but we do have our various inputs, and we can see that if I start typing
in the description, then we're going to get the message saying it needs to be at least ten characters
until that goes away, the quantity in stock.
It expects a number.
It received nothing.
So we give that a number and that goes away.
And if I start typing in the price then it needs to be at least 100 for the price.
We'll need to update the label there to give the admin a bit more information that the price is in cents,
not in dollars.
And then we've got our brands and our types.
Now we need to give the admin user a selection to choose from here.
At the moment these are just text inputs.
But then we've got our product name.
And we can't do anything about the image right now either.
But we have our form and we have the content fields inside it.
And what we'll take a look at next is what we're doing for the brands and the types.
We'll give them a dropdown of options to choose from.
And again we'll take a look at making something that is reusable, not just in this form, but in any
other form that we create.
And we'll take a look at that next.