Hello, last video we finished the classroom page so in this video, let's try to develop a teacher page. I felt that last video I explain it a bit quickly. So in this video we'll try to be slow as much as I can. So let's now go to the teachers page. We can have a look at the teacher view it has all this column so we can make the table is reachable all the beach because it has a lot of columns so we can do it like this. No need to put it in the center like we did in the classroom.

So we can make it like street show. So here I will add a straightaway Bennett collection the Hello As I said in my previous videos that if you need to add a table, it's better to add inside bender collection because when the collection will give a built in function like you can hide some column you can make detach the table to be full screen you can have some fields that you can add some bottom inside some face it so it has some some features built in you can wrap the column so it have some face it as you can see. So now we just add suspended collection and to make this pendant collection searchable. So you can add here in style class if it's rich with this is a predefined style class in PDF library. So once you make like this it will stretch the bundle collection so we can track There was a teacher inside the spending collection.

The table sorting filtering, single row, show ID name all looks okay. So, back to the page here. We can as well add this if switch with as well to the table. And we can insert appearance here to make the tables stretch as well to make the last column to be stretched because b b is a Bennett collection will be stretched here, but by default, the column widths will be 100 pixels 100 and this is a default with so you can find your table only stop here. If you want to make it stretchable like this, like here so you can Select the table and you can see I need to stretch a specific column like for example, teacher name or teacher address, I need to be more spiritual, it will fit the old width rabbinic width. So, we can see this is a C for the ID of the address column is c four.

So, if you want to make this column, stretchable, you can select the table and in appearance, column stretching I would select c four Okay, teacher ID as we configured in the entity level it is auto generate. So this is should be as a read only. So in the behavior, I will make it read only be true because the user should be able to update this teacher ID would like a standard for any table you should add a query The beginning here will appear with with his 14 small weights and row hitter make it through this is we'll add a clear filter icon in the beginning as I showed you in the last video. So, this is editable you can do standard and as well in the appearance here or sorry in the behavior auto hide make it minus one otherwise zero it will sit the width depending on the number of the column I can show you this.

So okay it is make it zero and I will show you what is the difference between zero and minus one for auto hydro. This is a table. So let's now working in the operations. So when where we can put the operation we have here, the face it called secondary toolbar. I like to add as a bottoms inside This secondary toolbar so here and standard toolbar, you will insert here a toolbar and inside this toolbar, you will should add all bottoms. So I will add this is be sure this operation taken from the teacher view, yes.

So you take the Create insert here as abort, delete and operation back as we can see here, create a certain key add icons I can add like add delete see cancel, so all this icons actually coming because we have the image icons we added here so we can read it from here straightaway. So this is now the all operation as I said my previous video in the commit and rollback you can remove the disable. We always enable we can add one more thing here how to export this table to excel file. This is a good feature without writing any code you can do it. So in the toolbar here, I will add a button This button will export the data of this table. So how we can do this?

We can add a button. Okay we can right here Excel Okay or export to Excel and I think I have icons here already for this yes this icons. So how now we This button will export the table. So to make a button export any table you can you can add inside this button you can add in a physics component called export collection action this so export collection action listener This is an IF component will be added inside this button here till you ask you to add the ID of the table which you want to be supported. So here I will point to my table in somebody's face it okay T one so it as a T one here you can get it sit away and wrote it here and hear it will be if you want to export as a CSV file or Excel file this simple and easy without writing any code so let's now try to run and see this page how it is hopefully I explained this peach bit slower slower than my previous speech.

So let's now run it and see how it looks like you will expect as all labels over the column will be okay because we already wrote this in the entity objects or lists of value should be already defined. So all the work which we did in the model, it will help us a lot while we are developing the page. Okay, as you can see the table is stretchable and it is stretched out This as you can see to fill the rest of space, because here is the table, we set in the appearance column, which is column C four, and you will find c four is a teacher address. So, we are told the table please export see for so if you want to increase some column here to reduce a little bit of others we can for example, increased name, phone date of birth. So, to increase the width of a specific column you can select a column for example table name by default as it is 100.

We can do it make it 200 we can increase the phone number as well to be 200 and we did have birth to be 150. This is just to make the table looks good now we increase this looks okay. So now we can find here the toolbar and have four columns. Here's the Export to Excel, this is coming from the Bennett collection as I told you you can make the order you can show or hide some column if for example, if you do want to see the teacher ID, you can remove it like this. If you want to add it you can add it like this, he likes to attach it will make the table as fullscreen here to hide and place filters. All this coming with bedding collection, we can add now row you will find here by default.

So teacher ID is getting from the entity. Here you start entering some data let's see what is required you just receive and see is that insolvency require nothing required. So this is wrong. We can mark is a name to be required and maybe address to be required also zip. So, you can in the name here behaviors that are required you can remove this and say here required through and maybes address as well. Moses and you can write here cool because this column should be almost if you try to save now it will ask you to enter the name and address.

So here for example, teacher, one Ireland if you want to select a date of birth For example maybe thing exists and by default it is made because we see it as a default as a main. safe. Okay we can add another teacher okay. Teacher to UK and a female so you can add any church as you can see if you want to export this data to excel you can do this now since it will export the teacher okay well it is not obon as an accent I will tell you why so little speck again Here you will find here it's about collection. If you wrote if you didn't write the file name or file name, it will not download was correct. It's a extension.

So let's now try to see say it will be teachers dot exe, S details teachers. So this is a filename. So it will know this is an Excel file. So let's now try to download it again or support this that again. So we will explore now which is export as Excel you can open straightaway because it knows what is the file name? Yes.

So it will export the data as you can see, you can add some data because we will need it Teachers three in the US anything okay add more you can edit it and receive only one time teacher for me Okay, that's enough so now this page almost finished as you can see as well if you select for example teacher salary and the bridge studied, it will do teacher city but you have to receive otherwise you have if you just cancel it will return back again. Because the video I will show you how once you press Delete, you can ask for a question. information like are you sure to delete or not? If these are see okay, it will delete otherwise it will not so next video I will continue working on this for just showing you how you can add a confirmation confirmation message who wants to use or try to delete a row.

So see you Nick activity