diff --git a/074-How-to-add-Joomla-Custom-Fields.md b/074-How-to-add-Joomla-Custom-Fields.md index 5608fd8..88397b4 100644 --- a/074-How-to-add-Joomla-Custom-Fields.md +++ b/074-How-to-add-Joomla-Custom-Fields.md @@ -23,8 +23,18 @@ We are going to close out of this and before making any changes to the front-end [00:04:42](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) -We at JCB have also added the option to add these events to your Site Views. It's a little bit hidden and purposefully that way because we added it to the Dynamic Get area and not in the Site View area. It is because the Dynamic Get is targeting either multiple items or single items. The events are really for single items. It seemed right that we add it there to easily validate and so forth. If we go to Joomla Component [00:05:21](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&index=75&t=0s&t=00h05m21s) Builder, and go to your Custom or your Dynamic Gets. We want to add it to the Looking because it's a getitem. We will open Looking and you will see that there is this new Content Plugin Events, which you can select. +We at JCB have also added the option to add these events to your Site Views. It's a little bit hidden and purposefully that way because we added it to the Dynamic Get area and not in the Site View area. It is because the Dynamic Get is targeting either multiple items or single items. The events are really for single items. It seemed right that we add it there to easily validate and so forth. If we go to Joomla Component [00:05:21](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&index=75&t=0s&t=00h05m21s) Builder, and go to your Custom or your Dynamic Gets. We want to add it to the Looking because it's a getitem. We will open Looking and you will see that there is this new Content Plugin Events, which you can select. If we go back to the fields area and you open the fields, [00:05:54](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m54s) you will see that it has Options. It have Automatic Display options: Before Display, After Display, After Title, and Do not automatically display. These options is what is used to display the values that is submitted to the field on the front-end of the site. By default [00:06:25](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m25s) it is Before Display but you can change that. In your component you will need to target these four events for the user to make use of these fields. They might decide they want to use the fields in a back-end. [00:06:46](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m46s) It will be related on to this show on. If you do that it will not even show on the back. This is integrative switches. + +### Need To Target The Switches In Your Custom Code On The Front + +[00:07:00](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m00s) + +You will need to target these switches only in your custom code on the front at this point. It's not really that hard to do that. I'll show you why. Back into the Dynamic Get, I'm going to add title, add before display, and add after display, as events. Save and close. That will practically put the code into your component. + +### Showing The Code + +[00:07:30](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m30s) ???? -If we go back to the fields area And you open the fields [00:05:54](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m54s) You see that it has options And it here got automatic display option So before display after display after title And do not automatically display These options Is what is used To Actually display the values that's submitted it to his field On the front end of the site So basically you've got before display after display and do not automatic display And even after title [00:06:25](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m25s) Now By Default it is before display but you can obviously change that In the So you need in your component To Target These Four events For the user to make use of these fields they might decide now they want to Just use the fields in a back end [00:06:46](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m46s) And it will basically be related on to this show on If you do that it will not even show on the back So Yeah this is This is sort of it's Integrative Switches But You need to Target these switches Only in Your custom code on the front [00:07:07](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m07s) At this point And it's not really that hard to do that I'll show you why So back into the dynamic Get I'm gonna basically add title add before display and add after display as events And save and close Now that will just Practically put the code Into your component So let me first show you the code how it looks now [00:07:35](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m35s) So the component folder root folder I'm going to components and then I'm gonna go to demo And basically go to views And then open looking And then this view HTML.PHP file Now the events Are going to be added To the display function So currently as you can see There's nothing here [00:08:02](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s) So we gonna compile the component and see what changes So just recap I've just added the events to the dynamic get I'm going to the compiler And I'm gonna recompile the Component and install it To see What those events, you know the changes , how they will change the code So it's OK we'll Go here [00:08:27](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m27s) If we scroll down now Will see that it added the dispatcher to the display And Down here It imports the Content plugin now it creates in the item Object it creates a new Object called event And then [00:08:49](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) Basically it checks whether your item has parameters So it checks is there any parameters Been passed That is in your Dynamic get you could grab the params column From your Items And it's basically checking is it there If it's not there it going to fall back [00:09:11](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m11s) Onto the Globals So if it's there And if it's a Json it will Basically convert it to an array And had it there or it will fall back to the global params And then It is going to trigger The on after title and On content before display [00:09:32](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m32s) And on content after display And It's gonna pass the components Name And the actual View Value here But now We know That This is basically setting the context [00:09:50](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&index=75&t=0s&t=00h09m50s) Of this Event Now you could be building a plug in That is actually targeting look And not looking And you want To change the context of this specific Event that Has been passed over here And to do that we've also added a context [00:10:12](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m12s) Field in the site view So your site view can Change its context So let me show you So we'll just open the site views And in the site views we have that view called looking we can open that And here we now have a new Field called context So we have looking selected here as our dynamic get And here we can set the contacts [00:10:38](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m38s) To suit The Dynamic get And not fall back to the main code If you don't add this context it will fall back to this code Name But you could say I want the context to be look And not looking And then save and close and if we compile this again It will actually update the contexts Of that specific event And any other event related to that [00:11:06](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) Will do that get And which is really what you want so now you'll see it's changed it to look So it's still past the component's name but the correct context In relation to your event And now what's gonna happen Why we want this to be look It's because .... .... The fields are linked to the look [00:11:36](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) View the look admin view And So it is stored in the database under this context and not under the context of looking But you are basically having both here on the front So you couldn't use the name and look again you had to use another name And so the way too then Actually get that same context called on your title and is to actually change it like I've just done I know that's a lot of Explanation Maybe some of you don't even understand [00:12:10](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m10s) What I've just said but Those who do will know I'll get this is nice you can Change the context Through the site view So that you could have the same context be triggered Multiple times As you would have it It's a little bit of a Tweak at the moment we might bring more Automation in But I know it is actually a little liberating so you could [00:12:34](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m34s) Really be free and how you want to do this But what now is going to happen Is these events are being triggered and the values are being stored Here So whatever gets thrown back from the plugins Gets placed into this value here I'm so the only custom code that you now Actually need to do After Fixing up the events being added to the dynamic get and then updating the context to Target the corrected [00:13:04](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m04s) View , now just again I'll show you just once again Why Do I want this to be look If we go to our admin View We'll see we'll see That If you open looks And then click here You see hear the top [00:13:24](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m24s) It says demo and the view Is look And so The context of these fields Are linked to that value And that value So this one is always gonna be correct But this one could be different And so you need to in your site view make sure that your targeting The correct [00:13:47](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) Context of where these fields are So you be passing basically the ID And this context and Joomla will automatically retrieve the values of this fields And place those values For you Inside of this Object here or actually It will create a string as you see you here it implodes the array Into string And places it in here [00:14:13](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m13s) So all you now would need to do Is basically echo out Those values in any way you want them to look So you could Yeah you could add it in some diff tags And I'll show you that in a moment So for now All I wanted to explain is how these events Actually get the Field values on the page [00:14:37](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m37s) So those field values are Loaded into these values respectively of its switches Which I showed you earlier in setting up the field Now the Joomla web site currently is not set up to show the looks So we gonna go to the menu And change that Going to main menu And I'm going to click here on home And I'm gonna select Let's see where is a demo [00:15:09](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m09s) Looks And Yeah that's basically it And gonna save and close out of that So now we have looks On the The page The default page of the website If we click here it should load And there it is the name [00:15:29](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m29s) To see a list of looks and here's the name if you click on that It shows us the name And it shows as there's been one head and if we refresh that it shows two heads So That all works well But our custom values which we have submitted Is not showing up So This value is showing up and even we could add some [00:15:55](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m55s) Description And This is Also going to show up if we refresh the page here there's the description and we click here there is the description So all that is showing up but the real easy values are not showing up And we want them to also be showing up on the page And That's what we are going to do For them By Simply using those [00:16:28](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m28s) Event Objects So over here we have The Content after display content before display and content after title Now If you forget How to use this or how to place this The component that you can go to his this content [00:16:51](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m51s) Component And you can also open it's Article View And you would see something very similar scroll down down down here You see something well unless they've changed it by the time But at this time The default of Joomla's implementation is very much the same So it's also triggering the content and it's also placing it into these values which means that That if you go to it's template [00:17:19](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m19s) Default PHP You will see Places basically you could search for it so you could take this After title Copy that Come over here And place it in there and here you see Basically The content is generated by the content plugin event on And it basically just Echoes it out [00:17:44](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m44s) So you could use this code just like that copy paste it into your component After the title And the same goes with the other events So with the before display and after display So let me do that quickly I'm gonna just grab these and place them into our component So I've just copied them to a notepad like that I'm gonna move them to my other screen And then I'm gonna go back to to JCB And Go to my component The site view of a component [00:18:23](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) And I'm going to open looking And in the component We have a whole lot of things happening here Basically we have a article Comment here And over here is the title So we want We want that Value [00:18:47](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m47s) To actually echo out After the title So We gonna take That first one Which is the event after the title I'm gonna place it Between the header and this diff Here So [00:19:05](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m05s) Basically There So that the content is generated by there and it's on content after title so this is the title And then when is gonna show over here Then we have another one on content before display Have the content before display I would like to think it needs to go first before anything So I wanna put that there On before anything displays That's way at the top [00:19:39](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m39s) And with content after display I wanna put that obviously at the very end Below everything So that's quite simple We could do more we could wrap it in a diff we could Do all kinds of styles to it But that's the simplest way and I'm just gonna demonstrate that Save and close here And then basically compile it again Install [00:20:08](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m08s) And now let's go refresh that page Oops I got some errors here I realized I'm using slightly different names then The ones I copied from the content You know the article area Content area let me show you that So They are saying up here in the comment on content before display and here it's before display content [00:20:35](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) it's like a little bit Different So I'm using exactly the same So just Heads Up Use the the same as What is here in a comment And that's little me that always trying to Keep everything the same [00:20:55](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m55s) We save that it should work now So here we go simple Fields input value more fields with more input There are those values displayed on the front So if we go back here We can close this out Go back to the fields and let's say with a more fields You wanna change that to display after the title Save And then go back to the front and refresh this So now the one is up here and the other one is after the title [00:21:28](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m28s) So let's say we want simple field to actually show at the very end of our value go out of more Fields into simple field I will change that to you know After display Save and close So you could move the values Position Simply and everyone will move now you see that simple Field is below everything [00:21:55](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m55s) And if you realise This whole area here is the block So that's how the custom Fields can come to the front you can also say you know I don't want this Area to show up And you can go to To the field simple field And you could say show label hide label And save And now if you refresh it will only give you the value So [00:22:20](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m20s) That's the kind of behavioral integration So that's a quick demonstration Of how to now use Joomla custom fields in your components And how to then Model those values into the front end By Simply making use of the events And Wow have fun I'm sure this will Make things even more interesting Thanks for watching \ No newline at end of file +Let me first show you the code, how it looks. In the component root folder, I'm going to components and then I'm going to go to demo, go to views and open looking, open the view.html.php file. The events are going to be added to the display function. So currently as you can see There's nothing here [00:08:02](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s) So we gonna compile the component and see what changes So just recap I've just added the events to the dynamic get I'm going to the compiler And I'm gonna recompile the Component and install it To see What those events, you know the changes , how they will change the code So it's OK we'll Go here [00:08:27](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m27s) If we scroll down now Will see that it added the dispatcher to the display And Down here It imports the Content plugin now it creates in the item Object it creates a new Object called event And then [00:08:49](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) Basically it checks whether your item has parameters So it checks is there any parameters Been passed That is in your Dynamic get you could grab the params column From your Items And it's basically checking is it there If it's not there it going to fall back [00:09:11](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m11s) Onto the Globals So if it's there And if it's a Json it will Basically convert it to an array And had it there or it will fall back to the global params And then It is going to trigger The on after title and On content before display [00:09:32](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m32s) And on content after display And It's gonna pass the components Name And the actual View Value here But now We know That This is basically setting the context [00:09:50](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&index=75&t=0s&t=00h09m50s) Of this Event Now you could be building a plug in That is actually targeting look And not looking And you want To change the context of this specific Event that Has been passed over here And to do that we've also added a context [00:10:12](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m12s) Field in the site view So your site view can Change its context So let me show you So we'll just open the site views And in the site views we have that view called looking we can open that And here we now have a new Field called context So we have looking selected here as our dynamic get And here we can set the contacts [00:10:38](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m38s) To suit The Dynamic get And not fall back to the main code If you don't add this context it will fall back to this code Name But you could say I want the context to be look And not looking And then save and close and if we compile this again It will actually update the contexts Of that specific event And any other event related to that [00:11:06](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) Will do that get And which is really what you want so now you'll see it's changed it to look So it's still past the component's name but the correct context In relation to your event And now what's gonna happen Why we want this to be look It's because .... .... The fields are linked to the look [00:11:36](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) View the look admin view And So it is stored in the database under this context and not under the context of looking But you are basically having both here on the front So you couldn't use the name and look again you had to use another name And so the way too then Actually get that same context called on your title and is to actually change it like I've just done I know that's a lot of Explanation Maybe some of you don't even understand [00:12:10](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m10s) What I've just said but Those who do will know I'll get this is nice you can Change the context Through the site view So that you could have the same context be triggered Multiple times As you would have it It's a little bit of a Tweak at the moment we might bring more Automation in But I know it is actually a little liberating so you could [00:12:34](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m34s) Really be free and how you want to do this But what now is going to happen Is these events are being triggered and the values are being stored Here So whatever gets thrown back from the plugins Gets placed into this value here I'm so the only custom code that you now Actually need to do After Fixing up the events being added to the dynamic get and then updating the context to Target the corrected [00:13:04](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m04s) View , now just again I'll show you just once again Why Do I want this to be look If we go to our admin View We'll see we'll see That If you open looks And then click here You see hear the top [00:13:24](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m24s) It says demo and the view Is look And so The context of these fields Are linked to that value And that value So this one is always gonna be correct But this one could be different And so you need to in your site view make sure that your targeting The correct [00:13:47](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) Context of where these fields are So you be passing basically the ID And this context and Joomla will automatically retrieve the values of this fields And place those values For you Inside of this Object here or actually It will create a string as you see you here it implodes the array Into string And places it in here [00:14:13](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m13s) So all you now would need to do Is basically echo out Those values in any way you want them to look So you could Yeah you could add it in some diff tags And I'll show you that in a moment So for now All I wanted to explain is how these events Actually get the Field values on the page [00:14:37](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m37s) So those field values are Loaded into these values respectively of its switches Which I showed you earlier in setting up the field Now the Joomla web site currently is not set up to show the looks So we gonna go to the menu And change that Going to main menu And I'm going to click here on home And I'm gonna select Let's see where is a demo [00:15:09](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m09s) Looks And Yeah that's basically it And gonna save and close out of that So now we have looks On the The page The default page of the website If we click here it should load And there it is the name [00:15:29](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m29s) To see a list of looks and here's the name if you click on that It shows us the name And it shows as there's been one head and if we refresh that it shows two heads So That all works well But our custom values which we have submitted Is not showing up So This value is showing up and even we could add some [00:15:55](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m55s) Description And This is Also going to show up if we refresh the page here there's the description and we click here there is the description So all that is showing up but the real easy values are not showing up And we want them to also be showing up on the page And That's what we are going to do For them By Simply using those [00:16:28](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m28s) Event Objects So over here we have The Content after display content before display and content after title Now If you forget How to use this or how to place this The component that you can go to his this content [00:16:51](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m51s) Component And you can also open it's Article View And you would see something very similar scroll down down down here You see something well unless they've changed it by the time But at this time The default of Joomla's implementation is very much the same So it's also triggering the content and it's also placing it into these values which means that That if you go to it's template [00:17:19](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m19s) Default PHP You will see Places basically you could search for it so you could take this After title Copy that Come over here And place it in there and here you see Basically The content is generated by the content plugin event on And it basically just Echoes it out [00:17:44](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m44s) So you could use this code just like that copy paste it into your component After the title And the same goes with the other events So with the before display and after display So let me do that quickly I'm gonna just grab these and place them into our component So I've just copied them to a notepad like that I'm gonna move them to my other screen And then I'm gonna go back to to JCB And Go to my component The site view of a component [00:18:23](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) And I'm going to open looking And in the component We have a whole lot of things happening here Basically we have a article Comment here And over here is the title So we want We want that Value [00:18:47](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m47s) To actually echo out After the title So We gonna take That first one Which is the event after the title I'm gonna place it Between the header and this diff Here So [00:19:05](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m05s) Basically There So that the content is generated by there and it's on content after title so this is the title And then when is gonna show over here Then we have another one on content before display Have the content before display I would like to think it needs to go first before anything So I wanna put that there On before anything displays That's way at the top [00:19:39](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m39s) And with content after display I wanna put that obviously at the very end Below everything So that's quite simple We could do more we could wrap it in a diff we could Do all kinds of styles to it But that's the simplest way and I'm just gonna demonstrate that Save and close here And then basically compile it again Install [00:20:08](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m08s) And now let's go refresh that page Oops I got some errors here I realized I'm using slightly different names then The ones I copied from the content You know the article area Content area let me show you that So They are saying up here in the comment on content before display and here it's before display content [00:20:35](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) it's like a little bit Different So I'm using exactly the same So just Heads Up Use the the same as What is here in a comment And that's little me that always trying to Keep everything the same [00:20:55](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m55s) We save that it should work now So here we go simple Fields input value more fields with more input There are those values displayed on the front So if we go back here We can close this out Go back to the fields and let's say with a more fields You wanna change that to display after the title Save And then go back to the front and refresh this So now the one is up here and the other one is after the title [00:21:28](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m28s) So let's say we want simple field to actually show at the very end of our value go out of more Fields into simple field I will change that to you know After display Save and close So you could move the values Position Simply and everyone will move now you see that simple Field is below everything [00:21:55](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m55s) And if you realise This whole area here is the block So that's how the custom Fields can come to the front you can also say you know I don't want this Area to show up And you can go to To the field simple field And you could say show label hide label And save And now if you refresh it will only give you the value So [00:22:20](https://www.youtube.com/watch?v=n5RBmP0uNCM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m20s) That's the kind of behavioral integration So that's a quick demonstration Of how to now use Joomla custom fields in your components And how to then Model those values into the front end By Simply making use of the events And Wow have fun I'm sure this will Make things even more interesting Thanks for watching \ No newline at end of file