Hello. So now we are ready to start developing page pages. So let's start with local pages because all that here in other pages will be dependent on the data and this lookups. So let's now start for developing class Long Beach, I would expect this is we'll have a create and delete, update and save button and this will be a table which user can be able to create a classroom. So let's now go to our classroom pages page. And in the body, we should be able to add here our a development our page.

So I will start adding actually the classroom It is only two to colo If you have a classroom view, we have only grid number and room number that's only so we will just add a table in the middle. We can make it we can make it stretch or but it will not look like good because there's only two columns. So I will carry the table in the middle of the page here. So to do that I will add here a bad group do it to what it is a center when we'll do it okay, can't go to source. Okay, so here's the Bennett probably I would and we can see in the equal center and initial line center to be in the center. We can make it vertical here and it will be in the center.

After that I will add inside this like the just spacer to add space from the top to here to make the table bit down. So maybe height will be 30 offers that I need to add. Bottoms here create delete, in save cancel in the before the table. So we can add when it grew be out again and this time this time the output will be horizontal so that we will add as a bottoms here After that we need to add a table any table you should prefer to add inside a collection. So I will add here a penny collection and I will add a table it has been a collection and we can add a spacer between subtotal and the table but the height should be ski. So let's now drag and drop the classroom here.

This has been a collection as a table we can enable sorting, filtering, it will not be read only we could because we need to insert update and it will be single row so that once you select this row, it will sit side traitor to the current row. Okay, so this only we can run number and create number Yes. Okay, so table is added here. We can insert behavior we can set the auto rule says minus one to give a fixed height. Otherwise the table height will have been the ones number of zeros or zero itself. So we get minus one, we can sit the width was a better collection.

Here you can find yours to be here so yeah, so it would be maybe 500 pixel. It's 500 pixel. Okay. We can add here, the operations which is Creating search to create a new row. We need add a delete. To delete the current row.

We need to add save and cancel. So here we can just change the tickets to be new or add to every once and we can change the gets the next icon add. Delete, okay and you can select to D commit. Okay See it's safe. See, we're back would be cancer and we are back and we can add space or between all this bottom we can add One spacer in the separator panel group layout separator face it if you adjust splitter so the spacer so especially the separator it means it will add the height and width sensor in all between all if component inside suspending probably out okay we can have a look now on this page and see how it looks like okay as you can see here is the table come in the middle here is photons and delete. Here is a table Okay, this is a better collection Okay, zero sum it changed as you can see here the column was was the label is correct because it's the entity object we already set this label so everything will be ready for you.

Okay, so let's now try to increase the table width and make the column to be stretchable to will be in a good shape. So let us take this width here and add it here. Okay, and we can can write a column stretch. Last one, and we can crease the row number. Here to be 200 whistles a columnist, see how it looks like just to finish the rich Okay, it's going to be looks much better now. We can increase a little bit through row number column so we can add here, up 300 or 250.

Okay, so now it looks okay. If you press add here to add a new row, by default grid will be grid one, this is what we sit in the entity object. Okay, so I can say a roll number one. If I didn't enter any room and I tried to save I should give. This is required, because this is our primary key. So I will add rule number one to read number one I will save so we add now one row so we can add another row number two for the same grid.

We can add rule number three for grade two For for grade two can add any number five for grid three vertical axis. So, now we we can create a delete in a row we can save if you make a change for example grid six a and you want to consider it you will find it is disabled so I prefer for save and cancel you will always remove the disabled Bertie here because we need it to be only to be always enabled. So now it is enabled so if you select the grid six and you to cancel if you cancel it will back again if you want to order because as you can see the row number 31245 if you want to make an order by by defaulted comm order by row number so you can do it in the view object level. So if you go to classroom here is a view, self insert query.

You can add here, order by row number here and you can see we need to be a cynic. Okay, now try to run it Do you find this ordered by 12345 it is order to correctly you can search here by for search 44. If you want to add like something It looks good if you want to add a clean bottom for the filter here, you can just add an empty column as a first column and in the purines mixer which will be 14 and row headers through this is we'll add like a clear icons over the first column to clear the filter. You can make this like a standard for any table use something like this. So if you still search by five, two comparisons it to clean the filter and execute the query again. If you want to Why grade three you will get grades three and so on.

Here it is view if you want to hide some columns This is by default coming with better collection because you had the banner collection you have here to detach to make it like a full screen or you can remove the filters or as the filters, dislike and predefined features once you add a table inside a collection component, so I can see now this is simple screen. And this is now okay and finished. So let's go for the next screen. So see you next video.