Hello, in this video, I will talk about the page template, how you can create one page template in your application ADF application and also use if page will use this template. What is this page template it will give you an example. For example, if you would have four working website for example, you will find here this bar called account menu, okay. So for example, if I need to go for another page, I will find the same bar is still exist, and only the content is changed. As you can see any other page the wall is exist as the content is changed. So this is called a template.

You have a template with a logo, one logo, one menu, some search some account user and you need the page itself, content will change. So this is called template So let's create one template for our application after that, we will create page use this template. This is first, clean up all of this. So this is remove it as refactor it and move this file to another package. We can can say all pages. Okay, so that's okay, so I just move all the pages to the old vicious folder.

So we just we need to work with a clean with content. So now I need to create a beach template. This page template should have one logo, like is a login username and system menu. Okay, so let's now create a new it fpH template. In your ADF application, you should have one hmm So, this is the first actual step you should create once you create your ADF application. So I will call my B GS template, okay, if it is a GS f template it means all pitches should be just if, if it is a G Suite x SOS all pages should be GSB x.

So now, I want to create my page template as a GCF. Notice here if you want to create a blank template or existing one or a quick start, let us know the site what is the layout or the template, I can see, we can create something like this, the top bar will be collapsible, this will just to box should have maybe the logo here, and maybe the system name and the login user And there are a menu system menu here and the user can collapse it and sports will be threshold, I think this is a good layout for it. So, I can see apply color scheme and select this a quick next which template has two things you should define subsequent face it on subsequent attributes face it is the place which you give it to the Bages which will use this template to both some other component attribute is like the value which you want to sit in the big reveal itself.

I will talk about it and you will see it so at least you should have one face it cool body or the main face it this is the face at which the individual should add the content Okay, next and fish so now I can eat my bitch template. If the designer will take time you can select here's a source source will open the source instead of displaying the designer. But this is let us see the designer to see that layout you will find zero here top and this is collapsible as you can see the collapsible and this is a body threshold. So, here this component which will divide the beach up and down is a call bending splitter. So the bin splitter will have to face it visit it means place which you should put a component inside it. So, I have two places.

The first one is the top one and the second one One here and second one is some other component here you can sit the content of the body. Now, let us talk about the first part, which is the top one, this is a beach template and I sit in this top one I need to add the visa logo here. Take us to four tickets right here or as the login user should display here and maybe under it It should display a menu while I am creating a template, I will talk about if component. So, just be careful with me when I talk about the component, so that you will know I will have aware about it. So at least you know now, first component is a binary splitter. splitter is a component which will split the page into part one first and one the second and you undefined if it is a split is a page as a vertical way or as a horizontal way from here is a common you can say if it is vertical or horizontal.

So now we need to splay is a bitch up and down. So it would be vertical displays up and down it will define the here. So this is a 50 we can increase it for example to 100 so the top become more 100 so here this is a bundle splitter, which you can use to split the page in the first part we need to add as I sit here some information for the template. So let's first add some certain sizes face it at faces. I will add here. Bennett Gridley I would benefit greatly out is like HTML table which you find some column and row So, from the for who this part, I need 123 is the first row three column and the second one will only one one row for the menu.

So, if we select here I need to row and I need three columns okay. So, here I will add the logo here I will add the system name here I will add the logon user as a second here I will need to add the menu so I need to merge all of this okay. So, next here the column 130 3030 Okay. Here I need to say for gc 212 gc to see it will be merged laces. So this is what I need to both It is the first one in three places the top and the one in the bottom, this is known as the logo, system name, logon user and the system in. Okay, and finish.

So you will find here, this is when it's great, there are 3123. And here for the first one, I said I need a logo. So you can add here component if component code image, okay, from the image you'll find the source so let us select one of the image I just pick a random one. Okay, so we can see here and see, you can maybe users name and insert here pictures Okay, zombie dummy Luca is just don't lose it from from the Google any logo, okay? It replaces the directory Yes, please. And you can select it here as and here's the it will be in the resources images so that's fine.

Save. Okay. So the first one here I add the second one here, I just need a ticket. So I will say our tickets is just a component that you can just display and our tickets. For example, this is my system name. You can just carry create my system name if you want to add some effect and some stone you Go to the style tab for this output thickest and I see is a color maybe this color you can see for example, the size you need be large size what is the color selector Lexis blocks is not working so this is equal to here on the right sorry.

Wrong okay. Just if you want to add a way to example to be bold Okay, so for example, and here I need just display like maybe We can say the word this No, okay we can this be a link yes this is a link we can say here. Look out, okay. And if you surround this was a pennant bait, pennant group. This is just to make a group and here are our tickets to call my name okay to display like this, if you want some space between them you can add a spacer component if a specific component to give space between the components. So now in this business template we know the binary splitter which will split we know the benefit greatly out which create like HTML tables row and column.

We know if images display an image. If we take this we just display open tickets and space or to give a space and this is a link to call it out. This is the first stroke for the second row I just need to display my menu so you draw a menu. Here if you go okay. We can go here, we can select a menu comes just m can select menu bar, and inside menu bar, I need to add menu and inside the menu, you can add menu item. So the menu bar has multiple menu okay.

Like this And each menu has some menu item menu item menu item or the menu bar itself can have only one menu item without the menu bar okay. So you will draw the system menu here Okay. So now in the widget template, the first board I play some logo, name and my login name and look out you can form forms a variety of this you can see it selects the height you can see the style, some other property for each component you when you selected any component you will find some variety for it. So now we implemented the header part is what should be fixed it for any bid you're in the system. And I said this board I need xzibit just to add the quantity to this part, this is why we add a body we create a physical body so I think we don't need all this we can just remove this.

So the center of this I need to add faces reference and I select the body which I create here visit reference, okay? You will find it is the point here if you don't don't don't know what is the face that you is you create it, you create here face it, cold body. So if I give this template to any page, this top bar automatically will have the logo as a name and the page will be able to add the content inside this faces but here this is a page template niggaz video I will show you how to use this pitch template when you create And you will be rich. So see you next time