From 7dfb472ad993592641013bf815bc4a0604229949 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Wed, 5 Jun 2019 16:54:21 +0200 Subject: [PATCH] Updated 017 Layout Setup (markdown) --- 017-Layout-Setup.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/017-Layout-Setup.md b/017-Layout-Setup.md index ed40cba..3e429e1 100644 --- a/017-Layout-Setup.md +++ b/017-Layout-Setup.md @@ -10,7 +10,8 @@ What I've done, in the dynamic get I've added a little string. Since each dynami **How Tempaltes Call Layouts** -We will open your template that calls the layout. We want to see that initial setup and one of the templates that really illustrates this very well [00:01:54](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) is this sermon list. So I'm going to open sermon list. In sermon list you see that I'm looping through the items. Then I am adding some parameters to the item object. +We will open your template that calls the layout. We want to see that initial setup and one of the templates that really illustrates this very well [00:01:54](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) is this sermon list. So I'm going to open sermon list. In sermon list you see that I'm looping through the items. Then I am adding some parameters to the item object. One of them is the params, the other is I'm taking the description and making sure that it's escaped, and it is no longer than 90 characters. [00:02:26](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m26s) Then I'm adding that back to the description without the full name, and then adding that item to the 'JlayoutHelper::render(study class render)(sermonlist item)' [00:02:46](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) as the layout name, and that basically is going to populate the script between the list items that is going to be placed in an unordered list on the sermon list page. Now let's go look at this specific layout 'JlayoutHelper::render(study class render)(sermonlist item)'. [00:03:15](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) -??? -One of them is the params the other is I'm taking the description and making sure that it's escaped and no longer than 19 characters [00:02:26](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m26s) And then I'm adding that back to the description without the full name And then adding that item To the layout Study class render Layout help J layout helper study class Render [00:02:46](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) sermon List item as the layout name Ok and that basically is gonna populate The Script between 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 [00:03:15](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) So In layouts Look for sermon List item there we go and in sermon 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 [00:03:43](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m43s) And since I Placed the parameters in it so I can use different Get method With the specific Global Field name Which is set in the components Global settings And since I'm Targeting a specific layout Sorry View [00:04:02](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) I'm using the view key Adding it to the string and checking what is the value for this specific view in the globals 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 will not work that well [00:04:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) But since we are using it for our own component And really for only implementation I don't think that's too big a deal And At the same Token I am able to check Simply what is the view key is it preacher series or category and on a basis of that I ask different Questions that have different implementation of certain Values like series name preacher name and category And there is another Convention that I think is very worthwhile mentioning here And that is the convention of actually [00:05:11](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) In the template We go back here And we go to custom scripting There is the S View placeholder S view placeholder Will be replaced With the actual views name Now since we using a template here So you see this is a template [00:05:32](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m32s) But this sermon list That one I'm adding that template To multiple site views So I'm not just adding it to one site 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 site views name here [00:05:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) 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 is going to add For example preacher there or it's gonna add series there or is gonna add category there so it will say category sermons list style let me show you that in the code So now I have category open I've got preacher open as well as series [00:06:30](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m30s) And you can see That I'm adding sermon grit sermon list sermon table to them all sermon grid sermon list sermon table Sermon grit sermon list sermon table But if I was to open Sermon list in series You see that that name was changed to Series If I was gonna open Sermon list in preacher [00:06:53](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) 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 Builder on the build And then It behaves as you expect now That you would know where is it getting these values [00:07:20](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m20s) If we If we go to the component in the backend And We open it's config File Scroll down We get you an area called preacher custom config Which is again this is a tab And tab's name is preacher and in this tab We have these value preacher display [00:07:48](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m48s) preacherbox contrast preacher list style And we scroll down we see preachers sermon count preacher email Preacher website and then preacher sermon display And preacher a sermon list display Now if we take that sermon List display And then search for it across The file say make it [00:08:13](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m13s) Cap sensitive we see that it has 6 matches So that means there is 6 places Actually 3 Because one of Each other 6 are in the comments one is category one is series And one is Preacher [00:08:33](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m33s) So those are the different the three different views Let make use of that series list style Now the Series list style Is then 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 that when setting it accordingly And that is Another nice [00:08:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) To have tool To again make a template More Dynamic so you can build a template And you can reuse it in multiple site views Simply with this place holders Which is called site view ,I should have mentioned that in the templates Explanation But since we only came across it now I mentioning it here Going back to the layouts Your layout [00:09:27](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) Concept is more or less the same as templates It has a layout area in which you put your script and here you can see We are using that key replacing You can see that if you select certain Dynamic gets we are taking Liberty of showing you that we are starting with display data But this this Snippets here Might not correspond what you're doing because you can really pass anything to a layout And we are just assuming that if you're using that dynamic get you possibly passing it in this [00:10:06](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m06s) This way or 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 ones to use here 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 [00:10:34](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m34s) Do the implementations here And if you do not if you're not that familiar You don't need layouts I mean you can you can build your whole front-end right in your site view It might be a long lengthy script but it still work All the only reason we added layouts and templates is simply for our own convenience And if it's little confusing to you can even if you skip this whole area For the meantime Beginning layouts 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 or in the data being passed is in [00:11:14](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m14s) Display data And then here again you have your 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 as any value you like [00:11:42](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m42s) I realized that this here 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 or as the main Object from which to start Your implementation OK that is layouts thank you for watching + +???? +In layouts look for sermon list item. In sermon list item you will 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 [00:03:43](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m43s) And since I Placed the parameters in it so I can use different Get method With the specific Global Field name Which is set in the components Global settings And since I'm Targeting a specific layout Sorry View [00:04:02](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) I'm using the view key Adding it to the string and checking what is the value for this specific view in the globals 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 will not work that well [00:04:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) But since we are using it for our own component And really for only implementation I don't think that's too big a deal And At the same Token I am able to check Simply what is the view key is it preacher series or category and on a basis of that I ask different Questions that have different implementation of certain Values like series name preacher name and category And there is another Convention that I think is very worthwhile mentioning here And that is the convention of actually [00:05:11](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) In the template We go back here And we go to custom scripting There is the S View placeholder S view placeholder Will be replaced With the actual views name Now since we using a template here So you see this is a template [00:05:32](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m32s) But this sermon list That one I'm adding that template To multiple site views So I'm not just adding it to one site 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 site views name here [00:05:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) 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 is going to add For example preacher there or it's gonna add series there or is gonna add category there so it will say category sermons list style let me show you that in the code So now I have category open I've got preacher open as well as series [00:06:30](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m30s) And you can see That I'm adding sermon grit sermon list sermon table to them all sermon grid sermon list sermon table Sermon grit sermon list sermon table But if I was to open Sermon list in series You see that that name was changed to Series If I was gonna open Sermon list in preacher [00:06:53](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) 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 Builder on the build And then It behaves as you expect now That you would know where is it getting these values [00:07:20](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m20s) If we If we go to the component in the backend And We open it's config File Scroll down We get you an area called preacher custom config Which is again this is a tab And tab's name is preacher and in this tab We have these value preacher display [00:07:48](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m48s) preacherbox contrast preacher list style And we scroll down we see preachers sermon count preacher email Preacher website and then preacher sermon display And preacher a sermon list display Now if we take that sermon List display And then search for it across The file say make it [00:08:13](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m13s) Cap sensitive we see that it has 6 matches So that means there is 6 places Actually 3 Because one of Each other 6 are in the comments one is category one is series And one is Preacher [00:08:33](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m33s) So those are the different the three different views Let make use of that series list style Now the Series list style Is then 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 that when setting it accordingly And that is Another nice [00:08:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) To have tool To again make a template More Dynamic so you can build a template And you can reuse it in multiple site views Simply with this place holders Which is called site view ,I should have mentioned that in the templates Explanation But since we only came across it now I mentioning it here Going back to the layouts Your layout [00:09:27](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) Concept is more or less the same as templates It has a layout area in which you put your script and here you can see We are using that key replacing You can see that if you select certain Dynamic gets we are taking Liberty of showing you that we are starting with display data But this this Snippets here Might not correspond what you're doing because you can really pass anything to a layout And we are just assuming that if you're using that dynamic get you possibly passing it in this [00:10:06](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m06s) This way or 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 ones to use here 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 [00:10:34](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m34s) Do the implementations here And if you do not if you're not that familiar You don't need layouts I mean you can you can build your whole front-end right in your site view It might be a long lengthy script but it still work All the only reason we added layouts and templates is simply for our own convenience And if it's little confusing to you can even if you skip this whole area For the meantime Beginning layouts 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 or in the data being passed is in [00:11:14](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m14s) Display data And then here again you have your 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 as any value you like [00:11:42](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m42s) I realized that this here 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 or as the main Object from which to start Your implementation OK that is layouts thank you for watching