015 Adding Templates and Layouts to a Site View

Hi Now that we've added a dynamic get 2 A side view And we have looked at how to access the data sets Through the Examples snippet We need to understand How layouts and templates Link into site views Is it good to know What is the site doing the code And what is the templates What is the layout In the code itself And how This to mulalo distance Well If we go to our example Phone and Sermon Review te And then View And preacher Template Tmpl You see that there is a Default File Mac PHP And there is a default on the score Retail Box Feature panel Richest Mall the PSP files A list of them Now those are all pamphlets The reason why we call them templates It's because of the method by which they are included into the default File Default file is the main file And That's what we call the site View So everything inside of this file Is actually build In the side view so let's open the site View So all this code here in before View From here to there Is added To that default File So you see it says default View And the way it adds to templates It's with this snippet or that says this load Template Preacher panel And you can get these nuts At the bottom of the Site View So if you were to scroll down You first with see the layout Snippets and then after them that template snippet And scroll down to the one you have Maid Looking at these names And then here Is a Preacher grid List Table Panel box Small So That is the snippet that you will use You might sometimes Change the way Boss please stay in the PHP instead of going out HTML So by the way that is what is happening up here If you look at the code From time to time I go out of the BHP I go into the PSP with that tag And I go out of the PHP with that Then I go in again may go out again And then I stay out that I'm Basically in HTML So here is Your HTML And Then Ok this part here is obviously Uikit Class and the implementation And then I go back into PHP And I go out again and ears HTML again So that is a way that you can work with H2O with PHP Interview I'm sorry forgot look at this in the code And be open that default file I see that exactly what is placed there So basically End with PHP there Then we go into PHP again And here is the same text that we just looked at in that Editor So that takes gets placed here and then it through these Snippets it includes the template so basically I'm using a global setting here And I'm checking now this Global setting is set in the components Global settings And I'm checking what type of this play has been set And then on the basis of that I either show this template That one All but one Template view you have access to the same Global Fields or Class Fields and public class methods As you have in the default View So in the default view we have access to this preacher but the same is true of Pamphlet design templates that I've just opened And you see I'm using the same this params Here This preacher website so I am using the same Global Class Fields values in Zone how you wanna pull it And that that is true of your templates So if we go back to our Interface the way that component bargain knows that it needs to add this template to To this site View Is simply because of this code snippet Cheap places code snippet in there and ill go look in the template List Tampered with this name Enable simply add it To that site View now when I'm in AD I mean Added to this Template with the In the right folder So You can you can by doing that At your Templates to the site View And will look at setting up templates we also look at setting up Layouts layouts work a little different Let me see do I have a layout here in this site View It seems I'm mostly using templates you can use templates and layouts in the site View I have just used Templates mostly it seems And that means that possibly the layouts I've used in the templates View But if I wanted to add a template sorry a layout to this view Without doing it inside a template which doesn't matter it's just a way of bundling yours Scripts in a more concise manner so that he doesn't be overwhelming When you look at the code but that you have it Broken up in pieces The layout structure is mostly used When you are dealing with a part of the display area That is used Cross Other Display areas So if I usually used the layout structure The moment I'm using a piece of code In more than one View Or in more than one template The reality is you could You could use Templates inside of pamphlets You cannot use templates inside of layout But you can use templates in soap Amplats And you can use layouts inside of layouts But you cannot use templates in layouts I know but these are all conventions that are set forth because of the way to Miller implements the structure These are not limitations because of component Builder This is just how to analyse it it will allow you to add pamphlets 2 The default Side view But It will not Allow you to add Cite a templates to a layout if you just scream at you And why Well the biggest The easiest way to put this Templates Have access to the global values All the class values Where is layouts done You need to pass lay out the value that you wanna give it Now that's important Point because if you look at these Snippets You see that we're just passing it this item But you can even pass it just this Or you could pass it A specific value You have your custom classes And you can pass it that specific value From your custom Class It all depends and when you setup the layout You have an area just like this what do you select The The Dynamic get that you were using in the layout Now that is not gonna add that I never get to your side view What is a model It just helps you to see the Snippets And it helps us to set up The snip it for you So if you've selected the wrong Code here In your layout we'll talk about that again when I get to layout It will actually just changed the way it looks here But you can always be override it you can copy this Snip it like that Put it in your code where you wanna use it And then you can just change that Area that Is passing the information to the layout because the layout has As it got access to the to this And so you need to pass it through it The values that you want to use in it It will still look at how how exactly that is done and possibly Spineless again but just script Basically renders a layout And this is also how component builder knows it should add a layout to the component layout folder And Eduze it looks for a layout with that name in your layouts list So you need to have these layouts set up before hand Before you can include them In 2 other Views and Tablets And do note that the layout concept and implementation Together with the template is the same in the custom admin View It works exactly the same And just by adding the snippet to the default View Component Golden Arrows it leads to add that layout to the component and knows at least Add that layer template to that site View Ok so that is adding Site views Sorry templates and layouts to a site View And Looking at the code seeing ok so Component builder builds these site views because We look at the default View They are actually Loaded here you see Creaturebox and there is Beauty box This preacher panel There's a panel There is Brits Mall And there is pretty small and there is Table grid list and there's Table Bread and So that is how you can Add your code into Smaller chunks And next up will look at setting up a template And Making use of this implementation Understanding the difference So That is adding