017 Layout Setup

Ok we gonna look at setting up layouts now And we'll setting up layouts you have Some nice ways to reuse code across multiple Surf templates for or site views What are the things that I found is that I would like to know which tablet or Not Not really which tampered rather which side view Is actually calling the layout So that all the bases of that I could use Global settings That are related that specific site View So what I've done is I've just in the dynamic get I've added little string Since it's Dynamic at Target only a specific site View So if I was to open Sermon preacher ID Which is primarily gonna be used in Preacher side view If I look at the custom script You see that I added a view key called preacher And by doing that I know ok since this Dynamic get Is only used in the preacher of you That when the layout is called and I'm in my component I'm only passing The item So not the whole list of items but just one item To the layout That helps me to know ok this this specific item is calling from preacher And I can on that Basis You know do certain implementation To ensure that the layout displays in the way I expected So that's just a little heads up on making your layouts even more Dynamic Then going to the template We will open Your The layout Sorry the template that calls the layout so we wanna see that initial setup I'm one of the templates that really Illustrates this very well Is this sermon list So I'm gonna open 7 list Can someone list you see that I'm looping through the items And then I am I think so Some parameters to the item Object One of them is the Proms the other is there I'm taking the description And making sure that it's you notice Cape and no longer than 19 karat 90 characters And then I'm adding that back to the description with Out And I'm done adding that item To the layout Study class renda Layout help J layout helper Render Website list item As the layout name Sorry sermon List item Ok and that basically is gonna populate The Script window List items That is gonna be placed in an unordered list on the Sermon list page Ok so now let's go look at this specific layout Layout helper Sermon list item So In layouts Look for sermon List item there Rio I didn't summon list item You see that I'm using that Global The item that is being passed is placed inside of displayed data I'm so now display data is basically The item object That's inside price Place the parameters in it so I can use different Get method With the specific Global Field name Who said in the components Global settings And since I'm Targeting a specific layout Sorry View I'm using the Vue key Adding it to the string and shaking what is the value for this specific view in the global of the component And On the basis of this I'm actually able to make this view very dynamic And can use it through multiple layouts Based on that View key Now I know if others want to use the layout in their components extending this one it possibly You might work that well But since we are using it for our own component And really far only implementation I don't think that's too big a deal And At the same Token unable to check Simply what is the view key is it preacher series of category in on a basis of that I asked if Questions that have different in Menlyn implementation of of certain Values like series name preacher name And there is another Convention that I think is very worthwhile mentioning here And that is the convention of actually In the template We go back here And we go to custom scripting There is the S View placeholder Su placeholder Will be replaced With the actual views name Necessary using a template here So you see this is a template But this sermon list That one I'm adding that template To multiple site Muse So I'm not just adding it to one side view I'm adding it to multiple site views But since I want this template again to be Dynamic so wherever I add it I I want it to dynamically Add That side views name here And then is as you can see I'm actually asking The global parameters For that site view sermon list style So That means Is grits gonna add For example preacher there or it's gonna add series there or is gonna add category there it's only the Category sermons the style or it's a and let me show you that in the car So now I have category open I've got preacher open as well as series And you can see That I'm adding sermon grade sermon list sermon table to the mall SIM Android sermon list surman table Simon Britz sermon lemon table But if I was to open Summer list in series You see that that name Strange 2 Series If I was gonna open Sermon list in preacher You see it was changed Preacher If I open it in category You see that it actually added category And that means that our Little Place holder Was dynamically updated by component folder on the build And then It behaves as you expect now That you would know How how is it how where is it getting these values If we If we go to the component in the backend And We open it's config File Double scroll down We get you an area called preacher custom config Which is again this is a tub And taps name is preacher I need a time We have these value preacher display Witcher Box can't raise Peter list style And we scroll down we see pictures sermon count Peter email Peter website Temperature sermon display And preach a sermon list display No I would take that sermon Lister spray And then search for it Frosty The file save make it Cap sensitive Reseda that has 6 matches So that means there is 6 places Actually 3 Because one of Each other 6 are in the comments What is category What is series And one is Preacher So those are the different the three different views Let make use of that Siri list style Now the Siri list style Is there an being implemented On the basis of That Dynamic updating of the string here And so it's simply getting the style Then doing a switch statement and setting it accordingly And that is Another nice To have tool To again make a template More Dynamic so you can build a time flirt And you can reuse it in multiple side views Simply with this place holders Which is called site you should have mentioned that hinder templates Explanation But since we only came across it now I mentioning it here Going back to the layouts Your layout Concept is more or less the same as tablets It has a layout area and would you put your script and you can see We using that Placing You can see that if you select certain Dynamic gets wee-wee take the Liberty of showing you that we are starting with this play data But this this Snippets hair Might not correspond what you're doing because you can really pass anything to a layout And we are just assuming that if you are using that then Ima get you possibly passing it in this This way that way So you can't just copy paste this necessarily But at least you can know when you look at a specific Dynamic get here What are the values in it And you know how you can sort of try figure out Which wants to use you This again will be only really Something you need to use If or can use if you are actually aware of our PHP and Everything will Do the implementations here And if you do not if you're not that familiar You don't need loads I mean you can you can build your whole front and writing your side view It might be a long laying free scrap but it still work All the only reason we added layouts and templates is simply for our for Empangeni ANZ And if it's still confusing to you you can even if you skip this whole area For the meantime Beginning layout you have the same concept of adding custom scripting Which will be placed in the head of the file And remember that your Global data store in a data being passed is in Display data And then here again you have your pets HTML area But you can jump into PHP and Check the sum values and then on the basis of that to your certain implementations And That is really setting up a layout Just another note you can actually use a layout in a layout And you can pass it values Has any value you like I realised that this year is maybe not that appropriate So you need to keep a heads up that This doesn't exist on the layout page You need to use the Display data as the global Where's the main Object from which to start your your Your imitation Ok that is layouts thank you for watching