Hello in this video I will cover more layout components in this building grew tab I need to add more layout components so let's try to make some of them I need to cover as much as I can so I can talk about the panel accordion Bennett grid separator should it here and should it heal header Okay, so let's talk about all this component in this video. First is abandoned accordion so let's here I need to add a Bennett accordion so you can add it a faces panel accordion okay when accordion is something like here like this, I could cancel something like this or when some tap like this, so we need to add mp3 taps So let's add Ben accordion I eat with maybe three just to let you know how it works. So the first one we can see the Billy's part man meant as a form and we okay so we have three men accordion detail.

First one we can add from the data control we can drag and drop department and the video is a must have the T we can devote it to toward using binary splitters we can add here when splitter I think you should know about it. This is will give you ability to split the page into two parts. First part I will add the department okay As a table and second one I will add the employee yet here Okay, maybe I can increase the width was first part we have 400 so this is the first banner accordion the second one we can add at the bottom it as a four can add make it read only form and in blue we as a form can make it read only form and let us run and see how it will work. Okay, as you can see here the tip to Employee Free steps.

The second one is height here, so We have to risk tab like this to see it or I can show you how you can add like scroll. So here you find the department and employees This is a Bennett accordion now you can select the department 14 but Louis so you will find here to Parliament and in buoy so this is a Bennett accordion The first component if you want to add scroll here you can use a Bennett groovy I think I took about button group layout in my previous videos. But was there one more option I want to tell you about it is it be scrolled you can add a scroll here. So if you add this button accordion surround it with Ben in group if you surround this with Ben in group layout and ends at LSU right it scroll means if the content is Highs higher than set with sorry the screen height you should add bs you should play like scroll so let's see how it will work so we surround now Ben accordion with an incredibly oh it's grown.

So if we refresh this page here you will find scroll is appearing here now. Okay so this is a banner accordion this now big one more component benefit greatly out so let's add one more benefit accordion detail. So here if you want to add one more detail right click Insert inside show detail item here I can see better Ben great. The out okay. What is Benny Gridley? Oh it is like HTML table which has a column and rows and you can make span between column or row.

So you can all make all these kinds of things in Zeppelin is currently out. So let's see one example. So I will add here. And then Gridley as you can see here, I can say I need maybe four, four column maybe and Okay, tomorrow, I may be marriage this three. Okay, maybe marriage is three. So if you go to spam here, I need to measure it to 2g to 3g to four.

So you can say, I need you to dress shoe to three. Okay? And she 23324 like this okay sorry sheet 2224 like this so here maybe I will add that department ID as a label and the value department name as a label then value here's the employee name here I will add first name and last name something like this you can decide the layout of HTML sorry zuri I was a beach which add ADF component site it so you will find here is a first row has four places to Add Component and second row has only to the first one I just need to add our tickets. As a label, I see this is the ID Okay, on if you want to make some money Change of this label like the coloring bolt in style you will find here is the style you can change anything you want like I will need okay like this maybe which will it is it wait we can make it work okay.

You hope to see the screen to the to know it is takes effect okay so this is what I mean as I said before if you want to copy this you just miss CTRL and drag it here and I will drag it here as well. So here, I will write the bottom into it ID here. It will be name here in between him Okay, so here's the department ID I will drag department ID as text here should be department name so I will drag the birth name here has thickest. Here's the in between name in between names should be first name and last name I need to put this beside each other. So I said to add any to add a component horizontally beside each other you should use then when guru plea out okay, as the hour should be horizontal. Okay, so I will add first name in the building yeah with as an output tickets And last name as it oh tickets as I as I said, he should add like a spacer like this.

If you have more lot of ADF component and you need to add spacer between all of them, you just can add this as base or in the face it separator and as a spacer here in the faces separator it means this spacer will apply between all ADF components inside but it will be out so if the group has 10 component, no need to repeat this as base or between each of this team component you can just insert faces separate or you add some space or in this subnet. To get this just in the event globally our threat click face it and select the separator this will appear just add space are here. So let us now run and see how this would work. is a better group do it? Better? Great.

Okay, so let's begin a department or department. Okay, so let's see how it works. So you find department ID towards maintenance name and Billy name. So, this is as we discussed, we is a vinyl grid, we said we need to have 1234 column here and the second row only to column one here and spam all the other three columns like this. So now this is an accordion and this has been in grid let's move to the nother one is a spacer how to add a spacer sorry separator between components. So you just hear for example, if I need after this panel Gridley, I need to add a table here but I need as a separator between both of them.

So, to surround this was burning groupie out and we need to make it scroll because if the components is more higher than the page height it should play a scroll okay after that I will add a separator and maybe you can add the department table after this separator okay we can we need the separator between the table and we just drag it like this. So we need we have a bender grid separator table you can add some special sources that you will be able to see the separator okay so let's run and see how it looks like oh if you go to bender group do it for you when when a grid layout here, you will find here, another separator here as you can see it sort of scroll here. So you'll find the banner grid, then separator then the table so this is our separator.

So this is now separator, Ben and grid. Bennett accordion we can talk about should it here header and shoe detail. So let's see here should detail header and shoe detail. I will show it to you how it looks like so that you will mention what it is. So if I click on shoe detail and I add This insight should it here should it is will be like a collapsible section. So if you can see one when the ticket is disclosed, what does it need to appear and undisclosed so we can see schools on this list okay?

This see how it looks like this you will have an idea about what is the shoe detail. This part here, as you can see this collapsible area, if you aren't, disclose this you will find here the ticker is changed we undisclosed if you open it, it will be scroll. So this is like a collapsible section if you want to with specific tickets, if it is disclosed or undisclosed, this is a cool component you can use it to collapsible some part same I will add it in the table, but instead of using a shoe detail I will use shoe detail header. So, here I will see shoe detail header. This is same like I showed it it was a collapsible section, but it will give you other more faces you can add more component and you have Heather see what myths okay? So if you've fresh this here we come collapse or as we like Is with a text department but it will give you more options.

Like you can add more. if you for example in the toolbar if you add a button here okay. It will appear it will appear a button here. If you want to add more button or more information, I will take this you have some face it you can add more information if you were to add a menu so it gives just a more option but it has a fix it tickets but should it still has. You can change the tickets if it's collapsible or not. So in this video I will summarize what is a component I give it to you so I give you been an accordion grid should detail should it will hitter and give separator so now I cover most of the layout components which you will can use to design your page.

Next video I can move to any other competitive component. So see you next video