From 049f5ec3dcdcd053f5c565113bb105fc4cd802d1 Mon Sep 17 00:00:00 2001 From: Amigo Date: Wed, 15 May 2019 15:48:06 +0200 Subject: [PATCH] Update Basic Fieldswith time links --- ...sure-that-a-field-is-not-escaped-when-added-to-list-views.md | 2 +- ...to-change-exported-values-and-setup-custom-import-options.md | 2 +- 029-How-to-overwrite-the-custom-fields.md | 2 +- ...lter-a-list-field-based-on-association-with-another-field.md | 2 +- ...Automatic-import-of-custom-code-during-compilation-in-JCB.md | 2 +- 032-JCB-manual-custom-code-implementation.md | 2 +- 033-Export-Import-of-fully-mapped-components.md | 2 +- ...to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md | 2 +- 035-Translation-Mananger-in-JCB-explained.md | 2 +- 036-Setting-Site-View-Permission.md | 2 +- 037-Auto-create-SQL-updates-for-Componets-in-JCB.md | 2 +- 038-Setup-Site-Edit-View-in-JCB.md | 2 +- 039-Automated-backup-system-in-JCB.md | 2 +- 040-Adding-Helper-Structures-to-any-JCB-component.md | 2 +- ...-JCB-v2.5.8-and-using-the-new-Admin-View-and-Admin-Fields.md | 2 +- 042-How-to-setup-taps-after-upgrade-to-v2.5.8-in-JCB.md | 2 +- 043-Major-Release-of-JCB-v2.6.0.md | 2 +- ...-Component-with-Joomla-Component-Builder-Creator-Extended.md | 2 +- 045-Adding-your-own-rule-valadation-to-a-field-in-JCB.md | 2 +- 046-General-overview-of-how-community-snippets-work.md | 2 +- ...ou-can-share-your-snippets-with-the-rest-of-the-Cummunity.md | 2 +- ...aking-a-pull-request-at-Joomla-Component-Builder-Snippets.md | 2 +- 049-The-New-Library-Manager-Area.md | 2 +- 050-Easy-Translation-via-excel.md | 2 +- 051-Dynamic-Router-Implementation-Explained.md | 2 +- ...abase-updates-in-Joomla-during-development-of-a-component.md | 2 +- 053-Quick-Subform-Demonstration.md | 2 +- 054-VDM-Package-Import-Option.md | 2 +- 055-Dynamic-File-and-Folder-Inclusion-concept.md | 2 +- 056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md | 2 +- 057-Drag-and-Drop-Upload-functionality-in-JCB.md | 2 +- 058-The-Quick-Hello-Word-with-JCB.md | 2 +- 059-Adding-none-database-fields-to-an-admin-view.md | 2 +- 060-The-custom-dashboard-option-in-JCB.md | 2 +- 061-Add-or-Remove-Prefix-to-Component-Name-in-Joomla-Menu.md | 2 +- 062-Add-your-own-JCB-packages-to-the-JCB-Communty-Directory.md | 2 +- 064-How-to-install-jcb-packages.md | 2 +- 065-JAB18-Using-Joomla-Component-Builder.md | 2 +- 066-The-new-fields-Area-to-make-things-easier.md | 2 +- ...omponent-and-get-the-Language-Placeholder-for-dynamic-use.md | 2 +- 068-Library-Manager-Anticipated-Functionality.md | 2 +- 069-Join-Fields-in-the-admin-list-view-with-field-relations.md | 2 +- 070-How-to-change-the-License-Template-in-JCB.md | 2 +- 071-Reuse-Custom-Code.md | 2 +- 44 files changed, 44 insertions(+), 44 deletions(-) diff --git a/027-How-to-ensure-that-a-field-is-not-escaped-when-added-to-list-views.md b/027-How-to-ensure-that-a-field-is-not-escaped-when-added-to-list-views.md index 49dbf78..beb9b7f 100644 --- a/027-How-to-ensure-that-a-field-is-not-escaped-when-added-to-list-views.md +++ b/027-How-to-ensure-that-a-field-is-not-escaped-when-added-to-list-views.md @@ -1 +1 @@ -Hi Sometimes one would like to add extra styling like this Or like that To a listview The problem is that by Default All of the fields all of these field values are being escaped And so If you would like to add let's save this this kind of styling 2A Fieldview Let me show you how I did it In the job order at mint View area If you go to PHP There is a method called at PHP get items method before translation fix and So this happens before The translation or The Fixer or the decryption Sorry the translation fix or the Crips of any field This is not the ideal place you usually would add it after that was done but in this case I did it before So basically I am setting up A value That when I wanna use danger when I wanna use warning Simply using The Get date month and modifying it By the danger time and the warning time from the Job tracking Configuration values so this is a configuration feel that I've added to the component and it It's names are warning time and danger time And the default is 3 weeks 1 week And basically this is the day The dates that I would then use I didn't look through the data And when identify Subway data that is actually What are the target I add This Value to it That then in turn turns this red Ok And then the next one Is a check the dates And then depending on its values I again at some HTML value To the the date and I use a custom A method in a helper class call Fancy date Where I convert the Default Sequel date Do better data better looking date 2nd of April or something Ok So The problem is though If you do this And you Compile a component at items go look at it you see that it actually escapes those values and it prints it Out Leica You know like you see it over here It actually prints out That Around The value And that's obviously not what you'd like and the reason why does that Because all values are being escaped Now there is a way to to stop that from being You from happening And that that is really what this tutorial is about To show you how to prevent That is Skyping So the value we have here is to create date As well as the job status So I'm gonna go in I'm still in the The back end of the component Job order And I'm going to go to the fields And then I'm gonna scroll down to that that that you Job status Ok I'm gonna open it Then Having a rope and I can scroll down and even here You see that there It doesn't show up here sorry I should actually had it but the real That is where the bottom you see I added this little line I said escape Equals False So you were simply add this line And then when component Builder compiles It will actually in the body Of the component where that field is loaded It will we will tell the Escape method not to escape it So that it would rain Display the html instead of printing it out So that is really what it's all about maybe it's Got a lot of explanation for such a simple thing But I can tell you what if you can't do that it's quite frustrating because Sometimes you would like to give some indication with some HTML On the value and then this Feature actually allows that like you could see here We were able to add a nice button around these dates And as well as adding some colour to to these words here and yeah So that is a quick demonstration of how to make use of the not escape Method or concept When it comes to list views around the field values Hope that makes sense You have any questions please don't hesitate to let me know And Until next time take care thanks for watching \ No newline at end of file + Hi Sometimes one would like to add extra styling like this [00:00:06](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m06s) Or like that To a listview The problem though is that by Default All of the fields all of these field values are being escaped And so If you would like to add let's say this this kind of styling to a field view Let me show you how I did it In the job order admin View area If you go to PHP [00:00:39](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s) There is a method called add PHP getitems method before translation fix and decryption So this happens before The translation or The Fixer or the decryption Sorry the translation fix or the decryption of any field This is not the ideal place you usually would add it after that was done but in this case I did it before So basically I am setting up A value That when I wanna use danger when I wanna use warning Simply using The [00:01:15](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m15s) The getDate and modifying it By the danger time and the warning time from the Job tracking Configuration values so this is a configuration field that I've added to the component and it It's names are warning time and danger time And the default is 3 weeks 1 week And basically this is the date The dates that I would then use I then look through the data And when I identify [00:01:49](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m49s) data that is actually Part of the target I add This Value to it That then intern turns this red Ok And then the next one Is I check the dates And then depending on its values I again add some HTML value [00:02:19](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) To the the date and I use a custom A method in a helper class call fancyDate Where I convert the Default Sequel date to a better date or a better looking date 2nd of April or something Ok So The problem is though [00:02:39](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m39s) If you do this And you Compile your component add items go look at it you'd see that it actually escapes those values and it prints it Out Like a You know like you see it over here It actually prints out That Around The value [00:02:59](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m59s) And that's obviously not what you'd like and the reason why it does that Because all values are being escaped Now there is a way to to stop that from being from happening And that that is really what this tutorial is about To show you how to prevent That escaping So the value we have here is to create date As well as the job status So I'm gonna go in I'm still in the [00:03:31](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m31s) The back end of the component Job order And I'm going to go to the fields And then I'm gonna scroll down to that that value Let 's see where is it now Job status Ok I'm gonna open it And if I then Having a it open and I can scroll down and even here You see that there It doesn't show up here sorry I should actually had it but the reality is [00:04:09](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m09s) way at the bottom you see I added this little line I set escape Equals False So you would simply add this line And then when component Builder compiles It will actually in the body Of the component where that field is loaded It will tell the Escape method not to escape it [00:04:37](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m37s) So that it would then Display the html instead of printing it out So that is really what it's all about maybe it's Got a lot of explanation for such a simple thing But I can tell you what if you can't do that it's quite frustrating because Sometimes you would like to give some indication with some HTML upon the value and then this Feature actually allows that like you could see here We were able to add a nice button around these dates And as well as adding some colour to to these words here and yeah [00:05:15](https://www.youtube.com/watch?v=bfl0l3AoLKU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m15s) So that is a quick demonstration of how to make use of the not escape Method or concept When it comes to list views around the field values Hope that makes sense You have any questions please don't hesitate to let me know And Until next time take care thanks for watching diff --git a/028-How-to-change-exported-values-and-setup-custom-import-options.md b/028-How-to-change-exported-values-and-setup-custom-import-options.md index b20d134..3211abb 100644 --- a/028-How-to-change-exported-values-and-setup-custom-import-options.md +++ b/028-How-to-change-exported-values-and-setup-custom-import-options.md @@ -1 +1 @@ -I would like to show you How to change the values that are being exported And how to then Have custom import option With an import of the data At the moment Component builder actually allows you To have Import and export by Default in all the list views Of the components to build So that's look at what I mean You're a have a component called IP data Basically used to take care IP address and Translate it to what country it was from and then To update the pricing on your website based on that IP data So Obviously You might want to export or import stuff Into this component So I'm gonna have a look at for example let's say Take the iptables Siri iptables And as you can see We are able to see the The sea ntry value And that place is a country and the The register Who does IP table belongs to And The Range That is being reflected And all this values are here hey if you click export without selecting any Values give you this warning So Obviously you can only export the values that are selected so if you want to export them all you need Change this value to all And then some cases if the table is too big That means you might not be able to export them all at once Any anyway exporting the day that such big quantities is not really ideal I would say anything Beyond 3000 items Rather go to MySQL Get a dump file it's not ideal to use that kind of quantity with Inter Milan away Although we have often seen the listview being used for up to 10000 registered nursery items and quite complex Inheritance in structure I'm talking about the import export now and that's quite the Ok so for our purpose Let's say we wanna exporters but let's say for some reason Instead of us Wanting to see if this zzz or a R Us Value We want to instead see the country name Ok so that would be a simple implementation of what I'm trying to Export now Let's do that And then let's just say this Ok so we've exported it And instead it put the 0s values here And some other values from the database all nicely exported And that's what you would expect But if you wanted this to be a different value when you export it Then you can do the following Component builder works Is it Got this Get export data Method in the model And This Get export data method has this extra value set to True called X Sport underscore Expo A reason why we added this is because it is actually Using the same structure Upgrading the data As you would When Wait let me rephrase this You're able to Target This method with custom scripting But the difficulty is that I see this part that's custom scripting And it's also been added Into the actual Get list query right there you see It's the same custom scripting So basically In Arkham finder we are adding the same custom script into the git list query As we are adding Into the get export data It's the same custom scripting How the way that you would No where is it executing is based on this value This value is not set In the list query of course It is only said In the export data So let's see where this custom scripting is done Sorry if you got your Admin view open you go to PHP and then you scroll down Until you see the method Right Until you see the method it says get list query J model list That's the the The why don't you say yes The the code you put in here Is added both to the Get list query As well Us to the export query so if you want to change the van Who's that are being exported But not the values that's being shown in your component you be doing it in the same area So going back here you'd see that it's that's the same code every here that is Also add it over here see that's the same code Save you were for example In here you wanted to change some value you could do that I simply Adding another lookup or something and you add this X What is true How to see where all this export = true is appearing You go to Any Model which is obviously a list model And we would search and see there it is And there it is again So where are we now we are now in the git export data And we are in the area where it's looking member we showed you in the previous tutorial how How to add some customisation Do your values in the listview Some HTML well here we are asking is the export set or is it true Then Don't do this Yo Don't don't have to speak to you So we are avoiding out in this Customisation on calorie because we don't wanted to run when we are exporting exporting we only wanted The Valleys so then again you can see where using the export values And Get there So those are there The places where the export Function is coming in To play and how we can By using this Underscore export We are able to identify whether it's an export or not if it is we can make the changes to the values Ok Then going back to our back end Just to show you This is the place where we did the query And this is the place Before the translation fix the scripture again We are checking whether we are doing an export And so you could literally take that And say Instead of the exclamation that if it's export is set Come on and exporters And export is true Then Do you think in that area there so that is if you want to change the values For translation or before decryption or if you want to you can do it after After that So after all was done You wanna change the values On export Then you can add it there And that is really as simple as it is Adding Change to your exported values Now If you want to then Have a different import Type as usual Usually to import values you just Update these right and if you leave the ID in at updates if you take the ID out It creates So without an ID it will create With an ID it will update Now let's say you say we you know what I actually don't wanna use the ID is I wanna use these values instead And then you need to create a custom import concept now we have tried to make that Easy as possible and yet I'm sorry to say that it's still quite complex So You basically go to custom import And then obviously there is a little warning here Because it is quite daunting You that there yes And it will load Into these areas The actual script That are used by Default In these various concepts Now if you do not understand what you seeing here Then I suppose you should rather not be trying to do this Or you shoot Then 6 mm Classes maybe from lynda.com or elsewhere I think you do me it's also a good place Sorrow sharpen up some of your PHP skills And Then you could make changes to this for example maybe just take out that junk And Then Do a search You know so put something in you can find like Your name or whatever And then save this and compile it And then go and search where does this come up Where does this come out what what is happening And then Obviously You'd realise that We don't completely remove the default Import method When you do this kind of Changes There is a way that you could make these changes And have to import methods next to each other It's not that easy but it's possible and it all depends on really What you doing and where is it now Safe area But This area the HTML and PHP View area So depends on what you do interview so currently this is set up to do your normal Import as you would usually do So changing this will also change your normal import concept Ok so That is how you would In this area you would Change your custom import concept Please read through the code Maybe compile it Go look at what it's done Look around see how the default import and Concept work And then make your changes accordingly I have used this area quite a lot for various applications Do sometimes you have a user that says to you or client I want to import these sets of Csv files I don't like forced 4000 door 40000 lines and it needs to select only specific values Well in that case this area is definitely what you looking for And you'll be able to actually adapt to import concept to accommodate those kind of complexity Well that is how to Change export values and create custom import values For any field View in the backend of your component Sanitary changing how that button behaves that how that one behaves \ No newline at end of file +I would like to show you How to change the values that are being exported And how to then [00:00:08](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m08s) Have custom import option With an import of the data At the moment Component builder actually allows you To have Import and export by Default in all the list views Of the components you build So let's look at what I mean Here I have a component called IP data Basically used to take [00:00:35](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m35s) IP address and Translate it to what country it was from and then To update the pricing on your website based on that IP data So Obviously You might want to export or import stuff Into this component So I'm gonna have us look at for example let's say Let's take the IP tables So here we have the IP tables [00:01:07](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m07s) And as you can see We are able to see the The CNTRY value And that is basically the country and the The REGISTRY Who this IP table belongs to And The Range That is being reflected And all this values are here. Now if you click export without selecting any Values will give you this warning [00:01:35](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m35s) So Obviously you can only export the values that are selected so if you want to export them all you need Change this value to all And in some cases if the table is too big That means you might not be able to export them all at once Any anyway exporting the data that such big quantities is not really ideal I would say anything Beyond 3000 items Rather go to MySQL Get a dump file it's not ideal to use that kind of quantity with in Joomla anyway Although we have often seen the listview being used for up to [00:02:16](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m16s) 10000 registered sorry items and quite complex Inheritance in structure We're talking about the import export now and that's quite different Ok so for our purpose Let's say we wanna exporter this but let's say for some reason Instead of us Wanting to see if this zzz or AUS Value We want to instead see the country name Ok so that would be a simple implementation of what I'm trying to explain [00:02:51](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m51s) So if you would clik export now Let's do that And then let's just save this Ok so we've exported it And instead it put these AUS values here And some other values from the database all nicely exported And that's what you would expect But if you wanted this to be a different value when you export it Then you can do the following The way component builder works [00:03:26](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m26s) Is its Got this Get export data Method in the model And This Get export data method has this extra value set to True called export or _export A reason why we added this is because it is actually Using the same structure [00:03:52](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) Of getting the data As you would When Let me rephrase this You're able to Target This method with custom scripting But the difficulty is that you see this part that's custom scripting And it's also been added Into the actual [00:04:21](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m21s) Get list query right there you see It's the same custom scripting So basically In our compiler we are adding the same custom script into the get list query As we are adding Into the get export data It's the same custom scripting Now the way that you would Know where is it executing is based on this value This value is not set [00:04:49](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m49s) In the list query of course It is only set In the export data So let's see where this custom scripting is done So if you got your Admin view open you go to PHP and then you scroll down Until you see the method where is it now maybe I should scroll slower is it that one yeah I think it is this one here Right Until you see the method it says get list query J model list That's the the [00:05:43](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) The one and you'd said yes The the code you put in here Is added both to the Get list query As well as to the export query so if you want to change the values that are being exported But not the values that's being shown in your component you be doing it in the same area So going back here you'd see that it's that's the same code over here that is Also added over here you see that's the same code [00:06:22](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m22s) So if you were for example In here you wanted to change some value you could do that by simply Adding another lookup or something and you add this export is true Now to see where all this export = true is appearing We would go to Any Model which is obviously a list model And we would search and see there it is [00:06:55](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m55s) And there it is again So where are we now we are now in the get export data And we are in the area where is looking remember we showed you in the previous tutorial How to add some customisation to your values in the listview Some HTML well here we are asking is the export set or is it true Then Don't do this You know Don't don't add this feature here [00:07:25](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) So we are avoiding adding this Customisation of coloring because we don't wanted to run when we are exporting exporting we only wanted The values so then again you can see where using the export values And Then again there So those are there The places where the export Function is coming in To play and how we can By using this [00:07:53](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m53s) Underscore export We are able to identify whether it's an export or not if it is we can make the changes to the values as we like Ok Then going back to our back end Just to show you This is the place where we did the query And this is the place Before the translation fix, decryption again We are checking whether we are doing an export And so you could literally take that [00:08:30](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) And say Instead of the exclamation that if it's export is set Come on and export And export is true Then over here you know Do you think in that area there so that is if you want to change the values Before translation or before decryption or if you want to you can do it after After that So after all was done You wanna change the values [00:09:18](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s) On an export Then you can add it there And that is really as simple as it is Adding a Change to your exported values Now If you want to then Have a different import Type as usual Usually to import values you just [00:09:40](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m40s) Update these right and if you leave the ID in it updates if you take the ID out It creates So without an ID it will create With an ID it will update Now let's say you say we you know what I actually don't wanna use the IDs I want to use these values instead And then you need to create a custom import concept now we have tried to make that Easy as possible and yet I'm sorry to say that it's still quite complex [00:10:13](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m13s) So You basically go to custom import And then obviously there is a little warning here Because it is quite daunting You that there yes And it will load Into these areas The actual script That are used by Default In these various concepts [00:10:38](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m38s) Now if you do not understand what you seeing here Then I suppose you should rather not be trying to do this Or you should Then seek some Classes maybe from lynda.com or elsewhere I think Udome it's also a good place Sort of sharpen up some of your PHP skills And Then you could make changes to this for example maybe just take out that chunk And [00:11:09](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m09s) Then Do a search You know so put something in you can find like Your name or whatever And then save this and compile it And then go and search where does this come up Where does this come out what what is happening And then Obviously You'd realize that [00:11:31](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m31s) We don't completely remove the default Import method When you do this kind of Changes There is a way that you could make these changes And have two import methods next to each other It's not that easy but it's possible and it all depends on really What you doing and where is it now not save area But [00:11:59](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m59s) This area the HTML and PHP View area So it depends on what you do in the view so currently this is set up to do your normal Import as you would usually do So changing this will also change your normal import concept Ok so That is how you would In this area you would Change your custom import concept Please read through the code Maybe compile it [00:12:33](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m33s) Go look at what it's done Look around see how the default import and Concepts work And then make your changes accordingly I have used this area quite a lot for various applications Because sometimes you have a user that says to you or client I want to import these sets of Csv files and they are like 4000 or 40000 lines and it needs to select only specific values [00:13:06](https://www.youtube.com/watch?v=fau5mZ6naLc&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m06s) Well in that case this area is definitely what you looking for And you'll be able to actually adapt your import concept to accommodate those kind of complexity Well that is how to Change export values and create custom import values For any field View in the backend of your component So literally changing how that button behaves and how that one behaves is what I have just shown you. Thank you for watching. diff --git a/029-How-to-overwrite-the-custom-fields.md b/029-How-to-overwrite-the-custom-fields.md index 9342dc9..5e315c3 100644 --- a/029-How-to-overwrite-the-custom-fields.md +++ b/029-How-to-overwrite-the-custom-fields.md @@ -1 +1 @@ -It happens that you would like to use some of the default fields Differently than hell component builder is actually implementing it Now what is the default fields If you go to Add a new admin view or if you go to an admin do that already exists like I've open one here You see that there is this your mode Just above adding fields It says that the ID The asset ID the state The access the ordering the created by the date created modified by Date modified Checkout Check out time virgin Hits metal key Meta description and metadata Is already added to the view so these are your default Feels That always gets added to the view even if you don't create them in fact you don't need to create them But I have seen that sometimes you might want to display some of these fields in a different air Area Of the application You see currently The it field and published Where is it I think that State Yeah Estate field Is the only field that is been shown by Default In the listview So here you can see there is the ID field and there is two states field I'm only ordering feel buddy ordering field Obviously Show the other number you basically click on that button there And then you can move them All them so all that is done by Default and so as you can see The sorry The other Values are not displayed in the listview And so I had a client while saying to me that they would like to actually see the date that something was created And also by whom it was created I'm so I had to adapt component builder so that those things can also be overwritten And this is exactly what we've done What is done is if you create a field In component order as you would normally create a field and you give it Any of these names he created by or created date but obviously exact Jackie the same name then it actually will override The default so in this specific view the job order View Scuze me There is a field Created by So I can open that A new tab there is also a field Created That's basically the day images Serious Oh that is great day Close open So in the Field You see that I basically used The name created by Is obviously a user is the type of fuel And the label is created by the user that created this is the description And that's all that's needed For a user type Then In the created date Basically it's a calendar time And I used created The date it was created The label and some of its default now these values if you don't know them You can actually go and look At the compiled Field Let me let me show you that In the backend of your component that is administrative components Then the relevant component Utopian models and then there is a place called forms And you would basically open that And you'd see a list Of forms that correspond to the back interviews that you've created so now k's This job order Is the one You're obviously open the XML So you double click on it And then scrolling down You can look at modified by And some of its default So you gonna overwritten I'm sorry I write this value Then you need to update or basically use these values here Make sure this is the only part that is Should change it to change it We won't know But you're trying to Override Default feels because it basically uses the name As the identifier Ok so back here Basically created the fields that was the first bar Close them again And then We would like any normal any other field Recently went to fields And we added those Fields So yeah you would see Scroll down There's the created date and there is the created by We had both to be shown and also the position Now it should be treated And we said it was be in the left tab Of the 15th Oh yeah that's the other thing If you would like the fields do again this play the same place as before in the edit Then you would add it to the 15th tab I reckoned that it Very unlikely that somebody would create so many tabs What is a turnip If you were to go to the view Then this is Tab 1 the Step 2 3 4 5 and 6 So Since publishing can really very It wasn't Making any sense to me that I would Targeted in any way Directly as the 5th of the 4th So I took a very high number 15 Not very obvious and this is why I had to make this tutorial If you select the number 15 It will basically add these two fields in the same place it would if it had to build it for you But if for some reason you say no I want to also display the field in a different tab You could actually click and say let's say put in in the 3rd to have you click save And and then you would compile The components install it And then UC 12 3 it's in the third tab It's showing up So That's All You Had to Do as they had to say and what stab you would like it now to display you go here it says No longer shows in the probably stab the create date I need a created by that shows up here so it literally moves the field to a different tab As well as Now displays the field In the listview And that Simply because you added the value the fields here you said that you wanted to display and you added I'm gonna move it back to 15 Which is the tab number if you wanted to be in its default place Save Safair File this Updating the component Refresh the page and now If we go to where it was it's no longer showing there it's not showing there Showing there it's back in published in the correct place that's where it Will usually anyway be said if you don't override it so using the 15th tab As the the target Putting it's default place And if you use another tab number it removes it from its default place and put it where you at Decided to be placed well that is how you can override the custom Added fuel Tower Fields of a backend View I hope that will be very helpful Thank you for watching \ No newline at end of file +It often happens that you would like to use some of the default fields Differently than how component builder is actually implementing it Now what is the default fields [00:00:12](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) If you go to Add a new admin view or if you go to an admin view that already exists like I've open one here You'd see that there is this little note Just above adding fields It says that the ID The asset ID the state The access the ordering the created by the date created modified by Date modified Checkout Check out time version Hits metakey [00:00:41](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m41s) Meta description and metadata Is already added to the view so these are your default Fields That always gets added to the view even if you don't create them in fact you don't need to create them But I have seen that sometimes you might want to display some of these fields in a different Area Of the application You see currently The ID field and the published Where is it [00:01:20](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m20s) I think that is State Yeah State field Is the only field that is been shown by Default In the listview So here you can see there is the ID field and there is the states field and the ordering field but the ordering field Obviously Doesn't show the order number you basically click on that button there And then you can move them [00:01:45](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m45s) You know order them so all that is done by Default and so as you can see The sorry The other Values are not displayed in the listview And so I had a client once saying to me that they would like to actually see the date that something was created And also by whom it was created And so I had to adapt component builder so that those things can also be overwritten And this is exactly what we've done What is done is if you create a field In component builder as you would normally create a field and you give it [00:02:23](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m23s) Any of these names you see created by or created date but obviously exactly the same name then it actually will overwrite The default so in this specific view the job order View Excuse me There is a field Created by So I can open that in a new tab there is also a field Created [00:02:57](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m57s) That's basically the date let me just See where it is Oh there it is create a date I'll also open that one So in the Field You see that I basically used The name created by it's obviously a user is the type of field And the label is created by the user that created this is the description [00:03:26](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m26s) And that's all that's needed For a user type Then In the created date Basically it's a calendar type And I used created The date it was created The label and some of its defaults now these values if you don't know them You can actually go and look At the compiled [00:03:51](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m51s) Field Let me show you that So in the backend of your component that is administrator components Then the relevant component You would open models and then there is a place called forms And you would basically open that And you'd see a list Of forms that correspond to the backend views that you've created so now in our case This job order Is the one [00:04:19](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m19s) You're obviously open the XML So you double click on it And then scrolling down You can look at modified by And some of its default So you gonna overwritten I'm sorry overwrite this value Then you need to update or basically use these values here Make sure this is the only part that is You shouldn't change it if you change it [00:04:45](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m45s) We won't know that you're trying to Overwrite one of Default fields because it basically uses the name As the identifier Ok so back here We basically created the fields that was the first part I'll just close them again And then We would like any normal any other field [00:05:08](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m08s) We simply went to fields And we added those Fields So here you would see you scroll down There's the created date and there is the created by We add both to be shown and also the position and how it should be treated And we said it was be in the left tab Of the 15th [00:05:37](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) Oh yeah that's the other thing If you would like the fields to again display in the same place as before in the edit view Then you would add it to the 15th tab I reckoned that its Very unlikely that somebody would create so many tabs Now what is a tab? If you would to go to the view Then this is tab 1 this tab 2 3 4 5 and 6 So Since publishing can really vary [00:06:14](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) It wasn't Making any sense to me that I would Targeted in any way Directly as the 5th of the 4th So I took a very high number 15 It's not very obvious and this is why I had to make this tutorial If you select the number 15 It will basically add these two fields in the same place it would if it had to build it for you But if for some reason you say no I want to also display the field in a different tab You could actually click and say let's say put in in the 3rd tab you click save [00:06:53](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) And and then you would compile The components install it And then You see 1, 2, 3 it's in the third tab It's showing up So That's All You Had to Do as they had to say and what tab you would like it now to display if go here you would see It no longer shows in the publish tab the create date Its only created by that shows up here so it literally moves the field to a different tab [00:07:24](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m24s) As well as Now displays the field In the listview And that Simply because you added the value the fields here you said that you wanted to display and you added to the third tab I'm gonna move it back to 15 Which is the tab number if you wanted to be in its default place So I click save and then save there compile this install it [00:08:03](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m03s) Basically updating the component Refresh the page and now If we go to where it was it's no longer showing there it's not showing there It is not showing there it's back in published in the correct place that's where it Will usually anyway be set if you don't overwrite it so using the 15th tab As the the target Puts it's in default place And if you use another tab number it removes it from its default place and puts it where you have assigned it to be placed well that is how you can overwrite the custom Added fields Fields of a backend View [00:08:49](https://www.youtube.com/watch?v=FHQfIhWHYyQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) I hope that will be very helpful Thank you for watching diff --git a/030-How-to-filter-a-list-field-based-on-association-with-another-field.md b/030-How-to-filter-a-list-field-based-on-association-with-another-field.md index f858902..a7c2633 100644 --- a/030-How-to-filter-a-list-field-based-on-association-with-another-field.md +++ b/030-How-to-filter-a-list-field-based-on-association-with-another-field.md @@ -1 +1 @@ -Hi I don't know some of you also encountered The reality of having to So limit the drop down Open list View Based on It's associated with another table A very common place where we find this For example When you want to load the regions of only one country I'm gonna show you how I have achieved this I realise there are many ways to do this and yet This is how I've done it Ok so to start off I have a component I could use his illustration All job tracking Component Obviously I have a client area And Already loaded I go to app and use YouTube as country and regions Now I'm gonna illustrated on the basis of country and regions Obviously can Change the Field Concepts in Replace it with other tables But No none the less this is what I'll be using And I'm gonna show you how employed implemented in inside the the client's View because that's basically when most of the work is done Ok so I'm gonna open the client View And then I'm gonna look in the two places we wanna look at Script Well as the PHP area Diovan various previous tutorials explain some of the Ajax functionality In component Builder But I realise not all of you What sort of tutorial so I'll explain some of that again Briefly But having said that The first gonna look What we really wanted she That said When you load So let me go show you that So when you Start with a client You would like to choose a country And then Haven't load only that countries regions Basically what you want to do Evermore You want to make sure It when it does that And you can select Country it also an select The region And Various things we wanted she here In JavaScript Show you how I've done that I'm just reading at the moment 1 country Maybe I should go spit on a few more so just hold on for a second back So now if I look it says Australia If I click on Australia You see that it doesn't load any regions in fact that says create a region Tattoos Namibia It says select a region and so there's three reads two regions already created Nice you know by now there is this button In some of the Dropdowns which are being added by saying true to the button And so it's very helpful For either Creating or editing existing regions So if you could sort of selecting a country where there isn't any regions set yet The basic details for the great one And you can then create a region for this country And what's nice if you click on this Create You can then simply create your region I'm close so I don't know 3 reasons so I'm just gonna call it Region for now And save and close But creating a client If I now Select Australia you see that it's got reading So there we go Problem solved And that's really what I'm gonna do my straight how I did that So let's get started On a JavaScript side of things I first have Two variables I actually could call them both of our Doesn't matter What is an object And one is simply where we are going at Store if there is a bell you already said We're gonna store that value Then on document ready I simply Oh yes Before I continue Creating the fields Wesley make it bring all the regions to the page I don't want it to Leave some regions on Unloaded how can I say Instead what I rather do Is a pastor's regions Into this variable And then only put those regions that are actually Part of this country Into the list of dropdown options that's really what I'm doing so that's What you also see happening here Is first thing I'm doing is I am Doing a for each On the regions options And then I'm getting the value I putting it in key I'm getting the text I'm putting it in text And then I'm adding it to Regis Simply as you would load it in any Any rain there And then I am also Getting the value of the set region And I'm adding that to Region And then I'm sitting the The function get region The gate region function is down here This area The first thing we do is we load it all Show how the loading show Rather this class Heidi Is loaded on the page by Default When you Set This fade effect On ad Then it by Default loads that class With a nice spinner And so I'm basically If the loading process takes long I'm sort of stopping the user from doing anything Waiting for that spinner Don't need to add that Then I am Finding Options The reason And I'm removing them All of them Then I'm triggering An update now this is This updated be a tricky year list as it is a Joomla function And it's actually Possibly gonna change in the future So keep that in the back of your mind It sings break it possible is happening right here Because this as you know the list the of is dynamically generated by Joomla And so we literally telling it Draw that list again But after having removed everything Now We are looking at the country Source of the year with only starts the region Now we get the country value the one that is selected And we add it to country We then call the server at this point And the only thing we are giving the server is the country ID Appear We have a country ID We have our Get URL Our case is get region Is there is the task We checking that the token is on the page Checking that a country ID is not zero And We then basically loading the request Shooting of an Ajax We doing it this way because obviously You wanna do some things after we've got The result which is this done And then we Set region We throw the result into said region We hide the load And Then Would you some house cleaning on the button So that button also gets Tampered with And I'll show you the region but incorrect Correction that we doing down here And you can copy this code Test that out obviously you would update this to whatever field you trying to limit And After set region Now we going to separate Region is quite simple Mainly because we already done most of the work With the result being returned and so I'll show you the PHP that returns this result in the moment Zayn said region would get an array Check if they raised there And then we attend Simply as you would With any list selection We append the value But now Since we are Oh yes Nothing Realise I'm almost keeping it This sect select region Is a JavaScript Variable That I'm setting through PHP Which I'll show you in a later Stage And basically it's just a string That says that you should select the region And if there is no rear a returned We basically just use the other variable Create a region which is also just as string So now are we here It's right over the array And we are using the ID And we checking whether the ID In regions If it's in regions We append the ID as a value And as you remember in regions we saved the text As well as the ID And so that is how we get the text Simply adding it in there I know we could have done that in the PHP but I felt a let's let's let the The browser help us with some of the lifting So We got the regions there if it's a huge table you might want it should approach this differently Eventually we are checking whether the ID and the region = Since if it does your mother ensure to set Region Value so as your member previously We found the region value And which store did into region Just in case The value was set before and saved Now the person is looking through different countries But when you can select the country that previously was saved We want to make sure that his previous region is also shown as the selected value That simply what we doing here Then after everything is done we again trigger this List Update Which is the same as what was triggered there And that basically sets the regions list again afresh Then only Do we run this little bit of housekeeping Which does the Regent button Now the reason button It's actually A JavaScript That is added Because of the list Field so if your specific list field was said to have no button You could simply leave this out If it was said to have a button Then this is the usually the name of the button with B the the This area before the J form Underscore This part of the name Would be the first part of the name of the button function and then the last part would be button So that's how you know and you can obviously on the page Let it execute and search for this function if you aren't sure But that's how you would Run The button correction And that's basically How did JavaScript looks to achieve this Ok A more housework necessary and that's what I said before This area of JavaScript can actually include BHP Erica not because that's just pure JavaScript file Where's this is JavaScript add it to a php file So we're we can add some PHP and that's where we get the select region and create region Now I know there is another way to do this in Javascript itself so forgive me for being so sloppy Anyway There is this function Which basically when the admin form on change of the country field is When an event occurs We want to execute get region That Every time That you've changed What is the extra bit of Script that you need to add these two If you are gonna Copy this down exactly the same Just another note We see then execute this function which is the same function That we are executing On the page load We don't need to read execute this Simply because that is already been done on the page load All the JavaScript But you need to add Now let's go look at the PHP Should know by now you do not need to add the PHP to the same admin View Since all the ajak methods are all added to one file In the component called Ajax the the model As well as the controller is the Ajax model in controller so if you compile the component You can unzip it and go to the model To the controller Hi there in the backend or in the front end Where is now it will be in the back end And it's under models Auc there's an Ajax model in All of the backend Ajax Methods gets added to this one model And so this area is what takes care of the model And And this area here takes care of the Controller So basically saying the values name is country Discuss get region if no values passed it's Noel And it must be an integer that is And the method name is get region And it must be a logged in user that's a simple as that is That takes care of the whole controller setup Then here The method Called get region it gets the ID It doesn't need to sanitize it again since the controller already did that You can go look at the controller to see the implementation So we simply getting the Battery How did factories passes us the database We set up a query we say that we are looking for the ID is Of the in the region That are published I'm basically where the country Now this is a game where you need to sort of Make your changes We want the names of the regions or the ideas instead sorry of the regions Their association with the country Obviously then in the region Table We have a a a field a column That is called country And it has an ID in it So that each region Is linked to a country so whatever Table you are targeting Dissociation would be than this country And it's obviously Karen White wedges at the entering there again Set the query executed check if you have a value And if we do we simply return the load Load column Function Which returns the ID is in an array There we go done finished And There we return false if no value was found in its simple as that that's all the PHP use Need And that returns The the PHP 2 hour JavaScript And the JavaScript does the rest Ok well I hope this will be very helpful And help you to sort of sort your dropdowns I didn't spend Watch time on explaining that maybe I should so let me Give a Quik Run over of that The field that we are Focusing on is this country in the region field and they are both custom right So I've already done tutorials on how to set up a custom field I'm not gonna spend too much on this But just for reminder that open region Simply saying the button is true And We select the region you can obviously update the view name dynamically in the description And here we doing some PHP Put all of this PHP Adjust PHP one Without adding it to the 19th Yes placement But like I've done I've actually used every area I like making the code look It was written Enough computer-generated And Then I'm adding the options and so this is just a simple basic Avon Any job script in here I've Done Everything basically in the model Did the PHP is Wallace to Javascript sorry not in the model in the back in admin View And I think that is because I wanna use this field maybe in other views with different Different Association So I I I don't tend to use the script area Maybe as one might expect So that's quickly looking At Filtering a dropdown list selection custom list selection Via JavaScript And Ajax therefore If you are targeting a table of another Component which you you're not having the control over there The actual field names it will it should work the same way if the US as long as there is A field of Association within the table that you'd like to filter Good right that PHP Find the values and filter it Thanks for watching \ No newline at end of file +Hi I don't know some of you also encountered The reality of having to Sort off limit the drop Downs Of a list field Based on It's association with another table A very common place where we find this [00:00:22](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) Is for example When you want to load the regions of only one country And so I'm gonna show you how I have achieved this I realize there are many ways to do this and yet This is how I've done it Ok so to start off I have a component I could use as a illustration or job tracking Now in this component [00:00:50](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) Obviously I have a client area And then I have Already loaded I go to admin views you would see there is country and regions Now I'm gonna illustrate it on the basis of country and regions but You obviously can Change the Field Concepts and Replace it with other tables [00:01:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) But none the less this is what I'll be using And I'm gonna show you how I implemented it in inside the the client's View because that's basically where most of the work is done Ok so I'm gonna open the client View And then I'm gonna look in the two places we wanna look at JavaScript As well as the PHP area Now I have in various previous tutorials explain some of the Ajax functionality [00:01:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m51s) In component Builder But I realized not all of you Might have watched all the tutorial so I'll explain some of that again Briefly But having said that We first gonna look at What we really wanna achieve Like I have said When you load So let me go show you that [00:02:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) So when you Start with a client You would like to choose a country And then Have it load only that country's regions That is basically what you want to do Furthermore You want to make sure when it does that And you unselect [00:02:41](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) the country it also unselects The region And so there are Various things we wanna achieve here So in JavaScript I'm goining to show you how I've done that I'm just illustrating at the moment one country Maybe I should go put on a few more so just hold on for a second there ok So now if I look it says Australia If I click on Australia [00:03:10](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) You see that it doesn't load any regions in fact that says create a region If I choose Namibia It says select a region and so there's three regions two regions already created Now as you know by now there is this button In some of the Dropdowns which are being added by saying true to the button And so it's very helpful For either Creating or editing existing regions So if you could sort of selecting a country where there isn't any regions set yet [00:03:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) It basically tells you to create one And you can then create a region for this country And what's nice if you click on this Create You can then simply create your region Save and close so I don't know any of Australia regions so I'm just gonna call it Region for now And save and close Go back to creating a client [00:04:17](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) If I now Select Australia you see that it's got regions So there we go Problem solved And that's really what I'm gonna demonstrate how I did that So let's get started On a JavaScript side of things I first have Two variables I actually could call them both of var Doesn't matter [00:04:42](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) One is an object And one is simply where we are gonna Store if there is a value already set We're gonna store that value Then on document ready I simply Oh yes Before I continue Creating the fields I obviously make it bring all the regions to the page I don't want it to [00:05:11](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) Leave some regions on Unloaded how can I say Instead what I rather do Is I parse those regions Into this variable And then only put those regions that are actually Part of this country back Into the list of dropdown options that's really what I'm doing so that's What you also see happening here Is first thing I'm doing is I am [00:05:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) Doing it for each On the regions options And then I'm getting the value I putting it in key I'm getting the text I'm putting it in text And then I'm adding it to Regions Simply as you would load it in any Any array there And then I am also [00:06:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m08s) Getting the value of the set region And I'm adding that to Region And then I'm setting the The function getregion The getregion function is down here This area The first thing we do is we load a little loading show now the loading show or Rather this class ID [00:06:34](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m34s) Is loaded on the page by Default When you Set This fade effect On ad Then it by Default loads that class With a nice spinner And so I'm basically If the loading process takes long I'm sort of stopping the user from doing anything Waiting for that spinner [00:06:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) Don't need to add that Then I am Finding Options for the region And I'm removing them All of them Then I'm triggering An update now this is This update that we are triggering here list zt is a Joomla function [00:07:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m19s) And it's actually Possibly gonna change in the future So keep that in the back of your mind It things break it possible is happening right here Because this as you know the list the of is dynamically generated by Joomla And so we literally telling it Draw that list again But after having removed everything Now We are looking at the country [00:07:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m51s) So up to here we only touched the region Now we get the country value the one that is selected And we add it to country We then call the server at this point And the only thing we are giving the server is the country ID up here We have a country ID We have our Get URL Our case is get region [00:08:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m16s) Is the task We checking that the token is on the page Checking that a country ID is not zero And We then basically loading the request Shooting of an Ajax We doing it this way because obviously You wanna do some things after we've got The result which is this done And then we [00:08:40](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m40s) Set region now We throw the result into setregion We hide the load And Then We do some house cleaning on the button So that button also gets Tampered with And I'll show you the region button correct Correction that we are doing down here [00:09:05](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m05s) And you can copy this code Test that out obviously you would update this to whatever field you trying to limit only do that After set region Now we going to setregion setregion is quite simple Mainly because we already done most of the work With the result being returned and so I'll show you the PHP that returns this result in the moment so in setregion would get an array we Check if the array is there [00:09:38](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m38s) And then we append Simply as you would With any list selection We append the value But now Since we are Oh yes another thing I'm almost skipping it This select region [00:09:55](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m55s) Is a JavaScript Variable That I'm setting through PHP Which I'll show you in a later Stage And basically it's just a string That says that you should select the region And if there is no array returned We basically just use the other variable [00:10:21](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m21s) Create a region which is also just a string So now over here we are going to each over the array And we are using the ID And we checking whether the ID In regions If it's in regions We append the ID as a value And as you remember in regions we saved the text As well as the ID [00:10:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m51s) And so that is how we get the text Simply adding it in there I know we could have done that in the PHP but I felt a let's let the The browser help us with some of the lifting So We got the regions there if it's a huge table you might want it should approach this differently Eventually we are checking whether the ID and the region = Since if it does your mother ensure to set Region Value so as your member previously [00:11:25](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m25s) We found the region value And which store did into region Just in case The value was set before and saved Now the person is looking through different countries But when you can select the country that previously was saved We want to make sure that his previous region is also shown as the selected value That's simply what we doing here Then after everything is done we again trigger this List [00:11:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) Update Which is the same as what was triggered there And that basically sets the regions list again afresh Then only Do we run this little bit of housekeeping Which does the Region button Now the region button It's actually A JavaScript [00:12:22](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m22s) That is added Because of the list Field so if your specific list field was said to have no button You could simply leave this out If it was said to have a button Then this is the usually the name of the button would be the This area before the J form Underscore This part of the name Would be the first part of the name of the button function and then the last part would be button [00:12:54](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m54s) So that's how you know and you can obviously on the page Let it execute and search for this function if you aren't sure But that's how you would Run The button correction And that's basically How did JavaScript looks to achieve this Ok there is a little bit more housework necessary in that's what I said before This area of JavaScript can actually include [00:13:25](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m25s) PHP that area can not because that's just pure JavaScript file Where's this is JavaScript added to a PHP file So here we can add some PHP and that's where we get the select region and create region Now I know there is another way to do this in Javascript itself so forgive me for being so sloppy Anyway There's this function Which basically when the admin form on change of the country field is When that event occurs We want to execute get region [00:14:06](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m06s) so That Every time That is changed What is the extra bit of Script that you need to add these two If you are gonna Copy this down exactly the same Just another note We see then execute this function which is the same function That we are executing [00:14:33](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m33s) On the page load We don't need to read execute this Simply because that is already been done on the page load that is all the JavaScript But you need to add Now let's go look at the PHP Should know by now you do not need to add the PHP to the same admin View Since all the ajax methods are all added to one file In the component called Ajax the the model As well as the controller is the Ajax model in controller so if you compile the component [00:15:13](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m13s) You can unzip it and go to the model To the controller either in the backend or in the front end Where is now it will be in the back end And it's under models Auc there's an Ajax model and All of the backend Ajax Methods gets added to this one model And so this area is what takes care of the model [00:15:37](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m37s) And And this area here takes care of the Controller So basically saying the values name is country the task is get region if no values passed it's Null And it must be an integer that is past And the method name is get region And it must be a logged in user that's a simple as that is That takes care of the whole controller setup Then here [00:16:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m08s) we have The method Called get region it gets the ID It doesn't need to sanitize it again since the controller already did that You can go look at the controller to see the implementation So we simply getting the factory the data base factories passes us the database We set up a query we say that we are looking for the IDs in the region That are published [00:16:38](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m38s) I'm basically where the country Now this is again where you need to sort of Make your changes We want the names of the regions or the IDs instead sorry of the regions on Their association with the country so Obviously then in the region Table We have a a a field a column That is called country And it has an ID in it [00:17:06](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m06s) So that each region Is linked to a country so whatever Table you're targeting this association would be than this country And it's obviously me being paranoid we just add the interger there again Set the query executed check if you have a value And if we do we simply return the load Load column Function [00:17:33](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m33s) Which returns the ID is in an array There we go done finished And There we return false if no value was found and it's simple as that that's all the PHP you Need And that returns The the PHP to our JavaScript And the JavaScript does the rest Ok well [00:17:57](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m57s) I hope this will be very helpful And help you to sort of sort your dropdowns I didn't spend much time on explaining that maybe I should so let me Give a Quik Run over of that The field that we are Focusing on is this country in the region field and they are both custom right So I've already done tutorials on how to set up a custom field I'm not gonna spend too much on this But just for reminder let's open region we Simply saying the button is true [00:18:34](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m34s) And We select the region you can obviously update the view name dynamically in the description And here we doing some PHP you could Put all of this PHP in just PHP one Without adding it to the 19th placement But like I've done I've actually used every area [00:19:05](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m05s) I like making the code look It was written and not computer-generated And Then I'm adding the options and so this is just a simple basic simple custom field there is'nt even any Java script in here I've Done Everything basically in the model Did the PHP as well as the Javascript sorry not in the model in the back end admin View And I think that is because I wanna use this field maybe in other views with different [00:19:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m44s) Different Association So I don't tend to use the script area Maybe as one might expect So that's quickly looking At Filtering a dropdown list selection custom list selection Via JavaScript And Ajax therefore If you are targeting a table of another Component which you're not having the control over [00:20:15](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m15s) The actual field names it will it should work the same way as long as there is A field of Association within the table that you'd like to filter you could write that PHP Find the values and filter it Thanks for watching diff --git a/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md b/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md index f29d169..af96b60 100644 --- a/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md +++ b/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md @@ -1 +1 @@ -Hi welcome to component Builder We've just added a very Smart new feature Two-component Builder That's Is cold Custom code You can find it here next to Dynamic get It's basically where it's stored You'd hardly never need to go in here Unless you wanna look at what is already been stored and make changes to that in the UI Most of the time you'll be doing the changes in your editor So you editor will be Basically where you will work So what is the purpose of this new feature The preacher is really there For those who are used to actually coding in another editor So what we can then say is let's say they create a component in component Builder And then once they've created it They basically do it compile Uninstall it onto the same website As component Builder To taste it And then during testing they are adding code into that Compiled version That are installed onto this website right Well the new feature could then On compilation extracted custom code Storage in this custom code area And added back into the component on the fly So I'm sure that is quite exciting Anyway let me do some demonstration give you some of the rules guidelines since there are some limb Limitations And then obviously this is still in beta there's quite a few things still to do But I would like to get it out there have you guys tested and get some feedback Okays I'm gonna compile the demo component Since most of you might already have this component installed And you can then use this is so the test area so will compile it there more component Ok then I'm gonna install it on to this current site Great Now I'm gonna go and give you An explanation of how to add Custom scripting to that component By going to an editor Ok so here in the editor you can see this is the root directory Of the website I'm gonna do something on the back in of the components I'll open administrative components And then there is the demo component And let's just go through it's main page Ok so its main index page And then let's see I'm gonna add some custom scripting here Just for the mistration No other way to add custom scripting there are some conventions and some Sort of regulations Let me first show you the conventions To insert custom scripting your user tag like so So in sleep You use Astrix instead of The Exes that are in the code so the code has the excess in it but the actual They would be with the Asterix So that will be to insert new code you use that that place holder and the beginning of the Area new then after a new line Yours insert your code and then at the end of the code you will insert this one to close the code Ok Then they are busy two ways Of adding code 1 is to insert code and wanted to replace existing code So in certain code with simply at the same line insert that code into the existing code Where is replace in code will literally remove the old code and add the new code in its place So these are the two conventions Once component builder ads the code back The dark will change inserted Insert will change to insert it And all have this new number at the end this number is actually referencing the ID of the Code in the system Now don't ever change this number or component Builder with think that it doesn't have one And it needs to be created So it will be an error it won't work so don't take this Number out Then It will add this at the end Now on other after compiling it and adding this string in it won't Compile it again because of these Opening and closing Brackets not being there Great torrent Lesser than signs They they are the ones that activate yet and makes makes it Basically be parsed again So when component builder prices the code back it looks like this When you then later come and want to change it again you would add this diamond in there And it will then update the existing Code in the database With the changes that you've made That's basically it there are a few limitations you cannot add Code Closer to its other than I would say 6 lines So if they r gonna B code Close to each other and it ends and starts within the parameter of 6 lines You end up with a problem So especially at the end I will demonstrate that somehow in in in a hour Actual doing of of this but the reason is component Build It doesn't only use the line In which this is found to remember where to place it But actually creates a sort of a fingerprint of the code above the insertion and the code Below the sin Session 2 Accurately inserted in the future So that code changes Send component builder will give you a notice and will not insert the code This is because of the nature of JVC It actually is constantly improving Sorry JC BMN it's constantly being improved and that therefore it's code is obviously moving a row Around quite a lot Now There was no other way for us to try and automate this Because if we use the line it could possibly cause an accident by overwriting code you You never intended it to overwrite So the only way we could solve this was creating what we call a fingerprint Few lines above the insertion or the replacement and a few lines below there that replacement Now I'll demonstrate this in our in our demonstration in a moment Just a heads up about that So just quickly a recap To insert new code you will use this To replace new code or for the first time you would use that Obviously at the end of the code you would add these Corresponding placeholders I'll put these this little block Into the comments of this tutorial So that if any of you need to copy it down you could just copy it from there Ok and so went component billiards it back It will look like this for the inserts inserted and this for the replaced I love you then come back Obviously all you need to do is just add that diamond in there For it to be updated in the database So let's see this in action So here we have that demo components Main Document Open So I'm gonna add some replacement tags here So there we go I'm basically not making any changes but I could I could add a few lines Maybe another comment hi it worked And No space there Let's do Echo Hi 8 Worked And that should do it so now this is just gonna replace this area So let's go to the compiler and compile the component See what happens Some in the compiler I'm simply gonna compile a component again Ok it successfully compiled Now before I install it I could do a check to see whether it actually did get the code from the component The way I'll do that is I'm doing to open custom codes in a new tab And now behold there is says component demo and the path in which the change was made And it it was it was a replacement so we can open that And there is the code that we want replaced Right And there is the hashtag For the start The fingerprint and the hashtag for the end The lines at cine replacement and everything seems quite great so I will we need to do on this Area is actually click install Then that'll be the compiled version then Now let's go back To the code So as you can see It actually inserted the code in the correct place it moved the other code down enough lines And it's changed it from replace to replaced And it added if the ID After it That sort of tigers it so I could go and say ok I don't actually want this in here like that Clicksafe And then go back to the compiler compile it again Amigo Install it again Go back here refresh this Hope she didn't change let me quickly go see why I forgot to add in the diamond right You want to change the code you need to ensure that you add this back in Otherwise it will not even look for it So we at that back in Let's try again Ok now it worked it updated the code in the database Select install it And it updated in the code So that's how easy it is to replace a certain section now let's look at inserting Now remember as I said Don't put code close to each other within at least eight lines So 1 2 3 4 5 6 7 8 I could actually from this line insert another set of other insert or replace Another section of code The reason is because the fingerprint that it creates Above the insertion It's sometimes up to 8 lines long Now It could happen that it actually uses from there And that could Possibly be an error when you make a change here It will think that this code is also been affected and it won't find it So that is one of the limitations that these codes insertions that you do either by replacing or inserting as Chunk of text script can only be inserted up to eight lines apart From each other So let's do an insertion over here Ok so we got that inserted there I did put a comment And let's save that And now let's compile Ok before we install it we can just again go check Whether everything was done as expected and yes the insertion was grab it was Added to the database and it is there Ok Does the has target obviously with insertion we only need where it starts not where it ends And so We can close that Now simply install that component Let's go look at the code Ok so it is added the replacement Script Change it from replace to replaced It's added the inserted script From insert to insert it Now if you want to make a change to it we're getting Just add these diamonds here Make out change Save the file of course and then Then let's compile Let's check whether the work was updated Great it's updated that work in the database So let's install the component Ok let's go look at the code again Wonderful it's added it back All seems well Now We are working on another part of this implementation that for if so for some reason this code above it Changes It will give you a notice On compilation That there is been a change to the fingerprint and it could not find the insertion area It will still at the code on the line number But it will be escaped So that it doesn't change or hurt any of the code that still there The same goes with replacement code Since it is replacing code It is a bit more tricky So we'll still added into the line but we will not remove the old code Anyway I'm still going to be working a bit on that it needs some fine tuning I would like your feedback if you think There's a better way I'm always open for ideas Realities We are very happy to announce that component builder can now Automatically extract custom code from your Component wow In development Will add a switch that when your ready to distribute your component You could simply say you know that it's no longer in production And then when you compile it will actually not add these placeholders Anymore Ok well thanks for watching Please give me your comments that get up There is actually an issue open there Called Automatic import of custom code during compilation And You'll see that Yeah there's quite a few been said you can simply add your your comments and feedback on to this ticket What is this issue it's issue 37 Services tutorial be on YouTube possibly by the time you build it's closed bye You're still welcome to go and make any comments on the closed issue if you like Anyway thanks for watching goodbye \ No newline at end of file +Hi welcome to component Builder We've just added a very Smart new feature To component Builder [00:00:12](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) That's Is called Custom code You can find it here next to Dynamic get It's basically where it's stored You'd hardly never need to go in here Unless you wanna look at what is already been stored and make changes to that in the UI Most of the time you will be doing the changes in your editor So your editor will be Basically where you will work [00:00:39](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s) So what is the purpose of this new feature The feature is really there For those who are used to actually coding in another editor So what we can then say is let's say they create a component in component Builder Then once they've created it They basically do it compile and install it onto the same website As component Builder To test it And then during testing they are adding code into that [00:01:13](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m13s) Compiled version That are installed onto this website right Well the new feature could then On compilation extract that custom code Store it in this custom code area And add it back into the component on the fly So I'm sure that is quite exciting Anyway let me do some demonstration give you some of the rules guidelines since there are some Limitations [00:01:45](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m45s) And then obviously this is still in beta there's quite a few things still to do But I would like to get it out there have you guys tested and get some feedback Ok I'm gonna compile the demo component Since most of you might already have this component installed And you can then use this is so the test area so we will compile a demo component Ok then I'm gonna install it on to this current site Great Now I'm gonna go and give you An explanation of how to add [00:02:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m28s) Custom scripting to that component By going to an editor Ok so here in the editor you can see this is the root directory Of the website I'm gonna do something on the back end of the components I'll open administrator components And then there is the demo component And let's just go to it's main page Ok so its main index page And then let's see I'm gonna add some custom scripting here Just for the demonstration [00:03:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m04s) Now the way to add custom scripting there are some conventions and some Sort of regulations Let me first show you the conventions To insert custom scripting you will use a tag like so So obviously You will use asterisks instead of The X s that are in the code so the code has the X s in it but the actual They would be with the Asterix So that will be to insert new code you use that that place holder and the beginning of the Area then after a new line You will insert your code and then at the end of the code you will insert this one to close the code [00:03:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) Ok Then there are obviously two ways Of adding code, one is to insert code and one is to replace existing code So inserting code would simply at the same line insert that code into the existing code Where is replacing code will literally remove the old code and add the new code in its place So these are the two conventions Once component builder adds the code back The tag will change inserted Insert will change to inserted And will have this new number at the end this number is actually referencing the ID of the [00:04:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m28s) Code in the system Now don't ever change this number or component Builder with think that it doesn't have one And it needs to be created So it will be an error it won't work so don't take this Number out Then It will add this at the end Now on other after compiling it and adding this string in it won't Compile it again because of these Opening and closing [00:04:56](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m56s) Brackets not being there Greater and Lesser than signs They they are the ones that activate it and makes makes it Basically be parsed again So when component builder places the code back it looks like this When you then later come and want to change it again you would add this diamond in there And it will then update the existing Code in the database With the changes that you've made [00:05:30](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m30s) That's basically it. There are a few limitations you cannot add Code Closer to each other than I would say 6 lines So if there are gonna be code Close to each other and it ends and starts within the parameter of 6 lines You end up with a problem So especially at the end I will demonstrate that somehow in our Actual doing of of this but the reason is Component Builder doesn't only use the line In which this is found to remember where to place it But actually creates a sort of a fingerprint of the code above the insertion and the code [00:06:14](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) Below this insertion to Accurately insert it in the future So that code changes and then Component Builder will give you a notice and will not insert the code This is because of the nature of JCB It actually is constantly improving it's constantly being improved and that therefore it's code is obviously moving Around quite a lot Now There was no other way for us to try and automate this [00:06:48](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) Because if we use the line it could possibly cause an accident by overwriting code you You never intended it to overwrite So the only way we could solve this was creating what we call a fingerprint Few lines above the insertion or the replacement and a few lines below there that replacement Now I'll demonstrate this in our in our demonstration in a moment Just a heads up about that So just quickly a recap To insert new code you will use this To replace new code or for the first time you would use that [00:07:25](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) Obviously at the end of the code you would add these Corresponding placeholders I'll put these this little block Into the comments of this tutorial So that if any of you need to copy it down you could just copy it from there Ok and so when Component builder adds it back It will look like this for the inserted and this for the replaced and if you then come back Obviously all you need to do is just add that diamond in there For it to be updated in the database [00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s) So let's see this in action So here we have that demo components Main Document Open So I'm gonna add some replacement tags here So there we go I'm basically not making any changes but I could I could add a few lines here Maybe another comment hi it worked And No space there [00:08:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) Let's do Echo Hi it Worked And that should do it so now this is just gonna replace this area So let's go to the compiler and compile the component See what happens So in the compiler I'm simply gonna compile a component again Ok it successfully compiled Now before I install it I could do a check to see whether it actually did get the code from the component [00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) The way I'll do that is I'm just gonna open custom codes in a new tab And low and behold there is says component demo and the path in which the change was made And did it was it was a replacement so we can open that And there is the code that we want replaced Right And there is the hashtag For the start The fingerprint and the hashtag for the end The lines it's in a replacement and everything seems quite great so I will we need to do on this Area is actually click install [00:10:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m00s) Then that'll be the compiled version Now let's go back To the code So as you can see It actually inserted the code in the correct place it moved the other code down enough lines And it changed it from replace to replaced And it added the ID After it That sort of targets it so I could go and say ok I don't actually want this in here like that Click save [00:10:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m32s) And then go back to the compiler compile it again Here we go Install it again Go back here refresh this Oeps it didn't change let me quickly go see why I forgot to add in the diamond right You want to change the code you need to ensure that you add this back in Otherwise it will not even look for it So we at that back in Let's try again [00:11:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m18s) Ok now it worked it updated the code in the database So let's install it And it updated in the code So that's how easy it is to replace a certain section now let's look at inserting Now remember as I said Don't put code close to each other within at least eight lines So 1 2 3 4 5 6 7 8 I could actually from this line insert another set of either insert or replace Another section of code [00:11:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) The reason is because the fingerprint that it creates Above the insertion It's sometimes up to 8 lines long Now It could happen that it actually uses from there And that could Possibly be an error when you make a change here It will think that this code is also been affected and it won't find it So that is one of the limitations that these code insertions that you do either by replacing or inserting as Chunk of text script can only be inserted up to eight lines apart [00:12:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m34s) From each other So let's do an insertion over here Ok so we got that inserted there I did put a comment And let's save that And now let's compile Ok before we install it we can just again go check Whether everything was done as expected and yes the insertion was grabbed it was Added to the database and it is there Ok [00:14:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m04s) It has hash target obviously with insertion we only need where it starts not where it ends And so We can close that Now simply install that component Let's go look at the code Ok so this added the replacement Script Change it from replace to replaced It's added the inserted script From insert to inserted it [00:14:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m34s) Now if you want to make a change to it we're again Just add these diamonds here Make our change Save the file of course and then Then let's compile Let's check whether the work was updated Great it's updated the work in the database So let's install the component Ok let's go look at the code again Wonderful it's added it back All seems well [00:15:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m18s) Now We are working on another part of this implementation that for if so for some reason this code above it Changes It will give you a notice On compilation That there is been a change to the fingerprint and it could not find the insertion area It will still add the code on the line number But it will be escaped So that it doesn't change or hurt any of the code that still there The same goes with replacement code [00:15:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m50s) Since it is replacing code It is a little bit more tricky So we'll still add it into the line but we will not remove the old code Anyway I'm still going to be working a bit on that it needs some fine tuning I would like your feedback if you think There's a better way I'm always open for ideas Reality is We are very happy to announce that component builder can now Automatically extract custom code from your Component while In development [00:16:21](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m21s) Will add a switch that when your ready to distribute your component You could simply say you know that it's no longer in production And then when you compile it will actually not add these placeholders Anymore Ok well thanks for watching Please give me your comments at Github There is actually an issue open there Called Automatic import of custom code during compilation And [00:16:51](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m51s) You'll see that Yeah there's quite a few been said you can simply add your your comments and feedback to this ticket Or to this issue it's issue 37 Since the tutorial be on YouTube possibly by the time you view it closed but You're still welcome to go and make any comments on the closed issue if you like Anyway thanks for watching goodbye diff --git a/032-JCB-manual-custom-code-implementation.md b/032-JCB-manual-custom-code-implementation.md index 86c38e9..23ad895 100644 --- a/032-JCB-manual-custom-code-implementation.md +++ b/032-JCB-manual-custom-code-implementation.md @@ -1 +1 @@ -Automatic import of customer code during compilation This is one of our latest features there's been added to the JCB Component And I'm happy to demonstrate it to you now since all it's functionality is in place Also explain to use some of the limitations that currently still exist And hope that it will become A very useful tool To all of you out there Ok so First what does it do Well Is actually a little mutated from what it's original intent was And it's become two things really so the first thing is And this is obviously what was in it Intended Is that you would be able To add Code To your component once it's been compiled and installed Called into that same Jamila website That you be able to Go into that code And with a few placeholders Actually add code That once you compile the component again JCB with dynamically grab that code extracted into It's database stored there F&i on forward Continue to add it back in Into the component every time Now The way we've done that As we have not used the line numbers As the main Way of determining whether at code must be at it because of the reality that line numbers Always will change You know you might have let's say It's a daylight let's say the custom code that you're adding You said line Hundred 5 And if you make it change it lying 20 Then that Means all the code moves down of course and now we don't know where to add your code Without either riding over or pressing it before and You know there's all kinds of complication So the only way we could resolve that Is to create What we initially call the fingerprint But later became Hash Reference of the code a few lines of code above the The the custom script And a few lines of code below the gases Now It varies from how many lines it Uses And there is a reason for it I'm not gonna Boy with the The detail If you want to see how we do it there is actually The code is open source so you can actually go look at it So there is a function In the I get file which is part of the Compile a set of Files So The functions name is Search file content And it's in this function that it really goes through every line of the code That is already on The Joomla website and then when it finds it it's adds it 2 in a row which eventually gets safe to do they device So this is the airlines that actually does the work Obviously there's lots of things that works With this this function But this is the Yeah this is the centre of Of everything Obviously I'm very sure there are better ways to do this And so we will constantly improve this as others make And Make sure that it remains stable But to to explain why it sometimes Uses more or less of the lines above it should never use more than 8 lines Because basically Yeah it is packing the fingerprint Taking the line content putting it into an array And every time It passes it shakes where the letter A You know if it's greater than 10 We cut it down to 6 Ok And this continues to happen over and over and over because we don't want this fingerprint array to become bigger Then let's say 10 lines And at some point when we find A placeholder we actually take that Fingerprint Array And we we create A a hash From it And then we store that has into the database So that means That amount of lines are changing Because it could be a with just cleared the air a and we are at 6 lines And then we had a 7th and now we find a place holder and everything happens Obviously there are two ways in which the code is add it Ok and I think I think Explain that in the Privacy tauriel but I can do that again here Quickly It's Oh here we go In that same file there is a comment With top Which gives their explanation Of the place holders How busy the place holders these these This Axis year Must be Asterix I like that one And they get This is the one with which you would start either to insert or to replace there There is also no time get up about this which may be Wood See more logical Let's go there So here we are and Get up It's an issue 37 if you want to go look at it Under the Joomla component I'm good up The component Builder on get up so Basically to start Inserting code you would use this as a placeholder And then your code Obviously on a new line And then when you're finished this would close that code block but sometimes you don't want it insert code You wanna actually Place code that was generated by JCB And then you'd use to replace code placeholder And then again Use this one to end the code block Now when component Builder On compilation discovers these tags They get converted to from insert to inserted and from replaced from Replace to be replaced And It adds it back with out this diamond In between those Rihanna dollar signs And inserted Text or replace text It removes them because basically by doing that it means that this Score doesn't need to be updated The moment to add those Tupac In there between those 2 Values Then the next time component Builder compiles It actually knows ok this piece of code I need to check again and update Whatever is in the database because it's been changed This diamond here tells it There is a change you need to update Now You see that now there is this new number being added next to the The code That number Is actually the ID Of the data Database Column sorry Row the database row That JCB Is Actually stored the code in So if you change this number You gonna Yeah you gonna have a problem So don't change this number JCB put this number in Totally can Basically know where to go update the code in the database so The once you've made any changes to the code you would simply at this diamond back in that's quite important otherwise it will not be Be passed and it will be overwritten by what's in the Database So That's really it that was the initial purpose of this new feature was to be able to in the air Editor create code and then on the fly have it become part of the JCB Infrastructure For your component And then in the future it will continue adding that code back in Without you having to write it Or Remembered When anyway And if you wanna change the code you just add 2 Is diamonds I therefore the insert or for the replace depending on what you did And it will automatically there no there's been a change and it will first update what is in the data Bass and then store it back Into the new compiled version So That is exciting in itself I realise It's a It's a real stunning new feature We have been doing some teething on some of its implementation if you even read down here There's some comments and things we are at the moment at version To which is not yet released I'm busy working on it Because this new version 2 Sea Point Sorry 2.3.2 Will include The extra feature which wasn't Ever Really discussed here on the Forum Because it was a feature that I've been Hoping for Quite some time You know I've actually build quite a number of components with Tracy CB by now And I've always had this issue that I would develop a very smart Function A custom script obviously inside of some view or some field or somewhere In JCB and then I would like to use it again elsewhere But then I have to copy it And your pasted there And it will happen that I would improve it there you know it At this through thing there and I Sort of debug version Improve the whole function the whole maybe just pieces script or whatever I just improves it And then it where I took it from does I need to know copy again back there in it Let's always this Copy and move and then obviously there's variables inside that needs To be different names And This always been a Yeah Very unpleasant Experience And so since I know of object-oriented concepts I've always wondered Is there a way for me to with JCB create the Same kind of In a small way of course But give that some kind of functionality And so when this new improvement came along Immediately thought Well yes there is actually there is a Is a way for us to make this work for both both of these are aspects so what did we do Well I See where we I created The option for you too Hi there I used the hash ordination Which is the one I've just explained or to use the JCB manual JCB manual to setup custom code The JCB manual Will do exactly that It will literally create The option For you To take This place holder For example And I have a a field let me open it Ok sorry about that Where Have You jumped there I had to open the field So basically have a field here with which I upload images cereal drag and drop Field is actually and note as you can see but I'm using some HTML in the Das Description and I've added some JavaScript To this footer of wherever does field is being used So Basically this code Is used to upload Or two it's part of the process this much more code but this is what I need to read Use quite often And so Improve this in many areas and then I would always have to come back here and there are certain Ask a sorry text The difference from each Place for example that word Pisa It's a bit different Everywhere else and the word image sometimes it must be him Images and not just image And so what I've done now is I've actually taken This code I've added it to a custom code Obviously I have said this is Jason B manual And I everywhere where I want Dynamic Script updates I've added the Arc values If You Wanna Waste and more about the Ark value Just read this note above here for basically in To make to say it simply Arc These are areas alike placeholders And I can pass strings or Values Via this custom Code placeholder and it gets updated on the fly during Compliation everywhere where I used this Code snippet else in elsewhere in in JCB So this This gives me a little bit of that Object orientated Feeling where I write a function or a piece of script once And then I can reuse it everywhere else And simply update the values being passed to it so it's it's by far Far not Not error proof there if you Obviously you can't use any commas in these values and you can't use any plus signs In these values It needs to be One word It can have a dollar sign if you wanna actually have it Place A Dollar Sign symbol in the code but it obviously doesn't Execute the string that you pass so it will literally just pasted in Wherever you've placed this our place holder So you have got you can add as many Values to this custom code I'm in our values As you want but always make sure that they're mounted values that is in the code must Correspond to the Mount of Ali's that you are passing to it Otherwise you would end up having a certain Area of the code the art Placeholder will not be replaced With anything it will stay Like that If there doesn't have a value for it Ok so now what I'm doing is back into the field I basically At the place holder here Since it is Id1 obviously it's that one number one and I am passing three values to it Image image and teaser Which will then correspond to the replacing art values here So that 01 would be image This one value here would be image and this one would be teaser So it will actually replace it on compilation and now I'm able To reuse this code anywhere else In N j c b So far I obviously have saved this previously I'm gonna just close it now and just open another one I've got one here called poster Which is basically doing the same thing And so now I'm also passing image image and then poster so That means now on this Area It will actually Change that second Arc value which is actually the third one It will update it 2 poster instead And so I have Somehow the ability to now Add dynamic Code in custom code which can be reused all over JCB The only negative thing currently Is that This kind of code that actually has Dynamic values past To it Will not be updated By any changes you make in the editor outside of JCB so if you think about it Two functions you'd realise that they do not fully merge at this stage But Let me say this if you Have a snippet of code which has None of these Ark For example if you only used It like this Without any place holders like that Sorry without any extra values now that code will be actually Replaced If you make any changes to it in the editor So it will Start behaving like the initial implementation it it will place it back into the component With that inserted tag above it and if you put the diamond in like we explained in her Forget this insert it tag sorry not that one this one So if you if you have a custom code To which you not passing any values Then it will add this insert it around it and you can then in the editor Add a diamond in there so that looks like this And then on compilation it will update that code in JCB and then place it back into The new compiled component So That still works And I think it's amazing that it does but Unfortunately the moment you pass any arguments to it Bikes so then we know that there are Ark placeholders in the Script like that And since the script is now being used at multiple areas with multiple values Now let's say you change one of them You don't really want it to replace the the database script because How will we know where these are placeholders should be placed The code at that stage has nothing no reference whatsoever to these are values Now there is an idea busy formulating Which we would Ideally Move All the Arc values Up Above your script Like this Maybe put some Convention of Arcs Hero weight Like that and then ask and then equal And then wait sorry Then change this to Value Bar this case because it's JavaScript And That could possibly start resolving the issue I'm still working on it which then we would only really not update this area In the data in the database But update the whole rest so you would then in that case use value Where ever ask 0 is to be found Like that Then we need only take care of this area and this area can be done Weekly updated I haven't actually Find a complete Satisfaction with a solution I'm still working on it But I can guarantee you That it is something I would like to be able to do is to make a change to it in the editor and it all Also updates it here in the database I think that would be excellent What for now Any scored with arcs As long as this note remains here I think we reset here that if there is any change to these aromatase Oceans These notes will change So the next time you open it and you see the notice different you would be as happy as we are with the Advance and so that that is really the other Feature that we've now add Basically creating custom code and then we using it across Multiple areas of your component Without Without the opener the The old hole complexity of Reading to updated every where again obviously you need to know your pH P and whatever language you are Targeting with this custom Code well enough So did you Buy this place holders and buy everything else But it actually works If it does not work that debugging and everything unfortunately is is your response 30 there is another thing that is still functional though I think I didn't mention it Yet and that's the component placeholder And of this the view placeholder if if this specific script Is gonna end up somewhere under a specific View This one actually doesn't Wait it does actually because your field script this field script it gets ad Add it to the view footer right so Then you have a view placeholder which basically is just also three brackets View Like that Am3 bracket So that's how you could then do a view Dynamic update Of anything you know if you if you need to use to view a string name anyway Where in the script ok so that means you have component Obviously with the uppercase And the op all uppercase and all that Variations And you have the view unfortunately only That current view that is being targeted Will be added to that place holder In lowercase so that that is Demonstrating the Well I haven't demonstrated actually actually demonstrated So we have got these there I'm just gonna not save it because None of the changes here is relevant And then I will compile this now And then In the code show you where it's been added Ok A component that it's Using That at the moment His registry Ok so I'm gonna install it now So let's go look at the code where it should have been added So in the code we see there the image is being updated with image Teazers been placed there images been placed There As well as in all the other areas where we had those are placeholders they've all been updated And the code itself has been inserted And the correct area Well That is custom code in a little different implementation of it We've called that The JCB manual option If you wanna know more about the hash automation option Then please watch the previous two Tutorial On YouTube Thank you for watching \ No newline at end of file +Automatic import of custom code during compilation This is one of our latest features that's been added to the JCB component [00:00:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m16s) And I'm happy to demonstrate it to you now since all it's functionality is in place Also explain to you some of the limitations that currently still exist And hope that it will become A very useful tool To all of you out there Ok so First what does it do Well Is actually a little mutated from what it's original intent was And it's become two things really so the first thing is And this is obviously what was initially [00:00:52](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m52s) Intended Is that you would be able To add Code To your component once it's been compiled and installed into that same Joomla website That you be able to Go into that code And with a few placeholders Actually add code [00:01:21](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m21s) That once you compile the component again JCB with dynamically grab that code extracted into It's database store it there And from there on forward Continue to add it back in Into the component every time Now The way we've done that As we have not used the line numbers As the main [00:01:50](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m50s) Way of determining where that code must be added because of the reality that line numbers Always will change You know you might have let's say let's say the custom code that you're adding You said line 105 or something And if you make it change at line 20 Then that Means all the code moves down of course and now we don't know where to add your code [00:02:19](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) Without either writing over or placing it before and You know there's all kinds of complications So the only way we could resolve that Is to create What we initially called the fingerprint But later became a Hash Reference of the code a few lines of code above the The the custom script And a few lines of code below the customs [00:02:50](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m50s) Now It varies from how many lines it Uses And there is a reason for it I'm not gonna Bore you with the The detail If you want to see how we do it there is actually The code is open source so you can actually go look at it So there is a function In the A get file which is part of the [00:03:22](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m22s) Compiler a set of Files So The functions name is Search file content And it's in this function that it really goes through every line of the code That is already on The Joomla website and then when it finds it it's adds it to in array which eventually gets safe to do they device So this is the lines that actually does the work [00:03:53](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m53s) Obviously there's lots of things that works With this this function But this is the Yeah this is the centre of Of everything Obviously I'm very sure there are better ways to do this And so we will constantly improve this as others makes suggestions And Make sure that it remains stable But to to explain why it sometimes [00:04:27](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m27s) Uses more or less of the lines above it should never use more than 8 lines Because basically Here it is packing the fingerprint Taking the line content putting it into an array And every time It passes it shakes where that array You know if it's greater than 10 We cut it down to 6 Ok [00:04:54](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m54s) And this continues to happen over and over and over because we don't want this fingerprint array to become bigger Then let's say 10 lines And at some point when we find A placeholder we actually take that Fingerprint Array And we we create A a hash From it And then we store that hash into the database [00:05:24](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m24s) So that means That amount of lines are changing Because it could be or we have just cleared the array and we are at 6 lines And then we add a 7th and now we find a place holder and everything happens Obviously there are two ways in which the code is added Ok and I think I have Explain that in the Previous tutorial but I can do that again here Quickly Let's see where is it [00:05:56](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m56s) Oh here we go In that same file there is a comment Way at the top Which gives their explanation Of the place holders Now obviously the place holders these these These X s here Must be Asterixs There like that one And they get [00:06:26](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m26s) This is the one with which you would start either to insert or to replace There is also note on GitHub about this which may be Would See more logical Let's go there So here we are at Github It's on issue 37 if you want to go look at it Under the Joomlal component On GitHub [00:06:55](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m55s) The component Builder on GitHub so Basically to start Inserting code you would use this as a placeholder And then your code Obviously on a new line And then when you're finished this would close that code block but sometimes you don't want it insert code You wanna actually Place code that was generated by JCB And then you'd use the replace code placeholder And then again Use this one to end the code block [00:07:25](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) Now when component Builder On compilation discovers these tags They get converted to from insert to inserted and from replaced from Replace to be replaced And It adds it back with out this diamond In between those You know dollar signs And inserted Text or replaced text [00:07:55](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m55s) It removes them because basically by doing that it means that this code doesn't need to be updated The moment to add those two back In there between those 2 Values Then the next time component Builder compiles It actually knows ok this piece of code I need to check again and update Whatever is in the database because it's been changed [00:08:25](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m25s) This diamond here tells it There is a change you need to update Now You will see that now there is this new number being added next to the The code That number Is actually the ID Of the data Database Column sorry Row the database row [00:08:49](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) That JCB Is Actually stored the code in So if you change this number You gonna Yeah you gonna have a problem So don't change this number JCB put this number in So that he can Basically know where to go update the code in the database so Once you've made any changes to the code you would simply at this diamond back in that's quite important otherwise it will not be [00:09:18](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s) Be parsed and it will be overwritten by what's in the Database So That's really it that was the initial purpose of this new feature was to be able to in the Editor create code and then on the fly have it become part of the JCB Infrastructure For your component And then in the future it will continue adding that code back in Without you having to write it Or [00:09:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m47s) Remembered or in anyway And if you wanna change the code you just add these Diamonds either for the insert or for the replace depending on what you did And it will automatically then know there's been a change and it will first update what is in the data Base and then store it back Into the new compiled version So That is exciting in itself I realize [00:10:12](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m12s) It's a It's a real stunning new feature We have been doing some teething on some of its implementation if you even read down here There's some comments and things we are at the moment at version 2.3.2 which is not yet released I'm busy working on it Because this new version 2 3. Sorry 2.3.2 Will include [00:10:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m41s) The extra feature which wasn't Ever Really discussed here on the Forum Because it was a feature that I've been Hoping for Quite some time You know I've actually build quite a number of components with JCB by now And I've always had this issue that I would develop a very smart Function A custom script obviously inside of some view or some field or somewhere In JCB and then I would like to use it again elsewhere [00:11:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m15s) But then I have to copy it And go pasted there And it will happen that I would improve it there you know it Add this little thing there and I Sort of debug this Improve the whole function the whole maybe just pieces script or whatever I just improves it And then it where I took it from does I need to know copy again back there and it It's always this Copy and move and then obviously there's variables inside that needs To be different names [00:11:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m47s) And This always been a Yeah Very unpleasant Experience And so since I know of object orientated concepts I've always wondered Is there a way for me to with JCB create the Same kind of In a small way of course But give that some kind of functionality [00:12:09](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m09s) And so when this new improvement came along Immediately thought Well yes there is actually there is a Way for us to make this work for both both of these aspects so what did we do Well I Let me see where we I created The option for you to Either I used the hash automation Which is the one I've just explained or to use the JCB manual [00:12:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m47s) Now JCB manual if you setup custom code The JCB manual Will do exactly that It will literally create The option For you To take This place holder For example And I have a field let me open it [00:13:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) Ok sorry about that Where Have a few jumps there I had to open the field So basically I have a field here with which I upload images so that will drag and drop Field is actually and note as you can see but I'm using some HTML in the Description and I've added some JavaScript To this footer of wherever does field is being used So Basically this code [00:14:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m16s) Is used to upload Or to it's part of the process this much more code but this is what I need to Reuse quite often And so Improve this in many areas and then I would always have to come back here and there are certain Ask a sorry text The differs from each Place for example that word teaser It's a bit different Everywhere else and the word image sometimes it must be [00:14:48](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m48s) Images and not just image And so what I've done now is I've actually taken This code I've added it to a custom code Obviously I have set this is JCB manual And I everywhere where I want Dynamic Script updates I've added the Arg values If You Wanna understand and more about the Arg values Just read this note above here for basically in To make to say it simply [00:15:19](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) Arg These arg areas is like placeholders And I can pass strings or Values Via this custom Code placeholder and it gets updated on the fly during Compliation everywhere where I used this Code snippet else in elsewhere in in JCB So this [00:15:44](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m44s) This gives me a little bit of that Object orientated Feeling where I write a function or a piece of script once And then I can reuse it everywhere else And simply update the values being passed to it so it's it's by far not Not error proof there if you Obviously you can't use any commas in these values and you can't use any plus signs In these values It needs to be [00:16:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m15s) One word It can have a dollar sign if you wanna actually have it Place A Dollar Sign symbol in the code but it obviously doesn't Execute the string that you pass so it will literally just pasted in Wherever you've placed this arg place holder So you have got you can add as many Values to this custom code I'm in arg values As you want but always make sure that they're mounted values that is in the code must Correspond to the amount of values that you are passing to it [00:16:54](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) Otherwise you would end up having a certain Area of the code the arg Placeholder will not be replaced With anything it will stay Like that If there doesn't have a value for it Ok so now what I'm doing is back into the field I basically Add the place holder here Since it is Id1 obviously it's that one number one and I am passing three values to it [00:17:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) Image image and teaser Which will then correspond to the replacing arg values here So that 01 would be image This one value here would be image and this one would be teaser So it will actually replace it on compilation and now I'm able To reuse this code anywhere else In in JCB So far I obviously have saved this previously I'm gonna just close it now and just open another one [00:18:03](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s) I've got one here called poster Which is basically doing the same thing And so now I'm also passing image image and then poster so That means now on this Area It will actually Change that second Arg value which is actually the third one It will update it to poster instead And so I have [00:18:29](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m29s) Somehow the ability to now have dynamic Code in custom code which can be reused all over JCB The only negative thing currently Is that This kind of code that actually has Dynamic values past To it Will not be updated By any changes you make in the editor outside of JCB so if you think about the [00:18:58](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m58s) Two functions you'd realize that they do not fully merge at this stage But Let me say this if you Have a snippet of code which has None of these Arg For example if you only used It like this Without any place holders like that Sorry without any extra values now that code will be actually Replaced If you make any changes to it in the editor [00:19:32](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m32s) So it will Start behaving like the initial implementation it it will place it back into the component With that inserted tag above it and if you put the diamond in like we explained you know it will get this inserted tag sorry not that one this one So if you if you have a custom code To which you not passing any values Then it will add this inserted around it and you can then in the editor Add a diamond in there so that looks like this And then on compilation it will update that code in JCB and then place it back into The new compiled component [00:20:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m16s) So That still works And I think it's amazing that it does but Unfortunately the moment you pass any arguments to it Like so then we know that there are Arg placeholders in the Script like that And since the script is now being used at multiple areas with multiple values Now let's say you change one of them You don't really want it to replace the the database script because How will we know where these arg placeholders should be placed [00:20:53](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) The code at that stage has nothing, no reference whatsoever to these arg values Now there is an idea busy formulating Which we would Ideally Move All the arg values Up Above your script Like this Maybe put some [00:21:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m14s) Convention of arg's you know, wait Like that and then arg and then equal And then wait sorry Then change this to Value Bar in this case because it's JavaScript And That could possibly start resolving the issue [00:21:45](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) I'm still working on it which then we would only really not update this area In the data in the database But update the whole rest so you would then in that case use value Where ever arg0 is to be found Like that Then we need only take care of this area and this area can be done dynamically updated I haven't actually Find a complete Satisfaction with this solution [00:22:22](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) I'm still working on it But I can guarantee you That it is something I would like to be able to do is to make a change to it in the editor and it Also updates it here in the database I think that would be excellent But for now Any code with args As long as this note remains here I think we said here that if there is any change to these limitations These notes will change So the next time you open it and you see the note is different you would be as happy as we are with the [00:22:56](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m56s) Advance and so that that is really the other Feature that we've now add Basically creating custom code and then reusing it across Multiple areas of your component Without Without the The old complexity of needing to update it every where again obviously you need to know your PHP and whatever language you are Targeting with this custom [00:23:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m28s) Code well enough So that you By this place holders and by everything else that it actually works If it does not work that debugging and everything unfortunately is is your responsibility there is another thing that is still functional though I think I didn't mention it Yet and that's the component placeholder And the view placeholder if if this specific script Is gonna end up somewhere under a specific View This one actually doesn't [00:24:02](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m02s) Wait it does actually because your field script this field script it gets added to the view footer right so Then you have a view placeholder which basically is just also three brackets View Like that and three brackets So that's how you could then do a view Dynamic update Of anything you know if you if you need to use to view a string name any where in the script okay so that means you have component Obviously with the uppercase [00:24:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s) And the all uppercase and all that Variations And you have the view unfortunately only That current view that is being targeted Will be added to that place holder In lowercase so that that is Demonstrating the Well I've demonstrated actually actually demonstrated So we have got these there I'm just gonna not save it because None of the changes here is relevant [00:25:11](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m11s) And then I will compile this now And then In the code show you where it's been added Ok A component that it's Using That at the moment is registry Ok so I'm gonna install it now So let's go look at the code where it should have been added [00:25:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) So in the code we see there the image is being updated with image Teasers have been placed there images been placed There As well as in all the other areas where we had those arg placeholders they've all been updated And the code itself has been inserted in the correct area Well That is custom code in a little different implementation of it We've called that The [00:26:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m14s) JCB manual option If you wanna know more about the hash automation option Then please watch the previous Tutorial On YouTube Thank you for watching diff --git a/033-Export-Import-of-fully-mapped-components.md b/033-Export-Import-of-fully-mapped-components.md index e3a071c..739e2b2 100644 --- a/033-Export-Import-of-fully-mapped-components.md +++ b/033-Export-Import-of-fully-mapped-components.md @@ -1 +1 @@ -Readings We're happy to announce a new feature That's been added To be advanced component builder for Joomla This feature Is a feature I suppose can Can become very Useful In the future of JCB It allows you to export A component Out of JCB And not only The components information but everything attached to it So If a component has Admin views link to it and does admin views have Fields link to it and those Fields Hatfield types linked And Dosa Component has site views in custom admin views And those suck sitefusion custom admin views has templates and layouts And dynamic gets And all these various linked concepts to a component Is exported Now The way that you will export a component Is you simply click on Diss export component And obviously you need to select The component or components that you would like to export Now There's a few things to say when When we want to export a component There are two ways in which we export a component one is An encrypted way And the other is non encrypted Let me show you that in the code So I like you to understand exactly how it works So we have a method here called smart export Builder Now Smart export builder gets fired at the very end Of the Compilation or rather the built Where all the data has now been extracted from the database And it's now 1 Big array Of objects Now Basically in this function Called Get Smart export Is where this data extrusion takes place During this process We actually Take A I will take a Count of a specific value And that values name is export key So in this for each We are looping Through the are the components that you've selected so if you selected more than one Then it will check whether there is an export key For that component now let me show you where that is a set in the user interface When you open a component It has a tab called settings And At the bottom of the right-hand column it has a new A field called export key How you can put any value in here If you leave this value empty And you export only this component Then the component will not be encrypted If you add A value to this field And you export this component it will encrypt That in Kop that components Data The database values It will not encrypt Attached files or folders or images That are part of this component it will only encrypt The data from the database Now Having said that If you select multiple components And any one of them has a key Then it will encrypt All the components Ok And I'll explain again in the code how this Is done So we go back to the code Hey in the code Basically were asking does this component have an export key If it's true and it is a string We actually Disc this key is encrypted in a database So we first check That it is able to be decrypted And then we decrypt the key And then we add it To the key array With the components ID So basically we are building up an array Of each components key Know if a component does not have a key It simply ignored this little script and it continues building its data set Then Once all the data set of all components of finished We basically get to the Smart export builder I set spoke coffee you know When we started looking at the code Now in this Smart export builder we are simply asking have we found any keys If we have found any keys We are gonna explode Implode The array And converted to MD5 string Very simple We will then use this MD5 string With An EAP s Encryption Cypher To lock the data So there is the data No above here we already changed the whole dataset To a serialised string So we have a string in this variable And here we are basically encrypting the whole string And now In this variable we have the encrypted value If we don't have any keys Even if that means if none of the components that was selected Had any kiss set Then it will default to Simply Do a base64 encode And that is swell then gets written to do the file That's part of the package So that is how It exports the data I'm too much about the actual mechanics that's happening here In the bottom of the file You're welcome to obviously look through it And if you see any room for improvement You're welcome to make a pull request This this is obviously the first try Ok so it exports the data and then checks whether we have any keys So if you have For example exporting 5 Components And all five components have keys In all 5 keys will Basically create a very long String And then that whole string will be changed into an MD5 string which is 32 characters And that 32 characters is then used to encrypt the data No not to worry This actual key Which we then end up using to do the encryption Will be shown to you in the interface after the you know after the the data is being export Ok so let's go back to To the to the user interface and let's export a component Ok so I have this component And it has a key And I have other components that has no keys at this stage So I'll select this one as a demonstration And then I'll click export component And as you can see A generated a key for me Which I can then use To import This package into another JCB I can import it into the same JCB But it's obviously not necessary So I could use it as a backup Now It is storing the compiled package in The temporary folder at this stage I am Working too Determine whether we should actually make this placement of the file the namek So that you could change it Because I think it will be ideal if it automatically becomes a kind of backup method So we even thinking of setting up a timer that could run backups Of your components using this method Anyway that's future planning that's not Gotta be happening Soon though Ok so You have an exported component At the moment if you if you are data sets on not too big and your memory Settings on your PHP and so forth is allowing this kind of compilation You could select all components And Export them The same will be the result Since I have only one component set with a key They all will be Basically encrypted With the same key And they all be stored in this package so I have just now While talking to you Exported all my components Into this one package How to demonstrate the importing of this data set I have a Blank website ready So let's go there So here's my blank website Basically it has no special JCB components The first thing I'll do is I'm gonna install JCB I'm gonna install it from From get up So I'm going to get Hub And then I will Open the releases And I'll just copy the link To this latest release And go back here Paste that in here And basically install it Ok then still Asian was successful Now I'm gonna go to Component Builder Then I'll open the components And as you can see I have only the demo component here And I would like to basically Move all these components that I have Over to this new install Ok So I'm gonna click on import components Then I'm gonna browse to that The package that we've just exported And then I'm gonna upload it Now We have two features here This Force local update Basically what it will do Is on normal circumstances if you do a import The The import function looks at the data that are currently in this In this current JCB install So for example We talking about field types we talking about Fields we talking about admin views and side views If it finds a side view that is being installed That it is already in the current Database It looks at the last modified date And then by that determines whether The current installed version is newer If it's newer It will by Default ignore the new data and not install it Now sometimes you might get a package where you would like to force that it updates The current data even though it may be all the data So this is why we have to switch you can then click yes to force the update Now We have a key for this package so we'll leave this to yes I'll basically is come over here and copy that key This key will then always be necessary if you're importing this package And that will be it and we'll click continue It might take a time since this is quite a huge dataset So you could just patiently wait And it last it is installed it tells us that the install is being successful You might get these warnings Now what is warnings is really telling you Is that During the install Obviously you realise that Lots of ideas Will change I mean We are working with a database that creates ID is as the new item is added And since these are the ID is used to link into the various components and views and places All these ideas must be remapped Now We have been able to actually Find a very well formulated algorithm to To resolve this problem So it remaps all the ideas But sometimes There are certain ideas that hasn't you know it's not possible to remap And so we are basically telling you hear about them And so you could see that the target field in the admin views Has a mismatch in the field With ID 244 now you can go back to the old install And try and find out what happened there And most the time when I have reviewed this usually it is because that specific field Is no longer published or is no longer available some reason So this is just giving you a heads up of any changes that may have occurred And then you can actually go to these various places and manually Fix them Most of the time these warnings will not show and everything will just say All is ok But if there is warnings and errors to Simply read the messages slowly and close Closely And I'm sure you'll be able to resolve it Quite easily Well that is a demonstration of the new feature Now just to show you that it actually does work I'm didn't mention before but it actually Removes all the customer files as well as custom folders As well as all the images for admin view side view and Wherever To the new install so it moved it into its right place So if that is true we should be able to go to the compiler Select any of the components And It should load that components image share I should be able to just click Ok compile And it should be able to Simply compile that component After compilation I could simply click installing the component Obviously if this component was correctly mapped Previously And I would to go to that component now I would see that Everything about the component is right and it works well And That is really This new feature in action I really hope that it will be as useful to you as it's gonna be to me And that you will have fun with it I must tell you I suppose that at some point We could even start looking at selling map components I have a number of components that was made for specific Purposes But could be easily adapted for others And so I'm starting to look at the idea of selling map to components Obviously It's a little difficult because it's basically selling The rights to it in a way that you could resell it So I'm not sure what would be the price tag all that Anyway We'll see Thank you for watching \ No newline at end of file +Greetings We're happy to announce a new feature That's been added To the advanced component builder for Joomla [00:00:10](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m10s) This feature Is a feature I suppose can Can become very Useful In the future of JCB It allows you to export A component Out of JCB And not only The component's information but everything attached to it [00:00:34](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) So If the component has Admin views linked to it and those admin views have Fields link to it and those Fields have field types linked And those Component has site views and custom admin views And those site views and custom admin views has templates and layouts And dynamic gets And all these various linked concepts to a component Is exported [00:01:09](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m09s) Now The way that you will export a component is you'd simply click on this export component And obviously you need to select The component or components that you would like to export Now There's a few things to say when When we want to export a component There are two ways in which we export a component one is [00:01:36](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s) An encrypted way And the other is non encrypted Let me show you that in the code So I like you to understand exactly how it works So we have a method here called smart export Builder Now Smart export builder gets fired at the very end Of the Compilation or rather the built Where all the data has now been extracted from the database [00:02:05](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m05s) And it's now one Big array Of objects Now Basically in this function Called Get Smart export Is where this data extrusion takes place During this process We actually [00:02:25](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m25s) Take A we take a Count of a specific value And that value's name is export key So in this for each We are looping Through the components that you've selected so if you selected more than one Then it will check whether there is an export key For that component now let me show you where that is a set in the user interface When you open a component [00:03:00](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m00s) It has a tab called settings And At the bottom of the right-hand column it has a new A field called export key How you can put any value in here If you leave this value empty And you export only this component Then the component will not be encrypted If you add A value to this field [00:03:32](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m32s) And you export this component it will encrypt That component's Data The database values It will not encrypt Attached files or folders or images That are part of this component it will only encrypt The data from the database Now Having said that [00:03:54](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m54s) If you select multiple components And any one of them has a key Then it will encrypt All the components Ok And I'll explain again in the code how this Is done So we go back to the code now in the code Basically we are asking does this component have an export key [00:04:16](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m16s) If it's true and it is a string We actually this key is encrypted in a database So we first check That it is able to be decrypted And then we decrypt the key And then we add it To the key array With the component's ID So basically we are building up an array [00:04:41](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m41s) Of each component's key now if a component does not have a key It simply ignores this little script and it continues building its data set Then Once all the data set of all components are finished We basically get to the Smart export builder I set spoke of you know When we started looking at the code Now in this Smart export builder we are simply asking have we found any keys If we have found any keys [00:05:15](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m15s) We are gonna explode sorry, Implode The array And convert it to MD5 string Very simple We will then use this MD5 string With An AES Encryption Cypher To lock the data [00:05:37](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) So there is the data Now above here we already changed the whole dataset To a serialised string So we have a string in this variable And here we are basically encrypting the whole string And now In this variable we have the encrypted value If we don't have any keys Even if that means if none of the components that was selected Had any keys set Then it will default to Simply [00:06:09](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m09s) Do a base64 encode And that is swell then gets written to the file That's part of the package So that is how It exports the data I'm too much about the actual mechanics that's happening here In the bottom of the file You're welcome to obviously look through it And if you see any room for improvements You're welcome to make a pull request This this is obviously the first try [00:06:43](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m43s) Ok so it exports the data and then checks whether we have any keys So if you have For example exporting five Components And all five components have keys In all five keys will Basically create a very long String And then that whole string will be changed into an MD5 string which is 32 characters And that 32 characters is then used to encrypt the data [00:07:13](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m13s) Now not to worry This actual key Which we then end up using to do the encryption Will be shown to you in the interface after the you know after the the data is being exported Ok so let's go back to To the to the user interface and let's export a component Ok so I have this component And it has a key And I have other components that has no keys at this stage So I'll select this one as a demonstration [00:07:52](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m52s) And then I'll click export component And as you can see A generated a key for me Which I can then use To import This package into another JCB I can import it into the same JCB But it's obviously not necessary So I could use it as a backup Now [00:08:19](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) It is storing the compiled package in The temporary folder at this stage I am Working to Determine whether we should actually make this placement of the file the dynamic So that you could change it Because I think it will be ideal if it automatically becomes a kind of backup method So we're even thinking of setting up a timer that could run backups Of your components using this method Anyway that's future planning that's not [00:08:55](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m55s) gonna be happening Soon though Ok so You have an exported component At the moment if you if your data sets on not too big and your memory Settings on your PHP and so forth is allowing this kind of compilation You could select all components And Export them The same will be the result Since I have only one component set with a key [00:09:26](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m26s) They all will be Basically encrypted With the same key And they all be stored in this package so I have just now While talking to you Exported all my components Into this one package Now to demonstrate the importing of this data set I have a Blank website ready [00:09:49](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m49s) So let's go there So here's my blank website Basically it has no special JCB components The first thing I'll do is I'm gonna install JCB I'm gonna install it from From github So I'm going to git Hub And then I will Open the releases [00:10:14](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m14s) And I'll just copy the link To this latest release And go back here Paste that in here And basically install it Okay the installation was successful Now I'm gonna go to Component Builder Then I'll open the components And as you can see [00:10:43](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m43s) I have only the demo component here And I would like to basically Move all these components that I have Over to this new install Ok So I'm gonna click on import components Then I'm gonna browse to that That package that we've just exported And then I'm gonna upload it Now [00:11:13](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m13s) We have two features here This Force local update Basically what it will do Is on normal circumstances if you do a import The The import function looks at the data that are currently in this In this current JCB install So for example We're talking about field types we're talking about Fields we're talking about admin views and site views [00:11:42](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m42s) If it finds a side view that is being installed That it is already in the current Database It looks at the last modified date And then by that determines whether The current installed version is newer If it's newer It will by Default ignore the new data and not install it Now sometimes you might get a package where you would like to force that it updates The current data even though it may be all the data So this is why we have to switch you can then click yes to force the update [00:12:20](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m20s) Now We have a key for this package so we'll leave this to yes I'll basically just come over here and copy that key This key will then always be necessary if you're importing this package And that will be it and we'll click continue It might take a time since this is quite a huge dataset So you could just patiently wait And it last it is installed it tells us that the install is being successful You might get these warnings Now what these warnings is really telling you [00:13:01](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m01s) Is that During the install Obviously you realise that Lots of IDs Will change I mean We are working with a database that creates IDs as the new item is added And since these are the IDs used to link into the various components and views and places All these IDc must be remapped Now We have been able to actually [00:13:30](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m30s) Find a very well formulated algorithm to To resolve this problem So it remaps all the IDs But sometimes There are certain IDs that hasn't you know it's not possible to remap And so we are basically telling you here about them And so you could see that the target field in the admin views Has a mismatch in the field With ID 244 now you can go back to the old install And try and find out what happened there [00:14:04](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m04s) And most the time when I have reviewed this usually it is because that specific field Is no longer published or is no longer available or some reason So this is just giving you a heads up of any changes that may have occurred And then you can actually go to these various places and manually Fix them Most of the time these warnings will not show and everything will just say All is ok But if there is warnings and errors just Simply read the messages slowly and close Closely And I'm sure you'll be able to resolve it [00:14:43](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m43s) Quite easily Well that is a demonstration of the new feature Now just to show you that it actually does work I'm didn't mention before but it actually Removes all the customer files as well as custom folders As well as all the images per admin view site view and Wherever To the new install so it move it into its right place So if that is true we should be able to go to the compiler Select any of the components And [00:15:19](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) It should load that components image here I should be able to just click Ok compile And it should be able to Simply compile that component After compilation I could simply click installing the component Obviously if this component was correctly mapped Previously And I were to go to that component now I would see that Everything about the component is right and it works well [00:15:51](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m51s) And That is really This new feature in action I really hope that it will be as useful to you as it's gonna be to me And that you will have fun with it I must tell you I suppose that at some point We could even start looking at selling mapped components I have a number of components that was made for specific Purposes But could be easily adapted for others [00:16:22](https://www.youtube.com/watch?v=lkE0ZiSWufg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m22s) And so I'm starting to look at the idea of selling mapped components Obviously It's a little difficult because it's basically selling The rights to it in a way that you could resell it So I'm not sure what would be the price tag of that Anyway We'll see Thank you for watching diff --git a/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md b/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md index da9e58b..0368070 100644 --- a/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md +++ b/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md @@ -1 +1 @@ -Hi I wanna demonstrate to you How to add a button To your components admin View Either in the list area Or in the edit area of the View No I possibly have touched on this In previous tutorials but I thought Well let's make one tutorial it just deals with that Ok so I have a Blank install of JCB here I just got this demo component Installed Or map and I've been stalled it into this website So if I go to Luke's it just looks as it should Create an item And the Just the Give it some details Say Click save and close and we have an item now you see there's whole Hold on two buttons here and if you go into the test There's also a bunch of buttons here All of them are usually there there there there is not the default buttons So what do you wanna do if you want to Actually create buttons in these areas without custom Kodi You can of course do it with custom coding but there is a JCB way to do it Uno in JCB What is length So let's go back to our Admin views And then we open the admin view called look And you'll see there's a custom buttons area here I click on that We say yes we wanna add custom button They would see that it opens control methods And also list view controller methods Now that were Obviously You need to understand the MVC Your controller your model again your controller and your model Each view has two controllers two models Because it has a listview And it has a edit View The list who has its own controller and method model And the edit view has his own controller and model so depending on where you placing the button It will affect Which model and which controller You need to use I'm not gonna explain much about the PHP being placed in these blocks Because That should be something you know how to do If you don't you need to learn you need to study 2 to work with Joomla API I'd not able to also you know educate you on that now at this stage So you do a custom button you click on adding a button here's your icon you cancel Select any of the icons these are the default Joomla icons that the user support Icon Icomoon or something So you can use that Then the name of the button What you wanna call it so I'm just gonna call it a test for now then the name Name of the controller method So I'm gonna just call that get Tested and Then We'll decide is this gonna be at edit view a Single View Target A list you or both You know where Where must this button show up So I'm gonna do Just 14 First list And then If it's a listview See that says list Target Then We could decide whether this is only a function No I wanted to selection It means that you need to select some items And then click the button For it to actually submit those ideas of the selected items If it is a only a function you don't need to select anything When you click the button a function Will obviously be triggered Which doesn't require you to give it any information So it's basically just gonna Do something And that obviously You need to be able to code Ok so I'm just gonna Use the default The default is actually Very much like selection but it It behaves differently if you Yeah I think the best way to do this is select one of the options Compare the component Eagle look at the code And I'll show you where the code ends up And then you can decide what you wanna do Ok so I'm gonna just save this As a selection in a listview and Save Ok At this stage if we do not add Values to these blocks for some reason it will scream at us so we just had to False lashes Which basically Satisfies it's Requirement of having information I'm gonna add a little method here that's it they gonna redirect us To the dashboard And I'm I'm gonna call it Get tested That that is simply a A controller method it must be public Here we simply checking whether it was submitted from the current website and Then we just gonna redirect To the components dashboard Yeah We not gonna need a mess it now because we just redirecting But if you I will show you that in a minute let me just do this for now And then let's save and close And let's go compile this component So we will just select The demo component from pilot And then re-install it To see the changes I'm gonna go to the component And then to Luke's and I will see there is a new button called test And if we click it It's empty redirect us to the dashboard So that's all it does just redirects us And you can then off the sleeve redirect to anything So that's just a first way of implementing a button in the listview Now that is go back to to editing that the functionality there for the showing you some more Options So just open this again Go to custom buttons Now maybe just add another button We call it single And we again call it something like And The controller method And will leave this to default and then Save So now in the controller method we said we gonna have a function called get done and So here will just put a Public function So this time we will actually get the model and then Do something with it in the model we can also get the Item values Since the moment you click this button you're inside of the item and it automatically submit the Form So we can actually grab those items I values obviously it could be different value Please from what's in the database just keep that in mind because You could change the values then click that button in all actually submit these new changed the L use And yet those values have not been saved To the database And so if you want those values to actually now be in the database you'll need to actually Put it there And That's again I'm not gonna demonstrate how to do that but the model has a safe method And you should actually just Do the necessary sanitation and then Trigger the safe message The safe method and it should store the data So for our purposes I'm just gonna grab the data and Not go through all that I'm just gonna do the verification maybe and And then return back either an error or or success so First we can get the values So now that we have the data we can check Whether the values that we want to use is actually They're unavailable so let's say we wanna make sure that this is already a saved Item Then we least check whether the ID is more than 0 We need to have a name and Then we can check for that And so we can do some checking within the controller Before we took her together model And you know run the function we intend Then we triggered the model we decide what we wanna call a method in the model so I just chose Something random and then we can just create that method in the model area And then dude whatever we wanna do So we Start doing some Logic in the model Set out of above method however Controller Now we busy with the model area Now Do keep in mind that If the model is unsuccessful you wanna do something It's a data set But the model is not being successful You wanna do something And if you data isn't said we also wanna do something So those are the areas where in which can we can add some messages that we wanna give back to the user Tell them what's happening And so In the model we basically just gonna perform our task and when they we have achieved our goal we give back True whether we have failed we give back false and then that would Trigger on messages in the controller So this is just Giving a basic overview of setting up some model controller connected with a button So I'm gonna add some of this code in here welcome to pause the movie and then drop down whatever You'd like to use but the reality is You should actually be able to do this without my help And therefore if you don't know what I'm doing here then please go ghost Google a little more Go find out some more tutorials elsewhere How to create model And controller relationships In July Using it's API The other reality is you can obviously open this model and controller After specific View In your ID and in there you can see whether you know how the code is actually added In what is happening in how is it done And you can educate yourself That wears well Ok I'm just gonna add to code in then Ok so here I've just added some code that you can also reuse And this basically if the work has been done will let the user know it's done If work wasn't done we also let him know If we couldn't even detect The required values then we just throw a major error and Just quit out So That is really The The controller I didn't populate much of the model because Yo you should design your own logic but I do return true so to Give this first message Then we'll go to the ID change it to Falls again to demonstrate You know the response And just play around with the code in the idea To give you a sort of a feel or how to approach it from that Direction ok so we gonna just save this Then go and compile that again Just compile it And then Install the new compiled version And open the component Go to Luke's So we can see how our test button still here if we click it still takes us to the dashboard Now let's open the test Now we have a new button here worked If you click it now it'll basically give us The work was done because our method returns true Now let me open the ID Ok looking at our Controller We see that Down here Somewhere This is the front end Ok there it is Controller First we gonna open the list one which is the plural Virgin And Yeah we see get tested was added And there is a little method Then you should go to the Edit singular one Then get down here is our method And all the functions And JCB as Added to the script to the translation text Very senior looks fine If you now go to the model And we open The the look model We'll see that It has a new method added here somewhere Scroll down Sorry it was way up here I scrolled Fast And so I missed it So just here after get table Hear you're excited our little miss it So now Add this to false And save Go back to gym now And then click over Button again And now it says work was not done Because the method returned false So if we Strange that true again And save then it should work Now let's test out another one Let's also make this Not execute Save this so we can get this error Go back to July Click a button And I would even kicks us out of them item And it says a major errors occurred The reason why it kicked us Completely out of the item didn't check it in Which is actually not ideal but You could fix that By looking at some of the other Controllers And seeing what they do When they want to kick you out You know educate yourself by Looking at some of her how to Muller implements Some of these features Now Ok so We Basically got what we expected change this back safe Go back to the view Open that you again Click Alberton And now we get all is done and good Ok so That is a quick demonstration of adding a list button As well as adding a button inside of the edit View Like I said you could Actually add one button both as a list and inside If you were to go to That specific Button What's the most rate that quickly And we can open it and Then instead of saying list hear you say both and we click Big Save Now We'll always have to Add This method Get tested Also to the Single View like that And then Save And Fun Close out of this Compile But they keep on clicking that Backup So used to doing that And won't work now because I haven't set up to correct path Ok Install it Now let's first go look at the code Maybe help you see where the button is being at it I mean I showed you that controller I showed you the Amit the model But if you go to the view and your open look and you open this WH HTML view HTML PHP And you open you go to add toolbar You'll see that here It actually Has added a custom Button Get done and get tested To the view And It is Basically that is the method That is gonna be cold By this specific button so it's gonna look in In the look controller And get This method That's really how it works It also adds a switch a permission on switch To the button if this specific user doesn't have the right to do the work Button Then it won't show the button And it will also If you Pro carry those permission structures through to your controller It'll stop it even from being executed You know Manually via URL But this that kind of security and implementation you'll need to know how to do that Look at Juma last way of implementing it 2 because you need to in the controller check whether this user has the permission And so you need to know how to check that formation as well ok so That's your showing you how the button gets added into the view And where that code is and you can go look at it Now I'm going back to to Joomla And basically opening our component And we go to Luke's we still have our tested here But now if we open the edit we will see have a got tested here as well And if we click it It will also just take us to the dashboard And perform the same function as it would have If we click There Oh so that is just showing you that you can add one button to both the listview as well The edit view of the backend admin area I hope this will be useful And thank you for watching \ No newline at end of file +Hi I wanna demonstrate to you [00:00:03](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m03s) How to add a button To your components admin View Either in the list area Or in the edit area of the View Now I possibly have touched on this In previous tutorials but I thought Well let's make one tutorial it just deals with that Ok so I have a Blank install of JCB here I just got this demo component Installed [00:00:33](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) Or mapped and I've been installed it into this website So if I go to Looks it just looks as it should and we can create an item And the Just the Give it some details Say Now we click save and close and we have an item now you see there's a whole bunch of buttons here and if you go into the test There's also a bunch of buttons here [00:01:19](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m19s) All of them are usually there those are the default buttons So what do you wanna do if you want to Actually create buttons in these areas without custom coding You can of course do it with custom coding but there is a JCB way to do it You know in JCB quite easily So let's go back to our Admin views And then we open the admin view called look And you'll see there's a custom buttons area here I click on that [00:02:02](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m02s) We say yes you wanna add custom button They would see that it opens control methods And also list view controller methods Now that will Obviously You need to understand the MVC Your controller your model again your controller and your model Each view has two controllers two models Because it has a listview And it has a edit View [00:02:32](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m32s) The list view has its own controller and model And the edit view has his own controller and model so depending on where you placing the button It will affect Which model and which controller You need to use I'm not gonna explain much about the PHP being placed in these blocks Because That should be something you know how to do If you don't you need to learn you need to study to work with Joomla API [00:03:02](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m02s) I'd not able to also you know educate you on that now at this stage So you do a custom button you'd click on adding a button here's your icon you can Select any of the icons these are the default Joomla icons that they use also called Icon Icomoon or something So you can use that Then the name of the button What you wanna call it so I'm just gonna call it a test for now then the Name of the controller method So I'm gonna just call that get [00:03:39](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m39s) Tested and Then We'll decide is this gonna be an edit view a Single View Target A list view or both You know where Where must this button show up So I'm gonna do Just one for First list And then If it's a listview [00:04:02](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) See that says list Target Then We could decide whether this is only a function Now when it is a selection It means that you need to select some items And then click the button For it to actually submit those ids of the selected items If it is a only a function you don't need to select anything When you click the button a function Will obviously be triggered [00:04:30](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m30s) Which doesn't require you to give it any information So it's basically just gonna Do something And that obviously You need to be able to code that Ok so I'm just gonna Use the default The default is actually Very much like selection but it behave differently if you [00:04:57](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m57s) Yeah I think the best way to do this is select one of the options Compile the component and go look at the code And I'll show you where the code ends up And then you can decide what you wanna do Ok so I'm gonna just save this As a selection in a listview and Save Ok At this stage if we do not add Values to these blocks for some reason it will scream at us so we just had to [00:05:31](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m31s) Ford slashes Which basically Satisfies it's Requirement of having information I'm gonna add a little method here that simply gonna redirect us To the dashboard And I'm I'm gonna call it Get tested That that is simply a A controller method it must be public [00:05:58](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m58s) Here we simply checking whether it was submitted from the current website and Then we just gonna redirect To the components dashboard here We not gonna need a method now because we just redirecting But if you I will show you that in a minute let me just do this for now And then let's save and close And let's go compile this component So we will just select [00:06:29](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m29s) The demo component compile it And then re-install it To see the changes We gonna go to the component And then to Looks and now we will see there is a new button called test And if we click it It's empty redirect us to the dashboard So that's all it does just redirects us And you can then obviously redirect to anything So that's just a first way of implementing a button in the listview [00:07:05](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m05s) Now let us go back to to editing that the functionality there for the showing you some more Options So just open this again Go to custom buttons Now maybe just add another button We call it single And we again call it something like a And The controller method And will leave this to default and then [00:07:50](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m50s) Save So now in the controller method we said we gonna have a function called get done and So here will just put a Public function So this time we will actually get the model and then Do something with it in the model we can also get the Item values Since the moment you click this button you're inside of the item and it automatically submit the Form So we can actually grab those items values obviously it could be different values [00:08:36](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m36s) from what's in the database just keep that in mind because You could change the values then click that button and it will actually submit these new changed values And yet those values have not been saved To the database And so if you want those values to actually now be in the database you'll need to actually Put it there And That's again I'm not gonna demonstrate how to do that but the model has a save method And you should actually just Do the necessary sanitation and then [00:09:12](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s) Trigger the save message The save method and it should store the data So for our purposes I'm just gonna grab the data and Not go through all that I'm just gonna do a little you know verification maybe and And then return back either an error or or success so First we going get the values So now that we have the data we can check Whether the values that we want to use is actually There and available so let's say we wanna make sure that this is already a saved Item [00:09:51](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m51s) Then we at least check whether the ID is more than 0 We need to have a name and Then we can check for that And so we can do some checking within the controller Before we trigger the model And you know run the function we intend Then we triggered the model we decide what we wanna call a method in the model so I just chose Something random and then we can just create that method in the model area And then do whatever we wanna do So we [00:10:32](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m32s) Start doing some Logic in the model Set out of above method however Controller Now we busy with the model area Now Do keep in mind that If the model is unsuccessful you wanna do something It's a data set But the model is not being successful You wanna do something [00:10:55](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m55s) And if you data isn't said we also wanna do something So those are the areas where in which can we can add some messages that we wanna give back to the user Tell them what's happening And so In the model we basically just gonna perform our task and when they we have achieved our goal we give back True whether we have failed we give back false and then that would Trigger on messages in the controller So this is just Giving a basic overview of setting up some model controller connected with a button So I'm gonna add some of this code in here you are welcome to pause the movie and then drop down whatever [00:11:37](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m37s) You'd like to reuse but the reality is You should actually be able to do this without my help And therefore if you don't know what I'm doing here then please go Google a little more Go find out some more tutorials elsewhere How to create model And controller relationships In Joomla Using it's API The other reality is you can obviously open this model and controller Of the specific View [00:12:11](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m11s) In your IDE and in there you can see whether you know how the code is actually added In what is happening in how is it done And you can educate yourself That way as well Ok I'm just gonna add to code in then Ok so here I've just added some code that you can also reuse And this basically if the work has been done will let the user know it's done If work wasn't done we also let him know If we couldn't even detect The required values then we just throw a major error and [00:12:51](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m51s) Just quit out So That is really The The controller I didn't populate much of the model because you should design your own logic but I do return true so to Give this first message Then we'll go to the IDE change it to Falls again to demonstrate You know the response And just play around with the code in the IDE [00:13:17](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) To give you a sort of a feel of how to approach it from that Direction ok so we gonna just save this Then go and compile that again Backup Just compile it And then Install the new compiled version And open the component Go to Looks So we can see how our test button still here if we click it still takes us to the dashboard [00:14:01](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m01s) Now let's open the test Now we have a new button here Worked If you click it now it'll basically give us The work was done because our method returns true Now let me open the IDE Ok looking at our Controller We see that Down here Somewhere [00:14:32](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m32s) This is the front end I should go to the back end Ok there it is Controller First we gonna open the list one which is the plural Version And here we see get tested was added And there is a little method Then if we go to the Edit singular one [00:15:00](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) Then getdone here is our method And all our functions And JCB has Added The Script to the translation text so everything here looks fine If you now go to the model And we open The the look model We'll see that [00:15:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m22s) It has a new method added here somewhere Scroll down till we see it Sorry it was way up here I scrolled to Fast And so I missed it So just here after get table Here it added our little method So now Add this to false And save [00:15:47](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m47s) Go back to Joomla And then click our Button again And now it says work was not done Because the method returned false So if we Change that to True again And save then it should work Now let's test out another one Let's also make this [00:16:16](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m16s) you know Not execute Save this so we can get this error Go back to Joomla Click a button And now it even kicks us out of the item And it says a major error has occurred The reason why it kicked us Completely out of the item didn't check it in Which is actually not ideal but [00:16:39](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m39s) You could fix that By looking at some of the other Controllers And seeing what they do When they want to kick you out You know educate yourself by Looking at some of how Joomla implements Some of these features Now Ok so [00:17:02](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m02s) We Basically got what we expected we are going to change this back safe Go back to the view Open that you again Click our button And now we get all is done and good Ok so That is a quick demonstration of adding a list button As well as adding a button inside of the edit View [00:17:29](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) Like I said you could Actually add one button both as a list and inside If you were to go to That specific Button let's demonstrate that quickly And we can open it and Then instead of saying list here we say both and we click Save Now [00:17:58](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m58s) We'll obviously have to Add This method Get tested Also to the Single View like that And then Save And then [00:18:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m22s) Close out of this Compile But they keep on clicking that Backup So used to doing that And won't work now because I haven't set up to correct paths Ok Install it Now let's first go look at the code now to help you see where the button is being added I mean I shown you the controller I showed you [00:18:56](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m56s) the model But if you go to the view and you open look and you open this view HTML. PHP And you open you go to add toolbar You'll see that here It actually Has added a custom Button Get done and get tested To the view [00:19:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) And It is Basically that is the method That is gonna be called By this specific button so it's gonna look in In the look controller And get This method That's really how it works It also adds a switch a permissional switch [00:19:47](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m47s) To the button if this specific user doesn't have the right to do the work Button Then it won't show the button And it will also If you carry those permission structures through to your controller It'll stop it even from being executed You know Manually via URL But this that kind of security and implementation you'll need to know how to do that [00:20:14](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m14s) Look at Joomla way of implementing it because you need to in the controller check whether this user has the permission And so you need to know how to check that permission as well ok so That's your showing you how the button gets added into the view And where that code is and you can go look at it Now I'm going back to to Joomla And basically opening our component And we go to Looks we still have our tested here But now if we open the edit we will see have a got tested here as well And if we click it [00:20:53](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) It will also just take us to the dashboard And perform the same function as it would have If we click There Oh so that is just showing you that you can add one button to both the listview as well The edit view of the backend admin area I hope this will be useful And thank you for watching diff --git a/035-Translation-Mananger-in-JCB-explained.md b/035-Translation-Mananger-in-JCB-explained.md index b50bf9b..c7cc5c6 100644 --- a/035-Translation-Mananger-in-JCB-explained.md +++ b/035-Translation-Mananger-in-JCB-explained.md @@ -1 +1 @@ -Hi everyone We're getting have a great announcement to make JCB has again been expanded To now include a language translation Feature We are very grateful one of the contributors have Extended the code base for this We obviously Working together to Sure that it remains stable Those of you that been following The process on guitar pool Will know that As much time and effort Put into this So I would like to give you a quick explanation Of how this will work I love you that already using JCB Oh or a CB depends on We are asking acb advanced component builder JCB Gmail component Builder It is Actually work in English component And It builds the English Language file for you So every where in your fields When you create a field There there are areas in the in the field That says that it's translatable Translatable not translatable translatable And if you enter those values here JCB on the fly with take this description for example In all converted into a language placeholder An old added to the language file The English language file The British one Now This is all being done automatically For every area of the JCB Compiler Even in templates and views That's no front end If you create Uno side views And even templates and layouts You can Just adding These placeholders these straight text with the actual English language string in it Then the pasta with automatically crap that text and added to the language file So So currently JCB is building A a a complete English Language File for you And that means it's Already able to be Can I translate it But it has not have the feature for you to add Multiple other languages And so that is really but what is been the request The request is Isn't there a way we could Actually Translate This language strings And then when Jason be compiled to component it automatically add these other languages And so The The suggestion was That we basically Add an area where you can Create as many languages as you like Obviously in accordance with the conventions Your language tags Need to be in in accordance with the correct prefix is used in Joomla So I think we could add a link here Maybe on this page some point just to take you somewhere where you can find all the information to To use the correct Tagging For your language while And here you could obviously add the language name So you can create as many languages as you like Then When you compile a component JCB obviously life explained Grabs all the strings from everywhere And Adds into the British English translation file now let me show you some of that Happening in the code So here in the the gate Class We have a function called settling strings It basically you get it gets the content from wherever JCB is handing it And it passes it To see whether it has Either this language string or that one Then it does some gymnastics here to grab all the actual strings into an array A minute parts is this array Once it has it And it converts it Dual language string And it adds it back Into the content and returns the content and then With this matter We call it an object array It is adding the language string And the language key To the lung content array So that's a first thing we have this land can't enter a There's all over the place and it just gets Uno bulkier and bulkier Now the slang is basically the target It's the area Which this language strings belong to either the site Although Cite a system or the admin or the admin system area So there are four areas where the site this language string all there there is also such a thing as both While JCP compiles Some strings he knows must go to both And this is the actual language string be capitalised string Which is generated up here And This is then I trimmed and placed in in it Space Now Disarray Gets Placed into the files at a certain Point That point is very much at the very end of the compilation of course when everything is being sort of done Done We actually get to the place where We gonna now add two strings to the files So first we are basically Calling a function called said lung admin said lung system basically This is in the interpreter You can see these these methods are here said langside Euro said lung admin Basically adds a bunch of strings that are default always being added And then Also all the other strings have been built And then Move them over to a string called language And obviously the British English and it's for the admin area And so it does for all the various areas And did this Indian Fusion class it brings it together And then we grab the values of this strings We added to our value array And we basically Have the old multi language implementation running down From here from line Hundred 97 We start running into the multi language string implementation Now what does this do Basically It queries the database To see whether there is such a LAN English language string in the database And whether there is been any translations made for it So doesn't really use the place holders Because the place holders are so ambiguous between various components and our idea was To prevent a very bloated oversized database we must try to share strings amongst Components And so currently when you compile a component Gathers is English strings like I fix plane And then it shakes a database whether these English drinks already exist in the database And if they do then checks whether they have Translations already linked to them And if they do Then it starts grabbing that translation strings and adds them To this Language object array Also by tag and by area and then here we are basically passing this array so by this time Time we ready have all the languages In place and we are now able to put them into the component So It's basically these functions get multiple string A multi language strings Set langvlei soul disperse lung strings These are the functions That actually does the work So you could go look at these they are all found in the git Forget class at 1 we where everything really starts They are found there and you can look at them they are All their doings are are Obviously open source so you can see Now so that means by the point we get to this line 11 only We ready have all the language strings In their various Areas and various languages And we can now start adding them back into the component And that's really what this Partners doing It just adding it into the component So Now let's go back to the user interface to see this in action So I'm gonna come by the component Just any component Let's say this document manager And while I'm compiling it So keep in mind it will be running through And grabbing all the English strings then eventually will check This Language translation table Weather no strings Actually exist And if I do if they've been translated Ok so that's basically as simple as that It compiles it And It does most of the work for you Now the question has been asked What if You've changed some Fields name or some description And now That other description that Old English String Is no longer being used What what then Well at the moment It will basically be purged Now the purging works as follow When it Discovers that is string is no longer being used by a component We can go in the Kona I can show you that Then It basically asked the question Is another component still using it Ok Check if an if more components are using it Nf another component is using it It's simply who removes the current component from the string And then it it goes off it it doesn't Remove it If no other component is using it so let's say No all the component is any longer Linked to the string Then it checks whether there has been any work done in it Has there been translation done I mean it's quite a Huge job to do translation So we figured if you've done it you wouldn't want to just delete it So what we will do then As we basically archive The string We move it from the published State Do it archived State so you can go to archives and then there see all the strings that no longer Are actively linked to a component But has translations in it And if it does not have any translation So you've seen it's not link to a component And it does not have translation Then we remove the string from the database So these are the two functions to remove the string completely And so it's like it never it was there in the first place And so that is really how The Purge works at the moment it only purchase That would really is no longer link Neither has any work done in it And So That is what's happening at the moment Ok so now if we were to go to this component in JCB So the document manager You see there is a new tab called translation And in this tab it shows you all the English drinks Whether it's been having any work done in it so it will say no translation when the work has been done to it And in how many components it's been used So currently Most of these things as you see I used in quite a few other components And now you can from here Click on any of these strings And It will give you the list of all the components where it's used All show you the string you cannot edit the string here But you can add translations so yeah you'll select the language and you will add the translation And you can add as many as you like to the string And Then every one of these components this translation will be Active So That is really how The translation manager works There are two ways to get to the strings the one is like a show new wire the component And we are planning To add a button here Whereby you can import Vee's and export these drinks quite easily so that you could give them to other team members You can then make translations given back to you and you just import them here and that it gets linked automatically So that is still under development It should come out soon within the next Let me not give any promises Soon as we have the time And SO2 in you know to make it easier to do these translations The other way to get to these translations Is to Simply go to language translations And here you find all the components strings together So this could become a database With over 8000 lines I'm suppose But like you see it's working quite well I've already got a lot of components Mapped The ones that you see usually are there the ones that are active Which I'm working on I've got it quite a few in our favour is well So the reality is I'm I've been testing this against Periods So 89 components at the same time sharing strings among each other And I expect this feature to become quite powerful Soon as we are able to you know speed up the translation method There is been suggestions that we also Add this feature to a sort of a community area somewhere Where we you can push your English strings there and you can push a sorry Paul Already translated strings from it I know this is a great idea but how to manage that so that we don't fight people abusing the system Still under the bait So anyone have any good suggestions please go to get up open issue and let's start talking Well I hope this is enough explanation On how to do Multiple language implementation on your components in Joomla component Builder I'm quite happy about this new feature I really think it will In the long run Become a very valuable asset Anyway Thank you much Very much for watching Goodbye \ No newline at end of file +Hi everyone We again have a great announcement to make [00:00:06](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m06s) JCB has again been expanded To now include a language translation Feature We are very grateful one of the contributors have Extended the code base for this We obviously Working together to insure that it remains stable Those of you that been following The process on GitHub [00:00:34](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) Will know that As much time and effort Put into this So I would like to give you a quick explanation Of how this will work those of you that are already using JCB or ACB depends on We are asking ACB Advanced Component Builder JCB Joomla component Builder It is Actually a English component [00:01:00](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m00s) And It builds the English Language file for you So every where in your fields When you create a field There are areas in the in the field That says that it's translatable Translatable not translatable translatable And if you enter those values here JCB on the fly would take this description for example [00:01:33](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m33s) and will convert it into a language placeholder and will add it to the language file The English language file The British one Now This is all being done automatically For every area of the JCB Compiler Even in templates and views That's now your front end [00:01:56](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m56s) If you create you know site views And even templates and layouts You can Just adding These placeholders these Jtext with the actual English language string in it Then the passer will automatically grab that text and add it to the language file So So currently JCB is building A complete English [00:02:25](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m25s) Language File for you And that means it's Already able to translate it But it has not had the feature for you to add Multiple other languages And so that is really what has been the request The request is Isn't there a way we could [00:02:46](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) Actually Translate This language strings And then when JCB compiles the component it will automatically add these other languages And so The The suggestion was That we basically Add an area where you can Create as many languages as you like Obviously in accordance with the conventions [00:03:10](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) Your language tags Need to be in in accordance with the correct prefixes used in Joomla So I think we could add a link here Maybe on this page some point just to take you somewhere where you can find all the information to To use the correct Tagging For your language file And here you could obviously add the language name So you can create as many languages as you like [00:03:39](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m39s) Then When you compile a component JCB obviously like I have explained Grabs all the strings from everywhere And Adds to the British English translation file now let me show you some of that Happening in the code So here in the Get Class We have a function called setLangStrings [00:04:07](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m07s) It basically gets the content from wherever JCB is handing it And it parses it To see whether it has Either this language string or that one Then it does some gymnastics here to grab all the actual strings into an array then it parses this array Once it has it And it converts it To a language string And it adds it back [00:04:34](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) Into the content and returns the content and then With this We call it an object array It is adding the language string And the language key To the langContent array So that's a first thing we have this langContent array It's all over the place and it just gets bulkier and bulkier Now the lang is basically the target [00:05:04](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m04s) It's the area Which this lang strings belong to either the site or the Cite system or the admin or the admin system area So there are four areas where the site this language string all there is also such a thing as both While JCP compiles Some strings he knows must go to both And this is the actual language string be capitalised string Which is generated up here And [00:05:34](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m34s) This is then I trimmed and placed in it's place Now this array Gets Placed into the files at a certain Point That point is very much at the very end of the compilation of course when everything is being sort of Done We actually get to the place where [00:05:58](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m58s) We gonna now add two strings to the files So first we are basically Calling a function called setLangAdmin setLangSys basically This is in the interpreter You can see these these methods are here setLangSite Here is setLangAdmin Basically adds a bunch of strings that are default always being added And then Also all the other strings have been built And then [00:06:37](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m37s) Moves them over to a string called language And obviously the British English and it's for the admin area And so it does for all the various areas And in the infusion class it brings it together And then we grab the values of this strings We added to our value array And we basically Have the old multi language implementation running down From here from line 197 [00:07:09](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m09s) We start running into the multi language string implementation Now what does this do Basically It queries the database To see whether there is such a English language string in the database And whether there is been any translations made for it So doesn't really use the place holders Because the place holders are so ambiguous between various components and our idea was To prevent a very bloated oversized database we must try to share strings amongst Components [00:07:43](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m43s) And so currently when you compile a component it Gathers it's English strings like I have explained And then it checks the database whether these English strings already exist in the database And if they do it then checks whether they have Translations already linked to them And if they do Then it starts grabbing that translation strings and adds them To this Language object array Also by tag and by area and then here we are basically parsing this array so by this time [00:08:22](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m22s) Time we ready have all the languages In place and we are now able to put them into the component So It's basically these functions get multiple strings A multi language strings setLangPlaceholders ,purgeLanguageStrings These are the functions That actually does the work So you could go look at these they are all found in the get class the one where everything really starts [00:08:51](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m51s) They are found there and you can look at them they are All their doings are are Obviously open source so you can see Now so that means by the point we get to this line 1109 We already have all the language strings In their various Areas and various languages And we can now start adding them back into the component And that's really what this Part is doing [00:09:19](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m19s) It just adding it into the component So Now let's go back to the user interface to see this in action So I'm gonna compile a component Just any component Let's say this document manager And while I'm compiling it So keep in mind it will be running through And grabbing all the English strings then eventually will check This [00:09:47](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m47s) Language translation table Weather no strings Actually exist And if I do if they've been translated Ok so that's basically as simple as that It compiles it And It does most of the work for you Now the question has been asked What if [00:10:09](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m09s) You've changed some Fields name or some description And now That other description that Old English String Is no longer being used What what then Well at the moment It will basically be purged Now the purging works as follow [00:10:29](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m29s) When it Discovers that is string is no longer being used by a component We can go in the cone and I can show you that Then It basically asks the question Is another component still using it Ok so if more components are using it and if another component is using it It simply removes the current component from the string [00:10:55](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m55s) And then it it goes on , it doesn't Remove it If no other component is using it so let's say No all the component is any longer Linked to the string Then it checks whether there has been any work done in it Has there been translation done I mean it's quite a Huge job to do translation So we figured if you've done it you wouldn't want to just delete it [00:11:22](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m22s) So what we will do then As we basically archive The string We move it from the published State Do it archived State so you can go to archives and then there see all the strings that no longer Are actively linked to a component But has translations in it And if it does not have any translation So you've seen it's not link to a component And it does not have translation [00:11:48](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m48s) Then we remove the string from the database So these are the two functions to remove the string completely And so it's like it never it was there in the first place And so that is really how The Purge works at the moment it only purges That which really is no longer linked Neither has any work done in it And So That is what's happening at the moment Ok so now if we were to go to this component in JCB So the document manager [00:12:24](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m24s) You see there is a new tab called translation And in this tab it shows you all the English strings Whether it's been having any work done in it so it will say no translation when the work has been done to it And in how many components it's been used So currently Most of these strings as you see are used in quite a few other components And now you can from here Click on any of these strings And It will give you the list of all the components where it's used [00:12:57](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m57s) it show you the string but you cannot edit the string here But you can add translations so here you'll select the language and you will add the translation And you can add as many as you like to the string And Then every one of these components this translation will be Active So That is really how The translation manager works There are two ways to get to the strings the one is like a show you via the component And we are planning [00:13:29](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) To add a button here Whereby you can import these and export these strings quite easily so that you could give them to other team members who can then make translations give back to you and you just import them here and then it gets linked automatically So that is still under development It should come out soon within the next......... Let me not give any promises Soon as we have the time And So to make it easier to do these translations [00:14:03](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m03s) The other way to get to these translations Is to Simply go to language translations And here you'll find all the components strings together So this could become a database With over 8000 lines I'm suppose But like you see it's working quite well I've already got a lot of components Mapped The ones that you see usually are the ones that are active Which I'm working on I've got quite a few in archive is well [00:14:36](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m36s) So the reality is I've been testing this against you know say 8 or 9 components at the same time sharing strings among each other And I expect this feature to become quite powerful Soon as we are able to you know speed up the translation method There is been suggestions that we also Add this feature to a sort of a community area somewhere Where we you can push your English strings there and you can pull Already translated strings from it [00:15:15](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m15s) I know this is a great idea but how to manage that so that we don't find people abusing the system are Still under the debate So anyone have any good suggestions please go to GitHub and open a issue and let's start talking Well I hope this is enough explanation On how to do Multiple language implementation on your components in Joomla component Builder I'm quite happy about this new feature I really think it will In the long run Become a very valuable asset [00:15:52](https://www.youtube.com/watch?v=zzAcVkn_cWU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m52s) Anyway Thank you Very much for watching Goodbye diff --git a/036-Setting-Site-View-Permission.md b/036-Setting-Site-View-Permission.md index cf3aee5..aaf5c74 100644 --- a/036-Setting-Site-View-Permission.md +++ b/036-Setting-Site-View-Permission.md @@ -1 +1 @@ -Hi I would like to show you how to set the side view permission Site new permission is really related to the front end of any side view Since it usually by Default says set not allowed And that is basically because We have The problem where That data is controlled Biovac Global settings of the component And unless you write some custom script to add that Global settings to the database for permission It actually doesn't have those permission set and because it's not set it's by Default always said to not allowed Now let me explain that on a code level 2 Ok what you summon distributor which is One of the demo components that is available In a few Interested in buying access to this demo component It obviously has site views So If we open the options tab You see there's a permission or tab And if we search for sight You see there is category site access Plural and category Site in Access single there's also preacher side access and preachers And series and series list And sermon And all these various site accesses Literally saying whether the public Will have access Now by Default as I said It is set to inherit And inherit will actually say not allowed Now they are there's something that I've done to try and accommodate this problem In JCB So let's Let's close out here and look at some of the decoder off down there Guess I will have to go to component Builder And then to components And I'll open swimming distributor Then I will go to settings And then sight views MasterCard And Now you will see that we have here A value called default View Now what the default view really is Is that the view That The component will Direct you to If you are accessing a view That you as a user don't have access to So Usually we would set the default View to not have an access Control So Will say ok the default View Doesn't have access control That means it's actually open and public to all And then we could Explain on this view How to get access for example to the rest of the component But For the because you could see and what user group the user is and you can buy that determines some messages Ok So that means whenever you have obviously there can only be wonderful view even if you select more than One the first one the compiler gets to will become the default view the next one will be ignored so So they can only be one at the moment it says that he has to look 21 and so if you have an ass Access for categories and it's not yet set It will throw the user back to for example here preachers Now What is the advantage of this it's simply Gates the error page So that you don't get a loop where the The permission just never gets resolved so just goes into a loop and 8 then crash the site This prevents that but it obviously doesn't solve our permission structure of completely But it is at least a first step towards trying to resolve it so you would say it This is your default page don't give the default page promotional structure so if any of the other pages is accessed Best it will divert to the default page And now the next step that we have to try and address this problem Is some custom scripting That you can add Which will show After installation so let me show you some of that The component where we actually have this shown is the demo component So you can just open the PHP tab An independent app you see That it has a cute message In the post flight in stalled blocks basically gets the factory Get application first set the component Global setting and the permissions in the option Area All the front end of the component will not work as expected Please note that each view on the front and has access and permissions So if you would like the public to access those views They must be given the axis and Permission And then this is just an info Message that comes up Basically after install So that is another way that we've tried to help the user realise that he needs to Add some now you can obviously Change this into a link Become very fancy Or You could Even add Custom script here That updates The This components promotional structure And actually adds the public to to have access to the site views These are some of the ways that we are trying to resolve the promotional restraints Of Sight views Now Yeah that's look at this I was saying earlier at the code level so forgive me for taking so long to get So here we have the access file open of sermon distributor And if we do a search here Site You see that it has the site access values set for the component Now When we look at The front end of the component Open categories You see that here it is asking whether the user Has that access And then if it doesn't It does a redirect and then redirects to the default page you see that Now let's open the default page And The ideal of the default page Is that if the default page is not the side route It will If It cannot access the default page it will actually add this error And then redirect to the site root Which being the websites homepage And so that's kind of how we trying to Prevent the This promotional structure from interfering with your user experience Now if we go back to the component The stimulus tribute a component And we again open the side views This time I change it that this doesn't have access Hey I actually save it that way Go to the compiler Compile 7 distributor Uninstall Ok now let's go back to the code Now you'll see That it doesn't have any of that checks in the preachers file Only in the category File And it's still right there at redirects to preachers Which in effect means that this one will no longer give any errors But it will show these errors Which show relates to the fact that they cannot see The the categories Now I think some of the advancements that we might still think on doing is maybe Add a Uno field to the component Where the user can change these errors To show Maybe a message of how to purchase access or something Yeah we could still look at that you do realise that this stage JCB does have the the option to actually customise any section of code So by using what is known as the custom code implementation Now I'm not gonna demonstrate that please go look and review those videos they are on YouTube Where you can literally Change this whole code block here And then Use use your own implementation upon these measures Well that is a a quick demonstration or explanation on how to manage The different Commission structures for JCB regarding the site front-end So if you do not want that Control you can simply obviously just put it off But I say realise that most of you Might want to add some custom scripting that adds permissions to the database for that comp That's little bit Beyond the scope of where JCB is at the moment Although that is a nice to have there are more pressing things that we'll focus on First \ No newline at end of file +Hi I would like to show you how to set the site view permission the Site view permission is really related to the front end of any site view Since it usually by Default set not allowed And that is basically because We have [00:00:22](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) The problem where That data is controlled By the Global settings of the component And unless you write some custom script to add that Global settings to the database for permission It actually doesn't have those permissions set and because it's not set it's by Default always said to not allowed Now let me explain that on a code level to you Ok we will use sermon distributor which is One of the demo components that is available and if you are [00:00:57](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m57s) Interested in buying access to this demo component It obviously has site views So If we open the options tab You see there's a permissional or tab And if we search for sight You see there is category site access Plural and category Site Access singular there's also preacher site access and preachers And series and series list [00:01:38](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m38s) And sermon And all these various site accesses Literally saying whether the public Will have access Now by Default as I said It is said to inherit And inherit will actually say not allowed Now they are there's something that I've done to try and accommodate this problem In JCB So Let's close out here and look at some of the code I have done there so I will have to go to component Builder [00:02:12](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m12s) And then to components And I'll open sermon distributor Then I will go to settings And then sight views I will click add And Now you will see that we have here A value called default View Now what the default view really is Is that the view [00:02:45](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m45s) That The component will Direct you to If you are accessing a view That you as a user don't have access to So Usually we would set the default View to not have an access Control So Will say ok the default View [00:03:12](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m12s) Doesn't have access control That means it's actually open and public to all And then we could Explain on this view How to get access for example to the rest of the component . For because you could see in what user group the user is and you can by that determines some messages Ok So that means whenever you have obviously there can only be one default view even if you select more than One the first one the compiler gets to will become the default view the next one will be ignored [00:03:52](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) So they can only be one at the moment it says that here select the only one and so if you have an Access for categories and it's not yet set It will throw the user back to for example here preachers Now What is the advantage of this it Simply negates the error page So did you don't get a loop where the The permission just never gets resolved so just goes into a loop and then crash the site This prevents that but it obviously doesn't solve our permission structure of completely But it is at least a first step towards trying to resolve it so you would say it This is your default page don't give the default page permissional structure so if any of the other pages is Accessed [00:04:43](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m43s) it will divert to the default page And now the next step that we have to try and address this problem Is some custom scripting That you can add Which will show After installation so let me show you some of that The component where we actually have this shown is the demo component So you can just open the PHP tab And in the PHP tab you see That it has a enqueue message [00:05:19](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m19s) In the post flight in stalled blocks basically gets the factory Get application first set the component Global setting and the permissions in the option Area or the front end of the component will not work as expected Please note that each view on the front end has access and permissions So if you would like the public to access those views They must be given the access and Permission And then this is just an info Message that comes up [00:05:54](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m54s) Basically after install So that is another way that we've tried to help the user realise that he needs to Add some now you can obviously Change this into a link Become very fancy Or You could Even add Custom script here That updates [00:06:16](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m16s) The This components promotional structure And actually adds the public to to have access to the site views These are some of the ways that we are trying to resolve the permissional restraints Of Site views Now let's look at this, I was saying earlier at the code level so forgive me for taking so long to get So here we have the access file open of sermon distributor And if we do a search here Site [00:07:00](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m00s) You see that it has the site access values set for the component Now When we look at The front end of the component Open categories You see that here it is asking whether the user Has that access And then if it doesn't It does a redirect and then redirects to the default page you see that Now let's open the default page [00:07:32](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m32s) And The ideal of the default page Is that if the default page is not the site route It will If It cannot access the default page it will actually add this error And then redirect to the site root Which being the websites homepage And so that's kind of how we trying to Prevent the This permissional structure from interfering with your user experience Now if we go back to the component [00:08:10](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m10s) The Sermon Distributer component And we again open the site views This time I change it that is doesn't have access I actually save it that way Go to the compiler Compile Sermon distributor and install Ok now let's go back to the code Now you'll see That it doesn't have any of that checks in the preachers file [00:08:57](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) Only in the category File And it still redirects to preachers Which in effect means that this one will no longer give any errors But it will show these errors Which relates to the fact that they cannot see The the categories Now I think some of the advancements that we might still think on doing is maybe Add a field to the component Where the user can change these errors [00:09:31](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m31s) To show Maybe a message of how to purchase access or something Yeah we could still look at that you do realise that this stage JCB does have the the option to actually customise any section of code So by using what is known as the custom code implementation Now I'm not gonna demonstrate that please go look and review those videos they are on YouTube Where you can literally Change this whole code block here And then Use use your own implementation upon these measures [00:10:10](https://www.youtube.com/watch?v=gWjQjdhYqXI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m10s) Well that is a a quick demonstration or explanation on how to manage The different permissional structures for JCB regarding the site front-end So if you do not want that Control you can simply obviously just put it off But I realize that most of you Might want to add some custom scripting that adds permissions to the database for that component That's little bit Beyond the scope of where JCB is at the moment Aldo that is a nice to have there are more pressing things that we'll focus on First diff --git a/037-Auto-create-SQL-updates-for-Componets-in-JCB.md b/037-Auto-create-SQL-updates-for-Componets-in-JCB.md index cd14b8d..503fee6 100644 --- a/037-Auto-create-SQL-updates-for-Componets-in-JCB.md +++ b/037-Auto-create-SQL-updates-for-Componets-in-JCB.md @@ -1 +1 @@ -Hi I would like to demonstrate to you one of the latest features that's been added to JCB If it's a request was made about 11 days ago Auto generate my update SQL After a lengthy discussion Surgeon was made to add the The future and I am basically done doing so first let me give you some back Background so you can understand where we coming from When you create a component in Joomla Then usually you have a set of views and these views in the backend are linked to a set of tables I'm so on the installation of the component For example if we do so here would there to be It actually Both the tables for those views on installation So then if you go to the back and I'll the component And You create a new item And actually stores the value in the database So that it can be retrieved that's very basic The reality is If you as a developer make it rains To this component Which involves new tables Then Obviously you would need to add Extra script to your components package So did upon installation If it's fines that there is already an existing component it will actually update the database accordingly to the new New settings the new tables or any Fields added or so forth So we gonna demonstrate this In KC Be There used to be a way to do that which still works by the way how was Emmanuel way a way for you to manually at the ink news it's equal State That are needed to make the update it was done under this version updates tab so you would click on the Virgin out Updates tab and here you would add your specific sequel Query script and Pawn installation If the existing version is below This update it will grab this and install it into the database creating the new tables and so forth So What I'm gonna do now is you'll see that at the moment This admin view has only 1 2 3 4 5 6 Views I'm gonna add another View to this component You can see it doesn't have these buttons ticked I don't not know how to resolve this it seems like This is a tubular problem Because there are multiple Columns of interview Because if you close it and click it again And actually fix the sad anyway that's just by the way so now here I'm gonna add a new View Called help documents and just make some minor changes to the defaults Added to the 7th position And then click save and click save again So now we basically add a new view which means a new table to the database But we haven't written any of the SQL Because with the new changes this is gonna be done for you automatically on the moment to compile this Component So let's do that So how are you we are we gonna again compile this component is see it's very soon is it still 4.1 1.4.1 So We compiling it Now what is the system is doing is it's tracking the history and it's making a lot of calculation Sims to dynamically realise that there is been a new table increment The version number And If I now Install this component And I go and open that component I'll see that menu view is here if I open the view there is no errors Why create new Hmm it'll automatically start behaving the way that is expected And That is really Say Text And then hi So we are targeting The External sources So forgot You are the things here Russia currency The database already stores the values And the new table is actually therefore in the database and working as expected now How you realise that This means that our JCB component Has been updated to if I refresh this page You'll see that the version number has been incremented And if you open the version updates and scroll down you would see that one point So wait now 1.4 point 1 Got this new Opac rating of a help document Table And a new version got allocated here Obviously we do not know what is this link and so we add this demo link here with you need to manually update They still But that is by far tremendous improvement Ok this also works not only worth The adding of a new view but also if you were to add a field To an existing view so let me demonstrate that quickly So I'm gonna be adding a new field to the preacher View I'm simply gonna select any Fields and soul removed again Let's call it Image And I'm gonna add this to left One That must be there in 2 And save And save and close So now I've added a new field to preachers And again I'll be going to the compiler And I'll select the component and just compile And again since of detected there's been a few change and increment it the version number And if I install the component And we go to the component To the preachers View We'll I'll see That new field actually there Image And if I was to select an image And save You'll see that it Really Oops I see I actually missed it The reason was that This component didn't have any history so I had to go and make a few changes take care Counted your building a component from the ground up it will have his 3 So this is only gonna be happening when you have install a component Bio the import function in the components or maybe using the demo component So what I would advise it just open all the views and save them at least once so that there is history recorded for For that View That is one of the drawbacks there is really no way for me to my gate that is true Since the history Of each of these different items Being at the admin view and the fields actually needs to be created the moment that you saved the item And it's really can't be done before then Ok So taking that an account I'll recompile it again fixter That so truth incremented to 1.4.3 I will just install that Again Going back refreshing there the preacher will see that Image field is back How select an image Click save and now you'll see That it actually does store the data for this image Because if we refresh the The component will see that it is again Increment the diversion If I open the Update area You see that it actually Added this new Altering of the preacher table adding the image Field And it is also added the new Version to this list Ok so that is a quick demonstration of this new feature automated feature It is in its very beta Phase we obviously still gonna Be working at it to make sure that it's completely stable So please Take a go at it if you find any bugs open look for other open issues which may be Someone already reported And start commenting on that what you think should be done And if you don't find any then please open an issue and let us let us fix this issue I think this will be a tremendous improvement today CV Making it Again with the one of the best Tumelo component Developing tools Out there today Where Devin is writing your updates equal for you Just by you busy working and improving your component Without being concerned about that Thank you for watching \ No newline at end of file +Hi I would like to demonstrate to you one of the latest features that's been added to JCB If it's a request was made about 11 days ago Auto generate my update SQL After a lengthy discussion the decision was made to add the The future and I am basically done doing so first let me give you some Background so you can understand where we coming from When you create a component in Joomla Then usually you have a set of views and the views and the backend are linked to a set of tables [00:00:38](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m38s) I'm so on the installation of the component For example if we do so here with JCB It actually Builds the tables for those views on installation So then if you go to the back end of the component And You create a new item it actually stores the value in the database So that it can be retrieved that's very basic The reality is [00:01:17](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m17s) If you as a developer make a change To this component Which involves new tables Then Obviously you would need to add Extra script to your components package So did upon installation If it finds that there is already an existing component it will actually update the database accordingly to the New settings the new tables or any Fields added or so forth So we gonna demonstrate this [00:01:47](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) In JCB there used to be a way to do that which still works by the way it was manual way a way for you to manually add the new SQL statements That are needed to make the update, it was done under this version updates tab so you would click on a version Updates tab and here you would add your specific sequel Query script and upon installation If the existing version is below This update it will grab this and install it into the database creating the new tables and so forth So What I'm gonna do now is you'll see that at the moment This admin view has only 1 2 3 4 5 6 [00:02:38](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m38s) Views I'm gonna add another View to this component You can see it doesn't have these buttons ticked I don't not know how to resolve this it seems like This is a Joomla problem Because there are multiple Columns in this view Because if you close it and click it again And actually fixes that anyway that's just by the way so now here I'm gonna add a new View [00:03:09](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m09s) Called help documents and just make some minor changes to the defaults Add it to the 7th position And then click save and click save again So now we basically add a new view which means a new table to the database But we haven't written any of the SQL Because with the new changes this is gonna be done for you automatically on the moment to compile this Component So let's do that So now here we are, we are going again compile this component you see it's version is it still 1.4.1 [00:03:49](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m49s) So We are compiling it Now what the system is doing is, it is checking the history and it's making a lot of calculation To dynamically realise that there is been a new table increment The version number And If I now Install this component And I go and open that component I'll see that the new view is here if I open the view there is no errors [00:04:20](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m20s) if I create new it'll automatically start behaving the way that is expected And That is really Let say, text And then, hi So we are targeting The External sources [00:04:43](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m43s) So forgot Few other things here as you can see The database already stores the values And the new table is actually therefore in the database and working as expected now you realize that This means that our JCB component Has been updated so if I refresh this page You'll see that the version number has been incremented [00:05:14](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m14s) And if you open the version updates and scroll down you would see that one point ....... 1.4 .1 Got this new creating of a help document Table And a new version got allocated here Obviously we do not know what is this link and so we add this demo link here which you need to manually update still But that is by far a tremendous improvement [00:05:44](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m44s) Ok this also works not only with The adding of a new view but also if you were to add a field To an existing view so let me demonstrate that quickly So I'm gonna be adding a new field to the preacher View I'm simply gonna select any Fields since I will removed again Let's call it Image And I'm gonna add this to left One That must be then two [00:06:27](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m27s) And save And save and close So now I've added a new field to preachers And again I'll be going to the compiler And I'll select the component and just compile And again since it detected there's been a field change it incremented the version number And if I install the component And we go to the component To the preachers View We'll now see [00:07:02](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m02s) That new field actually there Image And if I was to select an image And save You'll see that it Really Oops I see I actually missed it The reason was that This component didn't have any history so I had to go and make a few changes take into account that your building a component from the ground up it will have history [00:07:33](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m33s) So this is only gonna be happening when you have install a component via the import function in the components or maybe using the demo component So what I would advise it just open all the views and save them at least once so that there is history recorded for For that View That is one of the drawbacks there is really no way for me to my negate that issue Since the history Of each of these different items Being at the admin view and the fields actually needs to be created the moment that you saved the item And it's really can't be done before then Ok [00:08:14](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m14s) So taking that an account I'll recompile it again and fix That so it should increment it to 1.4.3 I will just install that Again Going back to refreshing the preacher will see that Image field is back now select an image Click save and now you'll see That it actually does store the data for this image [00:08:49](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) Because if we refresh the The component will see that it is again Incremented the version If I open the Update area You see that it actually Added this new Altering of the preacher table adding the image Field And it is also added the new [00:09:16](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m16s) Version to this list Ok so that is a quick demonstration of this new feature automated feature It is in its very beta Phase we obviously still gonna Be working at it to make sure that it's completely stable So please Take a go at it if you find any bugs open look for other open issues which may be Someone already reported And start commenting on that what you think should be done And if you don't find any then please open an issue and let us let us fix this issue [00:09:55](https://www.youtube.com/watch?v=bRPJTRat158&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m55s) I think this will be a tremendous improvement to JCB Making it Again with the one of the best Joomla component Developing tools Out there today Where it is even writing your update sequel for you Just by you being busy working and improving your component Without being concerned about that Thank you for watching diff --git a/038-Setup-Site-Edit-View-in-JCB.md b/038-Setup-Site-Edit-View-in-JCB.md index fad3682..a5e44bb 100644 --- a/038-Setup-Site-Edit-View-in-JCB.md +++ b/038-Setup-Site-Edit-View-in-JCB.md @@ -1 +1 @@ -Hi I'd like to calculate give you a tutorial On how to Basically add An admin View To the front end of your site So They can be editing and submission Of the front end After specific admin View now Illustrate this I'm gonna use the public version of JCB And it has this demo Version in it so basically first I'll just compile it Uninstall it to the local Joomla website So we can see what happens And then install it And then basically open it So here we have the The demo version That is public it available and it basically has a admin view called looks So if you go to the list you off the admin View I called looks you'll see There is None will create new And then There is basically a description box A more item where you can click And see some Custom Fields and fields Being built sorry email mobile birth Image website And your normal publish and permission structure for the view And the name field Now that's basically what I referred to her as the admin View It's this club combination of pills working together in one View Now what else show you is how to add this Editing area basically the these three tabs To the front end of your site Total real function like a form Now who you would allowed to access the form will be dependent upon the permissions truck You see the permission structure Is what Actually controls who can edit And who can add Items to a specific admin View So currently as you can see your public cannot actually edit this If we created an item They cannot edit it so there's an item level on permissions River Close out of this Then you'll see here and options there is also a global control on Permissions So the global control of permissions Is also if you want public to be able to submit To to this form you need to Allow them to be able to create so you would say allow And now the public is allowed to create And You see that usually Most components has more than one View This one only has one it's called look So you'll also have to Over here Say hello And if you want them to edit existing submissions Then there is the edit State at its own created by All these things in the Global Spec as well as in the local edit of The View So there there's basic basically two switches here one is in Global switch and one that is Saflii focusing on the view so if you cannot access the view on the front end After we've created it it is actually would need to come back to to this area and And sort out the permissions for the specific group Who should have access to the specific View On a front end Ok so this is what this promotional structure is is quite intense and Extendable so that you can target specific groups with Pacific permissions and so forth For every View The JCB bolts in the admin As well as site Ok let me cancel out of here I'm not gonna Make any further changes here So we basically in the demo component now I'm gonna go back to JCP and basically I'm gonna flip one switch and then JCB will actually develop or write the core For the site end of this component So I'm going back to JCP Going to components And I'm opening the component And now in the component there is an area called settings where are viously all your admin views Are linked right so I'm gonna open that Are usually there is a little bug in And you wanna wish if you open it the first time it doesn't Reflector original setting So I usually just open it cancel it and then open it again and you'll see that the original setting is Is back And You see hear that Edit create side view Must be set to yes If it said 2 years then it means that it's gonna create and side view Off this look as so that you can edit it on the site end and not only in the admin Area And it also means create items So I'm just gonna say this And then also save and close And then go back to compiler Compile Demo I see that off Go Install it Now let's go look at the code So looking at the demo websites folder structure with Anna go to components And then we'll see that there is a com underscore demo folder And we will see there is the modules as well as their controllers As well as the views So there is basically This is the view that was dynamically generated Bye JCB review called look And then the model also called look And the controller Are you can open that To actually see what was the code that was written And so as you can see it's basically looks very similar to the admin area except that it's been slightly Modified For your front end And it's requirements As you can see we were adding Some CSS classes and JavaScript From the back end And Then Here's the sorry the model Basically get item get form And then here is the controller Ok so we We just showing at the core just basically what was created Now The fact that this was created Doesn't mean that there is actually Now set of links That you can click and edit the forms which was submitted For that there is a link to create any So these these things is what you need to do manually Now so Let's show you some of that 2 as you can see there is two views here In cold on the side views And one is called looks and other one is called looking As you can remember the one we looked at here Which I said was automatically generate is called lock so that one isn't actually showing because it was just Is the tick box that created this whole view model and controller So you don't need to build The look view again But you need to get links to it Ok so In looks we are using a dynamic get And in looking as well so let's let's go to the dynamic get page So there is one quart looks and looking so good let's go to the looks of a dynamic get So as you can see here is the that I make get for the look Looks and it got a custom script area We basically were asking whether the items are set where there are items and then we looping through them And during the looping process we basically determine By this can do script here You see in the helper class there's a get action function The good action function asks whether look item With the current user has the edit option To the specific look item And if it does it actually in this little script here It builds an edit look button And dynamically add that to the ETA edit link Which is coupled to the item And then just continues on So it basically dynamically generates the button for edit here in the dynamic get Are you could have done that anyway I just decided to do it here because then it actually I get added to the model which is more Where your logic For lots of your data structure suit should be placed And ok so now if you go back to this to the views the site views And we open the looks side view You see that we got the main get set as looks And here If you scroll down Well basically In this area here we are looping Through the lock items And Echoing the edit link After the description And that means now the link that we built here in the dynamic Gate Which is the button Will other be empty and therefore show nothing if the user doesn't have the permission to edit it Or it will actually show a button You also see There is currently has a look at this I haven't actually add it A a link For creating new Looks and The same would be required to do that So You could use the same button script just copy that And Here at the head of the tub before the table You could Add a button to create new looks Now All you would need to change is basically This link here That it will have an ID 20 And then it will actually create a new Look So that's a quick tutorial On how to add An editable Admin View to the site End of your component And then link it into your side view so that you can basically click on a button and edit A specific ID View Or create more And then control that with this get action helper class Method Which gives you Basically whether it can be edited You can go look at this helper class in the code So let me just quickly open up for you Vienna code And helpers We open Demo PHP And we scroll down Until we get the method called Get action Where is it now Ok here it is Direction Around 540 depends on how much customer scripting there is been added And You can go through this logic To see that we are dealing with a number of Concepts and trying to determine the permission or To edit own And to create and so forth And it all gets stored And given back to you Basically in the result set Ok So You could also just echo out the resolved bar down for something In the lock 22 C Exactly what is the result that you get from that structure So If we go back to The looks here View It is open that model You see that the custom scripting we looked at Basically gets added here From JCB That custom scripting that creates the button So you could come in here And you can just add a bar Dump Exit and Take this can do And Login as any kind of user on the site And then When you basically load the page it should show you The can do List Of that specific User Group Also keep in mind that here's the authorities setting That is applicable to the looks site View And it also controlled in the permission structure So there's a lot of permissions automatically being added to components build in JCB And you need to always keep that in mind It might look like things don't work while it actually works very well you just Haven't kept in mind that there is a permission is Structure And that you need to adapt that permission on structure as it's fitting to your project Ok well thank you for watching Hope this helps \ No newline at end of file +Hi I'd like to quickly give you a tutorial On how to Basically add An admin View To the front end of your site So There can be editing and submission Of the front end of this specific admin View now Illustrate this [00:00:23](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m23s) I'm gonna use the public version of JCB And it has this demo Version in it so basically first I'll just compile it and install it to the local Joomla website So we can see what happens And then install it And then basically open it So here we have the The demo version That is publicly available and it basically has a admin view called "Looks" [00:01:07](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m07s) So if you go to the list you of the admin View I call Looks you see there is none, we will create new And then There is basically a description box A more item where you can click And see some Custom Fields and fields Being built sorry email mobile birth Image website And your normal publish and permission structure for the view [00:01:37](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m37s) And the name field Now that's basically what I referred to as the admin View It's this combination of fields working together in one View Now what I will show you is how to add this Editing area, basically the these three tabs To the front end of your site So that it will function like a form Now who you would allowed to access the form will depend upon the permissions structure You see the permission structure Is what [00:02:14](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m14s) Actually controls who can edit And who can add Items to a specific admin View So currently as you can see your public cannot actually edit this If we created an item They cannot edit it so there's an item level on permissions and if I Close out of this Then you'll see here in options there is also a global control on Permissions So the global control of permissions [00:02:46](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) Is also if you want public to be able to submit To to this form you need to Allow them to be able to create so you would say allow And now the public is allowed to create And You see that usually Most components has more than one View This one only has one it's called look So you'll also have to Over here [00:03:13](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m13s) Say allow And if you want them to edit existing submissions Then there is the edit State edit own created by All these things in the Global Spec as well as in the local edit of The View So there is basically two switches here one is a Global switch and one that is specifically focusing on the view so if you cannot access the view on the front end After we've created it it is actually would need to come back to to this area and And sort out the permissions for the specific group Who should have access to the specific View On a front end [00:03:57](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m57s) so this permissional structure is quite intense and Extendable so that you can target specific groups with specific permissions and so forth For every View The JCB bolts in the admin As well as site Ok let me cancel out of here I'm not gonna Make any further changes here So we basically in the demo component now I'm gonna go back to JCB and basically I'm gonna flip one switch and then JCB will actually develop or write the code [00:04:34](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) For the site end of this component So I'm going back to JCB Going to components And I'm opening the component And now in the component there is an area called settings where obviously all your admin views Are linked right so I'm gonna open that Are usually there is a little bug in Joomla which if you open it the first time it doesn't Reflect the original setting So I usually just open it cancel it and then open it again and you'll see that the original setting is [00:05:17](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m17s) Is back And You see here that Edit create site view Must be set to "Yes" If it is set to "Yes" then it means that it's gonna create a site view Off this look as so that you can edit it on the site end and not only in the admin Area And it also means create items So I'm just gonna save this [00:05:44](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m44s) And then also save and close And then go back to compiler Compile Demo I see that off Go Install it Now let's go look at the code So looking at the demo websites folder structure we are going to components And then we'll see that there is a com underscore demo folder [00:06:19](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m19s) And we will see there is the modules as well as the controllers As well as the views So there is basically This is the view that was dynamically generated By JCB review called look And then the model also called look And the controller Are you can open that To actually see what was the code that was written [00:06:49](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m49s) And so as you can see it's basically looks very similar to the admin area except that it's been slightly Modified For your front end And it's requirements As you can see we were adding Some CSS classes and JavaScript From the back end And Then Here is the model [00:07:16](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m16s) Basically get item get form And then here is the controller Ok so we just showing at the code just basically what was created Now The fact that this was created Doesn't mean that there is actually Now set of links That you can click and edit the forms which was submitted or that there is a link to create any So these these things is what you need to do manually [00:07:51](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m51s) Now so Let's show you some of that as you can see there is two views here In called on the site views And one is called looks and other one is called looking As you can remember the one we looked at here Which I said was automatically generate is called look so that one isn't actually showing because it was just a tick box that created this whole view model and controller So you don't need to build The look view again [00:08:21](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m21s) But you need to get links to it Ok so In looks we are using a dynamic get And in looking as well so let's let's go to the dynamic get page So there is one called looks and looking so good let's go to the looks dynamic get So as you can see here is the dynamic get for the look Looks and it got a custom script area Were basically we're asking whether the items are set whether there are items and then we looping through them And during the looping process we basically determine By this ScanDo script here [00:09:10](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m10s) You see in the helper class there's a get action function The get action function asks whether look item With the current user has the edit option To the specific look item And if it does it actually in this little script here It builds an edit look button And dynamically adds that to the edit link Which is coupled to the item And then just continues on So it basically dynamically generates the button for edit here in the dynamic get [00:09:48](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m48s) Are you could have done that anywhere I just decided to do it here because then it actually gets added to the model which is more Where your logic For lots of your data structure should be placed And ok so now if you go back to this to the views the site views And we open the looks site view You see that we got the main get set as looks And here If you scroll down Well basically [00:10:25](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m25s) In this area here we are looping Through the look items And Echoing the edit link After the description And that means now the link that we built here in the dynamic Get Which is the button Will either be empty and therefore show nothing if the user doesn't have the permission to edit it Or it will actually show a button You also see [00:11:04](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m04s) There is currently as I look at this I haven't actually added A a link For creating new Looks and The same would be required to do that So You could use the same button script just copy that And Here at the head before the table You could [00:11:29](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m29s) Add a button to create new looks Now All you would need to change is basically This link here That it will have an ID to zero And then it will actually create a new Look So that's a quick tutorial On how to add An editable [00:11:53](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m53s) Admin View to the site End of your component And then link it into your side view so that you can basically click on a button and edit A specific ID View Or create more And then control that with this get action helper class Method Which gives you Basically whether it can be edited You can go look at this helper class in the code [00:12:23](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m23s) So let me just quickly open that for you So here in the code And helpers We open Demo PHP And we scroll down Until we get the method called getaction Where is it now Ok here it is [00:12:50](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m50s) getaction Around 540 depends on how much the customer scripting there is been added And You can go through this logic To see that we are dealing with a number of Concepts and trying to determine the permissional To edit own And to create and so forth And it all gets stored And given back to you [00:13:17](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) Basically in the result set Ok So You could also just echo out the result var dump or something In the look to see Exactly what is the result that you get from that structure So If we go back to The looks here View [00:13:42](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m42s) Let's just open that model You see that the custom scripting we looked at Basically gets added here From JCB That custom scripting that creates the button So you could come in here And you can just add a var Dump Exit and Take this can do [00:14:06](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m06s) And Login as any kind of user on the site And then When you basically load the page it should show you The can do List Of that specific User Group Also keep in mind that here's the authorities setting That is applicable to the looks site View And it also controlled in the permission structure [00:14:33](https://www.youtube.com/watch?v=tmB22d9dQ4M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m33s) So there's a lot of permissions automatically being added to components build in JCB And you need to always keep that in mind It might look like things don't work while it actually works very well you just Haven't kept in mind that there is a permissional Structure And that you need to adapt that permissional on structure as it's fitting to your project Ok well thank you for watching Hope this helps diff --git a/039-Automated-backup-system-in-JCB.md b/039-Automated-backup-system-in-JCB.md index a085728..05af39b 100644 --- a/039-Automated-backup-system-in-JCB.md +++ b/039-Automated-backup-system-in-JCB.md @@ -1 +1 @@ -Hi I would like to demonstrate to you the new automated backup feature that's been added to JCB It is part of a Extension Which I called the API Which really gives you the option of Querying JCB Via a URL To perform certain functions First of which would be to actually generate a backup We not sure exactly What kind of features we should be adding to this API And we started to discussion About this one kid hopping Welcome to Give me a shout To send me an email you can Just check here Email address Behind this link here Features we want to add to the API Currently the first one like I said is the backup feature Now JCB already Has in its Component area Export component feature which we basically just extended To automate But we've left it as well Here is a button called backup and it actually is the same feature except You can now manually also trigger that feature Now what does backup feature does Ida been triggered by a A cron job or being triggered by this button Is it actually Takes all your components And Exports them Encrypt stem Stores them on a local folder And emails the key to a Trusted email address Would you have set up Now The Components that are in your trash will not be Actually part of this backup So only components that are published Or unpublished or archived Will be in the back of every everything else will be Lord And Basically when the backup runs either manually or automated fire A cron job It will take hers components Use the specific keys as it would with an exporting of a component An encrypted And Store them in that folder as I said Now There are some things you need to set up For this to work As expected The first of these being in the options area of JCB there are some new Feature so let's just open that So we see there is now a mail configuration Idk IM And a cron job Tab in added and also this field here called API user Maybe let me start with this field The API user Obama Rolly be used 4 The ID that is used In the permission structure You see When you are in the components area And you trigger this feature manually It actually uses this current logged in user To determine whether that The components being you know encrypted and backed up Weather has the permission to actually Do that Now Getaway As we increase the permission structure of JCB You might end up having components that certain individuals who are in certain groups may not have access Them And then there might be components and Fields and buse that they may have access to Or some that they may not have access to And so we're ready now Laying some of the foundation to make sure that there isn't some loophole Where are there by Triggering a bash sorry at batch Update on export of components or backup The camp extrude certain components which they actually by Default don't have access to I know that's a long explanation but But that's just to give you a background to why we still need an API user We still need a user Which now if it's automated the backup That this user ID actually Allows him to make the backup So that means that the IP API user should be a user Which has the permission To all the actual components Fields and Well everything actually In the JCB component Now It is secure because like I said the component Gets Compiled And stored locally We might Consider adding The option to push the component backup to an FTP Server But that part is not fully functional yet We we have had D The proposals made to do that so that The Back-up is actually not even on the same system But I did it's secure on another system so if this system Collapses You you still safe You still got you your data out So that sounds to me as a good Idea and so we will be adding an FTP Option as well Which will very much for the work similar as your components When you compile a component and it sends it off to a sale server or Or such That is really the same features will make use of anyway so That's just talking about Selecting an API user And why that is important Now When we go to the cron job Tab Will see that there is some is true basic instructions here Ioffer goes if you familiar with cron jobs I suppose there everything is self explanatory Those who are not I would suggest to Google around Find some tutorials Read up Make sure you know what you're doing And that you're a very comfortable and setting up a cron job There are various ways for you to trigger this URL The system currently detects whether your system actually can run crawl request And if it can't it will fall back on the we get option Assuming that JCB is installed In an environment that allows these two functions to work If not you can simply take Only the URL And run it in a cron job In in the manner that is Uno applicable to your system And know that This your L actually just triggers The backup to start And when the backups finished It actually just tells you The same message that you will get If you run the backup by clicking back up here You see there is a green message that pops up Saying yes the backup was done the email was sent Does are the only messages That also actually Gets returned on this URL So they they are the same Now We currently throwing that responds away But you could Added to log Depending on how regularly this cron jobs running There isn't the date currently I think It might make sense for us to add a date But the states there isn't one Ok so now we if you're running in a firewall your Joomla website has a firewall install Bald like RS firewall Then you you might need to adapt your Your curl request To behave like a real browser And here is a a a a post on stackoverflow that could actually help you Understand more about that So now currently the Chrome backup folder path is set Here And so it can't be only backups to a local folder As I said we will add an FTP option here Will still work out how we can do that and still have it secure Joomla doesn't by Default actually Encrypt fields in the Inno Global configuration of your component And So that's my be part of what makes it difficult for us to implement This Here but But do you will come up The point is currently It stores it into a local folder And it Emails the backup key to the email address that you set in here No make sure that email address is secure And that it is safe Obviously because the keys are being sent to it Now here is a naming structure for your file By Default it actually adds only up till the day so it will Make backups all through the day but override the file every time Unless you add an hour then it'll only per hour over I did I need to add a minute It will actually never override it because it will be a different minute every So that is To rename your package and to see how much of the backups you want Keep And If we go to the mail configuration area you see that it currently set to use the global Mail Configuration switch is your Joomla default Now I would advise that you use a very secure method of sending Emails So I the SMTP Bees overriding the SMTP settings here Or if you use the global ones then override or insured at your Global Email settings in Joomla is also using SMTP That it actually runs through an SSL and is secure Ok the dkim is also a added feature Which can increase Trust And security Off your emails Then there is the folder sorry there the company Details Which At this stage Is important To add since it will also become part of the backup package And we will look at that again when we restore a backup to show you where this information comes up Ok so that some of the settings you need to first set Within your Global configuration Now once you've set those settings Company settings your cron job settings Your local path to email the name And your User API user You can save and close this area And we can start looking at a component See this feature in action Since this is a default Joomla website Sorry tomorrow Install and JCB install There's only one component here And it's the demo component Now usually the demo component doesn't have Encryption key So I'll open it And I've already said it because I've done this video A few times So You basically come and set an export key In at least one of the components That will be part of the backup If any one of the components That are being backup have an export key It will extreme Krypt all the components with that export key If multiple ones have an export key it will Combine the skis To use as the input Pinky It has those keys so the actual key is not what is actually being used And the actual key that's being used is the one that will be emailed out To do that trusted email address So we'll save and close the the demo component And Then We will just run a manual backup here Which like I explained before is really similar to the cron job except that it's triggered by clicking This button Ok so we just click it there And The moment since it's a very Just one component It's not a very big Process it should It finished quite quickly And it will basically say ok The Back-up has been Done successfully The owner details was set so if for some reason you forgot To set the owner details in the options area it will actually tell you that here And the email With the new key was sent So now To make sure that your backup actually works You should now go check the folder In which you set The Back-up should be placed And see whether the backup is there And also Check the email addresses see where they Did they received the key So I'll be doing that quickly Ok I see I have a backup actually here in the folder As expected So the backups been done I can double click into the backup And make sure that it has all the Expected files And at this stage it looks It Like It does if you have a lot of custom Files That you've added into the component There will also be an extra custom Folder in the zip Document And I not only an image one Ok so we will test this backup by actually importing it But first let's see if we will see if the email as well So here we can see that it also send the email as expected With the corresponding key Will be using this kit test the backup Be sure again like I said that it actually sent the key Do a secure Website email address And that That The even the email that sense The Email from Gmail Is using a security LSM Now let's test this backup A backup only makes sense if we actually lost our data so I'm gonna take Component And basically Wipe this one is deleted Throw that in trash Then go to trash Hand Empty the trash So now There is no components Chicken import components Now we need to browse to the directory Weather component was backed up so we'll click on the directory tab There we have the components Fast to the actual backup A package And we click on get file Now we will take that key that was sent to us via the email And we will force the update And will update key here And we'll click continue Sorry I just step back from moment again Because I realised it didn't explain with you seeing here and like I said before your Package data of the owner of the package is displayed here And the package details are displayed here So if you have more than one component backed up all those components will show Here on the components being imported And here You will see the The package owner Details And get the key from this link here So I will Again do this import I just wanted to quickly Get back to that Let's Let's click continue Wonderful so we have the component back It's all being restored And that's really what the purposes of the backup Is it when something goes wrong You can actually come back to where it was when the backup was made We can test with a backup has been successfully restored by going to the compiler And then selecting the component And clicking on compile Russia currency is been completely successfully built And we can now click on install the demo component And then we can even go To the demo component And see that Everything is actually working Adding a new look They said all the various fields As it usually R Available in the demo component Well thank you for watching that is automated settings for JCB And setting them up and you making use of them \ No newline at end of file +Hi I would like to demonstrate to you the new automated backup feature that's been added to JCB It is part of a [00:00:13](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m13s) Extension Which I called the API Which really gives you the option of Querying JCB Via a URL To perform certain functions First of which would be to actually generate a backup We not sure exactly What kind of features we should be adding to this API And we started to discussion [00:00:42](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m42s) About this on GitHub and You're welcome to Give me a shout Just send me an email you can Just check here My email address is Behind this link here Features we want to add to the API Currently the first one like I said is the backup feature Now [00:01:07](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m07s) JCB already Has in its Component area An export component feature which we basically just extended To automate But we've left it as well Here is a button called backup and it actually is the same feature except You can now manually also trigger that feature Now what this backup feature does Either being triggered by a [00:01:36](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s) A CronJob or being triggered by this button Is it actually Takes all your components And Exports them Encrypts stem Stores them on a local folder And emails the key to a Trusted email address Would you have set up [00:01:58](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m58s) Now The Components that are in your trash will not be Actually part of this backup So only components that are published Or unpublished or archived Will be in the backup every everything else will be ignored And Basically when the backup runs either manually or automated via A CronJob [00:02:26](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m26s) It will take those components Use the specific keys as it would with an exporting of a components An encrypted And Store them in that folder as I said Now There are some things you need to set up For all this to work As expected The first of these being in the options area of JCB there are some new [00:02:52](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m52s) Feature so let's just open that So we see there is now a mail configuration at DKIM And a CronJob Tab it added and also this field here called API user Maybe let me start with this field The API user Primarily be used for The ID that is used [00:03:20](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m20s) In the permission structure You see When you are in the components area And you trigger this feature manually It actually uses this current login user To determine whether that The components being you know encrypted and backed up Whether he has the permission to actually Do that Now [00:03:44](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) This a way As we increase the permission structure of JCB You might end up having components that certain individuals who are in certain groups may not have access to them And then there might be components and Fields and views that they may have access to Or some that they may not have access to And so we're already now Laying some of the foundation to make sure that there isn't some loophole Where are there by Triggering a bash sorry a batch [00:04:17](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) Update or export of components or backup They can't extrude certain components which they actually by Default don't have access to I know that's a long explanation but It's that's just to give you a background to why we still need an API user We still need a user Which now if it's automated the backup That this user ID actually Allows him to make the backup So that means that the IP sorry The API user should be a user [00:04:52](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m52s) Which has the permission To all the actual components Fields and Well everything actually In the JCB component Now It is secure because like I said the component Gets Compiled And stored locally We might [00:05:14](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m14s) Consider adding The option to push the component backup to an FTP Server But that part is not fully functional yet We we have had the The proposals made to do that so that the backup is actually not even on the same system But did it secure on another system so if this system Collapses You you still safe [00:05:41](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m41s) You still got you your data out So that sounds to me as a good Idea and so we will be adding an FTP Option as well Which will very much for the work similar as your components When you compile a component and it sends it off to a sale server or Or such That is really the same features will make use of anyway so That's just talking about Selecting an API user [00:06:13](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m13s) And why that is important Now When we go to the CronJob Tab We will see that there is some is basic instructions here For those of you familiar with CronJobs I suppose there everything is self explanatory Those who are not I would suggest you Google around Find some tutorials Read up Make sure you know what you're doing [00:06:40](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m40s) And that you're a very comfortable and setting up a CronJob There are various ways for you to trigger this URL The system currently detects whether your system actually can run curl request And if it can't it will fall back on the getoption Assuming that JCB is installed In an environment that allows these two functions to work If not you can simply take Only the URL And run it in a CronJob In in the manner that is [00:07:16](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m16s) You know applicable to your system And know that This URL actually just triggers The backup to start And when the backups finished It actually just tells you The same message that you will get If you run the backup by clicking backup here You see there is a green message that pops up Saying yes the backup was done the email was sent [00:07:42](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m42s) Those are the only messages That also actually Gets returned upon this URL So they they are the same Now We currently throwing that responds away But you could Add it to a log Depending on how regularly this CronJobs running There isn't the date currently I think [00:08:06](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) It might make sense for us to add a date But at this stage there isn't one Ok so now we if you're running in a firewall your Joomla website has a firewall installed like RS firewall Then you you might need to adapt your Your curl request To behave like a real browser And here is a a a a post on stackoverflow that could actually help you Understand more about that So now currently the [00:08:39](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m39s) Cron backup folder path is set Here And so it currently only backups to a local folder As I said we will add an FTP option here We will still work out how we can do that and still have it secure Joomla doesn't by Default actually Encrypt fields in the You know Global configuration of your component And So that's might be part of what makes it difficult for us to implement This [00:09:11](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m11s) Here but But we will work on that The point is currently It stores it into a local folder And it Emails the backup key to the email address that you set in here Now make sure that email address is secure And that it is safe Obviously because the keys are being sent to it Now here is a naming structure for your file By Default it actually adds only up till the day so it will [00:09:45](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m45s) Make backups all through the day but overwrite the file every time Unless you add an hour then it'll only per hour overwrite it And if you add a minute It will actually never overwrite it because it will be a different minute every time So that is To rename your package and to see how much of the backups you want to Keep And If we go to the mail configuration area you see that it currently set to use the global Mail Configuration which is your Joomla default [00:10:23](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m23s) Now I would advise that you use a very secure method of sending the emails So either SMTP overwriting the SMTP settings here Or if you use the global ones then overwrite or insured at your Global Email settings in Joomla is also using SMTP That it actually runs through an SSL and is secure Ok the DKIM is also a added feature Which can increase [00:11:00](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m00s) Trust And security Off your emails Then there is the folder sorry the company Details Which At this stage Is important To add since it will also become part of the backup package And we will look at that again when we restore a backup to show you where this information comes up [00:11:28](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m28s) Ok so that some of the settings you need to first set Within your Global configuration Now once you've set those settings Company settings your CronJob settings Your local path the email the name And your User API user You can save and close this area And we can start looking at a component [00:11:54](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m54s) See this feature in action Now since this is a default Joomla website Sorry Joomla Install and JCB install There's only one component here And it's the demo component Now usually the demo component doesn't have Encryption key So I'll open it And [00:12:18](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m18s) I've already set it because I've done this video A few times So You basically come and set an export key In at least one of the components That will be part of the backup If any one of the components That are being backup have an export key It will actually encrypt all the components with that export key If multiple one's have an export key it will Combine those keys [00:12:47](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m47s) To use as the encryption key It hashes those keys so the actual key is not what is actually being used And the actual key that's being used is the one that will be emailed out To do that trusted email address So we'll save and close the the demo component And Then We will just run a manual backup here Which like I explained before is really similar to the CronJob except that it's triggered by clicking This button [00:13:18](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m18s) Ok so we just click it there And The moment since it's a very Just one component It's not a very big Process it should be finished quite quickly And it will basically say ok The backup has been Done successfully [00:13:36](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m36s) The owner details was set so if for some reason you forgot To set the owner details in the options area it will actually tell you that here And the email With the new key was sent So now To make sure that your backup actually works You should now go check the folder In which you set The Backup should be placed And see whether the backup is there And also [00:14:06](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m06s) Check the email address and see whether that they receive the key So I'll be doing that quickly Ok I see I have a backup actually here in the folder As expected So the backups been done I can double click into the backup And make sure that it has all the Expected files And at this stage it looks It Like It does if you have a lot of custom Files [00:14:38](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m38s) That you've added into the component There will also be an extra custom Folder in the zip Document And I not only in image one Ok so we will test this backup by actually importing it But first let's see if we received the email as well So here we can see that it also send the email as expected With the corresponding key Will be using this key to test the backup [00:15:08](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m08s) Be sure again like I said that it actually sends the key to a secure Website email address And that That That even the email that sense The Email from Joomla Is using a secure SSL by SMPT Now let's test this backup [00:15:35](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m35s) A backup will only makes sense if we actually lost our data so I'm gonna take the component And basically Wipe this one just delete it Throw that in trash Then go to trash and Empty the trash So know There is no components [00:16:10](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m10s) Click on import components Now we need to browse to the directory Where that component was backed up so we'll click on the directory tab So there we have the components The path to the actual backup package And we click on Get File Now we will take that key that was sent to us via the email And we will force the update And will add that key here [00:16:45](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m45s) And we'll click continue Sorry I just step back for a moment again Because I realized I didn't explain what you'd seeing here and like I said before your Package data of the owner of the package is displayed here And the package details are displayed here So if you have more than one component backed up all of those components will show Here on the components being imported And here You will see the The package owner [00:17:17](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m17s) Details And get the key from this link here So I will Again do this import I just wanna to quickly Get back to that Let's Let's click continue Wonderful so we have the component back It's all being restored And that's really what the purposes of the backup Is it when something goes wrong [00:17:40](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m40s) You can actually come back to where it was when the backup was made We can test with a backup has been successfully restored by going to the compiler And then selecting the component And clicking on compile And as you can see is been completely successfully built And we can now click on install the demo component And then we can even go To the demo component And see that Everything is actually working [00:18:18](https://www.youtube.com/watch?v=GUWZaODo_IM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m18s) Adding a new look There's a all the various fields As it usually are Available in the demo component Well thank you for watching that is automated settings for JCB And setting them up and you making use of them diff --git a/040-Adding-Helper-Structures-to-any-JCB-component.md b/040-Adding-Helper-Structures-to-any-JCB-component.md index 5389686..6f321a2 100644 --- a/040-Adding-Helper-Structures-to-any-JCB-component.md +++ b/040-Adding-Helper-Structures-to-any-JCB-component.md @@ -1 +1 @@ -Hi Recent question came up that was asking about help menu integration For JCB components You see the JCB itself Hazardous Help document area No I have not actually had time to Expand upon this help document area as much as I would like to and maybe in the future We would Stall expand on it but it is a feature That actually is very easily add it to any other JCB component If you have purchased The Sermon distributor package Let me show you what I mean There is a place One of one of the repositories on the BDM data I called JCB packages So you go to BBM - i o And then jayshree packages on GitHub And one the package is here is Simon distributor You can Download this package But Before you haven't purchased a key for it you can't really use it So the get a key you would basically click on this link here Which is VDM dot bz Ford slash JCB Dash packages This will take you to a Place on our website Where you can purchase The purchase the Sermon distributor package Barrister Link that you would need to get to You can also go to VDM dot IO Which is Our website Some just open that and then under services You can also find Jamila Bassary JCB packages You just click on that it will take you to the same place So there are a few packages already available Which basically is a fully mapped component Inside of JCB Did you purchase this you would get information and a code and everything which will help Help you install the simmen distributor package So I'm gonna quickly install the summer distributor package On this demo website that I am using I'm not gonna demonstrate how I did that because if you purchase the package you would have all the instructions And how to do this once you think stalled the cement is to be the package you can go to the admin View Use And you will find that the admin views now has this New admin view called Help document It's just As one admin view called help document Now you by Default With Jason B have this demo component So let's open the demo component and let's add the helper structure to it to demonstrate To you how it works Now At the moment it doesn't have any helper structure at all it is just a demo car Component with only a few Structures actually I think it only has that Seattle view it has one view called look And got no crust and views but it got a site view port looks and looking So what we'll do first is we gonna go to the admin views I'm gonna click here to add another row And we are gonna add the help documents The support icon Oh yes we can have this an ticked problem I'm sorry about this where we are Busy phasing out the repeatable fields so you'll end up working with Sub fields in the future will stop for But the fixtures in the meanwhile you just closed that and open it again and now you'll have all those Boxes in place so I'm just gonna add that You again We gonna use the support icon and we gonna leave Most of this to defaults except it doesn't have meta we don't Don't use access We can do the import but it doesn't have a front end editing We don't want you to have one and We would have it in the 2nd position And maybe not part of the main menu I think that's good enough now We'll play Save this And we'll save and close that's really all it takes So you've just install the Sermon distributor package into your JCB that Added the helper document menu so the admin view and I've just linked That will do the demo component then I'll go to the compiler And I'm basically just gonna compile that there more component And as you can see here it isn't here yet installed on my website this is quite important Not to have it in installed on the website Then I'm gonna compile it Then I'm just gonna install it Now if I go to demo We will see That it has this new help her documents area Now at the moment it doesn't have any help her documents What we can do to change that this weekend then go to the helper documents click new And when it's open we'll select which group you want to Target So I'm just gonna select all Then I'm gonna select the I wanna target a view in the admin area The demo will be basically the desk dashboard Dennis help documents This import I'm gonna take looks I wanna target looks area Then I can give it a title And I can say what type of help when you do I want I want a link to an Joomla article What to put in my own custom text Or I want a link to an external URL This is usually what we will use when we ship a component Since this will then give us the opportunity to link it to an external URL which We can updating edit without sending an update or an air Uno and upgrade To the component we can just change the help menu itself sorry there they help pages which LinkedIn to and this is how JCB is been setup JCB is linking to an external Help structure but you can decide whatever you wanna do with this component you could say text for Example And you could say This Is the help You need And whatever And save and close Now if we go to looks We'll see that done automatically there is a new button here called health and if we click on it It actually opens that help And so you can now even going back to If you now click on new then that help menu won't show anymore But you can close out here And you can then go back to the help documents Great another one Again select all you could target a specific group Or you can just talk at all groups Again admin area you can also target the site area and be able to actually Link it to any of the front end Areas then we can say now we are gonna not Target the list but the edit area which is singular And again we can say Give it a title And again this time let me link it to an URL And then Save and close And then let's go to that area And new And now it's either that area also has a help button if we click on it It opens that URL In a pop-up and as you see I just selected A video And so That is how you can actually Link Two other external sources to be forgiving the help To the specific page in the instructions that is necessary And you can then Having set up a few help menus for the component you can go back to component Builder And 2 the admin View Area And Let's say you have a help document linked to component Demo but it is Do you want to ship it with the information that you've Now created as help Inside of the component then what I would usually do is I would actually Open this component Sorry this is admin View And I'll give it a system name of demo And I'll go to the MySQL Say yes I wanted to link it on select Table And then I would go to the demo table Help document CC demo help document click on that And I'll just remove some of the Values that I know Is not necessary Ok I think that's fine Created modified can stay I wouldn't even take the version out but Doesn't even matter Where can I certainly take that one out And there we go there's seems to be fine And save and close Now I can save this Or save as copy And if I have another component I'll just copy this one And link it to that components that a base The only thing to remember when you've done this Is it you must first compile the component before you uninstall the local So you would first come here and compile that component Now let me quickly show you in the code what is happened Basically hive Opened this zipped package of a component gone to admin area then to see Equal And then if I go to the install MySQL Document I'm just double clicked on that And it's open this document I now see that they obviously has this Insert table But it also has Insert Data That we created see there is This is the help You need there's a URL why at it And it will basically insert this data Into the database When this component is installed So Having done those changes and linking the table to the component It actually goes to the database in the extract these values and places it Into the dump file of the Component It does not place it into the update file just that you know and that means that If users already have your component installed and they install this It will not have these helper structures you'll have to use Custom scripting in the component area in the PHP tab there Place for update and uninstalled and installed How to add custom PHP script where why you can insert this data into the Database Ok now I'm gonna show you what happens if the component is no longer installed And you try to compile it The first thing is I'm gonna quickly on installed that they're more component No I'm gonna go to the compiler And I'm gonna try and compile this component You give me this error And basically it's telling you that it couldn't find The stable It couldn't find at table and it's because you uninstalled it And the only way then to compile this component Would be to go back to the admin review And D-Link the component from the table So like I said make sure to compile the component Before you uninstall The component which you are linking to So we linked To the installed components table The other way to try and avoid this Is there actually instead of linking to the table Like we did here is 2 instead use a dump file So I would say you click on dump You open your sequel File that it created And you copy The the values from that file Got whatever And paste as values in here Like that You could leave the comment or even leave a comment out And this way if we save and close We will now Even if the component is uninstalled be able to compile And still have this demo Or Shipping values Of the component in place So let's try compiling it again This time it compiled without any errors And if we go open the ZIP package And then open this install MySQL Dot utf-8 dot sequel file We will see that it added that dump Values right back into the file and that's exactly what you would like it to do Anyway This was just to demonstrate actually How to add A help menu structure To any JCB component Basically you could do that without purchasing the Sermon distributor from Poland The only part that really is necessary Is for you to grade A helper document And of course This help her document That we are using from the Sermon distributor package has custom scripting in it And it's disgusting scripting that makes it a doctor Bill to any other component I can Quickly Show you which areas discuss and scripting must go But obviously I would rather wanted to buy the components package It's really only in a relation To the articles And to the site views Any admin View That we have custom Fields That are a little tricky As well as the user group You need to Have a little perspective on how to setup user groups So these are the two areas that are difficult the articles one as well Because JCB when it has When it detects that this is a help help a document and edit takes the specific field there Values that are set up correctly then it automatically Build some of the front-end necessary concepts as well as adding Understand I make behaviour in the backend I hope this helps 2 Do at least show you that it is very doable adding and help Structure to a component What I think makes this quite unique Is that The component then ships with this Pre built in health structure but the user that uses your component You might want to give extra help or little different kind of help to the front end users of his Website And he will be having access to this helper area and editing the it and changing it to You to the correct wording and expectations that he might have Or she Might have And so that is the way that you could add helper structures To your JCB components Thank you for watching \ No newline at end of file +Hi Recent question came up that was asking about help menu integration For JCB components [00:00:11](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m11s) You will see the JCB itself Has this Help document area Now I have not actually had the time to Expand upon this help document area as much as I would like to and maybe in the future We would Still expand on it but it is a feature That actually is very easily added to any other JCB component If you have purchased The Sermon distributor package [00:00:46](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m46s) Let me show you what I mean There is a place One of the repositories on the VDM data I called JCB packages So you go to VDM - io And then JCB -Packages on GitHub And one of the package is here is Sermon distributor You can Download this package But Before you haven't purchased a key for it you can't really use it [00:01:18](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m18s) So to get a key you would basically click on this link here Which is vdm.bz /jcb -packages This will take you to a Place on our website Where you can purchase The purchase the Sermon distributor package Here is the Link that you would need to get to [00:01:46](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) You can also go to VDM dot IO Which is Our website Some just open that and then under services You can also find Joomla Sorry JCB packages You just click on that it will take you to the same place So there are a few packages already available Which basically is a fully mapped component [00:02:13](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m13s) Inside of JCB So if you purchase this you would get information and a code and everything which will help you install the Sermon Distributor package So I'm gonna quickly install the Sermon Distributor package On this demo website that I am using I'm not gonna demonstrate how I did that because if you purchase the package you would have all the instructions And how to do this once you have installed the Sermon Distributor package you can go to the admin views And you will find that the admin views now has this [00:02:53](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m53s) New admin view called Help document It's just As one admin view called help document Now you by Default With JCB have this demo component So let's open the demo component and let's add the helper structure to it to demonstrate To you how it works Now At the moment it doesn't have any helper structure at all it is just a demo Component with only a few [00:03:28](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m28s) Structures actually I think it only has that see admin view it has one view called look And got no custom views but it got a site view called looks and looking So what we'll do first is we gonna go to the admin views I'm gonna click here to add another row And we are gonna add the help documents The support icon Oh yes we can have this unticked problem I'm sorry about this while we are Busy phasing out the repeatable fields so you'll end up working with Sub fields in the future sub forms But to fix this in the meanwhile you just closed that and open it again and now you'll have all those Tick boxes in place so I'm just gonna add that [00:04:19](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m19s) view again We gonna use the support icon and we gonna leave Most of this to defaults except it doesn't have meta we don't Don't use access We can do the import but it doesn't have a front end editing We don't want it to have one and We would have it in the 2nd position And maybe not part of the main menu I think that's good enough now We'll play [00:04:52](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m52s) Save this And we'll save and close that's really all it takes So you've just install the Sermon distributor package into your JCB that Added the helper document menu sorry the admin view and I've just linked That view to the demo component then I'll go to the compiler And I'm basically just gonna compile that demo component And as you can see here it isn't here yet installed on my website this is quite important Not to have it in installed on the website Then I'm gonna compile it Then I'm just gonna install it [00:05:43](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) Now if I go to demo We will see That it has this new helper documents area Now at the moment it doesn't have any helper documents What we can do to change that is we can then go to the helper documents click new And when it's opened we'll select which group you want to Target So I'm just gonna select all Then I'm gonna select the I wanna target a view in the admin area The demo will be basically the desk dashboard Then there is help documents [00:06:23](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m23s) This import I'm gonna take looks I'm on a target looks area Then I can give it a title And I can say what type of help do I want, I want a link to an Joomla article Want to put in my own custom text Or I want a link to an external URL This is usually what we will use when we ship a component Since this will then give us the opportunity to link it to an external URL which We can update an edit without sending an update or you know and upgrade To the component we can just change the help menu itself sorry the the help pages which We linked them to and this is how JCB is been setup JCB is linking to an external Help structure but you can decide whatever you wanna do with this component you could say text for [00:07:20](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m20s) Example And you could say This Is the help You need And whatever And save and close Now if we go to looks We'll see that then automatically there is a new button here called help and if we click on it It actually opens that help [00:07:47](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m47s) And so you can now even going back to If you now click on new then that help menu won't show anymore But you can close out here And you can then go back to the help documents create another one Again select or you could target a specific group Or you can just target all groups Again admin area you can also target the site area and be able to actually Link it to any of the front end Areas then we can say now we are wanna not [00:08:32](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m32s) Target the list but the edit area which is singular And again we can say Give it a title And again this time let me link it to an URL And then Save and close And then let's go to that area And new And now we'd see that area also has a help button if we click on it It opens that URL [00:09:13](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m13s) In a pop-up and as you see I just selected A video And so That is how you can actually Link To other external sources to be giving the help To the specific page in the instructions that is necessary And you can then Having set up a few help menus for the component you can go back to component Builder And to the admin View [00:09:46](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m46s) Area And Let's say you have a help document linked to component Demo but it is You want to ship it with the information that you've Now created as help Inside of the component then what I would usually do is I would actually Open this component Sorry this admin View And I'll give it a system name of demo And I'll go to the MySQL [00:10:31](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m31s) Say yes I wanted to link it I'll select Table And then I would go to the demo table Help document you see demo help document click on that And I'll just remove some of the Values that I know Is not necessary Ok I think that's fine Created modified can stay I wouldn't even take the version out but [00:11:05](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m05s) Doesn't even matter We can most certainly take that one out And there we go those seems to be fine And save and close Now I can save this Or save as copy And if I have another component I'll just copy this one And link it to that components data base The only thing to remember when you've done this [00:11:36](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) Is it you must first compile the component before you uninstall the local component So you would first come here and compile that component Now let me quickly show you in the code what is happened Basically I've Opened this zipped package of a component gone to admin area then to sql And then if I go to the install MySQL Document I'm just double clicked on that And it's open this document I'll now see that they obviously has this [00:12:25](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m25s) Insert table But it also has Insert Data That we created see there is This is the help You need there's a URL I added And it will basically insert this data Into the database When this component is installed [00:12:50](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m50s) So Having done those changes and linking the table to the component It actually goes to the database in the extract these values and places it Into the dump file of the Component It does not place it into the update file just that you know and that means that If users already have your component installed and they install this It will not add these helper structures you'll have to use Custom scripting in the Joomla component area in the PHP tab there is a place for update and uninstalled and installed [00:13:40](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m40s) To add custom PHP script where why you can insert this data into the Database Ok now I'm gonna show you what happens if the component is no longer installed And you try to compile it The first thing is I'm gonna quickly uninstalled the demo component Now I'm gonna go to the compiler And I'm gonna try and compile this component It will give me this error And basically it's telling you that it couldn't find This table [00:14:24](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m24s) It couldn't find that table and it's because you uninstalled it And the only way then to compile this component Would be to go back to the admin view And deLink the component from the table So like I said make sure to compile the component Before you uninstall The component which you are linking to So we linked To the installed components table The other way to try and avoid this [00:14:55](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m55s) Is to actually instead of linking to the table Like we did here is to instead use a dump file So I would say you click on dump You open your sql File that it created And you copy The the values from that file or cut whatever And paste as values in here Like that [00:15:28](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m28s) You could leave the comment or even leave a comment out And this way if we save and close We will now Even if the component is uninstalled be able to compile And still have this demo Or Shipping values Of the component in place So let's try compiling it again This time it compiled without any errors [00:16:04](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m04s) And if we go open the ZIP package And then open this install MySQL .utf8.sql file We will see that it added that dump Values right back into the file and that's exactly what you would like it to do Anyway This was just to demonstrate actually How to add A help menu structure To any JCB component [00:16:45](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m45s) Basically you could do that without purchasing the Sermon distributor component The only part that really is necessary Is for you to create a helper document And of course This helper document That we are using from the Sermon distributor package has custom scripting in it And it's this custom scripting that makes it a adaptable to any other component I can Quickly Show you which areas this custom scripting must go [00:17:18](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) But obviously I would rather wanted to buy the components package It's really only in a relation To the articles And to the site views And the admin View That we have custom Fields That are a little tricky As well as the user group You need to [00:17:42](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m42s) Have a little perspective on how to setup user groups So these are the two areas that are difficult the articles one as well Because JCB when it has When it detects that this is a help helper document and it detects those specific field Values that are set up correctly then it automatically Build some of the front-end necessary concepts as well as adding This dynamic behaviour in the backend I hope this helps to To at least show you that it is very doable the adding and help [00:18:25](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m25s) Structure to a component What I think makes this quite unique Is that The component then ships with this Pre built in help structure but the user that uses your component He might want to give extra help or little different kind of help to the front end users of his Website And he will be having access to this helper area and editing it and changing it to To the correct wording and expectations that he might have Or she [00:18:59](https://www.youtube.com/watch?v=nw9YPu9emws&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m59s) Might have And so that is the way that you could add helper structures To your JCB components Thank you for watching diff --git a/041-Upgrade-to-JCB-v2.5.8-and-using-the-new-Admin-View-and-Admin-Fields.md b/041-Upgrade-to-JCB-v2.5.8-and-using-the-new-Admin-View-and-Admin-Fields.md index e2145d5..2e09023 100644 --- a/041-Upgrade-to-JCB-v2.5.8-and-using-the-new-Admin-View-and-Admin-Fields.md +++ b/041-Upgrade-to-JCB-v2.5.8-and-using-the-new-Admin-View-and-Admin-Fields.md @@ -1 +1 @@ -Hi I've got your ma Install here with JCB Joomla component Builder 2.5.6 I've got quite a lot of components That I have Imported From another day CB And Basically all of it is working If we were to look Inside of them It really looks the way there but it should And it's expected Now Jamar has Conveniently Decided to Get rid of this repeatable Field Which pops up into a little Model And So we have systemically been removing this field From JCB Just to show you We've already done that And other areas of JCB Like in the language area We were too Open Any of these Language strings You see that we already have the repeatable field Set up here Now This would have been a simple as changing the fuel type Within JCB to achieve Only Reality is that the compiler As well as one other feature which is the Joomla components Can be exported in jsp packages and imported And so These features are mapping into these component concepts Hello there Fuel structurally how old data stored In a Jason By the Pitbull fields Are different from how it's being stored in the subform fields Are gonna go into explaining what a difference is There is actually If you think it's been open on get help about this And so We have Taken on the task of the Sporting all of this With this next release which is JCB 2.5 point eight The whole admin View area Will now be moved over to this new form Sop form layout So if I was to open an app then View now It basically has The old Repeatable field concept As you would have learnt with all the tutorials we've done So your permissions is one of those tabs the fields The conditions the linked fields And then you have a list of the fields that are linked to the admin View And you've got some custom buttons you could Setup and it's also A Repeatable field As well as linking a sequel Clicking on table this is also repeatable field Unimodal So all of these different fields on our gonna be moved to subfields Because of space and statistics We will Move some of these Fields into tabs I will try and do it in a way that seems obvious and that he wouldn't feel lost So just up front The fields This Fields button Are are going to be moved To the fields tab And so does The conditions move there They will be in new tab called settings so basically this tablet stay there And will call that details and a new tab with settings And the rest of the repeatable fields that are remaining On this side will be placed there Ok so that's just a heads up on what's gonna happen But this is gonna happen really without you doing much Basically all you need to do is upgrade And We have added a number of scripts Did you can actually go and look at On Gear Bob if you like And I'm doing this recording The stage in bronze Is where you will see these changes So Basically if we were to go to the script This is the script that will Convert The Fields and all the tables and everything Images go down to that area To hear we have a function Inside of a method More like an anonymous function And Basically this is what converts the repeatable fields So I'll be using this function over and over As you can see we've done It was so upgrade to version 2.5.5 And Then there is another upgrade with 2.7 which was not really released because I'm having made this This change We still need to to convert the repeatable fields And that will continue to run until 2.5 point 9 Now The way does this Is it really Targets The various Up here There's to convert repeatable function at Target all these fields Chicken C Inside the admin View And it passes it over to this Convert repeatable Which is really going to do the work and this function Like I said if you can look at it Are we here If you are uncertain of doing this You can come and look at this function here And I will now also demonstrate that it actually does work well The only thing that I have actually noticed It's like with this website that we are working on here We talking about houses of values Well Even more than thousands And I have found it It sometimes does not convert every single value And so because of that We actually did another fix Which Goes beyond and ensures that this upgrade will not cause any Internal conflicts And that is within the Back end And within the model There are a few places where these Newfields will now exist One of them is conditions Field conditions and the other one is as admin Fields so open that one Open this one And obviously Anna Or not Not that one Sysadmin View These are the models in which these field changes will take place And you see that within the Get item Method at the very end Of this method In the admin View We are at a function Which would basically check If this These Fields were updated during the upgrade And if it were not updated That is while the field is busy loading and you're opening the page Ill check whether it's been updated If it's not updated it will actually make Do the update And add it to the update object And then basically check every field All the way down To hear And then if it says that there is been any one of those fields Found to be You know ready to update Then will run the update And after that it will never Do it again Because you see the way there A the arrays constructed This Will no longer exist once it's been moved to a subform Storage The subform array structure is different So Once you open any of the items it will automatically convert it and make sure that it's gone Converted The other thing that we've done Because you most probably will not all open every view or every Admin View Is Even when the new admins Fields we've done the same So you can see here In the Athens Fields we are also making sure that that update is there And the same with the ATT and field conditions It's also there But then there is one more place where we also add these Checks and that's actually in the compiler So even if you didn't go and open any of these views and you just went straight to the compiler And try to compile in of your components The compiler obviously now been adapted Do instead Actually Use the new sub form structure Within it's compilation To within the get file where most of these sop forms are now needed We have In the get admin Functional images get there 4 years to get admin View Method of function class method And you see we are checking Weather in still in a repeatable field And if he is We convert it And we again started to the update object That While it's getting this one at the view at the very end So every where it's doing it check If it's not been converted converts it's it's back to the data set And also to ensure that we store it back into the database Little Stream And So It Goes On Doing it everywhere Where we You know expect To define values that still You know may have been missed And then hear it very end of this function Which is a little Figure supposed If we found that there are any updates we run the update And after that that view is been updated and it will never need to be updated again so these are the chi Kind of Trichazole How can I put it Fixes really That we put in place when you already have a JCB with Anna enderson down today Data and it is just too big to do just with the normal install Then all these admin views will B Updated and adapted As you start using JCB And you should not really anywhere at any time experience Any conflicts In fact if you do the reason for me making this tutorial Is it you can actually get into the code And if you can You know Open an issue on GitHub And give me heads up so I can You know Pat's whatever you find And push it out the rest the community Ok so that was just a quote side of things now getting back to 2 hour install here I think what I'll do is I'll What is open Maybe this afternoon And then I'm gonna go And Basically Install The The upgrade I'm just gonna selected it's not been released yet So this is a pre-dinner station Just to ensure everything works So if it doesn't you even see that So let's just select this file from my computer Ok there it goes busy installing it It should take a while it's quite a big dataset And you can just wait it out It wouldn't shouted you if it missed certain values I don't know why doesn't but Head goes You upgrade been successful And you are now on washing 2.5 point eight And if we were to open that at interview Which Basically locked Like this And now just refresh it It should now look like that So you see it's moved These Fields to the side There's now a settings field And as you can see all the data is just been updated and moved to subform Her values Same with the tabs And if we go to field and conditions Here we go That's all the new field and conditions view looks like Now Because of many reasons we couldn't keep the subform fields within the admin View Especially when you Start having Morgan 50 admin Fields which in my case I have quite a few of those it's not advise of Because it actually causes the tremendous Hello slow down on page load I mean imagine each of these lines are actually want 2 3 4 5 567 8 9 10 11 12 13 fields Have you start having a huge a lot of those fields Which you could have up to 800 By the limit with set it really takes a long time to load that into the page Ok Enough about that how does it work now Well you could either click on this edit button here Or this edit button here to actually go and edit these and change their values If you would like to just edit one specific field You could click on any of these In a pencil editing Links So for example if I click on name It will ask me whether I've saved all my values in this current View And yes I just click ok And it will now open the name field And I can L come in here do any edits that I'd like And then save and close or just close out again if you wanna one leave an ID to get some information Now Back into This area The same goes with the custom Fields I could click on any of those to edit them Or I could click on this edit here And it will Ok ask me if I saved all my work And then if I did KKK And opens Those values right here A nice new trick with added is that it only loads the fields That are actually linked to the Saturn Vue So that you can only Target The specific fields Which really makes sense Dit Those are the fields that needs to be targeted With this conditional option Then you could also create a field but reading if field will not Necessarily add it to the admin View It will just make it available to you If you were to have You know add it By going to admin fields Oh yes let me just say this this button here I just wanna hear the same button This is this is a shortcut Because sometimes you might have a lot of fields And it's a way down there to get two conditions So we added some shortcuts up here There's also the tutorial On how to use this but the toriel still was made when we had the old Fields layout It should still make sense I mean you just need to keep in mind that things change the little Keep it click here On any of these links To actually open That area where the fuels on our found And make the changes So that's really the new admin Fields and J moving away from repeatable fields To start using subforms for all our Repeatable concepts It's really what This upgrade is all about There is 1 heads up which I know is little different to Hell things with done previously Let me just close out of this Open View Oh yes I could just mention this Here is a shortcut to get to the admin Fields without opening the app and do and then opening the admin fields You can click on this right here L automatically take you 2 beatin' fields And you can make changes here And obviously it's link to the look Area I looked at in View And the same is true when looking at The conditions they're the second button here is for conditions The thing that has changed is if you create a new admin View Now Utopia SLI add the single record name the list record name the short description And the system name And that's really all you need to add To save the admin view for the first time because B admin you view at this stage It cannot be linked 20 Fields until it has an ID No I might still work from this and trying You know Junit in a way that When you click the button and if the Admin views not save it saves it for you But I haven't done that yet so at this stage Since the admin field doesn't have an ID it's still new because we haven't clicked save Even once You can't link any Fields to them Do it so what you would Natural do is just add some Hero name here And And then just save it once And having done that if you now go to Fields and conditions It basically says create To the Spartan here and that one hears the same button Click on any of them to do create fields So if you would create a field So yes I did save everything And then Hi You can just click on this plus over here And there's a first field and you can start you know adding fields And treat them as you would before And Yep so there you go That's the new sub form Fields for admin views And that's what this upgrade is really all about I trust that it all benefit all of us in the future And make it more easier for us to transition into Joomla 4 And \ No newline at end of file +Hi I've got Joomla Installed here with JCB Joomla component Builder 2.5.6 [00:00:12](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) I've got quite a lot of components That I have Imported From another day JCB And Basically all of it is working If we were to look Inside of them It really looks the way that it should And it's expected [00:00:34](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) Now Joomla has Conveniently Decided to Get rid of this repeatable Field Which pops up into a little Model And So we have systemically been removing this field [00:00:54](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m54s) From JCB Just to show you We've already done that in other areas of JCB Like in the language area If we would to Open Any of these Language strings You see that we already have the repeatable field [00:01:19](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m19s) Set up here Now This would have been a simple as changing the field type Within JCB to achieve Only Reality is that the compiler As well as one other feature which is the Joomla components Can be exported in JCB packages and imported And so These features are mapping into these component concepts [00:01:46](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) You know the Field structures really how data stored In a json By the repeatable fields Are different from how it's being stored in the subform fields Are gonna go into explaining what the difference is There is actually Few tickets been open on GitHub about this And so We have [00:02:10](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m10s) Taken on the task of just Sporting all of this With this next release which is JCB 2.5.8 The whole admin View area Will now be moved over to this new form Subform layout So if I was to open an admin View now It basically has The old Repeatable field concept As you would have learned with all the tutorials we've done [00:02:43](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) So your permissions is one of those taps the fields The conditions the linked fields And then you have a list of the fields that are linked to the admin View And you've got some custom buttons you could Setup and it's also A Repeatable field As well as linking a sequel Clicking on table this is also repeatable field In a model [00:03:13](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m13s) So all of these different fields are now gonna be moved to subfields Because of space and statistics We will Move some of these Fields into taps I will try and do it in a way that seems obvious and that he wouldn't feel lost So just up front The fields This Fields button Are going to be moved To the fields tab [00:03:45](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m45s) And so does The conditions move there There will be in new tab called settings so basically this tab will stay there And will call that details and a new tab with settings And the rest of the repeatable fields that are remaining On this side will be placed there Ok so that's just a heads up on what's gonna happen But this is gonna happen really without you doing much Basically all you need to do is upgrade And [00:04:19](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m19s) We have added a number of scripts That you can actually go and look at On GitHub if you like As I'm doing this recording The staging branch Is where you will see these changes So Basically if we would to go to the script This is the script that will Convert [00:04:43](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m43s) The Fields and all the tables and everything So let me just go down to that area So here we have a function Inside of a method More like an anonymous function And Basically this is what converts the repeatable fields So I'll be using this function over and over As you can see we've done It with a upgrade to version 2.5.5 [00:05:13](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) And Then there is another upgrade 2.7 which was not really released because having made this This change We still need to to convert the repeatable fields And that will continue to run until 2.5.9 Now The way it does this Is it really Targets The various [00:05:40](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m40s) Up here There's to convert repeatable function it Target all these fields as you can see Inside the admin View And it passes it over to this Convert repeatable Which is really going to do the work and this function Like I said you can look at it Over here If you are uncertain of doing this [00:06:07](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m07s) You can come and look at this function here And I will now also demonstrate that it actually does work well The only thing that I have actually noticed It's like with this website that we are working on here We talking about thousands of values Well Even more than thousands And I have found that [00:06:32](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m32s) It sometimes does not convert every single value And so because of that We actually did another fix Which Goes beyond and ensures that this upgrade will not cause any Internal conflicts And that is within the Backend And within the model There are a few places where these New fields will now exist [00:07:02](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m02s) One of them is conditions Field conditions and the other one is admin Fields so I'll open that one Open this one And obviously in a Oh not Not that one It's this admin View These are the models in which these field changes will take place And you'll see that within the [00:07:27](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m27s) Get item Method at the very end Of this method In the admin View We added a function Which would basically check If this These Fields were updated during the upgrade And if it were not updated That is while the field is busy loading and you're opening the page [00:07:52](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m52s) It'll check whether it's been updated If it's not updated it will actually make Do the update And add it to the update object And then basically check every field All the way down Till here And then if it sees that there is been any one of those fields Found to be You know ready to update [00:08:14](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m14s) Then we will run the update And after that it will never Do it again Because you see the way the A the array is constructed This Will no longer exist once it's been moved to a subform Storage The subform array structure is different So [00:08:39](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m39s) Once you open any of the items it will automatically convert it and make sure that it's Converted The other thing that we've done Because you most probably will not all open every view or every Admin View Is Even when the new admins Fields we've done the same So you can see here In the Admin Fields we are also making sure that that update is there And the same with the Admin field conditions [00:09:09](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m09s) It's also there But then there is one more place where we also add these Checks and that's actually in the compiler So even if you didn't go and open any of these views and you just went straight to the compiler And try to compile any of your components The compiler obviously now been adapted to instead Actually Use the new subform structure Within it's compilation [00:09:38](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m38s) To within the get file where most of these subforms are now needed We have In the get admin Function let me just get there So here is the get admin View Method of function class method And you see we are checking Whether it's still in a repeatable field And if it is We convert it [00:10:04](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m04s) And we again store it to the update object That While it's getting this one Admin view at the very end So every where it's doing it check If it's not being converted converts it's sets it back to the data set And also to ensure that we store it back into the database Little String And So It Goes On Doing it everywhere Where we [00:10:30](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m30s) You know expect To find values that still You know me I've been missed And then here it very end of this function Which is a little big I supposed If we found that there are any updates we run the update And after that that view is been updated and it will never need to be updated again so these are the Kind of Switches [00:10:56](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m56s) How can I put it Fixes really That we put in place when you already have a JCB with horrendous amount of Data and it is just too big to do just with the normal install Then all these admin views will Be Updated and adapted As you start using JCB And you should not really anywhere at any time experience Any conflicts [00:11:27](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s) In fact if you do the reason for me making this tutorial Is it you can actually get into the code And that you can You know Open an issue on GitHub And give me heads up so I can You know Patch whatever you find And push it out the rest the community Ok so that was just a code side of things now getting back to to our install here [00:11:53](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m53s) I think what I'll do is I'll just open Maybe this Admin view And then I'm gonna go And Basically Install The The upgrade [00:12:11](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m11s) I'm just gonna selected it's not been released yet So this is a pre-demostration Just to ensure everything works So if it doesn't you even see that So let's just select this file from my computer Ok there it goes busy installing it It should take a while it's quite a big dataset And you can just wait it out I'd wouldn't shout at you if it missed certain values I don't know why doesn't but [00:12:47](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m47s) there it goes Your upgrade is been successful And you are now on version 2.5.8 And if we were to open that Admin view Which Basically looked Like this And now just refresh it It should now look like that So you see it's moved [00:13:09](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m09s) These Fields to the side There's now a settings field And as you can see all the data is just been updated and moved to subform values Same with the taps And if we go to field and conditions There we go That's how the new field and conditions view looks like Now Because of many reasons we couldn't keep the subform fields within the admin View [00:13:38](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m38s) Especially when you Start having More than 50 admin Fields which in my case I have quite a few of those it's not advisable Because it actually causes the tremendous Slow down on page load I mean imagine each of these lines are actually 1 2 3 4 5 6 7 8 9 10 11 12 13 fields And if you start having a huge a lot of those fields Which you could have up to 800 [00:14:09](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m09s) By the limit we've set it really takes a long time to load that into the page Ok Enough about that how does it work now Well you could either click on this edit button here Or this edit button here to actually go and edit these and change their values If you would like to just edit one specific field You could click on any of these you know pencil editing Links So for example if I click on name [00:14:41](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m41s) It will ask me whether I've saved all my values in this current View And yes I just click ok And it will now open the name field And I can now come in here do any edits that I'd like And then save and close or just close out again if you wanna only wanna get some information Now Back into This area The same goes with the custom Fields I could click on any of those to edit them Or I could click on this edit here [00:15:12](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m12s) And it will again ask me if I saved all my work And then if I did click ok And opens Those values right here A nice new tweak with added is that it only loads the fields That are actually linked to this Admin view So that you can only Target The specific fields [00:15:34](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m34s) Which really makes sense That Those are the fields that needs to be targeted With this conditional option Then you could also create a field but creating a field will not Necessarily add it to the admin View It will just make it available to you If you were to have You know add it By going to admin fields [00:15:57](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m57s) Oh yes let me just say this this button here And this one here is the same button Just this is a shortcut Because sometimes you might have a lot of fields And it's a way down there to get to conditions So we added some shortcuts up here There's also the tutorial On how to use this but the tutorial still was made when we had the old Fields layout It should still make sense I mean you just need to keep in mind that things change a little So you could click here [00:16:27](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m27s) On any of these links To actually open That area where the fields are now found And make the changes So that's really the new admin Fields and moving away from repeatable fields To start using subforms for all our Repeatable concepts It's really what This upgrade is all about [00:16:53](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m53s) There is 1 heads up which I know is little different to how things were done previously Let me just close out of this Admin View Oh yes I could just mention this Here is a shortcut to get to the admin Fields without opening the admin view and then opening the admin fields You can click on this right here and it will automatically take you to the admin fields And you can make changes here [00:17:21](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m21s) And obviously it's link to the look Area or the look admin view And the same is true when looking at The conditions there the second button here is for conditions The thing that has changed is if you create a new admin View Now You would obviously add the single record name the list record name the short description And the system name And that's really all you need to add [00:17:51](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m51s) To save the admin view for the first time because The admin view at this stage It cannot be linked to any Fields until it has an ID Now I might still work on this and try and You know Tune it in a way that When you click the button and if the Admin view is not saved it saves it for you But [00:18:15](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m15s) I haven't done that yet so at this stage Since the admin field doesn't have an ID it's still new because we haven't clicked save Even once You can't link any Fields to them To it so what you would Natural do is just add some Add some name here And And then just save it once And having done that if you now go to Fields and conditions [00:18:57](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m57s) It basically says create To this button here and that one here is the same button You can click on any of them to create fields So if you would create a field So yes I did save everything And then I You can just click on this plus over here And there's a first field and you can start you know adding fields And tweak them as you would before [00:19:22](https://www.youtube.com/watch?v=YaycQcsMpOs&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) And Yep so there you go That's the new subform Fields for admin views And that's what this upgrade is really all about I trust that it all benefit all of us in the future And make it more easier for us to transition into Joomla 4 And thank you for watching. diff --git a/042-How-to-setup-taps-after-upgrade-to-v2.5.8-in-JCB.md b/042-How-to-setup-taps-after-upgrade-to-v2.5.8-in-JCB.md index 4dd34be..b5f1415 100644 --- a/042-How-to-setup-taps-after-upgrade-to-v2.5.8-in-JCB.md +++ b/042-How-to-setup-taps-after-upgrade-to-v2.5.8-in-JCB.md @@ -1 +1 @@ -Hi I would like to quickly give you the toriel on how to now do the tabs I realise there's been a little change and how it abs are made So you go to admin view and you didn't open the admin View An indie admin View You actually have A place called settings And if you scroll down a little there you can create tabs so you could create any Any amount of tabs here SA anymore why many here again if you click save then you bass Basically have 4 tabs And did the change with maid Is if you go I'll go to the The fields Obvious gonna ask that your first aid those dad's because if you don't save them they're not in the database But now in the tabs menu you would have all those tabs as a drop down The other side is also true and that is if you have no tabs setup so Let me quickly remove those Just Take them all the way I click save it now there's no tabs if I now go and Hope Open the fields It actually doesn't have any tabs it only shows details Because every Ping will now show only in the Details tab So they have more than details as a option for tabs you need to decide in the settings area There is a place which says tab setup Options And you just click on this plus sign here And an add your door see your settings right here Ok I hope that will help \ No newline at end of file +Hi I would like to quickly give you a tutorial on how to now do the tabs I realise there's been a little change and how tabs are made [00:00:10](https://www.youtube.com/watch?v=NFp_CtE0LZI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m10s) So you go to admin view and you then open the admin View An in the admin View You actually have A place called settings And if you scroll down a little there you can create tabs so you could create any Any amount of tabs here Let's say anymore or many ok and if you click save then you Basically have 4 tabs And the change we've made Is if you go I'll go to the [00:00:45](https://www.youtube.com/watch?v=NFp_CtE0LZI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m45s) The fields Obvious gonna ask that your first save those tabs because if you don't save them they're not in the database But now in the tabs menu you would have all those tabs as a drop down The other side is also true and that is if you have no tabs setup so Let me quickly remove those Just Take them all away and click save it now there's no tabs if I now go and Open the fields It actually doesn't have any tabs it only shows details [00:01:29](https://www.youtube.com/watch?v=NFp_CtE0LZI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m29s) Because every Thing will now show only in the Details tab So to have more than details as a option for tabs you need to add in the settings area There is a place which says tab setup Options And you just click on this plus sign here And an add your settings right here Ok I hope that will help diff --git a/043-Major-Release-of-JCB-v2.6.0.md b/043-Major-Release-of-JCB-v2.6.0.md index b25d866..05c5ee0 100644 --- a/043-Major-Release-of-JCB-v2.6.0.md +++ b/043-Major-Release-of-JCB-v2.6.0.md @@ -1 +1 @@ -Hi I would like to demonstrate you How to upgrade to version 2.6 of JCB The upgrade is quite a major upgrade Because we are removing all repeatable fields in the car tubular component area Gmail component area Has quite a lot of Beautiful fields If you were to open A component You'll see that Repeatable fields I basically Little models that pop-up With values And as been used quite excessively in this view The reason why we did that is because it's really a very smart field Because it combines these values into one value Basically the JavaScript on the page Grabs these values and converts it into one value Woodstock win on submission The form Only submits one string And not actually Several fields So to me it's Feels like we going a few steps back But I suppose there are some conventional Reasons which Makes Repeatable field On a subform level More Viable because of its Bility to actually validate the data Mall Correctly Number less We have to remove these Fields because in Joomla for they no longer are supported In doing so I had to decouple a number of these fields Into their own tables Because of the size that we would Of values that will have on the page Facebook comes in monthly heavy And so they say they're about 9 new tables Being added to chase a b To accommodate this Villarreal Change Is Gonna fix only the components area But because JCB is very Dynamic component That actually integrates with various levels of the state of structures I had to also upgrade the compiler As well as the import and export of JCB packages We have tasted this and it's for the most part those involved into testing Profound That This transition is actually Major improvement to JCB And should be very Hi easy and you shouldn't have any issues Those of you that might run into Little Glitches that doesn't work as you expect We would suggest that you clean your browsers cache as well as memory We found it Traces of the old repeatable field structure and JavaScript surrounding that Might clash with the new changes in JavaScript Within the new update So to clear your browser memory not just the cash is quite important only after you've On the upgrade And you started working in different views You should see that Everything Works as expected Now An area which even at this stage has been Been reported in giving some conflicts Is the dynamic get area Dynamic get area Basically returns values From The admin area Where is we target let's say back in View And we grab Hero Some information These values are returned from the admin area Where it basically goes to this atman view And Buildster structure Now as you can see with my demonstration here Everything is really working As expected If if you at this stage Would test this area before the upgrade You should find that it works Without any problems If it doesn't I would suggest clearing your browser memory and trying again Until you can find this is working As you see mine working here And The reality is the only thing I've done is I've cleared my browser memory So that there's no all traces of JavaScript And what I say clear I mean literally going here to to history and just wiping everything For this domain if you don't wanna clear You know all of your history and it specifically targeting this domain That you are loading your JCB component in Ok so that is just few heads up for The current 2.5 .8 How to upgrade should be quite simple The release I've just released it like 8 minutes ago So you should just be able to go to you no updates in your managing area See that the upgrade is there and ready Click Ahmed and click update Here we go The upgrades been done If we now go back to Joomla component Builder We should see That It's up-to-date And everything is Been done without any errors If we now go to the Double or components area You said C A view similar to this With a lot of new shortcuts To these different decoupled Areas that I mentioned And if you open the component Not much has changed in regards to where what is located But how to interact with it is actually been moved so for example the component updates If you see it as what as a button here Cricket Grass at your first save everything before you continue If you've done so Then click ok and it opens the area where you then would do your updates Usually it was in a Uno module Sorry a modal that popped up And you could change it right there on the same page Now you simply go to another view and is basically doing the same So Used to that the same goes with your admin view custom view side view And basically everything else The contributor is we've moved down here so you could Do them on the page But for most of the other repeatable Fields we've moved into their own tables The Fields and the folders we've moved To a joint table So if you were to click on that You should be able to Easily add Some files to your Component or folders All found within this Structure As it's explained here and there Note The same is true of all the other Areas is basically We've moved The Open views 2 It's Town tab So you could actually access them via this button or via this one And so here you would see your changes you could also actually from here directly edit The admin View That you've linked So Full Be able to Edit the admin view directly out of your component area And So That That's a nice new feature Which I suppose will come in very handy Ok so that is really the new upgrade Is really targets The majority of the changes is in the Joomla component area We do Have a lot of data checks all around acb at this stage But if during the upgrade we might have missed a Field in not converting it to the new subform layout Then even when just opening a view it actually runs through all those fields And make sure that it's been You know changed and converted If by any means you didn't get around to opening the views and you just go here To the compiler And would click compile It actually Does that again it runs through all the fields And it makes sure that it's in the right format And therefore you're compiling should work just as before Now What are the new features we've added is this Translation checker Which basically takes how many strings there is within your component And how many youth translated for the specific version New language trailer bill For both the front Hero sorry the admin view the admin system view the side view And again for the another language at interview at an assistant view in the side view So basically giving you Hello feedback on your progress Because we realised that this area of JCB is not May be utilised as much as it Can be So we bakes Making some awareness here But this area is available It only comes and becomes Active if you've actually got some language translation as sorry some language Would you set up So you need to have some languages in your Languages area And you need to have have compiled that component at least once before Because like you know by now that the The the language string stored in JCB found on the language translations Is only generated once you've compiled at least your component once Then it links the component language things to JCB And you can translate them into those languages that you created The other problem which you now saw their with which regarding to The Back-up folder Because I haven't setup a backup folder for this JCB install It'll tell me if I leave the set to yes and I compile he'll tell me that it couldn't move that Backup file Because the temporary folder and the backup Folder is now the same place So basically it's saying it couldn't move The file to the same location And that means this is not really an error It's just a mis configuration Because we haven't setup The Back-up folder to be a separate folder from the temporary folder And then if you need some more help regarding the translation manager And please go watch this tutorial Here we do give you a notice the But you can even in the options area of JCB You can change the percentage of translation required Before a translation is added Currently it's at 50% Which is actually not Uno set in Stone you can change that to any percentage that you like Ok so that is creating a component now with the new upgraded JCB And having just compiled that We can go back here We can see that the component was built And everything is working as expected Yeah so thank you for watching this tutorial If you run into any issues that you think is related to this upgrade And you have already cleared your browser memory Also note that I'm I'm using Firefox here Pace Firefox 64-bit Here we go Then please Open an issue on get out and we'll try to get back to you and see if we can get this resolved So far my experience is that this upgrade Mistaken JCB into Avery Powerful position Where it is now having No repeatable Fields anywhere In the in the component All is repeatable Fields have been converted And is now only subforms And We've added some nice short cuts like you scene How to these decoupled areas which means you can actually access them directly without going through The component view itself If you wanted to Work on for example The component dashboard You know you wanna make some changes to the dashboard Or you wanna just work on the app and views You can click on that link right here And work on the admin views without going to the component directly Which I think is Very nice Convenience shortcut Which I suppose we'll make our life a little easier Ok Well Again thank you for watching \ No newline at end of file +Hi [00:00:03](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m03s) I would like to demonstrate to you How to upgrade to version 2.6 of JCB The upgrade is quite a major upgrade Because we are removing all repeatable fields in the Joomla component area Joomla component area Has quite a lot of repeatable fields If you were to open A component You'll see that [00:00:29](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m29s) Repeatable fields are basically Little models that pop-up With values And as been used quite excessively in this view The reason why we did that is because it's really a very smart field Because it combines these values into one value Basically the JavaScript on the page Grabs these values and converts it into one value Which on submission [00:01:01](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m01s) The form Only submits one string And not actually Several fields So to me it's Feels like we going a few steps back But I suppose there are some conventional Reasons which Makes The repeatable field [00:01:21](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m21s) On a subform level More desirable because of its Ability to actually validate the data more Correctly None the less We have to remove these Fields because in Joomla 4 they no longer are supported In doing so I had to decouple a number of these fields Into their own tables [00:01:48](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m48s) Because of the size that we would Of values that will have on the page The page becomes immensely heavy And so they're about 9 new tables Being added to JCB To accommodate this So the real Change Is Gonna effect only the components area But because JCB is very Dynamic component That actually integrates with various levels of this data structures [00:02:20](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m20s) I had to also upgrade the compiler As well as the import and export of JCB packages We have tested this and it's for the most part those involved into testing Have found That This transition is actually Major improvement to JCB And should be very easy and you shouldn't have any issues Those of you that might run into [00:02:49](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m49s) Little Glitches that doesn't work as you expect We would suggest that you clean your browsers cache as well as memory We found it Traces of the old repeatable field structure and JavaScript surrounding that Might clash with the new changes in JavaScript Within the new update So to clear your browser memory not just the cache is quite important only after you've On the upgrade [00:03:21](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m21s) And you started working in different views You should see that Everything Works as expected Now An area which even at this stage has been Been reported in giving some conflicts Is the dynamic get area The dynamic get area Basically returns values [00:03:45](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m45s) From The admin area Where if we target let's say backend View And we grab You know Some information These values are returned from the admin area Where it basically goes to this Admin View And Builds this structure [00:04:04](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m04s) Now as you can see with my demonstration here Everything is really working As expected If if you at this stage Would test this area before the upgrade You should find that it works Without any problems If it doesn't I would suggest clearing your browser memory and trying again Until you can find that this is working [00:04:35](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m35s) As you see mine working here And The reality is the only thing I've done is I've cleared my browser memory So that there's no all traces of JavaScript And what I say clear I mean literally going here to to history and just wiping everything For this domain if you don't wanna clear You know all of your history and it specifically targeting this domain That you are loading your JCB component in Ok so that is just few heads up for [00:05:10](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m10s) The current 2.5.8 The upgrade should be quite simple The release I've just released it like 8 minutes ago So you should just be able to go to you know updates in your managing area See that the upgrade is there and ready Click on it and click update There we go The upgrade is been done [00:05:41](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m41s) If we now go back to Joomla component Builder We should see That It's up-to-date And everything is Been done without any errors If we now go to the Joomla components area You should see [00:06:00](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m00s) A view similar to this With a lot of new shortcuts To these different decoupled Areas that I mentioned And if you open the component Not much has changed in regards to where what is located But how to interact with it is actually been moved so for example the component updates If you see it as what as a button here if you click its gonna Ask you first save everything before you continue [00:06:30](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m30s) If you've done so Then click ok and it opens the area where you then would do your updates Usually it was in a you know in a module Sorry a model that popped up And you could change it right there on the same page Now you simply go to another view and is basically doing the same So You just do that the same goes with your admin view custom view site view And basically everything else The contributor is we've moved down here so you could [00:07:03](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m03s) Do them on the page But for most of the other repeatable Fields we've moved them to their own tables The Fields and the folders we've moved To a joint table So if you were to click on that You should be able to Easily add Some files to your Component or folders All found within this [00:07:29](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m29s) Structure As it's explained here in the Note The same is true of all the other Areas it's basically We've moved The Admin views to It's Town tab So you could access them via this button or via this one [00:07:54](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m54s) And so here you would see your changes you could also actually from here directly edit The admin View That you've linked So It will be able to Edit the admin view directly out of your component area And So That That's a nice new feature Which [00:08:15](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m15s) I suppose will come in very handy Ok so that is really the new upgrade As really targets The majority of the changes is in the Joomla component area We do Have a lot of data checks all around JCB at this stage That if during the upgrade we might have missed a Field in not converting it to the new subform layout Then even when just opening a view it actually runs through all those fields And make sure that it's been [00:08:54](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m54s) You know changed and converted If by any means you didn't get around to opening the views and you just go here To the compiler And would click compile It actually Does that again it runs through all the fields And it makes sure that it's in the right format And therefore you're compiling should work just as before Now What are the new features we've added is this [00:09:23](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m23s) Translation checker Which basically checks how many strings there is within your component And how many you've translated for this specific version New language available For both the front You know sorry the admin view the admin system view the site view And again for the another language Admin view admin system view in the site view So basically giving you A little feedback on your progress Because we realised that this area of JCB is not [00:09:59](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m59s) May be utilised as much as it Can be So we bakes Making some awareness here But this area is available It only comes and becomes Active if you've actually got some language translation as sorry some languages set up So you need to have some languages in your Languages area And you need to have have compiled that component at least once before [00:10:26](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m26s) Because like you know by now that the The the language string stored in JCB found on the language translations Is only generated once you've compiled at least your component once Then it links the component language strings to JCB And you can translate them into those languages that you created The other problem which you now saw their with which regarding to The Back-up folder Because I haven't setup a backup folder for this JCB install It'll tell me if I leave the set to yes and I compile he'll tell me that it couldn't move that Backup file Because the temporary folder and the backup [00:11:11](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m11s) Folder is now the same place So basically it's saying it couldn't move The file to the same location And that means this is not really an error It's just a mis configuration Because we haven't setup The Back-up folder to be a separate folder from the temporary folder And then if you need some more help regarding the translation manager And please go watch this tutorial Here we do give you a notice the that you can even in the options area of JCB [00:11:42](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m42s) You can change the percentage of translation required Before a translation is added Currently it's set to 50% Which is actually not You know set in stone you can change that to any percentage that you like Ok so that is creating a component now with the new upgraded JCB And having just compiled that We can go back here We can see that the component was built And everything is working as expected [00:12:18](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m18s) Yeah so thank you for watching this tutorial If you run into any issues that you think is related to this upgrade And you have already cleared your browser memory Also note that I'm I'm using Firefox here Let see Firefox 64-bit Here we go Then please [00:12:49](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m49s) Open an issue on GitHub and we'll try to get back to you and see if we can get this resolved So far my experience is that this upgrade Is taken JCB into A very Powerful position Where it is now having No repeatable Fields anywhere In the in the component All is repeatable Fields have been converted And is now only subforms And [00:13:19](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m19s) We've added some nice shortcuts like you seen To these decoupled areas which means you can actually access them directly without going through The component view itself If you wanted to Work on for example The component dashboard You know you wanna make some changes to the dashboard Or you wanna just work on the admin views You can click on that link right here And work on the admin views without going to the component directly [00:13:54](https://www.youtube.com/watch?v=MQrLBYhvGyA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m54s) Which I think is Very nice Convenience shortcut Which I suppose we'll make our life a little easier Ok Well Again thank you for watching diff --git a/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md b/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md index ae3fff6..e3ef031 100644 --- a/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md +++ b/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md @@ -1 +1 @@ -I would like to give you a tutorial on how to build a hello world Component With Joomla component Builder Joomla component Builder Is a Jamar component Which Helps you to develop Jumla components Quite easily Originally developed this application or extension For myself just so that I can Maintain the code In a very consistent And Shareable way For example since there are lot of Concepts in any components that build that you build for Joomla Which we could call conventions or Boilerplate Implementation These things are usually always the same And so I wanted something like a wire frame That could just take care of all that for me all the time and even if Zuma was to change I could just make a change in one place And then compile it into all my components that have developed And then just have them Run Again stable on Joomla I said of having to go to every one of those components and that means We've gone Beyond Just developing The most basic parts of a component with actually gone and ventured into some of its complex And that is why Even showing you and hello world Component Being built by JCB Jamal component Builder It is still gonna end up being quite an advanced Component Now Since I've really mentioned to you that I really build JCB for myself And it wasn't originally intended as a community project just something that I was wanted to use It has since become a community project and the code is open on GitHub And most of you might already know that But it also means that I didn't think about the car Laxity When I was developing the component I just had Desired functionality in mind And I didn't really care that it is complicated to achieve those things Because I said it set the conventions in place Harvesting know how to use them And so That's why JCB On the surface might look just like any other of those component Builders out there But when you start Using it and Knowing some of its secrets It actually is amazing how conventions Even Conventions that you would Use when you develop components yourself Wood Actually make tasty do things that are quite amazing So you will end up realising that JCP has actually a ton of functions Most of them will most of the basic ones of those we have tried or I have tried O2 Explain in the tutorials that you can find on YouTube You can actually access to tutorials from this link here Looking at the toriel Would be The most Easiest way For you to discover some of JCB Hidden secrets What is the same time It really is only the basics although it's quite a lot of Tutorials end I know that I usually Yeah I love rate more than Mike maybe is necessary And yet That's because I wanna make sure that you are able to not only Do basic things but even advanced things Have you come to JCP and you do not have PHP As a as a language But you don't know it well And you do not know jamalife API Then You shouldn't expect to build complex components with JCB Complexity is only possible with JCB The More You Know Yourself Because the more you know the more you would have that perspective on how to How this implementation should function And most of the time if you do have that perspective You would start knocking and opening the correct doors And set up the correct relationships To have those conventions dynamically You know be built for you Buy JCB If you are very good at PHP programming and you do know the Jeweller API You should be very happy to Simply go into the compiler And really start reading the code The compilers codes files are actually Alphabetically ordered ABCD And so you can start with a and work your way down So the first one is a underscore get the PHP and so forth Reading this code and understanding how JCB is compiler Constructs the code with send you on a treasure hunt where you would discover amazing features That work just out of a box And yet having this under the hood I realise we all need to start with the basics And that is Just to build a hello world tauriel Just to know how to Actually Combine The different Concepts That is required for a component To be fully functional And portable And useful And that's really what I want to actually Give you a tutorial of In this video There are two concepts which I want to mention before we start One of his patients the other one is perseverance I know within any programming career These are invaluable Aspects Which if you have them L make the whole difference whether you are only a normal programmer Or an extremely good programmer You see because those of us who have stuck around Nf just been going at it We have realised that many Michael centre is being genius And yet It's only because it's the skies by perseverance Because we continually try and try and try Until we resolve or succeed This is what has made Jason be possible And this is also what would make you successful In using JCP It is not a component which I can claim has no Uno internal conflicts or has no Inconsistencies But it is most certainly a component with which I am I self Have developed countless Mini Programs components itself from it Which I am maintaining And I am planning to Start Pushing some of these components into the community It's just that I have not seen the need for doing so yet For the initial development were mostly For clients who has directly Approached me Now Having said all this Let me take you through the basic steps Building one piece one another So did you would Fully understand How to build A component In JCB I think it's self explanatory That you would need a g Muller website Distri molar website with preferbly B On a developing environment which is Hi there offline Or on a server Which isn't necessarily Uno used in production This is not because JCB itself is on se4 Any of that is simply just it's more convenient If you have an offline You can open the code in your ID And since JB JCB has the feature to extract this customised code out of your pump Poland And put it back into your component on compilation A feature which will not be discussed during this tutorial What does exist A local developing environment is most ideal for this I know that you could with Certain Yeah Pro2Call Set up a Tunnel between your desktop and Your life server And still have this kind of interaction of editing code live And then compiling and Sing changes And that's all good because if you're able to manage that kind of complexity I don't need to tell you anything about how to set up an environment But what I would suggest though Is that when you are busy trying to install JCB And there is Some limitations in a shared hosting environment That I would Encourage you to try and first resolve that Old movie development offline So When you go to gym allow website ready obviously you would login Having logged in Would first need to install JCP So I'm simply gonna go to manage and install How many ways for you to install JCB you could download the package you can grab the euro From get up You could also Install it From the web It is listed with Joomla Now if you type in JCB and search You're actually Brings up JCB here But It would not necessarily always do that I've recently discovered If I type in Component builder which is actually it's name in the listing It doesn't even come up Which to me was wow Good and understand how that happens If you do not find a component in the surge This is the component Then you could go down to An area Call tools And then Developing tools JCB is one of the listed developing tools Here it is only listed as a component Builder So you can click on that And simply click Install This will then grab a URL from GitHub This is the same URL You could have just used here As you can see That would have done the same thing But we can use the double R Installer And simply click install This would depend on your own network Well faster steaks it could take a while This is quite a big file And it's part of the places where they might be Limitation If used Outside of a local developing environment Ok we've got Jason be installed Now let's open it There's just a few small things that we need to slow down Restaurant Asian stones In understanding how a component Basically most Joomla component Are constructed We're Gonna Build A component called hello world The way to setup a component Is you need to first understand fuel types Then you need to set up the fields you'll need And then you need to set up the views That you want in your component These views also map Back to the database These are what we call admin views So you up and views Have feels and these are usually your Database Collins So these are your database tables Pizza your database columns And these Our your field types so you got a text healed radio List Multiple selection Checkbox datefield You got many types of fields But each field independently Is linked to a type But also there are some database settings within each field As it gets linked into the admin View Since the fields Form the columns of the tables of the admin views This is how you set up a component Once you set it up or per component Then You basically are done with Would have a we would call the back end The backing of the component is what always needed to be done First Well you could Argue differently But the point is within JCB you first build a backend And then only add in the front end And the front-end usually Doesn't have its own database it actually pulls it's data From the backend Database Now Having explain some of that Let's show you this in action So in JCP It already ships with quite a lot of field types So we open the fuel types area You see that there are many field types already setup JCB is built in a way that it can be extended Like subform Is a new field type which was recently introduced into Joomla community It also replaces an old fuel type Called repeatable fields Repeatable fields in a field type I would encourage you not to use anymore Since most of you might know Jason be used repeatable field squad excessively And yet due to the fact that you more lies now discontinuing this field type We had to Migrate all of our repeatable Fields to subform Fields and it was an amazing Huge Process But yes part of the reason why I'm redoing the hello world tutorial It's because of the fact that subforms are now being used all across JCB And there's been a little few changes And how things are implemented So here you can see all the sub this field types that I've been Set up in JCB already You could always add new field types So as JCB Uno continues and Joomla continues to Evolve and become better at what it does So we will be adding more fuel types And whenever we would be Confronted by fuel type That needs a little bit of extra tweaking within the compiler My dear I would hope to be a head of all of you most of the time in adding that field You type in there if it needs that Most of the time fuel types do not need Extra help It's only field that likes up form that actually does What field types like you're old and Text and tell and Sequel tag it needed some extra help But most of these don't Because basically the way I feel type works Is that it really helped you set up what we know as the properties So The property has a name It has a default value It is either adjustable knot adjustable It's Monday or not Mandurah translatable and then you can give it a little description So that when you use the fuel type You can always come back to this This information can be gathered from going through the Jumla core Libraries Because this field types really only mapping Jo Malone Implementation of these field types Failure to open a fuel type that's already been created like the text field You see that these properties already there and in place so the field Type Is text The name is any text When we say that the type is text Then this is not just the bill So We need this on text if it is adjustable we can kick it It most certainly Mandatory And so That is how you set up fuel types I'm not gonna go into this too deep Since there is extra tutorials on how to do field types I just wanted to give you a brief overview Or the fact that the most of the fuel types already are created and ready for you to use So you'd most of the time simply start with feels There are quite a few Fields already here But I'm gonna go on as they are not there And I'm gonna create Basically two or three Fields that we can use in our hello world component So First fuel I'm gonna create Click on new Then I'm gonna select Text as my field type and you see That information in the field type You know Mandatory in everything all this information here It is actually brought in by Ajax From the fuel type So if I was to click on this button here Just do it give you quickly mistration And I was 2 Just say change this to TT Like 3 of them and save and close And then go back to fields And click new Then select Text field again You see that now it added Treaties in there Because this whole structure is being built From the field types default settings Which we just looked at So I'm gonna go change that back quickly I maybe just put a little Something in here the description For you to see What I mean So creating a field we haven't really started with it I've just been the mist trading the fuel type but ok Ok I'm gonna take text again And I you see those hours are showing up here So this means that this whole area Is actually dynamically populated from the values that are put up in the fuel type And so is this XML structure re here Usually Populated with the demo Or default values that you add it When you created the fuel type The JCB ships with most fuel types or ready in place it appears like this is something weird But really it's something that you can extend and even change So for example if you know that the text field type has more properties then we have setup You can go in and add more to it You can simply click on this and you know it it here or before creating a field You can go to the field types And open the text area Sorry too Text field type And Here just click The green button and add more Properties And then those properties will dynamically also appear Within The area where you create the fields So this again is just Wanting to show you The JCB is tried it's very best To be scalable And basically customisable To your Own desires So that it isn't just Locked in To what we have said hard into code But it is movable and therefore scalable So having Looked at Field types I think enough Let's create a first field So it's gonna be a text field we gonna call it greetings So I'm gonna update the label with greetings This is what Will be visible In the database Greetings Singular is gonna be the database name I'm gonna leave most of the others just default Let's see Autocomplete is on Validation You know We can leave all the doors It doesn't really matter let's just maybe change the hint Ok And then also gonna just remove the description Definitely take out the default text otherwise it always Pure And now what did you go to the database That is what these features are all about Since text Fields can differ We didn't come Out and say well all of them gonna be this size We left it up to you to decide What kind of takes two of this is gonna be And really it's all up to you Obviously that would mean that you would need to know a little bit more about MySQL and databases To really effectively use this Most of the time it is available on Google so if you do not know What would be the best for A text field or a date field You can Google that Or you could simply go and look at do Malaysian implementation It's got an article manager And you can go into its XML Database And look at What Database Values was used and yours use the same Whatever be the case You should be able to actually navigate through this Without much problems Since that is what is would be required You need to Afriserv earons you need to You know Be curious Dick through things And doing that you will eventually succeed Because these values are movable That means that setting them wrong Break things And That's why I always encourage those who gonna use JCB To really do a little bit homework And to prepare themselves To get involved in programming More effectively That would only Be beneficial to all of us I suppose Because good programmers makes good programs And makes the web a safer place So Having crazy our first field I think I'm gonna just read username And maybe Also description Those are part of the demo Component but since Fields can be linked into any admin view and therefore belong To any component It doesn't bother the fact that it is linked to the demo component already What is the true He said if you change it It'll actually affect both Components Ok so Having created HR field types And also now a field Let's create a admin View Open views as I already explained Is really the back in of your component And So you'd need to do some thinking and maybe draw some up Leshole A lot of tutorials around the web about object orientated development Which talks about use cases and All kinds of discussions and trying to sort of Come up with a Perspective of what do you wanna build how should it work what should be wear what should have its own classes What would have it on tables where we gonna put what And really that kind of work you need to do before coming to JCB JCB Isn't really gonna help you that And so Once you've got all that planned Then you would come here great two Fields great admin views which basically should tables And then link them to a component And once you've done that You've basically later foundation of your application And you can start working on what will make it unique And special which is the front end So first Admin View This is the name is really just for you to identify The View If there be more than one view with the name greetings So let's say you've Built quite a few components that deals with all the world And now you got three or four different Variations of greetings Now you might want to just say ok this is the first One And By doing that It's identifiable within the drop down list across your application of JCB You'll see that when we would later select the greeting that the system name is used in the drop down low So we gonna have a single record and a list record Single record is also what we understand is the edit View So that's when you are looking at 1 record And you are editing that record In the admin area that's the single record That's also What will be used when you Actually tweak JCB To add an edit option To the site area of your Website Since JCB can do that for you On the fly This single record Would also affect The front end of your component in that case Which we will show in demonstrate As we go along So for now I'm just gonna call this Greeting Andalus record Goody readings Obviously we want to have the ability to read and write to this table Now when we say this is a read only It means that the data is in the actual admin area is not gonna be able to be changed Via Joomla Unless obviously you add it some JavaScript and some Other nice Conventions around your component that sort of grades data for that area Dynamically as people use the component Which that case you might use this feature but I must tell you I have hardly ever used it I'm not even sure why I added it but it's there and I know maybe some of you might find it use This basically turns all the fields in the area as read only And when you try and change them they never get But you know submitted to the database So we would bite by Default always leave it to read and write Then you give it a short description We'll go to settings and we'll see That Sorry Fields and conditions We'll see that this button to create admin field conditions will show once the atom View Safe for the first time So you cannot add Fields to the Saturn Vue if you haven't saved it That is one of the changes that now came in from us moving away from repeatable Fields to subform fields B admin View Is it table on its own And it's relationship with the fields is also a table on its own So at this stage Unfortunately you need to first not click save and close but just save once So that it basically create this atman view in the database And now If you go to fields And conditions you'll be able to link Fields and create conditions We are not gonna be creating conditions since we are basically illustrating or demonstrating a very basic We just gonna create A linked fields Link fields are basically the fields that we created previously So we will click on create It's gonna ask us to be sure that all our work is been saved in the admin View Because if it isn't and we click ok It will be lost So make sure your work is saved before you clicking ok This will now open an area where you can link Fields to your admin View This looks very similar to the pop-up we had with repeatable Fields except That it's basically it's own View now So if we click on this green Button here It opens An area where we're all select The fields we wanna use So we gonna have a name field And That's a text field We wanted to show in the afternoon if you We wanted to show first we gonna have it behave as a title You wanted sortable searchable Not filtered Bill because then every name would be a filter that's too much But they're pretty linkable this means if someone Clicks on the name it will open the greeting so You can edit it Now We only have two tabs at this stage I'm gonna go into great detail about the tabs This Time Round If you want to know more please go through the tutorials and look up Tabs to to see more on this subject I'm gonna let it be In the left In the tub And in the tub I wanted to be the first item I'm not gonna add any permissions to this But there is an editing permission available at this stage If you wanted to That would create permissions around this Field Which you can tweak who can edit it and who can't You can also control this from a global view perspective Or on a field level These are some of the hidden advantages the JCB has In Handling permissions across your component quite easily Now The Next Field you wanna add is greetings We want the greetings to also be in the listview And we wanted to be second Wanted to be searchable Sortable and searchable And doesn't need to be a link We wanted to be on the right Hand in the tub and we wanted to be first And sure that's basically All We Need And they will kick save and close This will now basically link those Fields to this atman view We now again open the fields and conditions We will see that those fields are here And with all the variations that we have selected Ready-to-use Ok so having our admin view setup We can actually now go and create our component So we can Hi there Clicks Avon close Or we can simply click clothes We haven't made any changes in this view since we've come back This area is already been saved So we could click close But clicking save and close it's always the safe choice I suppose So Now that are open view is in place Let's go crazy component Click new We're getting gonna give our component a system name Since this is the second hello world tutorial recorded this into Now we also gonna give it a name which Is the same as the first one Hello world We gonna give it a code Name of Hollow world And his virgin True Am I gonna explain too much about all these other switches Basically just that we will need to add company names Author name email website And a short description How did we have those in place The next thing to do would be to add an admin View Assist the admin view can only be at it once two components been saved For the first time Let's save it Great all component has been saved Opening the app and view when how can link Admin views to this component Tattoo places to do this Under settings You can click on component admin View I can click on this one here Or you could in the admin views click on create Both these buttons take you to the same place This used to be The Old Way In how people would add admin views to their component And that's why we left it here But within the new JCB after all transition away from repeatable fields We actually can handle all of it within the admin tab at The View tab Just click create We are sure we have saved all our work so we can click ok Again we are faced with something that looks very similar to when we were linking the fields Accepted now We are dealing with the up and do Linking admin views to this component So I'm gonna click on this plus button here To open our first line We basically just wanna Link The greeting We gonna leave the default icon Of Joomla But they are a whole list of icons available These icons Are I con moons which are the Joomla default icon That are part of the Joomla backend And front-end I suppose And you can search this Just Search that phrase I suppose And you will find out on Tomorrow's website A hole Picture map of all these icons Then I most certainly want this view to be Part of the main menu I want an add record On the dashboard I want a list That means clicking on something and it shows us the list of greetings I wanted in the submenu CO2 check-in feature Basically Components get checked out when somebody Not components items So when you Create a record That are stored in the database and someone else comes and wants to edit that the record You wanna prevent people from working on the same record at the same time Since one of them is gonna lose their work So July has this feature by which You can check out an item And then when someone else tries to open it it tells them hey sorry it's not been it's not available it's Checked out The problem with seeing the is that this check out Can be problematic Because people don't save They just open it maybe to have a look at it And then instead of clicking cancel or close They just click back And the item doesn't get check the back into the database So the auto check-in feature is a nice add-on that jcps Same place Which basically you can set that an item Which are checked out longer than a day Is obviously one that was missed And should be checked in automatically This Is one of the reasons why I developed JCB because I have all these The tweaks that I Want in all my views but I Know that If you wanna change the something and I need to change this little tweak Going to every single single view is like so cumbersome I'm sorry hear it simply click weather you would like this And if Joomla makes a change that we need to know that this feature we just change it in the compiler and it Immediately you know compiles correctly for all the components mapped in it The other feature which I think is also great is this keeping of History If I want to keep track of all the changes made to the any item of greeting Then I just need to take this Keep history And JCB will dynamically add all the needed structures so the Joomla Integrate a history component we work alongside your third-party component And keep track of every item and it's changes So that is just a tick box and JCB does to work The app The has metadata basically adds The metadata Fields to the view So you don't need to add them it gets added just by ticking this box Then also does this feel view have access public Special law Uno registered All these access levels Do you want to implement these levels of access on this view usually you would use this If you want the view to be actually be editable on the front end of the site Because then you will use the access To control some of these I'll show you more of that as we go along So I'll just take this as yes I wanted to have an import function And like we said We want to add a site edit and create view for this admin View Yes And then We wanted to be first So this happens you basically is gonna have all the features that an admin view can have By Default in JCB And how she would realise when we start them was trading it although it's as easy as taking this parks The code that JCB is gonna write two to this implementation Is quite stable And yet Dynamic that as Jason as tumor levels and changes We can tweak these codes In the compiler and make sure that it remains stable this way Good now save and close Now that we have linked the Saturn Vue to the component We can all go to Athens views and we'll see this atman view Will even see the icon we can click on this Blue pencil here and this will actually take us to the admin View Obviously again making sure that all your work is being saved in this area Click ok if it is And you'll see that it opens the admin view where we linked The fields And we can actually how work in the atman view From the component Now there are areas in the admin view I didn't they must write like the permissions the tabs the link two views And I'm not going to going to do much of that I'm just gonna add Some permissions Because I want to demonstrate The promotional structure Regarding the front in management of editing these items I'm just gonna use the core there is the option of using what is known as the view edit Instead of core edit then it means it's relationship is just for this view I wanted to be related to the Core Which means that it's not gonna be I only related to this view But whatever I changed in the Corps will affect his view Mooring explanation on the permissions there is this tutorial Which is available in the description And you can go watch this tutorial And also Maybe do some changes compiled the component And look at the code Look at the code and look at the code that's all I can say for most questions being asked because the code Really tells you what it's been done There is many ways for you to learn How JCB does things By making changes And then compiling your component and looking at what changed Usually using something like it will be very useful in Discovering the changes There's also a way for you to know where in the compiler the specific code is being created Which I will show you as we continue So since we made changes I'll simply click on save and close And this will take us back to the component So being back in the component We'll see that Everything is still the way we left it And The quite a few things around The admin view which I'm not gonna go into depth During this tutorial I would encourage you to watch the tutorials that are already online For actual explanation on hold his features What did Amos trading at whole world component we have done quite enough Regarding the back end So all that lourie remains It's basically to compile so will click save and close And we'll go to the compiler Select all component And compile Great That means we've just written 9000 lines of code Greater 51 folders in 122 Files And if we were to have manually Written this without any boilerplate to law You know why our script That could help us write all the classes and tables and stuff And it took us 5 seconds to ride one line It would have taken us 25 Hours Or about 3 8 hour days That's a long it would have taken you to do this manually So just right there Jason Beers already so if you're quite a lot of time Now the component can be installed by Simply clicking this button Or Grabbing The euro and going to the Normal installer Because it has actually Compiled a Shippable Joomla component package Which can be installed on any Gmail or component Sorry energy Muller website Now one thing I didn't do Is I didn't actually select A Component image so when are we selected you see there is no image showing as there is with this one So I think I wanna quickly go back Can I clear the temporary folder and just goes select At least the demo components image as our Hollywood component So in the component there is this area to select an image I'm gonna click select And I've selected The devil components package Sis we have something so I'm gonna save and close again And now go back to the compiler And compile it again Now I'm gonna click on install If I don't go here will see that there is now a new component in the Stream on our website And I'm gonna open in a new tab And there we go we got our component installed It has a greetings tab and a add greetings tab We also have not selected images for those So let's quickly do that Gonna go back to the admin views And then the greetings I'm gonna click On greetings First As an admin View And here you see there is a place for icons and the add icon I'm gonna select top So I've selected This little bucket as the icon for greetings I'm gonna just add 14 For adding a greeting with a little Green Plus No we got it to icons I'm gonna click save and close Chanel I've got greetings Set up And I'm gonna gonna go and compile this again That's usually how things go we go make a change We come back to the compiler to compile it install it And go look at the component And Also When it gets little bit more advanced We go that only go and look at the component in Joomla But we also go and look at the code So they we got it the two icons are in place if I click add on greeting We see that there's the name there is a greeting And there's also all these other Fields added by Default So the created and the metadata and the permissions Are all in place That is How you would set up a basic Hello world component Go to the options Will see that it has this Check in timer And you can change it to 5 hours What I explained you know the checks in the items We also have The history version enabled And set to remember 10 versions of any item created As a greeting We also have the permission or structure in place Which includes the greeting Access greetings batch dashboard and so forth Which are all The switch is related to the greetings area So now that we have the admin area basically done Let's continue to The front-end I'm gonna illustrate to you on the front-end how to view greetings That will created how to edit greetings that will create it and how to add more Greetings from the front end to this component Let's close out of the components edit area the first thing we need to do We need to create what is known as a dynamic get there 2 ways to get to the dynamic get Area 1 is to click on this add Dynamic get The others would be basically in the sub menu to go to Dynamic get and then Click new we gonna need to Dynamic gets we gonna need 1 to basically return a list of greetings And then will need one to return one greedy because one the one Dynamic get is gonna writ Return for us all the greetings that are available and published the 2nd 1 is when we click on one of those greetings it should open only that greedy So we gonna use the name as who is being greeted and then the greeting will Will only show when we actually click on the name and then show that individuals Greeting so that's part of how we think about this at this stage then In this area where we can see the full greeting we are gonna add and edit but And in the list area we are gonna add a create button but these create an ad Edit buttons are gonna be controlled by the promotional structure which JCB Puts into your component by you just saying that it should be there so setting up a Dynamic gate is quite easy you first know that ok I'm gonna use a buck interview Which is related to my component and then I'm gonna select that back and we You see it's says your greetings first so like I said before with a system name is what What is used in the dropdowns so here we select greetings First This one is going to bring back a list query we don't want any pig Nation And I really don't need all of this we don't need The acid ID We can leave the created by And the created We can take out the modified the version we can also leave The heads And the ordering that's fine now The greeting we most certainly don't need in a list we only need the name now Ok let's give it a name that we can sort of identify when we start setting up the side view Recall this List Greetings And then in brackets Name only So we know ok this is what it is going to save that You didn't need to save it we could have just gone right into tweaking the data without saving What the data tweak gives us is it gives us a little bit of control on the writing The JCB will do regarding this query so for example we want it to be Before did Now the ordering is called ordering Hey hey darling So we want to order it Ascending by the the order set in the database The other filter we want to add Is we wanna make sure That it only returns published items So in the Where area replace published And we say equal One day only published values be returned there are some other features Around the tweak area which I suppose goes beyond just in the whole whole whole world component But there are tutorials about this on Joomla sorry on YouTube in that playlist List that are for we referred to quite a few times then there's a joint area which we not gonna use But It is a very nice way of linking to other Phone and tables that I've got any kind of relationship there needs to be in a Asian ship between the main table and the join table but like I said When I'm gonna go into this we are simply going to do the most basic which is what we've got here And we gonna say say when you so we can do and another one The next one is this gonna be a greeting Just simple greeting we wanted to be one item again we gonna do a back and view Again from the greetings list This time we really Want the name and a greeting we can still use the published we don't need to modify Bye We can leave those we don't need ordering we could have left out the head In the previous one we set up now let's do a little tweak to make sure that it Doesn't allow someone to grab An unpublished value By just adding an ID in the URL something ok so that's ok Got this Oh yes Now we need to add a filter We gonna use the ID Basically passing the ID via the URL So the state will be ID and It is gonna be a Id = so that's really what makes the item load Is this filter type and there are many ways to load items And yes this is a little bit more complex than you might wanted to be but believe me It gives you freedom And ability to build quite amazing things And so Please go and watch the tutorial on Dynamic get on GitHub There is actually a place I just show you Call 2 Wiki And in the weekend there is links to all the different tutorials And here's the dynamic get And you you should really watch all of that Even the second one And yeah well mine courage minister really watch everything I have often seen people ask question In the issue area Which are dealt with in the tutorials I'm sorry We all have lot of things to do and so if I don't answer this questions but simply .22 tutorial I hope you understand Ok so we've got another let me get all the value selected that we want and Also how to limit it The tweak is in place And the limiting factors We don't need to join it to any other table with simply Corner Return these values Let me see We could add the username values if we wanted So we wanted to show who created this we could say created by How to joint Click on the joint a database tables not view because we want to use The user Table And we basically want A single Item returned And here it will be Created by And In the joint field it will be B i d And we basically want let's see The username that's it We don't need the ID where it got that so just the username And we could just say Let's call it Creator Or Grief Turd Greeted by ok so he's the one sending the greeting IGo 7 + So now we've got two Dynamic gets a list greeting and a greeting this is what you need to build first base We Again starting at the database looking at What is the date I want on the On the page What do I want to show the people looking at the page And by that determining really what the data is you going to grab from the database And giving it system names That are Identifiable because now The next thing to do is to create a site View How to restart a thing is layouts and templates That all can work together with side views I'm not gonna illustrate that now 40 most rated basically if you want to know more about that look at the two tour On YouTube I'm just simply gotten bold Two side views And yeah let's go ahead and do that Ok the first sight where we gonna call Greetings And we gonna give it a name called Greetings Ana Codename Greetings Now the code name is significant because you don't want to Clash with up and views that you've already created That are gonna be Edit views on the front So since the listview is not being Placed on the front of your component only the edit view that means edit views name Name is greeting So we can't set a code Name For the front called greedy otherwise they will actually Uno conflict So I'm just gonna use greeting and for the Single I'm gonna use greet Ok so Just give you a reason for the nation and why I'm doing things to the way I'm doing it So at little scription here I'm gonna just Place a little Heading And adding it like that will actually mean That this little string will get added to your language file So that's how you create language strings it's just adding the snippet Oh or even just this anywhere in JCB will actually create a language string Ok now we here We are going to select the list greeting and the reason why there are two of these Is it the one is what we will act upon in the compilation the other one is just for you to look So if you end up Let's say in here and click save It will not be playing any role whatsoever in the compilation It will play a role when you export a JCB package but that's a whole different subject and not cream and you You that so yeah good practice would be that these two actually are the same The main and then Ima get but since you can add custom gifts We don't have any customer gets setup so you can't select any but you can add more than just Your normal main gate to a site View You can have a moan main gate and then a bunch of custom gets which brings a whole ton of data to the PE Page from different variations relationships which I know it's a little bit Ayanda hello world component But it is there and it actually does work very well it's just that you need to do some Someone working tutorials and so forth but we want the list greedy and so This list greeting gives us a few Snippets now Do know that the Snippets are really not always accurate because it's very difficult for me to always No exactly how the implementation is gonna work out so I'm giving you a snippet which is how Kawaii expect you to use the data but you can adjust that and this is where your knowledge of PHP will really Really coming to play you should know that this and that little arrow Items is because we are working with an object and the you know what is it Mean and how to use an object and how to interact with an object How to pass over it how to grab its values how to update its values all this is part of your Your own background that you need to bring to JCB JCB is not gonna At this stage crank out customised up and view side views all the way Where does the admin views because my idea was it when it comes to sight views I always wanna do some Something different and I just want to have the ease of getting all the data on the page and then be creative And so I haven't spent much time to make this as automatic as I want to set up off At the back in the net man views because this is really what makes your component different from every other Component out there and here we want to encourage you to really Yes do you do a lot of preparation and thinking about date Structures and relationships because your Dynamic get can grab from so many data places And bring all that data to you in a nice object which you can and pass and display With a lot of promotional switches as I will show you in a moment so that is giving you little back draw Drop on why the dynamic get and the site view even the custom admin and you it's relay Ships and why it is like that ok so Basically looping through those items is this these two strings has all we need and then When I could grab a listview let's see We are busy working on adding the Bootstrap library to JCB At the moment with basically God UI kit version 2 Linked to JCB And I've dealt selected the list I option for this you like it Uikit is a library developed by yootheme If you do not know you like it I would encourage you to actually go Google that And Then your You'll see it's quite a nice library to use we have voted the Bootstrap is the better one And so we are migrating to Bootstrap But will still support you like it as much as we can so for now just to get things going We simply gonna loop over the items show the name nothing is here Clickable writing as editable is just to get you know you introduced to using Views 7 cloves Now we gonna go back to our component And we are gonna at the site for you to it You might ask why don't we just Add the side of the component to the side view when we create the same for you And that was a idea that You know I did play with but because of database relationships and all kinds of Reasons I felt that the better approach would be to linkside views At admin At the component area instead of at the site area This gives us the option to use side views quite easily with in other components That was really the idea behind it We might resync this and we might we shall fill this in the future I mean this is the first time I bow Such a component called JCB and who knows what happens if we start refactoring it and more Advancement program is get involved it might be come even here for better than it is now Now but this is how it works at the moment So you go to side views And you click create link site views And then you basically select that breeding site view you say yes I want to have an admin menu sorry be able to add a menu to the front of my website with this year View I want this beauty is metadata this is going to be this components therefore View I wanted to control access will look at That again but I want that access to that it's default be public so this is Basically begin making use of all the options and save and close So now if we go back to compiling our component There's no changes being done to the database I need to maybe just give you a heads up here if you're Adding new tables DBS Bill to Ashley know that and add the tables to a Sequel update which when you update the book component it automatically updates today the base But it's still important for you to actually check that it does this For there could be a reason that it thinks that it's not necessary Yet I tried to Most Yeah I've tried to build enough places things in place so that all actually pick up that you've had it I Every field or a new View to the component and that the component now needs to increment a version And Release a table update but sometimes that is not happening and And then even if you update your component the database is not being updated Necessarily So that's just something you need to keep your finger on make sure that that happens The most bite JCB will take care of that Answers now and this upgrade we have only added a front and we haven't touched the data Everything about that is just the way it was before so we can without any concerns just compare And Re-install the component And then go and add it To the front So we can sort a look at what has happened Ok Now just a heads up When you add a front and side view and you said that it's default should be public But it's not the first time you installing the component then that default cannot be set to the database because Default that only gets said the first time the component gets installed I don't wanna go into all All the technical reasons for that but you could go into the app the components script file and you can search through it To see what I mean because it's actually a function that gets added to the script file and only get simpler Ended with on the first installation of the component now that's important then if you do not Even follow what I was saying now and why I said it then I hope you'll get to To understand it as I try and demonstrate these things Before you can add the greetings to a site admin sorry to a site menu let's It's just at least add a few breedings Ok So we've got at least 4 greetings in place and now we can actually add That list View to an Front and side view So we go to menus And Go to main menu Select menu type click hello world readings I was the previous component Ok Everything else looks good So we've got greeting set as the home Of this website And we gonna click save and close There we go But got home and other world greetings That should mean that if we click on This Preview The front end of the site We should see the greetings It's gotta say the page isn't redirecting properly And the reason is like I explained We set the front side view That it should have access control Which means You can control who sees this page not that it's just open to everyone but But you can say only this group can see it all only that group can see it But since we haven't set that And by Default Doesn't allow anyone Now we said that it's by Default should be public but like I explained But I Gave you that heads Up It only sets that D for the first time the component is installed so it is the way you should ship the Component If you only add that feature later You need to do custom scripting in the script area Which is the beyond hello world component tutorial To update a database and ensure that this view is actually public The manual way to do this is basically to go to the whole world component Click on options Then go to permissions Scroll down To the area where you see greetings site access Select the public group And change The site access To allow This will now ensure that the site area is actually Available To the public So having true fresh the Public area when Elsie James Williams Sarah and Chris All of them loading As expected Ok now Let's Add a Link to James so that when you click it you actually see the greeting that James should receive So we go back to the site views and we open the greetings Now we wanna add a link here But there is a better way of doing a link in JCB Which really takes care of all the Controller issues When I go to the front end of the component in the open The model for greetings Will see that there is the get items method And in it we are basically checking Whether this item has an alias If it does have an alias ADD and ID It actually creates what is known as a slug And this Elias And it gets combined Into The Slug Since we know that our greetings area does not have an Elias In fact it only has an ID It will only end up with an ID in The Slug So Let's go add an alias 2 hour breeding There is a shortcut to the site Sorry the fields linked to an admin area it's this little icon here And we basically want to add another field called alias And if you go to the fields We'll see that there Is already a field called alias So we can simply use that field So go back back to the admin views And we'll click on this shortcut for Adding fields And We got a Basically Click here and add an alias We gonna tell the system that this isn't Addis And Now we are moving Both of these above the tabs And we are creating the earliest to be second in line And the greeting We are going to Let's see Make it a fool with The greeting We also gonna go editor greeting In a moment So that it's no longer text field button text area Ok so we got name alias all of that is in place saving close Going back to fields I'm going to open the greeting And since there are some Buddies I want to stay the same I am going to select That XML Definition And I'm going to copy it Then I'm gonna select Textarea Then I'm gonna paste That first XML in here We obviously have to remove it again But just so I can copy paste Cut the name I want to keep the same name You can't just change the type because the type up here Needs to actually correspond with the type here So just changing the type in there will not work So the label you want to keep that the same We want to add Etsy Hand greetings as a description We don't want to default text And it's at the hint back again Didn't really need any of these other Fields so we can just remove them We don't want the filter to be set to Raw Would rather use the word string We don't want any HTML at this stage in our grading If you want HTML nodig reading you can use The Safe HTML I see it's not in this list but it actually does exist Usually we would use the editor instead of just a text area Anyway So here we go We got Textarea replace And I'm gonna add just here Spun 12 an hour long that's gonna still be there is class But I think it is still there And now I think that should do it Yeah let's change this They know what we don't need to change that Save and close Ok since we didn't change any of the database values with this text field We shouldn't have any issues But we did add a new text field So if we go to the comp I Compiler And we compile the components You see that a dynamically incremented the version and If we go without installing we go to the component you see that it hasn't Actually updated view because this was open so before doing anything I would Suggest reopening the view basically refresh the page So that the changes we also basically show So now we can go back in simply install the new changes And if we go to a Hollywood we should be able to Open the other world and we should see the earliest there and if we click save It should dynamically add a new L as now we'll have to To do this for every item because the Elias is are saved or created only want to save the Item so I'm just opening all of them quickly now usually a user using your compound You only gonna ship this component when you've got everything in place I hope and so they wouldn't You have to do all this gymnastics to make sure that all the values are in place and if by some reason They have to you will have to help them along with some custom scripting I suppose Anyway So now that we got all our items set And it actually has an Elias We can start working on those links There's one more place we need to make a change And that is in the dynamic yet If you remember when we set it up We didn't actually Include The Elias So I'm gonna copy this I didn't just change to just another View quickly and then back to this one So that we can get the earliest there 4 years the Elias that we want We don't need all these And we can just add that over there There we go we got the earliest now also selected Save and close So We can check with this alias is actually being Brought to the page Bye Adding a little I call it Hub reduction tricks So Would you do it or PHP dump here Bar Dump And We just take all the items Copy Pasted in there Hand safe Now we go back to the compiler I'm just quickly compile this again And Install Go to the homepage Refresh And now you see that it dumps all the values on the page and then this place them So now we can look and see ok well fine Where's the ugliest and actually created that Slug we spoke about So we got the slide for every item and that is the first step in setting up Hey Well-formed Link 4 Opening one of these items I don't know what Some of you might think Wow that's got a lot of things to do to get this to work But I can tell you if you wanna build components for dress for 2 Muller And wanna go outside of the box Both things that are actually unique and completely different from what other People are doing And this is really just the basics Ok so we gonna Set up a trap year Around This name But we are gonna use PHP to basically take care of creating a link for us So here we are simply gonna say Echo And I'm gonna go show you where we get the name The class name for what we wanna do here I guess you're back in the code You see that there is In the helper class A File called router so you can open that And you'll see that you have what his know now called hello world help her out And If you scroll down We don't have this stage have how yes we haven't added the the side view for the single record So there are some values missing your man I should have first done that Anyway I'll go do that now but we'll come back to this file And there is another file Or I should say class It works together with this class And it's basically these two classes with their methods That we were gonna use to actually build our link Ok so let's Create That display side view So I removed the The Vaal Dam from this view I'm just gonna save and close this I could have said saving you Just gonna create Another site View And we gonna call this Greet We can't call it greeting because like we said There is already a greeting in the front All greeted at might be better We gonna Make a nice display here I'm using Panel I'm gonna copy the panel slip it Pasted in here And the title I'm gonna make The name And the content Will obviously be the greeting No I don't want to a rose Some good takeout this one So I basically Got one breeding setup here It's not yet gonna be off here there's no buttons here yet to edit it But he will basically view One Greeting And it will also show you who set up the greeting And ok now we can close this So we got this greeted Side view We can help go to the admin area Of the Good because sorry to Joomla component area And I'm gonna click on here And Actually add a side view To the component Same way we did before Can I say I want greet I don't want it to have an admin you It must have 2 metre It's not a default view I also want access there And by Default it's not public So Save and close Now we'll compile the component again Ok I've compiled installed it If we now go back to the Far right just Opened previously this hello world Helper route And we scroll down Will see that now has a method called greet route And you basically pass it and ID And it constructs The The URL for you Now This component view doesn't have category So it will skip this area But it's A function that I Wrote that shoot Be able to Basically Work for any View So You want to use this Method And this abstract class Now Those of you that are Lil Bit interested in how this works You'll see in the main File of the site View You'll see that the router Is actually also added as a helper class And This is basically the name of this helper class hello world Help her out And so That's the abstract class name Going back to our site view of greetings To add a link We now know The method name So that's the method name And that's abstract class Sorry that's the class name now let's get the method name I go back to Scroll down That's the method name so we can Just copy it Ravenously Needs to Bukhara spawning to the view we want to open And we wanna give it The Slug so it's gonna be a term Slug But that's not the only function That we want to call here there is another one I mentioned Which works alongside this and it's called the jail route Function Actually class I should say So we would add to jail route around this First A method class And That would basically At the Other values to the euro That is required Ok so we've got our own helper class of a component We are at we give at The Slug Which then gives it to the J router Which then Echos out The link To open this item Great Now let's save this and compile again To see it in action We go to the front and Reload the page And when we click on one of these says not authorised To view greet That means This specific group Are not allowed to look at this What are ways to prevent the link from showing up in the first place But this is if for some reason you didn't actually put that custom script Place You see You can actually see how the backend generates some of this So if I go into the code And we go to the admin area Of The Hello world component And we open the model And we opened readings No no no it sorry not the model Actually the view and then readings And we open the body And we open the view data HTML You'll see that it is grabbing Some permissions to know whether it should show certain buttons And then here Is again setting up some permissions To see whether You are allowed Two actually Edit Here it is To actually edited the The greeting And if you're not allowed to edit it It just Echoes the name You see it doesn't show you the link So this area here Is really a demonstration of what you wanna do in the front You don't wanna always show the link To the item unless The person Who is action viewing the site Is in the correct group Of the site To be able to actually View The item No I'm not gonna spend more time on this Part because we wanna also do an editing concept Which is really More interesting and what I would rather spend time on So here I'm just gonna go back into the admin View In the admin area And just change the permissions that the actual public could still open this view for now So in the backend I go to options of the Barloworld component Permissions Scroll down Again I'll see there is a new one called greet Change this to allowed for the public group And save and close out of there Now I forgot back to the front And click on This link It actually opens it And it gives us the name James gives us the welcome welcome to JCB And the greetings were said by the Superuser K so it actually loads it as we expected You can also see in the Euro this demo side of mine isn't fully Search engine friendly setup But it already generates that this is a greet To James And soap And the name James appears here because of the Slug The Slug is used to generate the search engine optimisation here If we didn't have an Elias it would have given you one or two Depending on the item ID Ok so That just gives you a quick demonstration Of how to set up A front-end That actually can open specific items Now The Next Step Is there actually make these items editable I like I explain to you In the admin area we're ready doing some of this So I'm gonna just basically copy and paste most of the code From the admin area And I would encourage you to do the same Unless you know enough that you can just do it without looking at how JCB did it So I'm gonna copy The string And then I'm going to also Copy this one These few lines And then I'm also gonna use some of these I realise by looking at this first area that the Checkout And This Checkout value Needs to be said on the page I also need to make sure about this value Because We need to check the users for Roti On the page so we need to check whether the user is set On the page So We can go and do that and look at some code I'm gonna move some of this code And then we'll go to the front end of the code area I want to add the option to edit the item In both the list as well as the Single View So I'm gonna do it in the list your first and that I'll demonstrate step-by-step And then when we go to the Single View I'm just gonna place the code in place Am I not gonna explain to much because it's basically the same So here in the side view Of the list area I'm going to PHP and I'm going to Custom view script It says add PHP script to the head of the file So I'm gonna paste This link in here and we see that it basically Has this view Greetings And the task is greeting Edit So that is the task And it's gonna be available in the edit Variable Ok so that's the first part of the code we want up on the page Now for the rest of it We go back to the APT Monday again The backend And we see with it we need to grab These as well So Before grabbing them Let's open the price bonding side view so we can look at some of the code Ok so Here is the greetings I'm gonna open this view HTML And we'll see that the user is already being loaded onto the page so we've really got the user That's great This is the items Ok let's look at this How is good for you to actually go and look at the code The JCB is writing seeing the code Is what makes you familiar with how things work And also helps you to detect when something doesn't work Why And how to fix it Since we know that the user is on the page and we go to the site B admin area This area We see that it's accessing the user in the same way Using this As an object User And ask him where that has authority On the core Marriage To check in And then also it Basically takes And gets the check out user Details And We'll see why in a moment But we don't have the check out user on the page So What we gonna do this week gonna quickly Also get those values by going to the dinner may get And making sure that those values get brought to the page as well So we go to list greetings And again like before we just copy all those values And just tweak away and then back And the values we now want to make sure also comes along Is basically I see it's a value that it doesn't by itself add To the selection But you can add it in because you know it is in the database It's just that This table selection Only shows at this stage the actual values that That it knows belongs to the view I think I need to update this in JCB It is a little tweak which I haven't done So it's not showing the Checkout and Checkout by values But you can type it in by just going And then Those values will also be brought to the front Officeserv you So Basically the Checkout and The check out time Actually don't need to check out time I need to check out Basically who checked it out We could have the time But I'm not gonna demonstrate that during this tutorial we'll really it was over an hour and so few minutes So I'm just gonna use to take out for now saving clothes So we've updated our Dynamic get And that means our values are on the page and we can move our code into place We need to add it inside of this for each loop Since this code Is actually working with the item Itself Ok so we've got the code in there Recalling the user We also checking the item check out to the user ID Making sure it's 0 We checking whether to check out user Now let's go get the rest of the code we need Begin in the admin view we gonna go with This area here And just copy that I wanna make a few adaptations because in the end of the day The front end is a little different from the back end In that It is only Back and only displays an edit view the front-end also displays a review So We wanna make it a little different You can pause the video to see some of the things I've done here But in simple terms I basically got the edit here I'm editing echoing the edit Link And I'm adding the item and I'm putting in a little icon which then you can click And here I'm checking whether you have permission To actually edit This item so if we were save this and refresh the homepage It should actually not change anything because the public doesn't have permission to edit it at this stage Ok that I can't should be pencil not edit Ok so let's save this and compile it 2 to see it in action Install it And we reload the home page Rose you can see it doesn't show those little Buttons Now if we go to the back end And we go to options And we change That The public is allowed to edit And Let's say it now change state Yeah Let's just do that trailer allowed to edit And It's open the front again When I see that it shows the edit Pencil Let's click on that And we see it opens The edit area Word can actually now Add the exclamation And click on save Save and close It tells us that the message was saved excessively If we now Open that greeting We see that has the exclamation 2 hour A time to integrate Or to make out items editable On the front end Within the control of permission groups Has actually worked very effectively if we again Revoke the permissions And Refresh the page Insult me those links are gone And even if somebody Were to try and Circumvent the system By having In the Ural paste in the link To edit that specific item and It will actually Say that it's not permitted So the The the permission of structure is actually Armed and will protect the item from being edited by By that group So Again we gave the Public Permission to edit But now the question is Can we also give it permission to create So going back to greetings Let's add an option to create An item Why did this button here With Airlink To create an item But I'm not adding any chicks around it But you basically need to same kind of Check as you've using here Except that there are some Shortcut let me Let me show you So basically around the button we added this PHP That takes the uses a faulty to create For the core Office component If yes Then it will show the button if no the button will not show So that is to control the visibility of the button So let's save this and then compile and install To see it in action So we see the button doesn't show And that is because currently Who got a component set That Republic Cannot Actually create If we allow creating For the public And we Refresh the page You see that now it actually shows Sorry that's the different view Ss1 Refresh this page There we go Heifer click on it It will open an area where we can create an item So here we can sit in your name And then Save and close We get this safe not permitted This must mean that we haven't granted enough permissions For the Public user Taxi create an item See giving it the option to create an item Is not enough because there are fields That You know you need also access to Before you can create an item So let's let's try again But first giving it more permissions So if granted it Basically all the permissions That it needs Go to the front Now we click create greeting Save and close And there we go With saved the item We can again edit the item We can close And we can View As you can see it's all working As expected So Our hello world tutorial Is nearly at it's end We have within this tutorial demonstrated to you How to create A hello world component List It items Open individual items And editors items As well as creating new items All based On the permission of structures Of the component So if we Where to change these permissions back To not allowed And we now refresh the front We'll see that Now we can only view the items And even more Every go back And we wanna control the actual viewing of the great items Not to be visible to the public but maybe only two let's say managers we could do that So you can manage That kind of control over your items You know without actually A lot of Crust in code If you click on it now it will tell you don't have authority to view it That you can add Basically custom Scripting To remove the link so that it doesn't even look clickable If the person doesn't have access to view it But that's ready We gone so far over the time Trying to demonstrate to you Some of the basic principles of setting up and how low component In JCB I trust you if Android this tutorial Wi-Fi doesn't reusing it take this long to actually build a k Hollywood component In fact there is a older tutorial Where we managed to build a Hollywood component in a very Shorter time Illustrated and then must read in and explain it all more here To help you guys along To actually build components with JCB And that you'd realise that JCB Is really actually a very powerful application I mean I haven't even gone to the code this time And shown you all that it's written But I mean just from the compiler We ready got 13000 lines of code Which would have taken you 58 our days to write Which is about At 39 hours And I think for a basic component that's quite a lot of code And it's because that it's already integrating a lot of promotional structures and How you know version control I mean if I was to Open The greetings And Just open James When are we added that No Exclamation mark We could check the version We can see the changes and when it was made We can actually review Some of the previous versions And we can even go back to those versions That kind of integration With your history component is done automatically by just adding history And so is many of the other features The JCB is adding to your component like export of data import of data Bosch Pearly Beach Changes that you can make As well as You know whole lot of other concepts Which It's just Beyond the scope of what we had time for today Well enjoy coding and yes If you have any issues Please go to get up First take out the Wiki page Check the tutorials And if you just think you've discovered a bug You're most welcome to open an issue And we'll see what we can do in trying to resolve that for you We would like to invite other PHP Programmers To really get involved on the JCB Get up Community And help us improve JCB So that It can become a home Parys to manage The troubled waters of open-source Development Thank you \ No newline at end of file +I would like to give you a tutorial on how to build a hello world Component With Joomla component Builder Joomla component Builder [00:00:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) Is a Joomla component Which Helps you to develop Joomla components Quite easily I originally developed this application or extension For myself just so that I can Maintain the code In a very consistent [00:00:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m37s) And Shareable way For example since there are lot of Concepts in any components that build that you build for Joomla Which we could call conventions or Boilerplate Implementation These things are usually always the same And so I wanted something like a wire frame That could just take care of all that for me all the time and even if Joomla was to change [00:01:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m09s) I could just make a change in one place And then compile it into all my components that I have developed And then just have them Run Again stable on Joomla instead of having to go to every one of those components and that means We've gone Beyond Just developing The most basic parts of a component with actually gone and ventured into some of its complexities And that is why Even showing you an hello world [00:01:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m44s) Component Being built by JCB Joomla component Builder It is still gonna end up being quite an advanced Component Now Since I've really mentioned to you that I really build JCB for myself And it wasn't originally intended as a community project just something that I was wanted to use It has since become a community project and the code is open on GitHub And most of you might already know that [00:02:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) But it also means that I didn't think about the complexity When I was developing the component I just had Desired functionality in mind And I didn't really care that it is complicated to achieve those things Because I set the conventions in place and I obviously know how to use them And so [00:02:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) That's why JCB On the surface might look just like any other of those component Builders out there But when you start Using it and Knowing some of its secrets It actually is amazing how conventions Even Conventions that you would Use when you develop components yourself would [00:03:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m07s) Actually make JCB do things that are quite amazing So you will end up realising that JCB has actually a ton of functions Most of them will most of the basic ones of those we have tried or I have tried to Explain in the tutorials that you can find on YouTube You can actually access the tutorials from this link here Looking at the tutorials Would be The most Easiest way [00:03:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m40s) For you to discover some of JCB's Hidden secrets but at the same time It really is only the basics although it's quite a lot of Tutorials and I know that I usually Yeah I elaborate more than might maybe is necessary And yet That's because I wanna make sure that you are able to not only Do basic things but even advanced things [00:04:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m08s) If you come to JCB and you do not have PHP As a as a language But you don't know it well And you do not know Joomla's API Then You shouldn't expect to build complex components with JCB Complexity is only possible with JCB the more you know yourself Because the more you know the more you would have a perspective on how to How this implementation should function And most of the time if you do have that perspective [00:04:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m44s) You would start knocking and opening the correct doors And set up the correct relationships To have those conventions dynamically You know be built for you By JCB If you are very good at PHP programming and you do know the Joomla API You should be very happy to simply go into the compiler And really start reading the code The compilers codes files are actually [00:05:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m20s) Alphabetically ordered ABCD And so you can start with a and work your way down So the first one is a underscore get the PHP and so forth Reading this code and understanding how JCB's compiler Constructs the code would send you on a treasure hunt where you would discover amazing features That work just out of the box And yet having this under the hood I realise we all need to start with the basics And that is Just to build a hello world tutorial [00:05:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) Just to know how to Actually Combine The different Concepts That is required for a component To be fully functional And portable And useful And that's really what I want to actually [00:06:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m16s) Give you a tutorial of In this video There are two concepts which I want to mention before we start One of it is patience the other one is perseverance I know within any programming career These are invaluable Aspects Which if you have them will make the whole difference whether you are only a normal programmer Or an extremely good programmer [00:06:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m49s) You see because those of us who have stuck around and have just been going at it We have realised that many might consider us being genius And yet It's only because it's disguised by perseverance Because we continually try and try and try Until we resolve or succeed This is what has made JCB be possible And this is also what would make you successful [00:07:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) In using JCB It is not a component which I can claim has no you know, internal conflicts or has no Inconsistencies But it is most certainly a component with which I am myself Have developed countless Mini Programs components itself from it Which I am maintaining And I am planning to [00:07:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m42s) Start Pushing some of these components into the community It's just that I have not seen the need for doing so yet For the initial development were mostly For clients who has directly Approached me Now Having said all this Let me take you through the basic steps Building one piece one another [00:08:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) So that you would Fully understand How to build A component In JCB I think it's self explanatory That you would need a Joomla website This Joomla website would preferably be On a developing environment which is either offline [00:08:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) Or on a server Which isn't necessarily you know used in production This is not because JCB itself is unsave Any of that it is simply just it's more convenient If you have it offline You can open the code in your IDE And since JCB has the feature to extract this customised code out of your component And put it back into your component on compilation [00:09:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m00s) A feature which will not be discussed during this tutorial What does exist A local developing environment is most ideal for this I know that you could with Certain Yeah protocol Set up a Tunnel between your desktop and Your live server And still have this kind of interaction of editing code live [00:09:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) And then compiling and seeing changes And that's all good because if you're able to manage that kind of complexity I don't need to tell you anything about how to setup an environment But what I would suggest though Is that when you are busy trying to install JCB And there is Some limitations in a shared hosting environment then I would Encourage you to try and first resolve that [00:09:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m53s) or move development offline So When you go to Joomla website ready obviously you would login Having logged in you would first need to install JCB So I'm simply gonna go to manage and install There are many ways for you to install JCB you could download the package you can grab the URL From GitHub You could also Install it [00:10:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m20s) From the web It is listed with Joomla Now if you type in JCB and search It actually Brings up JCB here But It would not necessarily always do that I've recently discovered If I type in Component builder which is actually it's name in the listing [00:10:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) It doesn't even come up Which to me was wow couldn't understand how that happens If you do not find a component in the search This is the component Then you could go down to An area called tools And then Developing tools [00:11:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) JCB is one of the listed developing tools Here it is only listed as a component Builder So you can click on that And simply click Install This will then grab a URL from GitHub This is the same URL You could have just used here As you can see That would have done the same thing [00:11:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m33s) But we can use the Joomla Installer And simply click install This would depend on your own network on how fast this takes it could take a while This is quite a big file And it's part of the places where there might be a limitation If used Outside of a local developing environment [00:11:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) Ok we've got JCB installed Now let's open it There's just a few small things that we need to lay down as foundation stones In understanding how a component Basically most Joomla components Are constructed We're Gonna Build A component called hello world The way to setup a component Is you need to first understand field types [00:12:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m31s) Then you need to set up the fields you'll need And then you need to set up the views That you want in your component These views also map Back to the database These are what we call admin views So your admin views have fields and these are usually your Database columns So these are your database tables [00:12:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m59s) these are your database columns And these are your field types so you got a text field radio List Multiple selection Checkbox a date field You got many types of fields But each field independently Is linked to a type But also there are some database settings within each field [00:13:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m24s) As it gets linked into the admin View Since the fields Form the columns of the tables of the admin views This is how you set up a component Once you set up a component Then You basically are done with what we would call the back end The back end of the component is what always needed to be done First Well you could [00:13:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m49s) Argue differently But the point is within JCB you'd first build the back end And then only add in the front end And the front-end usually Doesn't have its own database it actually pulls it's data From the backend Database Now Having explained some of that Let's show you this in action So in JCB [00:14:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s) It already ships with quite a lot of field types So we open the field types area You'll see that there are many field types already setup JCB is built in a way that it can be extended Like subform Is a new field type which was recently introduced into Joomla community It also replaces an old field type Called repeatable fields Repeatable fields is a field type I would encourage you not to use anymore Since most of you might know JCB be used repeatable feels quite excessively [00:14:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m49s) And yet due to the fact that Joomla is now discontinuing this field type We had to Migrate all of our repeatable Fields to subform Fields and it was an amazing Huge Process But yes part of the reason why I'm redoing the hello world tutorial It's because of the fact that subforms are now being used all across JCB And there's been a little few changes And how things are implemented So here you can see all the sub this field types that I've been [00:15:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m23s) Set up in JCB already You could always add new field types So as JCB you know continues and Joomla continues to Evolve and become better at what it does So we will be adding more field types And whenever we would be Confronted by field type That needs a little bit of extra tweaking within the compiler I would hope to be ahead of all of you most of the time in adding that field [00:15:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m54s) type in there if it needs that Most of the time field types do not need Extra help It's only field types like subform that actually does But field types like URL and Text and tel and Sequel tag it needed some extra help But most of these don't Because basically the way a field type works Is that it really helps you set up what we know as the properties [00:16:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m24s) So The property has a name It has a default value It is either adjustable not adjustable It's mandatory or mandatory translatable and then you can give it a little description So that when you use the field type You can always come back to this This information can be gathered from going through the Joomla core Libraries [00:16:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m49s) Because these field types really are only mapping Joomla's own Implementation of these field types So if we were to open a field type that's already been created like the text field You see that these properties already there and in place so the field Type Is text The name is any text When we say that the type is text Then this is not adjustable So [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) We need this unticked if it is adjustable we can tick it It is most certainly Mandatory And so That is how you set up field types I'm not gonna go into this too deep Since there is extra tutorials on how to do field types I just wanted to give you a brief overview Or the fact that the most of the field types already are created and ready for you to use So you'd most of the time simply start with fields There are quite a few Fields already here But I'm gonna go on as they are not there [00:17:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m52s) And I'm gonna create Basically two or three Fields that we can use in our hello world component So First field I'm gonna create Click on new Then I'm gonna select Text as my field type and you see That information in the field type You know Mandatory in everything all this information here [00:18:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m19s) It is actually brought in by Ajax From the field type So if I was to click on this button here Just to it give you a quick demonstration And I was to Just say change this to TT Like three of them and save and close And then go back to fields And click new Then select [00:18:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m53s) Text field again You'll see that now it added three t's in there Because this whole structure is being built From the field types default settings Which we just looked at So I'm gonna go change that back quickly I maybe just put a little Something in here the description For you to see [00:19:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) What I mean So creating a field we haven't really started with it I've just been demonstrating the field type but okay Ok I'm gonna take text again And I you see those o's are showing up here So this means that this whole area Is actually dynamically populated from the values that are put up in the field type And so is this XML structure here Usually Populates with the demo Or default values that you add it [00:19:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m57s) When you created the field type The JCB ships with most field types or ready in place it appears like this is something we have done But really it's something that you can extend and even change So for example if you know that the text field type has more properties than we have setup You can go in and add more to it You can simply click on this you know edit here or before creating a field You can go to the field types And open the text area Sorry the Text field type [00:20:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) And Here just click The green button and add more Properties And then those properties will dynamically also appear Within The area where you create the fields So this again is just Wanting to show you The JCB is tried it's very best To be scalable [00:20:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m57s) And basically customizable To your Own desires So that it isn't just Blocked in To what we have set hard into code But it is movable and therefore scalable So having Looked at Field types I think enough [00:21:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m18s) Let's create our first field So it's gonna be a text field we gonna call it greetings So I'm gonna update the label with greetings This is what Will be visible In the database Greetings Singular is gonna be the database name I'm gonna leave most of the others just default Let's see [00:21:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m48s) Autocomplete is on Validation You know We can leave all of those It doesn't really matter let's just maybe change the hint Ok And then I also gonna just remove the description Definitely take out the default text otherwise it will always appear And now in regards to the database [00:22:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) That is what these features are all about Since text Fields can differ We didn't come Out and say well all of them gonna be this size We left it up to you to decide What kind of text field of this is gonna be And really it's all up to you Obviously that would mean that you would need to know a little bit more about MySQL and databases To really effectively use this [00:22:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m49s) Most of the time it is available on Google so if you do not know What would be the best for A text field or a date field You can Google that Or you could simply go and look at Joomla's own implementation It's got an article manager And you can go into its XML Database And look at What [00:23:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m14s) Database Values was used and just use the same Whatever be the case You should be able to actually navigate through this Without much problems Since that is what is would be required You need to have perseverance you need to You know Be curious [00:23:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m36s) dig through things And doing that you will eventually succeed Because these values are all movable That means that setting them wrong could break things And That's why I always encourage those who gonna use JCB To really do a little bit of homework And to prepare themselves To get involved in programming [00:24:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m00s) More effectively That would only Be beneficial to all of us I suppose Because good programmers makes good programs And makes the web a safer place So Having created our first field I think I'm gonna just reuse name And maybe Also description [00:24:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m23s) Those are part of the demo Component but since Fields can be linked into any admin view and therefore belong To any component It doesn't bother the fact that it is linked to the demo component already What is though true is that if you change it It'll actually affect both Components Okay so Having created our field types [00:24:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m49s) And also now a field Let's create an admin View admin views as I already explained Is really the back end of your component And So you'd need to do some thinking and maybe draw some up there's a whole A lot of tutorials around the web about object orientated development Which talks about use cases and All kinds of discussions and trying to sort of Come up with a [00:25:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m22s) Perspective of what do you wanna build how should it work what should be where what should have its own classes What should have it own tables where we gonna put what And really that kind of work you need to do before coming to JCB JCB Isn't really gonna help you with that And so Once you've got all that planned Then you would come here create your Fields create your admin views which basically is your tables And then link them to a component And once you've done that [00:25:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m53s) You've basically laid the foundation of your application And you can start working on what will make it unique And special which is the front end So first Admin View This is the name is really just for you to identify The View If there be more than one view with the name greetings So let's say you've Built quite a few components that deals with hello world [00:26:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m21s) And now you got three or four different Variations of greetings Now you might want to just say ok this is the first One And By doing that It's identifiable within the drop down list across your application of JCB You'll see that when we would later select the greeting that the system name is used in the drop down list So we're gonna have a single record and a list record Single record is also what we understand as the edit View [00:26:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m57s) So that's when you are looking at one record And you are editing that record In the admin area that's the single record That's also What will be used when you Actually tweak JCB To add an edit option To the site area of your Website Since JCB can do that for you [00:27:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m22s) On the fly This single record Would also affect The front end of your component in that case Which we will show and demonstrate As we go along So for now I'm just gonna call this Greeting and the list record greetings [00:27:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m42s) Obviously we want to have the ability to read and write to this table Now when we say this is a read only It means that the data is in this actual admin area is not gonna be able to be changed Via Joomla Unless obviously you've added some JavaScript and some Other nice Conventions around your component that sort of creates data for that area Dynamically as people use the component Which that case you might use this feature but I must tell you I have hardly ever used it I'm not even sure why I added it but it's there and I know maybe some of you might find it useful [00:28:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m23s) This basically turns all the fields in the area as read only And when you try and change them they never get But you know submitted to the database So we would by Default always leave it to read and write Then you give it a short description We'll go to settings and we'll see That Sorry Fields and conditions We'll see that this button to create admin field conditions will show once the admin view is saved for the first time [00:28:56](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) So you cannot add Fields to this admin view if you haven't saved it That is one of the changes that now came in from us moving away from repeatable Fields to subform fields the admin view Is it table on its own And it's relationship with the fields is also a table on its own So at this stage Unfortunately you need to first not click save and close but just save once So that it basically creates this admin view in the database And now If you go to fields [00:29:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m30s) And conditions you'll be able to link Fields and create conditions We are not gonna be creating conditions since we are basically illustrating or demonstrating a very basic component We're just gonna create A linked fields Linked fields are basically the fields that we created previously So we will click on create It's gonna ask us to be sure that all our work has been saved in the admin View Because if it isn't and we click okay It will be lost So make sure your work is saved before you clicking okay [00:30:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m06s) This will now open an area where you can link Fields to your admin View This looks very similar to the pop-up we had with repeatable Fields except That it's basically it's own View now So if we click on this green Button here It opens An area where when I select The fields we wanna use So we gonna have a name field And [00:30:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m34s) That's a text field We want it to show in the admin list view We want it to show first we gonna have it behave as a title we want it sortable searchable Not filterable because then every name would be a filter that's too much But definitely linkable this means if someone Clicks on the name it will open the greeting so You can edit it Now We only have two tabs at this stage I'm not gonna go into great detail about the tabs [00:31:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m07s) This Time Round If you want to know more please go through the tutorials and look up Tabs to to see more on this subject I'm gonna let it be In the left In the tab And in the tab I want it to be the first item I'm not gonna add any permissions to this But there is an editing permission available at this stage If you want it to [00:31:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m33s) That would create permissions around this Field Which you can tweak who can edit it and who can't You can also control this from a global view perspective Or on a field level These are some of the hidden advantages the JCB has In Handling permissions across your component quite easily Now The Next Field you wanna add is greetings We want the greetings to also be in the listview [00:32:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) And we want it to be second Want it to be searchable Sortable and searchable And it doesn't need to be a link We want it to be on the right Hand in the tab and we wanted to be first And sure that's basically All We Need And they will click save and close This will now basically link those Fields to this admin view We now again open the fields and conditions [00:32:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m33s) We will see that those fields are here And with all the variations that we have selected Ready-to-use Ok so having our admin view setup We can actually now go and create our component So we can either click save and close Or we can simply click close We haven't made any changes in this view since we've come back This area is already been saved [00:32:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m59s) So we could click close But clicking save and close it's always the safe choice I suppose So Now that are admin view is in place Let's go create the component Click new We're gonna give our component a system name Since this is the second hello world tutorial we'll call it version 2 Now we also gonna give it a name which Is the same as the first one [00:33:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m35s) Hello world We're gonna give it a code Name of hello world And is it's version 2 Am I gonna explain too much about all these other switches Basically just that we will need to add company names Author name email website And a short description Now that we have those in place The next thing to do would be to add an admin View [00:34:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m08s) Now since the admin view can only be added once the component's been saved For the first time Let's save it Great our component has been saved Opening the admin view we now can link Admin views to this component There are two places to do this Under settings You can click on component admin View you can click on this one here [00:34:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m40s) Or you could in the admin views click on create Both these buttons take you to the same place This used to be The Old Way In how people would add admin views to their component And that's why we left it here But within the new JCB after our transition away from repeatable fields We actually can handle all of it within the admin tab admin view tab Just click create We are sure we have saved all our work so we can click ok Again we are faced with something that looks very similar to when we were linking the fields [00:35:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m18s) except that now We are dealing with the admin view Linking admin views to this component So I'm gonna click on this plus button here To open our first line We basically just wanna Link The greeting We gonna leave the default icon Of Joomla [00:35:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) But there are a whole list of icons available These icons Are icon moons which are the Joomla default icon That are part of the Joomla backend And front-end I suppose And you can search this Just Search that phrase I suppose And you will find on Joomla's website [00:36:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m04s) A whole Picture map of all these icons Then I most certainly want this view to be Part of the main menu I want an add record On the dashboard I want a list That means clicking on something and it shows us the list of greetings I want it in the submenu The auto checking feature Basically [00:36:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m27s) Components get checked out when somebody Not components items So when you Create a record That are stored in the database and someone else comes and wants to edit that record You wanna prevent people from working on the same record at the same time Since one of them is gonna lose their work So Joomla has this feature by which You can check out an item And then when someone else tries to open it it tells them hey sorry it's not been it's not available it's [00:36:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m58s) Checked out The problem with seeing though is that this check out Can be problematic Because people don't save They just open it maybe to have a look at it And then instead of clicking cancel or close They just click back And the item doesn't get checked back into the database So the auto check in feature is a nice add-on that JCB has set place [00:37:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m25s) Which basically you can set that an item Which are checked out longer than a day Is obviously one that was missed And should be checked in automatically This Is one of the reasons why I developed JCB because I have all these little tweaks that I Want in all my views but I Know that [00:37:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m46s) If Joomla changes something and I need to change this little tweak Going to every single view is like so cumbersome So here it simply click whether you would like this And if Joomla makes a change that we need to know adapt this feature we just change it in the compiler and it Immediately you know compiles correctly for all the components mapped in it The other feature which I think is also great is this keeping of History If I want to keep track of all the changes made to any item of greeting Then I just need to tick this Keep history And JCB will dynamically add all the needed structures so the Joomla's [00:38:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m30s) Integrated history component will work alongside your third-party component And keep track of every item and it's changes So that is just a tick box and JCB does the work The has metadata basically adds The metadata Fields to the view So you don't need to add them it gets added just by ticking this box Then also does this field view have access public Special or you know registered All these access levels [00:39:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) Do you want to implement these levels of access on this view usually you would use this If you want the view to be actually be editable on the front end of the site Because then you will use the access To control some of these I'll show you more of that as we go along So I'll just take this as yes I wanted to have an import function And like we said We want to add a site edit and create view for this admin View Yes [00:39:38](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m38s) And then We want it to be first So this admin view basically is gonna have all the features that an admin view can have By Default in JCB And as you would realise when we start demonstrating it although it's as easy as ticking this box The code that JCB is gonna write to do this implementation Is quite stable And yet Dynamic that as Joomla evolves and changes We can tweak these codes [00:40:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m09s) In the compiler and make sure that it remains stable this way Good now save and close Now that we have linked this admin view to the component We can all go to admin views and we'll see this admin view We'll even see the icon we can click on this little pencil here and this will actually take us to the admin View Obviously again making sure that all your work is being saved in this area Click okay if it is And you'll see that it opens the admin view where we linked The fields [00:40:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m48s) And we can actually how work in the admin view From the component Now there are areas in the admin view I didn't demonstrate like the permissions the tabs the link to views And I'm not going to going to do much of that I'm just gonna add Some permissions Because I want to demonstrate The permissionable structure Regarding the front in management of editing these items I'm just gonna use the core there is the option of using what is known as the view edit [00:41:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m22s) Instead of core edit then it means it's relationship is just for this view I want it to be related to the Core Which means that it's not gonna be only related to this view But whatever I change in the Core will affect this view For more explanation on the permissions there is this tutorial Which is available in the description And you can go watch this tutorial And also Maybe do some changes compile the component And look at the code [00:41:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m54s) Look at the code and look at the code that's all I can say for most questions being asked because the code Really tells you what has been done There is many ways for you to learn How JCB does things By making changes And then compiling your component and looking at what changed Usually using something like git will be very useful in Discovering the changes There's also a way for you to know where in the compiler specific code is being created Which I will show you as we continue So since we've made changes I'll simply click on save and close [00:42:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m36s) And this will take us back to the component So being back in the component We'll see that Everything is still the way we left it And quite a few things around The admin view which I'm not gonna go into depth During this tutorial I would encourage you to watch the tutorials that are already online For actual explanation on all these features [00:43:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m04s) But to demonstrating a hello world component we have done quite enough Regarding the back end So all that now remains It's basically to compile so we'll click save and close And we'll go to the compiler Select our component And compile Great That means we've just written 9000 lines of code [00:43:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m36s) created 51 folders in 122 Files And if we were to have manually Written this without any boilerplate tool or You know wire script That could help us write all the classes and tables and stuff And it took us 5 seconds to write one line It would have taken us 25 Hours Or about three 8 hour days [00:44:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m07s) That's a long it would have taken you to do this manually So just right there JCB's already saved you quite a lot of time Now the component can be installed by Simply clicking this button Or Grabbing The URL and going to the Normal installer Because it has actually Compiled a Shippable [00:44:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m33s) Joomla component package Which can be installed on any Joomla component Sorry any Joomla website Now one thing I didn't do Is I didn't actually select A Component image so when we selected you see there is no image showing as there is with this one So I think I wanna quickly go back I'm gonna clear the temporary folder and just go select [00:45:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m01s) At least the demo components image as our hello world component So in the component there is this area to select an image I'm gonna click select And I've selected The demo components package It says that we have something so I'm gonna save and close again And now go back to the compiler And compile it again Now I'm gonna click on install If I now go here we'll see that there is now a new component in this Joomla website And I'm gonna open in a new tab [00:45:45](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m45s) And there we go we got our component installed It has a greetings tab and a add greetings tab We also have not selected images for those So let's quickly do that Gonna go back to the admin views And then the greetings I'm gonna click On greetings First As an admin View And here you see there is a place for icons and the add icon [00:46:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m13s) I'm gonna select So I've selected This little bucket as the icon for greetings I'm gonna just add one for For adding a greeting with a little Green Plus Now we got it to icons I'm gonna click save and close so now I've got greetings [00:46:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m39s) Set up And I'm gonna go and compile this again That's usually how things go we go make a change We come back to the compiler to compile it install it And go look at the component And Also When it getsa little bit more advanced We not only go and look at the component in Joomla [00:47:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m03s) But we also go and look at the code So there we got it the two icons are in place if I click add on greeting We see that there's the name there's the greeting And there's also all these other Fields added by Default So the created and the metadata and the permissions Are all in place That is How you would set up a basic Hello world component Go to the options [00:47:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m36s) Will see that it has this Check in timer And you can change it to 5 hours What I explained you know the checks in the items We also have The history version enabled And set to remember 10 versions of any item created As a greeting We also have the permissional structure in place Which includes the greeting [00:48:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m04s) Access greetings batch dashboard and so forth Which are all The switches related to the greetings area So now that we have the admin area basically done Let's continue to The front-end I'm gonna illustrate to you on the front-end how to view greetings That were created how to edit greetings that were created and how to add more Greetings from the front end to this component Let's close out of the components edit area the first thing we need to do We need to create what is known as a dynamic get there 2 ways to get to the dynamic get Area one is to click on this add Dynamic get [00:49:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) The others would be basically in the sub menu to go to Dynamic get and then Click new we're gonna need two Dynamic gets we gonna need one to basically return a list of greetings And then we'll need one to return one greeting because one the one Dynamic get is gonna Return for us all the greetings that are available and published the second one is when we click on one of those greetings it should open only that greeting So we gonna use the name as who is being greeted and then the greeting will Will only show when we actually click on the name and then show that individual's Greeting so that's part of how we think about this at this stage then In this area where we can see the full greeting we are gonna add and edit button [00:50:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m05s) And in the list area we are gonna add a create button but these create and Edit buttons are gonna be controlled by the permissional structure which JCB Puts into your component by you just saying that it should be there so setting up a Dynamic get is quite easy you first know that ok I'm gonna use a back end view Which is related to my component and then I'm gonna select that back end view You see it says greetings first so like I said before with a system name What is used in the dropdowns so here we select greetings (First) This one is going to bring back a list query we don't want any pagination And I really don't need all of this we don't need [00:50:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) The asset ID We can leave the created by And the created We can take out the modified the version we can also leave The hits And the ordering that's fine now The greeting we most certainly don't need in a list we only need the name now Ok let's give it a name that we can sort of identify when we start setting up the site view We call this List [00:51:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m35s) Greetings And then in brackets Name only So we know ok this is what it is going to save that You didn't need to save it we could have just gone right into tweaking the data without saving What the data tweak gives us is it gives us a little bit of control on the writing The JCB will do regarding this query so for example we want it to be Before did Now the ordering is called ordering a.ordering [00:52:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m13s) So we want to order it Ascending by the order set in the database The other filter we want to add Is we wanna make sure That it only returns published items So in the "Where" area replace published And we say equal 1 so only published values be returned there are some other features Around the tweak area which I suppose goes beyond just in the normal Hello World Component [00:52:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m52s) But there are tutorials about this on Joomla sorry on YouTube in that playlist That I've already referred to quite a few times, then there's a joint area which we not gonna use But It is a very nice way of linking to other component tables that I've got any kind of relationship that needs to be in a relationship between the main table and the join table but like I said When I'm gonna go into this we are simply going to do the most basic which is what we've got here And we gonna say save a new so we can do and another one The next one is this gonna be a greeting Just simple greeting we wanted to be one item again we gonna do a back end view [00:53:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m46s) Again from the greetings list This time we really Want the name and a greeting we can still use the published we don't need to modify By We can leave those we don't need ordering we could have left out the head In the previous one we set up now let's do a little tweak to make sure that it Doesn't allow someone to grab An unpublished value By just adding an ID in the URL or something ok so that's ok Got this [00:54:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m26s) Oh yes Now we need to add a filter We gonna use the ID Basically passing the ID via the URL So the state will be ID and It is gonna be a.id equals so that's really what makes the item load Is this filter type and there are many ways to load items And yes this is a little bit more complex than you might wanted to be but believe me It gives you freedom And ability to build quite amazing things [00:55:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m06s) And so Please go and watch the tutorial on Dynamic get on GitHub There is actually a place I just show you Called Wiki And in the Wiki there is links to all the different tutorials And here is the dynamicGet And you should really watch all of that Even the second one And yeah well my encouragement is to really watch everything I have often seen people ask question [00:55:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m35s) In the issue area Which are dealt with in the tutorials I'm sorry We all have a lot of things to do and so if I don't answer this questions but simply point you to the tutorial I hope you understand Ok so we've got in the dynamicGet all the value selected that we want and Also how to limit it The tweak is in place And the limiting factors We don't need to join it to any other tables,we simply going to [00:56:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m09s) Return these values Let me see We could add the username values if we wanted So we wanted to show who created this we could say created by go to joint Click on the joint a database tables not view because we want to use The user Table And we basically want A single [00:56:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m46s) Item returned And here it will be Created by And In the joint field it will be b.id And we basically want, let's see The username that's it We don't need the ID, we already got that so just the username And we could just say [00:57:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m19s) Let's call it Creator Or Greeted Greeted by, ok so he's the one sending the greeting save and close So now we've got two Dynamic gets a list greeting and a greeting this is what you need to build first basically Again starting at the database looking at what is the data I want [00:57:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m54s) On the page What do I want to show the people looking at the page And by that determining really what the data is you going to grab from the database And giving it system names That are Identifiable because now The next thing to do is to create a site View now there is such a thing as layouts and templates That all can work together with site views I'm not gonna illustrate that now [00:58:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m24s) or demonstrate it, basically if you want to know more about that look at the tutorials On YouTube I'm just simply going to build Two site views And yeah let's go ahead and do that Ok, the first site view we gonna call Greetings And we gonna give it a name called Greetings And a code name Greetings [00:58:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m58s) Now the code name is significant because you don't want to Clash with admin views that you've already created That are gonna be Edit views on the front So since the listview is not being Placed on the front of your component only the edit view that means edit views name Name is greeting So we can't set a code Name For the front called greeting otherwise they will actually you know conflict So I'm just gonna use greeting and for the Single I'm gonna use greet [00:59:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m34s) Ok so Just give you a little explination on why I'm doing things the way I'm doing it So a little description here I'm gonna just Place a little Heading And adding it like that will actually mean That this little string will get added to your language file So that's how you create language strings it's just adding the snippet Oh or even just this anywhere in JCB will actually create a language string [01:00:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m28s) Ok, now over here We are going to select the list greeting and the reason why there are two of these Is it the one is what we will act upon in the compilation the other one is just for you to look So if you end up Let's say in here and click save It will not be playing any role whatsoever in the compilation It will play a role when you export a JCB package but that's a whole different subject and not going to deal with that, so good practice would be that these two actually are the same The main and the Dynamic Get but since you can add Custom Gets We don't have any Custom Gets setup so you can't select any, but you can add more than just [01:01:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m17s) Your normal main gate to a site View You can add the main Get and then a bunch of custom gets which brings a whole ton of data to the Page from different variations from relationships which I know it's a little bit Beyond the Hello World Component But it is there and it actually does work very well it's just that you will need to do some home work in tutorials and so forth but we want the list greeting and so This list greeting gives us a few Snippets now Do know that the Snippets are really not always accurate because it's very difficult for me to always know exactly how the implementation is gonna work out so I'm giving you a snippet which is how I expect you to use the data but you can adjust that and this is where your knowledge of PHP will really [01:02:10](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m10s) come into play you should know that this and that little arrow Items is because we are working with an object and the you know what is it Mean and how to use an object and how to interact with an object How to parse over it, how to grab its values, how to update its values, all this is part of your own background that you need to bring to JCB. JCB is not gonna At this stage crank out customized site views the way it does the admin views because my idea was it when it comes to site views I always wanna do Something different and I just want to have the ease of getting all the data on the page and then be creative And so I haven't spent much time to make this as automatic as I want to set up of the back end and the admin views because this is really what makes your component different from every other [01:03:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m15s) Component out there and here we want to encourage you to really Yes do you do a lot of preparation and thinking about data Structures in relationships because your Dynamic get can grab from so many data places And bring all that data to you in a nice object which you can then parse and display With a lot of permissional switches as I will show you in a moment so that is giving you little backdrop on why the dynamic get and the site view even the custom admin view , it's relationship and why it is like that ok so Basically looping through those items is this these two strings is all we need and then I could grab a listview let's see We are busy working on adding the [01:04:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m14s) Bootstrap library to JCB At the moment with basically got UI kit version 2 Linked to JCB And I've selected the list option for this Uikit is a library developed by YOOtheme If you do not know UiKit I would encourage you to actually go Google that And Then [01:04:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m46s) You'll see it's quite a nice library to use we have voted that Bootstrap is the better one And so we are migrating to Bootstrap But will still support UiKit as much as we can so for now just to get things going We simply gonna loop over the items show the name nothing is yet Clickable nothing is editable is just to get you know you introduced to using site Views Save and close Now we gonna go back to our component And we are gonna add the site view to it You might ask why don't we just add the component to the site view when we create the site view [01:05:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m34s) And that was a idea that You know I did play with but because of database relationships and all kinds of Reasons I felt that the better approach would be to link site views At admin At the component area instead of at the site area This gives us the option to use site views quite easily with in other components That was really the idea behind it We might rethink this and we might reshuffle this in the future I mean this is the first time I build Such a component called JCB and who knows what happens if we start refactoring it and a far more Advancement program is get involved it might become even far better than it is now [01:06:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m20s) Now but this is how it works at the moment So you go to site views And you click create link site views And then you basically select that greeting site view you say yes I want to have an admin menu sorry be able to add a menu to the front of my website with this view I want this view to use Metadata this is going to be this component default View I wanted to control Access will look at That again but I want that access to that it's default be public so this is Basically again making use of all the options and save and close So now if we go back to compiling our component [01:07:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m19s) There's no changes being done to the database I need to maybe just give you a heads up here if you're Adding new tables JCB is Build to actually know that and add the tables to a Sequel update which when you update the component it automatically updates the data base But it's still important for you to actually check that it does this For there could be a reason that it thinks that it's not necessary Yet I tried to Most I've tried to build enough places things in place so that it will actually pick up that you've add it [01:08:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m05s) either a field or a new View to the component and that the component now needs to increment a version And Release a table update but sometimes that is not happening and And then even if you update your component the database is not being updated Necessarily So that's just something you need to keep your finger on make sure that that happens for most part JCB will take care of that And since now and this upgrade we have only added a front end we haven't touch the data base Everything about that is just the way it was before so we can without any concerns just compile And [01:08:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m49s) Re-install the component And then go and add it To the front So we can sort a look at what has happened Ok Now just a heads up When you add a front end site view and you said that it's default should be public But if it's not the first time you installed the component then that default cannot be set to the database because It's a default that only gets set the first time the component gets installed, I don't wanna go into all All the technical reasons for that but you could go into the app the components script file and you can search through it [01:09:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m30s) To see what I mean because it's actually a function that gets added to the script file and only gets implemented with on the first installation of the component now that's important then if you do not Even follow what I was saying now and why I said it then I hope you'll get to To understand it as I try and demonstrate these things Before you can add the greetings to a site admin sorry to a site menu let's just at least add a few greetings Ok So we've got at least four greetings in place and now we can actually add That list View to an Front and site view [01:10:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m21s) So we go to menus And Go to main menu Select menu type click Hello World greetings that was the previous component Ok Everything else looks good So we've got Greeting set as the home Of this website And we gonna click save and close [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There we go But got home and Hello World greetings That should mean that if we click on This Preview The front end of the site We should see the greetings It's gotta say the page isn't redirecting properly And the reason is like I explained We set the front side view [01:11:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m20s) That it should have access control Which means You can control who sees this page not that it's just open to everyone but But you can say only this group can see it all only that group can see it But since we haven't set that And by Default Doesn't allow anyone Now we said that it's by Default should be public but like I explained But I Gave you that heads Up [01:11:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m49s) It only sets that default the first time the component is installed so it is the way you should ship the Component If you only add that feature later You need to do custom scripting in the script area Which is the beyond Hello World component tutorial To update a database and ensure that this view is actually public The manual way to do this is basically to go to the Hello World component Click on options Then go to permissions Scroll down [01:12:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m25s) To the area where you see greetings site access Select the public group And change This site access To allow This will now ensure that the site area is actually Available To the public So having refreshed the Public area we know see James Williams Sarah and Koos [01:12:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m54s) All of them loading As expected Ok now Let's Add a Link to James so that when you click it you actually see the greeting that James should receive So we go back to the site views and we open the greetings Now we wanna add a link here But there is a better way of doing a link in JCB Which really takes care of all the [01:13:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m27s) Controller issues When I go to the front end of the component then we open The model for greetings Will see that there is the get items method And in it we are basically checking Whether this item has an alias If it does have an alias and an ID It actually creates what is known as a slug And this alias And id gets combined [01:13:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m58s) Into The Slug Since we know that our greetings area does not have an alias In fact it only has an ID It will only end up with an ID in The Slug So Let's go add an alias to hour greeting There is a shortcut to the site Sorry the fields linked to an admin area it's this little icon here And we basically wanna add another field called alias [01:14:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m28s) And if you go to the fields We'll see that there Is already a field called alias So we can simply use that field So go back to the admin views And we'll click on this shortcut for Adding fields And We gonna Basically [01:14:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m52s) Click here and add an alias We gonna tell the system that this isn't alias And Now we are moving Both of these above the tabs And we are creating the alias to be second in line And the greeting We are going to Let's see Make it a full width [01:15:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m18s) The greeting We also gonna go edit the greeting In a moment So that it's no longer a text field but a text area Ok so we got name alias all of that is in place save and close Going back to fields I'm going to open the greeting And since there are some values I want to stay the same I am going to select That [01:15:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m51s) XML Definition And I'm going to copy it Then I'm gonna select Textarea Then I'm gonna paste That first XML in here We obviously have to remove it again But just so I can copy paste [01:16:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m13s) Cut the name I want to keep the same name You can't just change the type because the type up here Needs to actually correspond with the type here So just changing the type in there will not work So the label you want to keep that the same We want to add Let's see Add greetings as a description We don't want to default text [01:16:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m57s) And let's add the hint back again We Don't really need any of these other Fields so we can just remove them We don't want the filter to be set to raw Would rather use the word string Since we don't want any HTML at this stage in our greeting If you want HTML now in the greeting you can use The Save HTML I see it's not in this list but it actually does exist Usually we would use the editor instead of just a text area Anyway [01:17:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m43s) So here we go We got Our textarea replace And I'm gonna add just here Span 12 I don't know how long that's gonna still be there as a class But I think it is still there And now I think that should do it Yeah let's change this No you know what we don't need to change that Save and close [01:18:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m11s) Ok since we didn't change any of the database values with this text field We shouldn't have any issues But we did add a new text field So if we go to the comp I Compiler And we compile the components You see that a dynamically incremented the version and If we go without installing we go to the component you see that it hasn't Actually updated view because this was open so before doing anything I would Suggest reopening the view basically refresh the page [01:18:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m55s) So that the changes we also basically show So now we can go back in simply install the new changes And if we go to a Hello World we should be able to Open the Hello World and we should see the alias there and if we click save It should dynamically add a new alias now we'll have To do this for every item because the aliases are saved or created only once you saved the Item so I'm just opening all of them quickly now usually a user using your component You only gonna ship this component when you've got everything in place I hope and so they wouldn't have to do all this gymnastics to make sure that all the values are in place and if by some reason They have to you will have to help them along with some custom scripting I suppose [01:19:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m58s) Anyway So now that we got all our items set And it actually has an alias We can start working on those links There's one more place we need to make a change And that is in the dynamic Get If you remember when we set it up We didn't actually Include The alias [01:20:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m19s) So I'm gonna copy this I then just change to just another View quickly and then back to this one So that we can get the alias there So here is the alias that we want We don't need all these And we can just add that over there There we go we got the alias now also selected Save and close So [01:20:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m46s) We can check with this alias is actually being Brought to the page By Adding a little I call it production tricks So Would we'll do a little PHP dump here var dump [01:21:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h21m11s) And We just take all the items Copy Paste it in there and save Now we go back to the compiler I'm just quickly compile this again And Install Go to the homepage [01:21:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h21m44s) Refresh And now you will see that it dumps all the values on the page and then displace them So now we can look and see ok well fine There's the alias and actually created that Slug we spoke about So we got the slug for every item and that is the first step in setting up Hey Well-formed Link for Opening one of these items [01:22:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m13s) I don't know what Some of you might think Wow that's got a lot of things to do to get this to work But I can tell you if you wanna build components for Joomla And you wanna go outside of the box And build things that are actually unique and completely different from what other People are doing And this is really just the basics Ok so we gonna Set up a href here Around [01:22:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m41s) This name But we are gonna use PHP to basically take care of creating a link for us So here we are simply gonna say Echo And I'm gonna go show you where we get the name The class name for what we wanna do here I guess back in the code You see that there is In the helper class A [01:23:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m11s) File called router so you can open that And you'll see that you have what is know now called Hello World helper route And If you scroll down We don't have this stage have how yes we haven't added the the site view for the single record So there are some values missing here oh man I should have first done that Anyway I'll go do that now but we'll come back to this file And there is another file Or I should say class that works together with this class [01:23:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m48s) And it's basically these two classes with their methods That we were gonna use to actually build our link Ok so let's Create That display site view So I've removed the var dump from this view I'm just gonna save and close this I could have set save a new [01:24:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h24m12s) Just gonna create Another site View And we gonna call this Greet We can't call it greeting because like we said There is already a greeting in the front All greeted that one might be better We gonna Make a nice display here I'm using [01:24:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h24m40s) Panel I'm gonna copy the panel snippet and paste it in here And the title I'm gonna make The name And the content Will obviously be the greeting Now I don't want two of those So I'm gonna take out this one [01:25:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m08s) So I basically Got one greeting setup here It's not yet gonna be oh you know there's no buttons here yet to edit it But he will basically view One Greeting And it will also show you who set up the greeting And ok now we can close this So we got this greeted Site view We can help go to the admin area [01:25:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m36s) Of the Good because sorry to Joomla component area And I'm gonna click on here And Actually add a site view To the component Same way we did before Can I say I want greet I don't want it to have an add menu It must have meta [01:25:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m59s) It's not a default view I also want access there And by Default it's not public So Save and close Now we'll compile the component again Ok I've compiled and installed it If we now go back to the that file I just Opened previously this Hello World Helper route And we scroll down [01:26:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m32s) Will see that now has a method called greet route And you basically pass it and ID And it constructs The The URL for you Now This component view doesn't have category So it will skip this area But it's A function that I [01:26:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m54s) Wrote that should Be able to Basically Work for any View So You want to use this Method And this abstract class Now Those of you that are [01:27:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h27m11s) A little bit interested in how this works You'll see in the main File of the site View You'll see that the router Is actually also added as a helper class And This is basically the name of this helper class Hello World Helper route And so That's the abstract class name [01:27:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h27m39s) Going back to our site view of greetings To add our link We now know The method name So that's the method name And that's abstract class Sorry that's the class name now let's get the method name So we go back to Scroll down That's the method name so we can [01:28:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h28m05s) Just copy it It obviously Needs to Be corresponding to the view we want to open And we wanna give it The Slug so it's gonna be a item Slug But that's not the only function That we want to call here there is another one I mentioned [01:28:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h28m40s) Which works alongside this and it's called the JRoute Function Actually class I should say So we would add the JRoute around this First method class And That would basically Add the Other values to the URL [01:29:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m01s) That is required Ok so we've got our own helper class of a component We give it The Slug Which then gives it to the JRouter Which then Echos out The link To open this item Great [01:29:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m20s) Now let's save this and compile again To see it in action We go to the front and Reload the page And when we click on one of these says not authorised To view greet That means This specific group Are not allowed to look at this What are ways to prevent the link from showing up in the first place [01:29:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m51s) But this is you for some reason you didn't actually put that custom script in place You see You can actually see how the backend generates some of this So if I go into the code And we go to the admin area Of The Hello World component And we open the model [01:30:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h30m19s) And we opened greetings No no no it sorry not the model Actually the view and then greetings And we open the body And we open the view data HTML You'll see that it is grabbing Some permissions to know whether it should show certain buttons And then here Is again setting up some permissions To see whether [01:30:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h30m48s) You are allowed To actually Edit Here it is To actually edited the The greeting And if you're not allowed to edit it It just Echoes the name You see it doesn't show you the link So this area here Is really a demonstration of what you wanna do in the front [01:31:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m11s) You don't wanna always show the link To the item unless The person Who is actually viewing the site Is in the correct group Of the site To be able to actually View The item Now I'm not gonna spend more time on this Part because we wanna also do an editing concept [01:31:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m31s) Which is really More interesting and what I would rather spend time on So here I'm just gonna go back into the admin View In the admin area And just change the permissions that the actual public could still open this view for now So in the backend I go to options of the Hello World component Permissions Scroll down Again I'll see there is a new one called greet [01:31:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m58s) Change this to allowed for the public group And save and close out of there Now I forgot back to the front And click on This link It actually opens it And it gives us the name James gives us the welcome welcome to JCB And the greetings were set by the Superuser OK so it actually loads it as we expected You can also see in the [01:32:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h32m27s) URL this demo site of mine isn't fully Search engine friendly setup But it already generates that this is a greet To James And so And the name James appears here because of the Slug The Slug is used to generate the search engine optimisation here If we didn't have an alias it would have given you one or two Depending on the item ID Ok so [01:32:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h32m58s) That just gives you a quick demonstration Of how to set up A front-end That actually can open specific items Now The Next Step Is to actually make these items editable Now like I explain to you In the admin area we're ready doing some of this So I'm gonna just basically copy and paste most of the code From the admin area [01:33:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h33m26s) And I would encourage you to do the same Unless you know enough that you can just do it without looking at how JCB did it So I'm gonna copy The string And then I'm going to also Copy this one These few lines And then I'm also gonna use some of these I realize by looking at this first area that the Checkout And [01:34:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m05s) This Checkout value Needs to be set on the page I also need to make sure about this value Because We need to check the users authority On the page so we need to check whether the user is set On the page So We can go and do that and look at some code I'm gonna move some of this code [01:34:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m27s) And then we'll go to the front end of the code area I want to add the option to edit the item In both the list as well as the Single View So I'm gonna do it in the list view first and that I'll demonstrate step-by-step And then when we go to the Single View I'm just gonna place the code in place I'm not gonna explain to much because it's basically the same So here in the site view Of the list area I'm going to PHP and I'm going to Custom view script It says add PHP script to the head of the file [01:35:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m05s) So I'm gonna paste This link in here and we see that it basically Has this view Greetings And the task is greeting Edit So that is the task And it's gonna be available in the edit Variable Ok so that's the first part of the code we want up on the page [01:35:29](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m29s) Now for the rest of it We go back to the Admin view again The backend And we see wither we need to grab These as well So Before grabbing them Let's open the corresponding site view so we can look at some of the code Ok so Here is the greetings [01:35:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m55s) I'm gonna open this view HTML And we'll see that the user is already being loaded onto the page so we've really got the user That's great This is the items Ok let's look at this It is always is good for you to actually go and look at the code The JCB is writing seeing the code Is what makes you familiar with how things work And also helps you to detect when something doesn't work Why [01:36:29](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h36m29s) And how to fix it Since we know that the user is on the page and we go to the site the admin area This area We see that it's accessing the user in the same way Using this As an object User And ask him whether it has authority On the core [01:36:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h36m48s) managed To check in And then also it Basically checks And gets the check out user Details And We'll see why in a moment But we don't have the check out user on the page So [01:37:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m06s) What we gonna do it's we gonna quickly Also get those values by going to the Dynamic Get And making sure that those values get brought to the page as well So we go to list greetings And again like before we just copy all those values And just tweak away and then back And the values we now want to make sure also comes along Is basically I see it's a value that it doesn't by itself add To the selection [01:37:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m44s) But you can add it in because you know it is in the database It's just that This table selection Only shows at this stage the actual values that That it knows belongs to the view I think I need to update this in JCB It is a little tweak which I haven't done So it's not showing the Checkout and Checkout by values But you can type it in by just going And then [01:38:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m16s) Those values will also be brought to the front Of this view So Basically the Checkout and The check out time Actually we don't need the check out time Only the check out Basically who checked it out We could add the time But I'm not gonna demonstrate that during this tutorial we'll really it was over an hour and so few minutes [01:38:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m43s) So I'm just gonna use the check out for now saving clothes So we've updated our Dynamic get And that means our values are on the page and we can move our code into place We'll need to add it inside of this for each loop Since this code Is actually working with the item Itself Ok so we've got the code in there Recalling the user We also checking the item check out to the user ID [01:39:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m21s) Making sure it's 0 We checking whether to check out user Now let's go get the rest of the code we need So again in the admin view we gonna go with This area here And just copy that We wanna make a few adaptations because in the end of the day The front end is a little different from the back end In that [01:39:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m54s) It is only The backend only displays an edit view the front-end also displays a read view So We wanna make it a little different You can pause the video to see some of the things I've done here But in simple terms I basically got the edit here I'm editing echoing the edit Link And I'm adding the item and I'm putting in a little icon which then you can click And here I'm checking whether you have permission To actually edit [01:40:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h40m34s) This item so if we were save this and refresh the homepage It should actually not change anything because the public doesn't have permission to edit it at this stage Ok that icon should be pencil not edit Ok so let's save this and compile it to see it in action install it And we reload the home page and as you can see it doesn't show those little Buttons Now if we go to the back end [01:41:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m17s) And we go to options And we change That The public is allowed to edit And Let's say Let me not change state Yeah Let's just do that they aloud to edit And Let's open the front again We know see that it shows the edit [01:41:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m48s) Pencil Let's click on that And we see it opens The edit area Where it can actually now Add the exclamation And click on save Save and close It tells us that the message was saved successfully If we now [01:42:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m12s) Open that greeting We see that has the exclamation so our Attempt to integrate Or to make our items editable On the front end Within the control of permission groups Has actually worked very effectively if we again Revoke the permissions And [01:42:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m35s) Refresh the page And then suddenly those links are gone And even if somebody Were to try and Circumvent the system By having In the URL paste in the link To edit that specific item and It will actually Say that it's not permitted [01:42:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m57s) So the The the permissional structure is actually armed and will protect the item from being edited by By that group So Again we gave the Public Permission to edit But now the question is Can we also give it permission to create So going back to greetings [01:43:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m19s) Let's add an option to create An item If I go and add this button here With a link To create an item But I'm not adding any checks around it But you basically need the same kind of Check as you've using here Except that there are some [01:43:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m42s) Shortcut let me Let me show you So basically around the button we added this PHP That checks the users authority to create For the core Of this component If yes Then it will show the button if no the button will not show So that is to control the visibility of the button So let's save this and then compile and install [01:44:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m11s) To see it in action So we see the button doesn't show And that is because currently Who got a component set That the public Cannot Actually create If we allow creating For the public [01:44:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m40s) And we Refresh the page You see that now it actually shows Sorry that's the different view It is this one Refresh this page There we go Now if we click on it It will open an area where we can create an item So here we can set a new name [01:45:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m06s) And then Save and close We get this save not permitted This must mean that we haven't granted enough permissions For the Public user To actually create an item See giving it the option to create an item Is not enough because there are fields That [01:45:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m28s) You know you need also access to Before you can create an item So let's let's try again But first giving it more permissions So we've granted it Basically all the permissions That it needs and go to the front Now we click create greeting Save and close [01:45:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m53s) And there we go With saved the item We can again edit the item We can close And we can View As you can see it's all working As expected So Our Hello World tutorial Is nearly at it's end [01:46:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m16s) We have within this tutorial demonstrated to you How to create A Hello World Component List its items Open individual items And edit those items As well as creating new items All based On the permissional of structures Of the component [01:46:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m40s) So if we Where to change these permissions back To not allowed And we now refresh the front We'll see that Now we can only view the items And even more If we go back And we wanna control the actual viewing of the greet items Not be visible to the public but maybe only to let's say managers we could do that [01:47:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m06s) So you can manage That kind of control over your items You know without actually A lot of custom code If you click on it now it will tell you don't have authority to view it Now you can add Basically custom Scripting To remove the link so that it doesn't even look clickable If the person doesn't have access to view it [01:47:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m32s) But that's already We gone so far over the time Trying to demonstrate to you Some of the basic principles of setting up a Hello component In JCB I trust you've enjoyed this tutorial By far it doesn't usually take this long to actually build a Hello World component In fact there is a older tutorial Where we managed to build a Hello World component and very Shorter time [01:48:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m02s) But I illustrated and demostrate it and explain it a little more here To help you guys along To actually build components with JCB And that you'd realize that JCB Is really actually a very powerful application I mean I haven't even gone to the code this time And shown you all that it's written But I mean just from the compiler We ready got 13000 lines of code Which would have taken you 5 8 hour days to write [01:48:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m37s) Which is about 39 hours And I think for a basic component that's quite a lot of code And it's because that it's already integrating a lot of permissional structures and you know version control I mean if I was to Open The greetings And Just open James [01:49:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m03s) remember we added that little Exclamation mark We could check the version We can see the changes and when it was made We can actually review Some of the previous versions And we can even go back to those versions That kind of integration With your history component is done automatically by just adding history And so is many of the other features [01:49:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m30s) The JCB is adding to your component like export of data import of data Bash sorry Batch Changes that you can make As well as You know a whole lot of other concepts Which It's just Beyond the scope of what we had time for today Well enjoy coding and yes If you have any issues Please go to GitHub [01:49:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m58s) First check out the wiki page Check the tutorials And if you just think you've discovered a bug You're most welcome to open an issue And we'll see what we can do in trying to resolve that for you We would like to invite other PHP Programmers To really get involved on the JCB GitHub [01:50:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h50m22s) Community And help us improve JCB So that It can become a home For us to manage The troubled waters of open-source Development Thank you diff --git a/045-Adding-your-own-rule-valadation-to-a-field-in-JCB.md b/045-Adding-your-own-rule-valadation-to-a-field-in-JCB.md index cf40286..73259b1 100644 --- a/045-Adding-your-own-rule-valadation-to-a-field-in-JCB.md +++ b/045-Adding-your-own-rule-valadation-to-a-field-in-JCB.md @@ -1 +1 @@ -I would like to demonstrate to you How to add rules to your Model Basically to a field Adding rules to a field Uses your custom rules to Tester value Before actually You know submitting it to the database so this is a quite good feature Do actually have in your component Now I'm just gonna use this hello world component the one we we actually The whole world tutorial on and I'm gonna add a rule to one of its Fields and then Then quickly type it up And show you how to include it Ok so I've gone to admin views I'm gonna open this greeting First As the admin view we want to change the field in it I think that's used is greetings And let's add a rule That we can call something like Are we see at this time That the field attributes don't have the validation Option switch in place So We might start shipping JCB with this new validation property was not new just Just helping at it yet but if you have a version of Daisy bead it doesn't have it set Then whatever field type you've selected you can edit the field I'm going here Or You could edit the fuel type By going to feel types So this have to close out of this again And then hear fuel types And you can select the field type that you want to add this validation to we want to do it for now just Text area This one And it has a filter in place I think I'm gonna add validation just on the leaf it So just go click Your class It is a duster bill It's not required it's not translatable and let's give it a little this Description ok so I think they got it all set I wouldn't add a value here because If if you don't want to use it you just leave it empty And ok that's basically it's Avon closed so we've done the text area Now Let's go back to our Admin view greetings Again open that field Now we have this validate a property available to us So we can all copy it And added it here Now we want to have a custom validation here There are built in Joomla validations as well But you can also set up a custom validation rule and this is what are formed Roulette is slow This is what we want to demonstrate So we gonna say Let's call our rule then 10 So my string must be longer than 10 characters Ok I think that should do So I'm just gonna copy this again And 7 clothes Now that we've got our validation set JCB is not yet able to We don't have an area for you to write the rule and have it be included So the way you do this and I think it's it's efficient Is it you right up the file yourself you put it in the custom folder of JCB And you include it into the component So that it places it in the correct place You see the one thing that I should be ready does for you Is that it creates a folder called rules and in the forms Every XML If we open it For the ready has a field path Andrew Pass So you you can just add your rule to this Basically to this folder Without them is straight to you in the moment But first let's create a rule So I had it this room here so in the folder structure I'm basically in the admin area components component builder and there is a folder called custom An inside of this folder I've Now created this stud 10 file Sterling 10 file and then it I placed this this code here Basic J form rule nothing too fancy about it Ok let's see now that we've got our file in place We need to add it into our component So we go to the components and we open that component And we go to Settings and they're adding custom files and folders We click on this component files and folders create component files and folders For this Tumelo component We just click on that it's ok And here we want to add 1 file Since we've added it to that custom folder everything in at custom folder will come up as a file that you can Select So there this that file Now the path to where we want it to place the file So in the back and of the component we go to Models Forms And we are targeting this breeding form so we opened that and we C That it has models rules So That's copy that How many to remember that it is admin at the admin area And then Models rules So This admin is basically the way the package is built so the target Place should be the place in Inside the package this be always the case for both folders and fields So in the Folder You want it to add it to the admin models rules folder And then you need to decide whether you want this file to be updated Now the state that fathers and need any updating But hey we can change that So you can see I've just added this New licence tag to it And I've added this bomb Basically when the file gets taken It will Take this part away and replace this with your components licence and so the fight I will basically be Become Branded like every other file in your In your component Anna Even if you use it in areas or components Other than the one you originally made it for it will just dynamically looked like it was made for it because it Add that components Data at the header of the file and even if you had the components name somewhere else in this You can actually replace it with the well-known Hash hash hash component has shows us and it will be placed with the comp Ok enough of that we've got our file in place You wanted to be updated And now let's compile the component and see it in action So you're just take this as yes it's the file should be updated And then save and close Auto close out of a component again There's no shortcut to that file area over here that you can use We go to the compiler And we compile our component Ok it's done now let's install our component Now let's go look at the code to see what happen Ok so here is our components admin area If we open the rules we see how there is a file it was play Placed into this folder If we open that file we said hi It added our Copy notice to the header of the file And now let's also look at our XML Scroll down We see the validation is there still n da 10 so Everything so far so good Now let's contestas To reopen this component in the backend We go to greetings We click new How's your member We said that greetings now needs to have a length Of at least 10 Characters So let's test this So we add greeting which isn't enough and we click save And it tells us Invalid field readings Problem There's one little change I had to make to get this to work and I realise how he tell you ok let's go look at For some reason they want this file or lowercase so I had to change turtle N to the T Also lower so this could do this Also with the file in our custom folder Then Inside of the actual file they also want the tea here to be lowercase I suppose because they are using the upper case camera rule To sort of break-up the the name Let's see ok so that was what I had to do to get it to work Now I also need to just update the component to include this file since the name is changed it will no longer know where it is Siri open the component You know what Let's not open the components go directly to that file Area Weather shortcut And we see it so long as selected to a scroll down select it again and save and close That should do it Ok so now that we've fixed the little glitch which I created myself Let's go back to see this again in action And save And invalid field greetings Ok that isn't very helpful Maybe you would like to also show a custom message So that the user word least know more about what is going on here But now before we do that let's add enough L use and see if that it actually saves And now it's saved excessively close So our greetings been saved and how value here is more than 10 characters So it was valid Now let's go add a custom message to our Validation Remember whatever you do to the live version of this file Will my bestest Hurley become part of the next compilation So adding a custom message you need to actually go back 2 component builder custom And to that actual file And add it in there then recompile your component and it will automatically Update the life demonstration So the other way just a test before doing it live or be another 4 Adding it to the core of your component is to actually go to the live file which as we saw is I'm here in Hollywood Models Rules Sterling 10 Good Dallas adult custom message in here just to test Ok Using the element and adding an atom attribute to the element message Fuel past have more than 10 characters That is one way of doing this of course there is another way Again this takes us back to JCP And we go to the field We open greetings And we look for the attribute message It doesn't have message So we need to add this attribute with click on field type And we scroll down I think let's place this on the description So we say Message Changeable It is translatable And it's optional so We don't make it compulsory Ok we got all set So To save and close Now Let's add this validation sorry the message To our field Number for we saved this and actually go this path let's first test our live Change we made to the file and see if that also works So in the Fire we added this attribute To the element And basically return false Good now let's go test this So we gonna open that item I will take away a few characters And click save There we get a message that it needs more than 10 characters Ok great so that option also works very well Outlets to use the other one which I suppose is more convenient Unless you are checking multiple things and you would like to give multiple error messages based on the The results then this implementation is the better option but if you just got one message and it just needs to We really explain to the user one issue Been using the XML path I suppose is more convenient So in our custom file we haven't added that change so Let's go and compiler component and install 1st May to save and close out of this Field so that the changes be captured Then go to the compiler And compile Are component Install Let's go look at the code Here in the code we see our custom messages again not showing up Maximum greeting when I have this translated message here She can see Risco testers So again we open that field And first let you save it the way it is Ok good it works let's take away 2 characters and save again And we get the expected message this time around that message can be translator And is well it is actually in the XML file it's not part of the actual function Ok well so I think this covers it We have now successfully added Our own validation rule 21 Field within a view And we were able to include that rule into our component on compilation are using adding custom Files Thank you for watching \ No newline at end of file +I would like to demonstrate to you [00:00:05](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m05s) How to add rules to your Model Basically to a field Adding rules to a field Uses your custom rules to Test the value Before actually You know submitting it to the database so this is a quite good feature to actually have in your component Now [00:00:32](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) I'm just gonna use this Hello World Component the one we we actually Did a Hello World tutorial on and I'm gonna add a rule to one of its Fields and then Then quickly type it up And show you how to include it Ok so I've gone to admin views I'm gonna open this greeting First As the admin view we want to change the field in it I think that's used his greetings And let's add a rule That we can call something like [00:01:11](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m11s) Now we see at this time That the field attributes don't have the validation Option switch in place So We might start shipping JCB with this new validation property well not new it's Just not being added yet but if you have a version of JCB that doesn't have it set Then whatever field type you've selected you can edit the field type going here Or You could edit the field type By going to field types [00:01:47](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) So this have to close out of this again And then here field types And you can select the field type that you want to add this validation to we want to do it for now just to the Text area This one And it has a filter in place I think I'm gonna add validation just underneath it So just gonna click here a plus It is adjustable It's not required it's not translatable and let's give it a little [00:02:22](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m22s) Description ok so I think we got it all set I wouldn't add a value here because If if you don't want to use it you just leave it empty And ok that's basically it let's save and closed so we've done the text area Now Let's go back to our Admin view greetings and again open that field And now we have this validate a property available to us So we can now copy it [00:02:59](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m59s) And add it in here Now we want to have a custom validation here There are built in Joomla validations as well But you can also set up a custom validation rule and this is what of form rule as its known This is what we want to demonstrate So we gonna say Let's call our rule strlen Ten So my string must be longer than 10 characters [00:03:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m36s) Ok I think that should do So I'm just gonna copy this again And save and close So now that we've got our validation set JCB is not yet able to well We don't have an area for you to write the rule and have it be included So the way you do this and I think it's it's efficient Is it you right up the file yourself you put it in the custom folder of JCB And you include it into the component So that it places it in the correct place You see the one thing that JCB already does for you [00:04:18](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m18s) Is that it creates a folder called rules and in the forms Every XML If we open it already has a field path And a rule path So you you can just add your rule to this Basically to this folder Which I will demostrate to you in the moment But first let's create our rule So I had it this room here so in the folder structure [00:05:14](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m14s) I'm basically in the admin area components component builder and there is this folder called custom An inside of this folder I've Now created this strlenTen file strlenTen file and then it I placed this this code here Basic J form rule nothing too fancy about it Ok let's see now that we've got our file in place We need to add it into our component So we go to the components and we open that component And we go to [00:06:03](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m03s) Settings and there adding custom files and folders We click on this component files and folders create component files and folders For this Joomla component We just click on that it's ok And here we want to add 1 file Since we've added it to that custom folder everything in at custom folder will come up as a file that you can Select So there it is that file Now the path to where we want it to place the file [00:06:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m38s) So in the backend of the component we go to Models Forms And we are targeting this greeting form so we opened that and we see That it has models rules So Let's copy that Now we need to remember that it is admin the admin area And then Models rules [00:07:07](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m07s) So This admin is basically the way the package is built so the target Place should be the place in Inside the package this be always the case for both folders and fields So in the Folder You want it to add it to the admin models rules folder And then you need to decide whether you want this file to be updated Now at this stage that files doesn't need any updating But hey we can change that So you can see I've just added this [00:07:41](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m41s) New licence tag to it And I've added this BOM Basically when the file gets taken It will Take this part away and replace this with your components licence and so the file will basically be Become Branded like every other file in your In your component And that [00:08:06](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) Even if you use it in areas or components Other than the one you originally made it for it will just dynamically looked like it was made for it because it Add that components Data at the header of the file and even if you had the components name somewhere else in this You can actually replace it with the well-known Hash hash hash component hash hash hash and it will be placed with the component name Ok enough of that we've got our file in place You wanted to be updated And now let's compile the component and see it in action So here just tick this as yes it's the file should be updated [00:08:54](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m54s) And then save and close Also close out of a component again There's no shortcut to that file area over here that you can use We go to the compiler And we compile our component Ok it's done now let's install our component Now let's go look at the code to see what happen Ok so here is our components admin area If we open the rules we see ha there is a file it was Placed into this folder If we open that file we see ha [00:09:39](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m39s) It added our Copy notice to the header of the file And now let's also look at our XML Scroll down We see the validation is there strlen.Ten so Everything so far so good Now let's go test this So we open this component in the backend We go to greetings [00:10:10](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m10s) We click new Now as you remember We said that greetings now needs to have a length Of at least 10 Characters So let's test this So we add greeting which isn't enough and we click save And it tells us Invalid field greetings Problem [00:10:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) There's one little change I had to make to get this to work and I realize I'll need to tell you ok let's go look at this For some reason they want this file all lowercase so I had to change strlen.Ten to the T Also in lower so let's go do this Also with the file in our custom folder Then Inside of the actual file they also want the T here to be lowercase I suppose because they are using the upper case camel rule To sort of break-up the the name Let's see ok so that was what I had to do to get it to work Now [00:11:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m20s) I also need to just update the component to include this file since the name is changed it will no longer know where it is So we open the component You know what Let's not open the components go directly to that file Area With the shortcut And we see it is no longer selected to a scroll down selected again and save and close That should do it Ok so now that we've fixed the little glitch which I created myself Let's go back to see this again in action [00:11:57](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) And save And invalid field greetings Ok that isn't very helpful Maybe you would like to also show a custom message So that the user word least know more about what is going on here But now before we do that let's add enough values and see if that it actually saves And now it's saved excessively close So our greetings been saved and how value here is more than 10 characters So it was valid Now let's go add a custom message to our [00:12:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) Validation Now remember whatever you do to the live version of this file Will not necessarily become part of the next compilation So adding a custom message you need to actually go back to component builder custom And to that actual file And add it in there then recompile your component and it will automatically Update the live demonstration So the other way just a test before doing it live or be you know before Adding it to the core of your component is to actually go to the live file which as we saw is [00:13:17](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) here in Hello World Models Rules strlen.ten Good Now let's add our custom message in here just to test Ok We using the element and adding an attribute to the element message Field must have more than 10 characters That is one way of doing this of course there is another way Again this takes us back to JCB [00:13:47](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) And we go to the field We open greetings And we look for the attribute message It doesn't have message So we need to add this attribute we'd click on field type And we scroll down I think let's place this under description So we say Message It's changeable [00:14:21](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) It is translatable And it's optional so We don't make it compulsory Ok we got all set So Just save and close Now Let's add this validation sorry the message To our field Now before we save this and actually go this path let's first test our live [00:15:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) Change we made to the file and see if that also works So in the File we added this attribute To the element And basically return false Good now let's go test this So we again open that item And we take away a few characters And click save And there we get a message that it needs more than 10 characters Ok great so that option also works very well [00:15:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m34s) Now lets use the other one which I suppose is more convenient Unless you are checking multiple things and you would like to give multiple error messages based on those results then this implementation is the better option but if you just got one message and it just needs to really explain to the user one issue Then using the XML path I suppose is more convenient So in our custom file we haven't added that change so Let's go and compiler component and install First we need to save and close out of this Field so that the changes be captured Then go to the compiler [00:16:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m20s) And compile our component Install Lets go look at the code So here in the code we see our custom message is again not showing up The XML greeting we now have this translated message here As you can see Lets go test this So again we open that field And first lets just save it the way it is [00:16:56](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m56s) Ok good it works lets take away 2 characters and save again And we get the expected message this time around that message can be translated And as well it is actually in the XML file it's not part of the actual function Ok well so I think this covers it We have now successfully added Our own validation rule to one Field within a view And we were able to include that rule into our component on compilation are using adding custom Files Thank you for watching diff --git a/046-General-overview-of-how-community-snippets-work.md b/046-General-overview-of-how-community-snippets-work.md index eec69f3..5b8dbdb 100644 --- a/046-General-overview-of-how-community-snippets-work.md +++ b/046-General-overview-of-how-community-snippets-work.md @@ -1 +1 @@ -I would like to give you a tutorial on the new snippet manager and how it works We are very excited to announce that We have added a community concept To the Snippets In JCB Previously You could create your own Snippets And then If you were to create a custom admin View A site view a template Or a layout You could access the soap it's Through a drop down Let me demonstrate that quick So now in a side view If I were to click on one of these Snippets You see it loads The slip it here You can copy it from here And You can then place it in your code And so It is possible to actually load many Snippets No currently We already looking here at the new Snippets Area You see that now We have the type of the snippet First Then the name of the snippet And then the library Mr pit belongs to What you selected the snap it again it updates here The name of the snippet The type of snippet And the library it belongs to And usually this library is a link It'll open you to the actual documentation on that libraries website of the specific snippet So that's all as it used to be nothing fancy nothing much different Yet There is a major change Taken place Because now We have what is known as local Snippets And then community supper We have Actually enlarge the Snippets area So that you can contribute to the community Snippets And also import From those Snippets that is been added to the community By others The how does that exactly work Well Slippers that already exist Are usually Snippets that either I made or Someone else and They already have What is known as a contributor The name of the contributor it's email address Whippet race answer So when you create a snippet We will use your details To actually create this contribution So if we open an existing snippet And you go to the contribution area you'd see that there is names in English Field If there aren't any names Then Well that means the update didn't do exactly what it should have done And when you Go to the Snippets area Where you get Snippets I'll show you that in a moment There is a place for you to actually update all the contributor names And so be sure to have their names actually in the database Realities these details should actually be in there already If they are not Well it's not a stupid you made so you don't need to really worry about it These details only really apply when you wanna share a snippet And all when you wanna improve a slip it and then we will add the correct details in any way So really it's not to be worried about But here you'll see how the contributed details Adult Dealt with We are using your company details that is said that the global options you could click this button to get there Under the company tab of the JCB for the new Snippets you create You cannot change the contributed details after snip it That already exist At this time via this area So that is a simple heads Up This area is really only for The management of the community Snippets If you're not gonna be contributing then this doesn't even matter at all What is important though Is that your snippet B Map the same way As the Snippets in the community For example if the grid UI kit version 2 is called layout Then don't change it Because it will then behave like a new snippet and not like an existing one You see because the community Uses the name The library and the type To build The filename The final names Well we'll look at that also as we go along What I mean by file name For now all you really need to know Is it there are a bunch of Snippets already in your component This leopards was shipped with Joomla Component Builder You know So it It means that Really this is how it was By Default But we now have an area called get Snippets Now If you are one of those who like to get your name out there and want to Become more involved in the JCB community and have others Know about you and so forth Well this is the ideal time to do that If you share a snippet Sorry so you created this nap it for example Then you would click on Share Snippets or you could take more than one doesn't need to be only one You take a new Clicks share Snippets This will then create a package let me show you So we see that it's created a package it's placed it In this folder And you got a few helper tutorials here to actually get you going So if you wanna learn well this tutorial I'm making now will be This link here And if you wanna learn More about Get It This one here And if you Want to know how the forking is gonna work then it's this And if you wanna know how to do pull request it It will be this one And if there's any issues you can open an issue on get out So this really gives you a sort of a few links and shortcuts To actually get Involved in sharing Snippets What happens when you share the snippet If someone Clicks on get Snippets Then they will see your name If that That specific snippet Comes up So let me illustrate that If we click on get Snippets It might take a moment Depending on how many Snippets are in the repository at this stage Because it buyer Ajax it's getting all the Snippets From GitHub And it's building a little page for you There we go It's just loaded the whole bunch of Snippets The first view shows you all the current Snippets In the JCB community Snippets Repository You can go to this repository by Simply clicking on this GitHub link here Ill take you there You can see which of these Snippets are ready in sync It's called equal You click on this here Show you what it will means In sync with your local Snippets so it has little Mark here saying it's a local snippet And it is in sync If you don't want to know more about when is a snippet Considered equal Then click on this little button here And also you that like I've said Then if there is a snippet out of date let's say someone Contributed to the community on a specific snippet let's say this the pit here Someone so ok if we If we open the snippet They they saw this little snippet and they sought the you know we could do better and they improved on it And then shared it with the community Then that's the pit will end up in the out-of-date tab If there is no out of date Snippets then it'll be blank like now But if there is Snippets that are out of date They all show up here Then there is the new tab Have a new tab Well that could be Ubers misleading Because in this example that I'm giving you I went and I deleted a snippet from my Database And since that slip it already exists in the community Adriel I the system Then detects ok well that slipped it isn't here so it must be new That's how it basically worked out that lol Sam Are you could click on this Get snippet And it will automatically She was here Are you sure would like to add this new JCB community step it to your local Snippets is he ok And then it goes to GitHub Gets to snippet and moves it to your Database And Boom You done So now this nap it is no longer in you if you click here you'll see it so no news in a bit It is now also been added locally Then diverge Snippets is where There is a discrepancy in both the creation date as well as the Modified date And then those nip it will show up here and they can be updated in the same way If you have made a change to a snippet in your local environment And then You've realised all that changes and been good there's been a better You know Just to return back to the old Community version Then you would come here to the head I made a little change to this Specific snippet And I tell you that the snap is it is a head and if you click on it You're show you What that would mean You can then click on get snippet Tubridy revert Back to the old one and that's what it will tell you Oh sure you would like to update your local snippet with the older JCB community snippet So you can say no I like my new snippet I don't want to update in just ignore it But if you wanna go back then that there is this option To do so If this is a good Step It You might wanna consider sharing it with the rest of us An and that would be too actually She do the sharing snippet And go through those tutorials in knowing how that works There is sometimes a situation where is specific A one of The community Might be very enthusiastic Annie contributes let's say 300 new Snippets to the community Snippets Repository Now that would mean that you know you wanna click on every one of those lipids get snipped get snippet that might be better Tedious So we added this little bulk tool Not a bolt tool is able to Detect whether there are new Snippets And whether they are ahead snippet Or whether you just wanted Just update all of them with this this just get all Snippets And so If there isn't any diverged or any outdated Snippets it will also not be able to do that To hear instead of clicking it one at a time you could just click on this and I'll just update all of them for you And you're done But if you like me and you wanna know exactly what's going on You could go here you could read the description Ok there's no disc Scription See the usage See how the stupid itself looks like And if you really like what you see You might even want to look at who contributed the snippet This brings up an important and yet interesting Concept We have decided that when you contribute and you snap it your name and details will end up here Like I explained earlier when we looked at the contributor area Yet when someone makes mine the contributions to the snippet We will not basically change or your place this contribution Contributor's name Instead We will let them show up in the blame view so there is a review Which is called the blame View The blame view shows you who changed what part of the code And when So whenever there is an improvement on any of the Snippets The GitHub repository tools will help us sort of X-ray show you Who made those changes So that's how they will be recognised for their contributions is via the blame Where is if you contribute new Snippets to the JCB community You will actually end up having your details show up here And how people be able to click on this link And actually go to the website you put up as your website So it's an ideal way of getting yourself out there in the day to be community And at the same time sharing good step it with the rest of us and make make our life easier I suppose Anyway I so That is the really looking at the get Snippets Community area And we're excited about this we hope that this will really faster a lot of Participation And that it will Improve JCB constantly because as you know Snippets are used in these Four key areas custom admin views Sitefusion templates layouts And These areas Are what really the customer says write the one that uses the component So we wanna always be sure to have the latest and Most Stable Snippets ready in available For everyone using JCB So once you have actually Imported The new snippet you were able to see it at the end of your Snippets So this one is now the latest one we've actually Imported If you open the slip it You see that the contributed details are already in place And so these contributed details will be updated as you add new Snippets If for some reason these Details are not In place it will say Dynamic value let me show you there Please create a new one Like this So It says Dynamic field When you have created your snippet I'm just gonna do it Simple Test here Good illustrate this Ok so it's obviously Attest And you click save Mr value Can you click save It will first Search the JCB snippet repository to see if there really is a snippet with this kind of a relationship Between the name the type and the library If it doesn't exist It will go to your Global area like explained And will get your details And dynamically added in 2 The the sniper So there we go Is obviously found my details I put it in there So that is how this details get set When you create a snippet the new one It will fall back to your details If that snap its name Type and library relationship doesn't already exist in the Desi B Community Naive for some reason It does exist Actually Take the initial contributors details and add that in there That's how it works at this stage maybe there is better ways but For now this is how we will start at least And I'm sure it will evolve and change as we go along until we are able to act We satisfy all and everyone's new I think that's enough of an overview Of how everything works So you've Seen how to use the Snippets in your components You see now too Start initial steps of sharing a snippet You simply select them like I showed you Obviously Only when you feel proved on it or whether you've created new ones will you ever wanna do that And then you click on Share snip it it gives you a package And Then on that it Let me just show you game On that it has a Food tutorials like Toro I'm forking the JCB Snippets And Tutorial making a poo a pull request These two tutorials would be quite key For you to understand what would be this next steps And getting your Snippets Into the JCB community Well thank you for watching And Yeah I thought next time \ No newline at end of file +I would like to give you a tutorial on the new snippet manager and how it works [00:00:07](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m07s) We are very excited to announce that We have added a community concept To the Snippets In JCB Previously You could create your own Snippets And then If you would to create a custom admin View A site view a template Or a layout [00:00:25](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m25s) You could access the snippets Through a drop down Let me demonstrate that quickly So now in a site view If I were to click on one of these Snippets You see it loads The snippet here You can copy it from here And You can then place it in your code [00:00:44](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m44s) And so It is possible to actually load many Snippets Now currently We already looking here at the new Snippets Area You see that now We have the type of the snippet First Then the name of the snippet And then the library [00:01:04](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m04s) The snippet belongs to Once you've selected the snippet again and updates here The name of the snippet The type of snippet And the library it belongs to And usually this library is a link It'll open you to the actual documentation on that library's website of the specific snippet So that's all as it used to be nothing fancy nothing much different Yet There is a major change [00:01:32](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m32s) Taken place Because now We have what is known as local Snippets And then community snippets We have Actually enlarge the Snippets area So that you can contribute to the community Snippets And also import From those Snippets that is been added to the community By others [00:01:56](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m56s) Now how does that exactly work Well Snippets that already exist Are usually Snippets that either I made or Someone else and They already have What is known as a contributor The name of the contributor it's email address web adress and so forth So when you create a snippet [00:02:19](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) We will use your details To actually create this contribution So if we open an existing snippet And you go to the contribution area you'd see that there is names in these Fields If there aren't any names Then Well that means the update didn't do exactly what it should have done And when you Go to the Snippets area [00:02:46](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) Where you get Snippets I'll show you that in a moment There is a place for you to actually update all the contributor names And so be sure to have their names actually in the database The reality is these details should actually be in there already If they are not Well it's not a snippet you made so you don't need to really worry about it These details only really apply when you wanna share a snippet And all when you wanna improve a snippet and then we will add the correct details in any way So really it's not to be worried about But here you'll see how the contributed details [00:03:25](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m25s) Are Dealt with We are using your company details that is set in the global options you could click this button to get there Under the company tab of the JCB for the new Snippets you create You cannot change the contributed details after snippet That already exist At this time via this area So that is a simple heads Up This area is really only for The management of the community Snippets [00:03:52](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) If you're not gonna be contributing then this doesn't even matter at all What is important though Is that your snippet be Mapped the same way As the Snippets in the community For example if the grid UI kit version 2 is called layout Then don't change it Because it will then behave like a new snippet and not like an existing one [00:04:17](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) You see because the community Uses the name The library and the type To build The filename The file names Well we'll look at that also as we go along What I mean by file name For now all you really need to know Is it there are a bunch of Snippets already in your component [00:04:38](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m38s) These snippets were shipped with Joomla Component Builder You know So it It means that Really this is how it was By Default But we now have an area called Get Snippets Now If you are one of those who like to get your name out there and want to [00:04:58](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m58s) Become you know involved in the JCB community and have others know about you and so forth Well this is the ideal time to do that If you share a snippet So let say you created this snippet for example Then you would click on Share Snippets or you could take more than one doesn't need to be only one You take and you Clicks share Snippets This will then create a package let me show you So we see that it's created a package it's placed it In this folder [00:05:33](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m33s) And you got a few helper tutorials here to actually get you going So if you wanna learn well this tutorial I'm making now will be This link here And if you wanna learn More about Git It's this one here And if you Want to know how the forking is gonna work then it's this And if you wanna know how to do pull request it It will be this one [00:05:55](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m55s) And if there's any issues you can open an issue on GitHub So this really gives you a sort of a few links and shortcuts To actually get Involved in sharing Snippets What happens when you've share the snippet If someone Clicks on Get Snippets Then they will see your name If that That specific snippet [00:06:18](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m18s) Comes up So let me illustrate that If we click on Get Snippets It might take a moment Depending on how many Snippets are in the repository at this stage Because it buy Ajax it's getting all the Snippets From GitHub And it's building a little page for you There we go [00:06:38](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m38s) It's just loaded the whole bunch of Snippets The first view shows you all the current Snippets In the JCB community Snippets Repository You can go to this repository by Simply clicking on this GitHub link here It will take you there You can see which of these Snippets are ready in sync It's called EQUAL You click on this here It show you what EQUAL means [00:07:05](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m05s) In sync with your local Snippets so it has little Mark here saying it's a local snippet And it is in sync If you don't want to know more about when is a snippet Considered equal Then click on this little button here And also you that like I've said Then if there is a snippet out of date let's say someone Contributed to the community on a specific snippet let's say it this snippet here Someone saw ok if we If we open the snippet They they saw this little snippet and they thought you know we could do better and they improved on it [00:07:41](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m41s) And then shared it with the community Then that snippet will end up in the out-of-date tab If there is no out of date Snippets then all be blank like now But if there is Snippets that are out of date They all show up here Then there is the new tab Now the new tab Well that could be a little bit misleading [00:08:01](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s) Because in this example that I'm giving you I went and I deleted a snippet from my Database And since that snippet already exists in the community It realize the system Then detects ok well that snippet isn't here so it must be new That's how it basically worked out that little Some Now you could click on this Get snippet And it will automatically It says here [00:08:28](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m28s) Are you sure would like to add this new JCB community snippet to your local Snippets you says yeah ok And then it goes to GitHub Gets the snippet and moves it to your Database And Boom You done So now this snippet is no longer new if you click here you'll see its oh no new snippets It is now also been added locally Then diverged Snippets is where There is a discrepancy in both the creation date as well as the Modified date [00:08:58](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m58s) And then those snippets will show up here and they can be updated in the same way If you have made a change to a snippet in your local environment And then You've realized oh that changes hasn't been good there's been a better You know Just to return back to the old Community version Then you would come here to the head I made a little change to this Pacific snippet [00:09:23](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m23s) And they'll tell you that the snippet is ahead and if you click on it They'll show you What that would mean You can then click on get snippet To really revert Back to the old one and that's what it will tell you Oh sure you would like to update your local snippet with the older JCB community snippet So you can say no I like my new snippet I don't want to update in just ignore it But if you wanna go back then that there is this option [00:09:51](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m51s) To do so If this is a good snippet You might wanna consider sharing it with the rest of us An and that would be to actually Be to actually do the sharing snippet And go through those tutorials in knowing how that works There is sometimes a situation where a specific one of The community Might be very enthusiastic [00:10:13](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m13s) And he contributes let's say 300 new Snippets to the community Snippets Repository Now that would mean that you know you wanna click on every one of those snippets get snippet get snippet that might be very Tedious So we added this little bulk tool Now the bulk tool is able to Detect whether there are new Snippets And whether they are ahead Snippets Or whether you just wanted Just update all of them with this this just get all Snippets [00:10:42](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) And so If there isn't any diverged or any outdated Snippets it will also not be able to do that So here instead of clicking it one at a time you could just click on this and I'll just update all of them for you And you're done But if you like me and you wanna know exactly what's going on You could go here you could read the description Ok there's no description See the usage See how the snippet itself looks like And if you really like what you see [00:11:12](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m12s) You might even want to look at who contributed the snippet That brings up an important and yet interesting Concept We have decided that when you contribute a new snippet your name and details will end up here Like I explained earlier when we looked at the contributor area Yet when someone makes minor contributions to the snippet We will not necessarily change or you know place this contribution Contributor's name Instead We will let them show up in the blame view so there is a view [00:11:46](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m46s) Which is called the blame View The blame view shows you who changed what part of the code And when So whenever there is an improvement on any of the Snippets The GitHub repository tools will help us sort of show you Who made those changes So that's how they will be recognised for their contributions is via the blame Where is if you contribute new Snippets to the JCB community You will actually end up having your details show up here And have people be able to click on this link [00:12:17](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m17s) And actually go to the website you put up as your website So it's an ideal way of getting yourself out there in the JCB community And at the same time sharing good snippets with the rest of us and make make our life easier I suppose Anyway and so That is the really looking at the Get Snippets Community area And we're excited about this we hope that this will really faster a lot of Participation And that it will Improve JCB constantly because as you know [00:12:52](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m52s) Snippets are used in these Four key areas custom admin views Site view templates layouts And These areas Are what really the customer sees right the one that uses the component So we wanna always be sure to have the latest and Most Stable Snippets ready in available For everyone using JCB [00:13:16](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m16s) So once you have actually Imported The new snippet you were able to see it at the end of your Snippets So this one is now the latest one we've actually Imported If you open the snippet You see that contributed details are already in place And so these contributed details will be updated as you add new Snippets If for some reason these Details are not [00:13:41](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m41s) In place it will say Dynamic value let me show you there Please create a new one Like this So It says Dynamic field When you have created your snippet I'm just gonna do a Simple Test here to illustrate this Ok so it's obviously [00:14:03](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m03s) A test And you click save oh missed a value And you click save It will first Search the JCB snippet repository to see if there really is a snippet with this kind of a relationship Between the name the type and the library If it doesn't exist It will go to your Global area like explained [00:14:31](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m31s) And they will get your details And dynamically added in to The the snippet So there we go Its obviously found my details and put it in there So that is how this details get set When you create a snippet a new one It will fall back to your details [00:14:51](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m51s) If that snippets name Type and library relationship doesn't already exist in the JCB Community Now if for some reason It does exist It will actually Take the initial contributors details and add that in there That's how it works at this stage maybe there is better ways but For now this is how we will start at least And I'm sure it will evolve and change as we go along until we are able to actually [00:15:22](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m22s) satisfy all and everyone's needs I think that's enough of an overview Of how everything works So you've Seen how to use the Snippets in your components You've seen how to Start initial steps of sharing a snippet You simply select them like I showed you Obviously Only when you have improved on it or whether you've created new ones will you ever wanna do that [00:15:48](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m48s) And then you click on Share snippet and gives you a package And Then on that it Let me just show you again On that it has a Few tutorials like Tutorials I'm forking the JCB Snippets And Tutorial making a pull request These two tutorials would be quite key [00:16:11](https://www.youtube.com/watch?v=qr4I1jeCp7I&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m11s) For you to understand what would be this next steps And getting your Snippets Into the JCB community Well thank you for watching And Yeah Until next time diff --git a/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Cummunity.md b/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Cummunity.md index ff95fdc..b98cc01 100644 --- a/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Cummunity.md +++ b/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Cummunity.md @@ -1 +1 @@ -Now that we've given you a general overview of how are things work And then you slip it manager I would like to Take You The Next Step and that is Showing you how to take shits limits And Basically Show them There are two things that should be done What is You need to f*** The JCB community Snippets On get up so you will need a get up account The second thing Is once you Done that You would export the Snippets here that you would like to contribute And you will add it To this Repository that you fought and cloned down to your developing environment And you would make commit messages on every change that you are Intending to make The second thing you wouldn't do Although there are few steps in each of these Things the second thing is that you would then Make a pull request So this tutorial I'm just gonna focus on the 1st Few things you need to do And that is just to get you Basically ready All the things you need to do until the very point when you are now ready to actually do a pull request Ok so now There are three things that I suspect we can do one is to improve Already existing snippet And then contribute that to the community The second thing is to move and existing snippet To a new type this isn't something I hope will happen often but it can't happen That a snippet is in a specific type that is not the best suit for it And You might wanna suggest us changing that So that would be a second thing And the third one Would be to actually add a whole new snippet completely So I think I'm just gonna demonstrate all three of those And then we'll see how that all plays Out Until the very point where we are now ready to make a pull request Ok so first thing First We need Repository And we need to understand get Now if you do not know get The story is not gonna cover that You need to do your homework And study upon get When you do an export of a package for example if I were to click here on these 3 Heeren Clickshare Snippets You see that it ends up showing you a bunch of links here and one of them is quick start forget On you to me At this link here I just searched on Google found it I didn't actually watch it myself I hope it's not bad If you got a better one Please share it On on the issue somewhere and will will improve this link I'm your even if you've got your own and you would like us to promote your Tutorials on get sure Why not We will support those who support Our community Very gladly Reality is You need to get some Your head around some of the git basics So that you can actually do A Fork of the JCB Snippets on get up And then make a pull request So this Video here is the one I'm busy making so it will end up that being that link how to 4 JCB Snippets and get all this done And then after that I'll be making this video So we'll get to that in a moment Ok Now You need a an account on GitHub And so I'm just gonna use my own account And Simply go and Fork the repository and use that as the mistration So needless to say I've got an account I've gone through all those hoops And now I'm simply gonna Fuk this repository To get to this repository It's this your all up here Another way to get here Is You go to get Snippets And then the moment it's finish loading there is a link that you can click which will take you To the GitHub repository and it's this link over here so we could click that And as you see we're end up at the same place Picket So you could either just Follow this URL appear all good just use that link But you wanna get to Joomla component builders in the pits And I suppose Since everybody that wants to contribute will need to fork it I'm I speak this number she will change And of course well this is part of his like 6 days old I haven't even finished the ReadMe So there will be a lot of changes to this Repository and it will improve So the first thing you do is click on this button here and forked repository This will then ask you to select Where you want to f*** it if you belong to organisations whatever but then Obviously by then I don't need to explain to you how it works But if for some reason you don't then you select your personal or whatever organisation You want a fork to appear in And then it will basically To copy this repository For you Ok so now it's busy doing that I'm basically just copying it into my personal Account Now Good practice Every time you wanna make it change Then You need to follow a few steps In Having this repository in sync With the What we call upstream repository this is EDM dot IO Joomla component builder Snippets This is what we call the upstream All the master branch or whatever you wanna call it this is the main Bronze the one that is being used inside of JCB yours is indirectly being used So whatever changes you make here would not necessarily affect us at all But you obviously 1 m Commit your changes to your branch And then Make a pull request To the upstream branch Where you would like to share this with the community So that's Sort of a quick explanation we'll do this slowly I'm not gonna do the pull request Now in this tutorial But I'll take you all the way up to the wall and then we will get the ladder out and finish that in the next 2 Ok so once you've done this for king of the main Repository You need to clone this repository down Do your own developing environment And So that is what I'll do next You would click on this Clone and Depending on how you've got get set up on your developing environment Again those tutorials you need to do before coming here You would select either SSH or https I I would suggest using 8 SSH as this is of course more secure But ok So we'll just copy that and then we go To I'm just gonna use my My New users home folder for now So here I am in the command line I'm running Linux so if you're running using Windows You need to watch tutorials on how to do get in Windows You might end up using it to land Stead of command line But if you did that you also be having had watched Tutorials to help you sort of understand what I'm doing Ok So first thing first we gonna clone it let's get that done So I cloned it And we now have a folder Call Joomla component Builders titbits So I'm gonna change into that folder now Just with a CD and a folder name and there we go I'm in the folder And if I do la Sunday will basically see all the files That was on get up now in that folder Now we wanna change these files But we not gonna change them directly We're gonna use Jason B to do the dirty work for us Because we might have issues with escaping and all kinds of things that can go wrong So just to have good convention Whatever changes wanna make even if you wanna add files or new libraries whatever You do it in JCB and you do the export package And you should check that if you export a snippet That it has 3 Values always set And that does free values Well will obviously scrutinise it when you make her pull request But that those name conventions B standard It's quite important as you can see this but got the library name you I kept And it's uppercase you and space lowercase V2 And then common with uppercase And that is the type of snippet And then it's the name And obviously to Jason file So This is the convention And at this stage there should be build that for you And I'm gonna show you where it gets this convention Because to follow this Convention is what really gonna be very important If you making a new Snippets For the uikit version to library You need to ensure that your Version 2 naming in your system is the same as it is here And if you are adding a new library that isn't already in our repository Then you need to make sure that you use The naming as found wall As others will understand it as most common The most common naming convention And obviously if you need help on that you can open an issue and ask one of the admin Do you know Maybe give you a suggestion of what To call the library But The Long and the short end of it is Please stick to the naming conventions Don't change this UI kit To maybe the remove the space here or something like that Because it will end up Just miss matching things and I want a boy that from happening Ok so first thing with done with fork to repository and wittnauer cloned it Do offline developing environment And now I'm going to go to get it so sorry to JCB And I'm gonna export does 3 slip it's the one is a new snippet The second is a changed or improved snippet And in the 3rd is when you actually move a snippet to a different type What I'm gonna target here Is the Messi Think it's Not showing here now I hear this Food table The food table snippet Is that the moment in layout I think there is a better Type for this snippet and I know the slip it isn't At this stage maybe the best We could add some more food tables lipids but I'll leave that to some with you to do The point is I'm gonna move this one To the tables because it is a table right So that'll be the one change I'm gonna make then I'm gonna add one snippet To the UI kit versions 3 Since those tickets are still coming I'll just add 1 as they mistration and then I'll make a little change To one of these Snippets just for them istration ok great let me do that Ok first thing a food table click on that one Change it from layout Two tables I'm gonna make any other changes I'm just changing the type And this brings us to those three values that must always be set And shouldn't change unless it's really seriously necessary the one is the name You wouldn't wanna change this name unless you are hot pressing sure it should be changed Because in effect it will create a new snippet Because the way the Snippets work it builds the filename With name The library and the type Ghost Recon ponens together makes up the file name To changing any of those will in effect greater New snippet And create a duplicate And that's really wanna would try to avoid that And I realised This is gonna what I'm doing here now is inevitably gonna cause that And I think it will show you why it's not a good thing to do it But so I'm doing this more really for demonstration And so the ideal reality is that when we add a snippet we added to the correct library and type And give it the correct name From the start and it we don't need to change those three again If we do Most of the time I would expect That your pull request will be rejected Because this will mess up many conventions and cause Many duplicates across the system In other developers environment where they would in Port this new snippet And yet end up having two of the same Snippets Ok I've said enough about that I hope you understand that important this part is So let's go ahead save and close The next one I'm gonna do Is basically add a new snippet now since I've done this recording Second time now I've already done that and this is a support and slip it here So you'll see that I've basically Set the Disa JavaScript snippet It's an accordion It's your kid Version 3 I look down these types I'm wonder if some one of the other guys won't be better at this identifying of the types So I might even Not be the guy to make the call on this I really am open to some With better perspective Maybe knows these libraries assorting It is better I think there's a place called What is it Collapse Yeah cool apps Accordance could also fit other under this collapse I suppose No let me do that I know the difference the cordian we added for UI kit version 2 That is actually found on the JavaScript But then we didn't have these many types So I'll just add it on a disc prolapse for now Again I realise that this might be a difficult thing And What could help is going back to the actual Rea library itself This This is the The link for it And to try and see how they Organised it and that's the problem Uikit Didn't Give more breakdown besides calling it components So it's only call the component it doesn't Specifically added into a type Warehouse Bootstrap is doing a little better at that So that's why I'm not sure exactly where to place it now Transport strap Actually adds it on the collapse I think we won't go wrong to do the same So save and close There we go we got now A very crazy risky change of a type And a new snapper 12 let me take another Snippet and just make a little improvement to it I think I would use this UI kit version 2 Form snippet I'm just gonna add some usage information to it Ok there we go And I'm gonna save it 7 clothes So now I've made a change Basically two This one This one and that one and So those are the only ones I'm actually going to share This one when I created it it added my details As the Contributor Which if you created a snippet You know add your details you will notice when you create a new snippet It takes a while before it's finish saving and it's because it's actually phoning Get up And trying to see if there isn't a snippet Already with that Relationship as explained in a previous tutorial And that takes a while and I'm still wondering if that's the best idea If we should continue doing that I'm open for Suggestions But at this stage we just try to confirm that That's not good Wasn't already created And to avoid conflicts Now That means if it doesn't find it it adds your details which is set here in the option Global options And as I explained in that tauriel You can add your details and you would get some Uno exposure out there the community With your details there With is that I've just changed The contributor will stay the same But your name will come in on the blame Layout And your GitHub name will display there as recognition for your support Ok so now and next thing share Snippets Well the reason I Made it that it actually compiles is zip File Because it's easier to move around We could argue that we might want to just have it zip Or remove Rather move the Files right into your A local cloned Folder And so I am thinking at this stage maybe We should add a switch here in the global options That could make you choose it to do this or the other depending on what is most convenient for you So I'm gonna go take the snippet And then I'm gonna go and basically unzip it into That Repository that we've cloned So here we are in that folder I'm gonna first unzip it right here There there is those 3 files That we want to make part of the repository Now like I said I Actually clone to repository right into my Hey user Folder So let us go to that folder Just got a Cup this year Cut And then paste It right into that folder Now we are updating 241 file So it's asking it really contains this file Now so when you make an improvement on a filed your obviously have to replace it So we click replace Now that you've Added those two new files And you have Replaced one of them The third one You see that we now have this Food table The tables version And we have it also Add the layout version now one of them needs to go We don't want to pick it So you have to remove this one but Don't remove it via the The Interface Use use git To remove the file So that you can also add a message So that when you make your pull request and we see their files removed It will know why you did it And obviously then it will become a discussion And this will demonstrate in the next tutorial Ok so let's get back to command line Yeah we are we can say get Status to see what happened and we see wow ok one of been modified and these two have been at The first thing we wanna do is remove the one that we don't want Now because we have chosen to leave spaces within a file names You need to In put the file name in quotations To ensure that it actually you know Not misunderstand what you doing So we will go do a get rm4 remove And then the file name So You could click tab after typing food table about there and then lay out and it Will basically grab the name for you And then click enter So it is removed it if we now and do get status Will see that it's in the deleted Area and you need to actually Make a commit 22 Explain what you've done so it's get Commit m And removed table layout Since I Moved Did Food table skip it Tables To the tables type So We're not at this stage exactly sure How we are going to What kind of conventions we gotta follow with these commit messages There are reasons to have a few conventions here I just haven't had time to sort of get my head around it 7 L What is keep it basic But I'm sure as to community development things will become more Explained and so if you need help Will most probably have some documentation up At some stage 2 to get you Do you know how to Correctly do a commit message I mean just what you should say first and what you shouldn't say and those kind of things Ok so I've got a key that signs of every commit they make You may not have that don't worry about it it's not really compulsory at this stage It's just the way I can make sure that everybody knows That it's me Ok Now The next thing here is we wanna Add these new file so if we do get Status We'll see that now that file is been Made part of the commit At other branch All the local files of this clone And we wanna add those to other files The first one I'm gonna Target Is adding the food table which we just removed So get Status Oops Ok so now we've got that one added And we need to give it a commit message Now I understand When we are doing such Dangerous thing as moving a snippet to another type I would expect us to actually make a commit message for every Step of what we're doing But if you're adding Like A Whole New Library and you got like 300 new Snippets that you contribute in I wouldn't mind you adding all of that on the one commit message Just making sure that the it was exported Biodermal component Builder So that we don't have You know the wrong kind of code within does lipid files And obviously we will at the Pull request Will scrutinize those files and we will have to look through them to insure That it won't make any one system unstable And so we basically got a police some of this to do in sure that nothing gets you know Merged into the master branch That will put every anyone at risk as much as as far as we are able to To prevent that be wanna do that Well we working with step it so it should be fine but just in case we wanna be careful So when you making changes to one specific snippet And you're not really like doing Many at a time I think be as detailed as you can in your commit messages Because the more we know of What U doing I think the easier it will be too much it into The bronze and to basically approve your pull request So the next commit message I'm just gonna say Git commit Message update the food table layout food table Dotson to food table Table Food table dot dress incense It is more correct slipper type Ok so that would then Deal with that added file No we want to At the accordion which is the the new snippet So it's just get Ad and we can select the file name There is a shortcut to this It's when you use the dart get data done that's usually when you have lots of files who just wanna add them all She's like I explain if you doing in a whole bunch of sleep it's for a specific library I would suggest doing library the library instead of just mixing them all up Because if we target a library and just add a bunch of stuff that's for it And then have a commit message just for that then we could explain that within the commit message That it's for the specific library and so forth Because usually with new libraries You know it's good for us too Sorry take it one step at a time SA now with added that file now just got a commit message for it I'm just gonna say added to Accordion snippet For you are cute Version 3 as demonstration On how old is should work Ok and then just again Sign-off that's Commit Get status We'll see ok with but once I left and we already 3 commits Ahead Of our Our Branch that we have Cloned So just this last The fire which is the You know the update we made So We got a first aid the file And then add a commit message To explain what we did Araby uses paragraph to explain how to use the euro conversion to layout form Yeah I think just writing out file name like that is Clear enough And enter Going to sign off on that Again if you don't have Keys to Ben It's good Gogo Google this Start signing your request But at this stage it's not requirement as I said Ok if we do get status now Will see that we are 4 commits ahead Now this is here where We wanna do a few more things To your Commit all sorry to you all Your fear Forked And therefore cloned repository Is what we wanna do something that will keep Your Repository in sync with the upstream So I'm just gonna go and Google this quickly This is a very helpful document We first need to do this configure a remote that points to an upstream repository So let's first look at that one So this gives you Little explanation Of you know what you should do So First you basically List the current Remote branches That you have So I've done that and it shows us that I've got this kid What do you origin And it's the fetched and they pushed Remote branches Now It's gonna I say specify a new remote upstream repository that will be synced with this fork So we'll use the original owner and the original repository Name Which In our case is the following The original owner is this VDM Dot IO and The repositories this one So the get that name You could come here And Yeah think you could get This name here There we go That part Properly So going back to Outlook tauriel We will not type the Get a n I suppose you'll have to get the https version Since you will not have permission to Work with the SSH version So let's get the http one Which basically means that you should click http here And then grab that version just copy it And Control Shift we will paste it in Into command line or some Command line 7 gives you this option to paste With a mouse Ok so now we got that there And we press enter So it's now Typo Try again I didn't add remote add So it was looking for a file Ok there we go now if we did that version Will see now It has this upstream there is well Ok so that was just add to remote All the upstream Repository to the Cloned Version that you have here Now let's go see how to keep it in sync So here it says that you would open the terminal And you were to get fetch upstream And it will basically pull down This And make sure that there is a branch called upstream Master When you Checkout Master And switch to the master branch Undo merge upstream Master Which if while you were busy doing the slip it's improvements and things And there's been commits to the master branch You wanna make sure That you Actually before pushing all this upstream Before making a Piano pull request that you first merge The already Changes from the master branch Into your bronze and then make your commits on top of that This will help to try and avoid You not having specific commits in your branch I know it gets a little bit complicated Carrot fit If you get stuck We will most of the times be able to juice help you Figure this out again But like I explained in the beginning To know how to work with Gate Is really your responsibility So that You when you are wanting to communicate or sorry to Share with the community Snippets You know how to first make a pool Request a sorry merge Your upstream with your master branch And ensure that you are up-to-date with that before making a push Absa to your branch and Yes I hope you understand anyway if you don't please Google it and do some homework to get you Get Knowledge or freshen up and ready No I know we didn't make any changes to the master branch during this tutorial So I can demonstrate the process of Kitt Fetch Upstream And it will do that But since I know that we didn't actually make any changes In the end of the day We we will not be Really seeing any Great fireworks happening right now And I suppose some of you will experience it a little different Especially if there's been changes to the upstream Value UniPIN working So get Checkout Master It's usually the bronze at your own but just to make sure You're ready on the master branch Then get Merge Restart to get there Merge Upstream Master And it says like now it's already up to date If it wasn't it will actually Merge does two branches With the changes you've made Now That's what you should do before you do the following Get Porsche Which will now take these changes you've made And you wanna push them Two origin Origin Master Now Everything you've done All the commit you made all the commit messages the files you removed All of that now gets pushed up To your cloned version On GitHub So if we go to your version now on get up And we just refresh the page You say This branch is 4 commits a head of EDM IO Master Which means you are now ready To make a pull request A pull request is what we will do within the next tutorial So everything we've done so far and this tutorial is to get the Snippets that you've changed the contribution You wanna make Into the branch that you worked And to do it in a way that you're not completely out of sync With a master branch Which is living Basically on medium dot IO Joomla component Builders tippets This is the Master branch that you thought So you've got those commits in your fork branch And now you want to actually make A pull request Too much these changes you've made into that Master branch So that it will eventually become available To the whole community of JCB Ok thank you for watching If you have any issues Please Google Do research Get is an amazing technology and The quicker you can Get your hands on it and Become Comfortable with working with it the better Ok Next tutorial Will deal with the pull request \ No newline at end of file +Now that we've given you a general overview of how things work in the new snippet manager I would like to Take You The Next Step and that is [00:00:11](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m11s) Showing you how to take shared snippets And Basically Share them There are two things that should be done one is You need to fork The JCB community Snippets On GitHub so you'll need a GitHub account [00:00:32](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) The second thing Is once you Done that You would export the Snippets here that you would like to contribute And you will add it To this Repository that you forked and cloned down to your developing environment And you would make commit messages on every change that you are Intending to make The second thing you would then do Although there are few steps in each of these [00:01:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m03s) Things the second thing is that you would then Make a pull request So this tutorial I'm just gonna focus on the first Few things you need to do And that is just to get you Basically ready All the things you need to do until the very point when you are now ready to actually do a pull request Ok so now There are three things that I suspect we can do one is to improve an Already existing snippet [00:01:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s) And then contribute that to the community The second thing is to move an existing snippet To a new type this isn't something I hope will happen often but it can't happen That a snippet is in a specific type that is not the best suit for it And You might wanna suggest us changing that So that would be a second thing And the third one Would be to actually add a whole new snippet completely So I think I'm just gonna demonstrate all three of those [00:02:11](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m11s) And then we'll see how that all plays Out Until the very point where we are now ready to make a pull request Ok so first thing First We need a Repository And we need to understand git Now if you do not know git this tutorial is not gonna cover that You need to do your homework And study up on git [00:02:34](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m34s) When you do an export of a package for example if I were to click here on these three here and Click share Snippets You see that it ends up showing you a bunch of links here and one of them is quick start for git On udemy now this link here I just searched on Google found it I didn't actually watch it myself I hope it's not bad If you got a better one Please share it On on the issue somewhere and we'll improve this link even if you've got your own and you would like us to promote your [00:03:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) Tutorials on git sure Why not We will support those who support Our community Very gladly The reality is You need to get some Your head around some of the git basics So that you can actually do A [00:03:26](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m26s) Fork of the JCB Snippets on GitHub And then make a pull request So this Video here is the one I'm busy making so it will end up that being that link how to fork the JCB Snippets and get all this done And then after that I'll be making this video So we'll get to that in a moment Ok Now [00:03:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m49s) You need an account on GitHub And so I'm just gonna use my own account And Simply go and Fork the repository and use that as demonstration So needless to say I've got an account I've gone through all those hoops And now I'm simply gonna fork this repository To get to this repository It's this URL up here Another way to get here [00:04:16](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m16s) Is You go to get Snippets And then the moment it's finish loading there is a link that you can click which will take you To the GitHub repository and it's this link over here so we could click that And as you see we end up at the same place Good So you could either just Follow this URL up here all good just use that link But you wanna get to Joomla component builder snippets And I suppose [00:04:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m47s) Since everybody that wants to contribute will need to fork it I suspect this number here will change And of course well this repository is like 6 days old I haven't even finished the ReadMe So there will be a lot of changes to this Repository and it will improve So the first thing you do is click on this button here and forked repository This will then ask you to select Where you want to fork it if you belong to organizations whatever but then Obviously by then I don't need to explain to you how it works But if for some reason you don't then you select your personal or whatever organization [00:05:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m27s) You want the fork to appear in And then it will basically To copy this repository For you Ok so now it's busy doing that I'm basically just copying it into my personal Account Now Good practice Every time you wanna make a change Then [00:05:48](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m48s) You need to follow a few steps In Having this repository in sync With the What we call upstream repository this VDM.io Joomla component builder Snippets This is what we call the upstream or the master branch or whatever you wanna call it this is the main branch the one that is being used inside of JCB yours isn't directly being used So whatever changes you make here would not necessarily affect us at all [00:06:20](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m20s) But you obviously want to Commit your changes to your branch And then Make a pull request To the upstream branch Where you would like to share this with the community So that's Sort of a quick explanation we'll do this slowly I'm not gonna do the pull request Now in this tutorial [00:06:42](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m42s) But I'll take you all the way up to the wall and then we will get the ladder out and finish that in the next tutorial Okay so once you've done this forking of the main Repository You need to clone this repository down Do your own developing environment And So that is what I'll do next You would click on this Clone and Depending on how you've got git set up on your developing environment [00:07:14](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m14s) Again those tutorials you'll need to do before coming here You would select either SSH or https I I would suggest using SSH as this is of course more secure But ok So we'll just copy that and then we go To I'm just gonna use my My users home folder for now So here I am in the command line I'm running Linux so if you're using Windows [00:07:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m47s) You'll need to watch tutorials on how to do git in Windows You might end up using a tool intead of command line But if you did that you'll also be having had watched Tutorials to help you sort of understand what I'm doing Ok So first thing first we gonna clone it let's get that done So I've cloned it And we now have a folder Call Joomla component Builders snippets So I'm gonna change into that folder now [00:08:19](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) Just with CD and a folder name and there we go I'm in the folder And if I do ls - la we'll basically see all the files That was on GitHub now in that folder Now we wanna change these files But we're not gonna change them directly We're gonna use JCB to do the dirty work for us Because we might have issues with the scapeing and all kinds of things that can go wrong So just to have good convention Whatever changes you wanna make even if you wanna add files or new libraries whatever You do it in JCB and you do the export package [00:09:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m01s) And you should check that if you export a snippet That it has three Values always set And that does three values Well we'll obviously scrutinize it when you make a pull request But that those name conventions be standard It's quite important as you can see this we've got the library name Uikit And it's uppercase u and space lowercase v2 And then Common with uppercase [00:09:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) And that is the type of snippet And then it's the name And obviously to json file So This is the convention And at this stage JCB builds that for you And I'm gonna show you where it gets this convention Because to follow this Convention is what's really gonna be very important If you're making new snippets For the Uikit version 2 library [00:09:58](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m58s) You need to ensure that your Version 2 naming in your system is the same as it is here And if you are adding a new library that isn't already in our repository Then you need to make sure that you use The naming as found well As others will understand it as most common The most common naming convention And obviously if you need help on that you can open an issue and ask one of the admin Do you know Maybe give you a suggestion of what [00:10:31](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m31s) To call the library But The Long end the short end of it is Please stick to the naming conventions Don't change this Uikit To maybe . . . remove the space here or something like that Because it will end up Just mismatching things and we want to avoid that from happening Ok so first thing we've done we've forked a repository and we've now cloned it [00:10:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m56s) to offline developing environment And now I'm going to go to get sorry to JCB And I'm gonna export those three snippets the one is a new snippet The second is a changed or improved snippet And in the third is when you actually move a snippet to a different type The one I'm gonna target here Is let me see I Think it's it's not showing here now Oh here it this [00:11:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s) Foo table The foo table snippet Is at the moment in layout I think there is a better Type for this snippet and I know the snippet isn't At this stage maybe the best We could add some more foo tables snippets but I'll leave that to some with you to do The point is I'm gonna move this one To the tables because it is a table right So that'll be the one change I'm gonna make then I'm gonna add one snippet [00:11:57](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) To the Uikit version 3 Since those snippets are still coming I'll just add one as demonstration and then I'll make a little change To one of these Snippets just for demonstration okay great let me do that Okay first thing a foo table click on that one Change it from layout to tables I'm not gonna make any other changes I'm just changing the type And this brings us to those three values that must always be set And shouldn't change unless it's really seriously necessary the one is the name You wouldn't wanna change this name unless you are a hundred sure it should be changed [00:12:41](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m41s) Because in effect it will create a new snippet Because the way the snippets work it builds the file name With name The library and the type those three components together makes up the file name so changing any of those will in effect create a new snippet And create a duplicate And that's really what I wanna would try to avoid that And I realised This is gonna what I'm doing here now is inevitably gonna cause that [00:13:14](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m14s) And I think it will show you why it's not a good thing to do it But so I'm doing this more really for demonstration And so the ideal reality is that when we add a snippet we add it to the correct library and type And give it the correct name From the start and that we don't need to change those three again If we do Most of the time I would expect That your pull request will be rejected Because this will mess up many conventions and cause Many duplicates across the system [00:13:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m49s) In other developers' environment where they would import this new snippet And yet end up having two of the same snippets Okay I've said enough about that I hope you understand that how important this part is So let's go ahead save and close The next one I'm gonna do Is basically add a new snippet now since I've done this recording a second time now I've already done that and this is a accordion snippet here So you'll see that I've basically [00:14:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m23s) Set that it's a JavaScript snippet It's an accordion It's you Uikit Version 3 I look down these types I'm wonder if some one of the other guys won't be better at this identifying of the types So I might even Not be the guy to make the call on this I really am open to some With better perspective who maybe knows these libraries assorting [00:14:51](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m51s) ideas better I think there's a place called What is it Collapse Yeah collapse Accordions could also fit other under this Collapse I suppose let me do that I know the first accordion we added for Uikit version 2 That is actually found on the JavaScript But then we didn't have these many types [00:15:17](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m17s) So I'll just add it under this Collapse for now Again I realise that this might be a difficult thing And What could help is going back to the actual library itself This This is the The link for it And to try and see how they Organized it and that's the problem [00:15:40](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m40s) Uikit Didn't Give more breakdown besides calling it components So it's only called a component it doesn't Specifically added into a type whereas Bootstrap is doing a little better at that So that's why I'm not sure exactly where to place it now Since Bootstrap Actually adds it under Collapse [00:16:07](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m07s) I think we won't go wrong to do the same So save and close There we go we got now A very crazy risky change of a type And a new snippet now let me take another Snippet and just make a little improvement to it I think I would use this Uikit version 2 Form snippet I'm just gonna add some usage information to it [00:16:37](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m37s) Okay there we go And I'm gonna save it save and close So now I've made a change Basically two This one This one and that one and So those are the only ones I'm actually going to share This one when I created it it added my details As the Contributor [00:17:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m00s) Which if you created a snippet it will add your details you will notice when you create a new snippet It takes a while before it's finish saving and it's because it's actually phoning GitHub And trying to see if there isn't a snippet Already with that Relationship as I explained in a previous tutorial And that takes a while and I'm still wondering if that's the best idea If we should continue doing that I'm open for [00:17:28](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) Suggestions But at this stage we're just trying to confirm that That's snippet Wasn't already created And to avoid conflicts Now That means if it doesn't find it it adds your details which is set here in the option Global options And as I explained in that tutorial You can add your details and you would get some you know exposure out there in the community [00:17:55](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m55s) With your details there With these that I've just changed The contributor will stay the same But your name will come in on the plain Layout And your GitHub name will display there as recognition for your support Okay so now and next thing share snippets Now the reason I made it that it actually compiles a zip File [00:18:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) is because it's easier to move around We could argue that we might want to just have it zip Or move Rather move the Files right into your local cloned folder And so I am thinking at this stage maybe We should add a switch here in the global options That could make you choose it to do this or the other depending on what is most convenient for you [00:18:52](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m52s) So I'm gonna go take the snippet And then I'm gonna go and basically unzip it into That Repository that we've cloned So here we are in that folder I'm gonna first on zip it right here There there is those three files That we want to make part of the repository Now like I said I Actually clone the repository right into my user [00:19:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m23s) Folder So let us go to that folder Just gonna cut this here Cut And then paste It right into that folder Now we are updating one file So it's asking it already contains this file Now so when you make an improvement on a file you'll obviously have to replace it [00:19:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m49s) So we click replace Now that you've Added those two new files And you have Replaced one of them The third one You'll see that we now have this Foo table The tables version And we have it also [00:20:09](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m09s) at the layout version now one of them needs to go We don't want duplicates So you have to remove this one but Don't remove it via the The Interface Use git To remove the file So that you can also add a message So that when you make your pull request and we see their files removed that we'll know why you did it [00:20:32](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m32s) And obviously then it will become a discussion And this we'll demonstrate in the next tutorial Okay so let's get back to command line Here we are we can say git Status to see what happened and we see wow ok one of been modified and these two have been added The first thing we wanna do is remove the one that we don't want Now because we have chosen to leave spaces within our file names You'll need to In put the file name in quotations To ensure that it actually you know [00:21:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m10s) Not misunderstand what you doing So we will go do a git rm for remove And then the file name So You could click tab after typing foo table about there and then lay out and it Well basically grab the name for you And then click enter So it is removed it if we now and do git status we'll see that it's in the deleted Area and you need to actually [00:21:45](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) Make a commit to Explain what you've done so it's git Commit m And removed table layout Since I Moved the Foo table snippet [00:22:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m00s) to tables To the tables type So We're not at this stage exactly sure How we are going to What kind of conventions we gonna follow with these commit messages There are reasons to have a few conventions here I just haven't had time to sort of get my head around it so for now we'll just is keep it basic But I'm sure as to community develop these things will become more [00:22:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m27s) Explained and so if you need help we'll most probably have some documentation up At some stage to get you to know how to Correctly do a commit message I mean just what you should say first and what you shouldn't say and those kind of things Okay so I've got a key that signs off every commit I make You may not have that don't worry about it it's not really compulsory at this stage It's just the way I can make sure that everybody knows [00:22:59](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m59s) That it's me Okay Now The next thing here is we wanna Add these new file so if we do git Status we'll see that now that file has been Made part of the commit At the branch or the local files of this clone [00:23:18](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m18s) And we wanna add those two other files The first one I'm gonna target Is adding the foo table which we just removed So git Status Oops Okay so now we've got that one added And we need to give it a commit message Now I understand When we are doing such [00:23:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m47s) a dangerous thing as moving a snippet to another type I would expect us to actually make a commit message for every Step of what we're doing But if you're adding like whole new library and you got like 300 new snippets that you're contributing I wouldn't mind you adding all of that on the one commit message Just making sure that the it was exported via Joomla's component Builder So that we don't have You know the wrong kind of code within those snippet files And obviously we will at [00:24:25](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m25s) Pull request we'll scrutinize those files and we will have to look through them to ensure That it won't make any one system unstable And so we basically got to police some of this to do ensure that nothing gets you know Merged into the master branch That will put every anyone at risk as much as as far as we are able to To prevent that we wanna do that Well we're working with snippets so it should be fine but just in case we wanna be careful So when you're making changes to one specific snippet And you're not really like doing [00:25:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m03s) Many at a time I think be as detailed as you can in your commit messages Because the more we know of what you're doing I think the easier it will be too merge it into The branch and to basically approve your pull request So the next commit message I'm just gonna say Git commit Message update the foo table layout foo table dot json to foo table Table Foo table dot json [00:25:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m33s) since it is more correct snippet type Okay so that would then Deal with that added file Now we want to add the accordion which is the the new snippet So it's just git add and we can select the file name There is a shortcut to this It's when you use the dot git dot add and that's usually when you have lots of files and you just wanna add them all so it's like I explained if you doing a whole bunch of snippets for a specific library I would suggest doing library per library instead of just mixing them all up [00:26:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m10s) Because if we target a library and just add a bunch of stuff that's for it And then have a commit message just for that then we could explain that within the commit message That it's for the specific library and so forth Because usually with new libraries You know it's good for us too sort of take it one step at a time so now we've added that file now just got to add a commit message for it I'm just gonna say added the Accordion snippet For Uikit Version 3 as demonstration On how this should work [00:26:46](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m46s) Okay and then just again Sign off that Commit Git status We'll see okay we've got one file left and we already three commits Ahead Of our Our Branch that we have Cloned [00:27:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m10s) So just this last file which is the You know the update we made So We're gonna first add the file And then add a commit message To explain what we did Added the users paragraph to explain how to use the Uikit version 3 layout form Yeah I think just writing out the file name like that is Clear enough [00:27:38](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m38s) And enter again just sign off on that Again if you don't have Keys to then It's good go Google this Start signing your request But at this stage it's not a requirement as I said Okay if we do git status now we'll see that we are four commits ahead Now this is here where We wanna do a few more things [00:28:06](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m06s) To your Commit or sorry to your Your Forked And therefore cloned repository what we wanna do something that will keep Your Repository in sync with the upstream So I'm just gonna go and Google this quickly This is a very helpful document [00:28:31](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m31s) We first need to do this configure a remote that points to an upstream repository So let's first look at that one So this gives you a little explanation Of you know what you should do So First you'd basically List the current Remote branches That you have [00:28:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) So I've done that and it shows that I've got this git or the origin And it's the fetched and the pushed Remote branches Now It's gonna say specify a new remote upstream repository that will be in sync with this fork So we'll use the original owner and the original repository Name Which In our case is the following The original owner is this [00:29:28](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m28s) VDM Dot io and The repository is this one So to get that name You could come here And Yeah think you could get This name here There we go That part [00:29:48](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m48s) copy So going back to our tutorial We will now type the Git and I suppose you'll have to get the https version Since you will not have permission to Work with the SSH version So let's get the http one Which basically means that you should click http here And then grab that version just copy it And [00:30:16](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m16s) Control Shift v will paste it in Into command line or some Command lines even gives you this option to paste With a mouse Okay so now we got that there And we press enter So it's now Typo Let me try again [00:30:37](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m37s) I didn't add remote add So it was looking for a file Okay there we go now if we did that version we'll see now It has this upstream there as well Okay so that was just to add the remote or the upstream Repository to the cloned Version that you have here [00:31:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m01s) Now let's go see how to keep it in sync So here it says that you would open the terminal And you would do git fetch upstream And it will basically pull down This And make sure that there is a branch called upstream Master then you would checkout master And switch to the master branch and do merge upstream master Which if while you were busy doing the snippets improvements and things [00:31:30](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m30s) And there's been commits to the master branch You wanna make sure That you Actually before pushing all this upstream Before making a pull request that you first merge The already changes from the master branch Into your branch and then make your commits on top of that This will help to try and avoid You not having specific commits in your branch I know it gets a little bit complicated [00:32:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m01s) but If you get stuck We will most of the times be able to just help you Figure this out again But like I explained in the beginning To know how to work with git Is really your responsibility So that You when you are wanting to communicate or sorry to Share with the community snippets [00:32:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m23s) You know how to first make a pull Request a sorry merge Your upstream with your master branch And ensure that you are up-to-date with that before making a push to your branch and Yes I hope you understand anyway if you don't please Google it and do some homework to get you Git Knowledge all freshened up and ready Now I know we didn't make any changes to the master branch during this tutorial So [00:32:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m56s) I can demonstrate the process of Git Fetch Upstream And it will do that But since I know that we didn't actually make any changes In the end of the day We we will not be Really seeing any Great fireworks happening right now And I suppose some of you will experience it a little different [00:33:22](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m22s) Especially if there's been changes to the upstream while you have been working So Git checkout master It's usually the branch that you're on but just to make sure You're already on the master branch Then Git Merge Oops I missed out the git there [00:33:44](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m44s) Merge upstream master And it says like now it's already up to date If it wasn't it will actually Merge those two branches With the changes you've made Now That's what you should do before you do the following Git push [00:34:09](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m09s) Which will now take these changes you've made And you wanna push them to origin origin master Now Everything you've done All the commits you made all the commit messages the files you removed All of that now gets pushed up To your cloned version On GitHub [00:34:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m36s) So if we go to your version now on GitHub And we just refresh the page It'll say This branch is for commits ahead of VDM-io master Which means you are now ready To make a pull request A pull request is what we will deal with in the next tutorial So everything we've done so far and this tutorial is to get the snippets that you've changed the contributions You wanna make Into the branch that you forked [00:35:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m10s) And to do it in a way that you're not completely out of sync With the master branch Which is living Basically on VDM dot IO Joomla component Builder snippets This is the master branch that you forked So you've got those commits in your forked branch And now you want to actually make A pull request To much these changes you've made into that master branch [00:35:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m36s) So that it will eventually become available To the whole community of JCB Okay thank you for watching If you have any issues Please Google Do research Git is an amazing technology and The quicker you can Get your hands on it and Become [00:35:59](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m59s) Comfortable with working with it the better Okay Next tutorial we'll deal with the pull request diff --git a/048-Tutorial-on-making-a-pull-request-at-Joomla-Component-Builder-Snippets.md b/048-Tutorial-on-making-a-pull-request-at-Joomla-Component-Builder-Snippets.md index a6d89e5..6714463 100644 --- a/048-Tutorial-on-making-a-pull-request-at-Joomla-Component-Builder-Snippets.md +++ b/048-Tutorial-on-making-a-pull-request-at-Joomla-Component-Builder-Snippets.md @@ -1 +1 @@ -Demonstrate to you The process of now taking You're committed changes to your forked version But this one Not the master branch How is gonna be little different for you because of course I am a Administrator of the master branch So I'll see things that you maybe won't see But Moreless you should be able to actually make a pull request And If you're not able to please let us know Sure I can Make sure that you're able to Do that And There there R&B will be more guys involved in managing these Snippets So it's not only myself that will be responding to issues But 4 most part if there is really a holdup I'll come in and help Make sure that everything Works as we expect So you should be able to after having Done What is explained in the previous tutorial below Updating the snapper it's getting out a fault version Of the repository Toning it down offline And then basically it Unzipping the package into that repository Updating OS files committing those changes with messages And then pushing it up here after you have ensured that your branch is in sync with the upstream branch Ok That if you don't understand Please go back watch that tutorial is the previous one the playlist On YouTube And then this one now Will be First steps Basically I'm off doing a pull request So once you are in your repository on GitHub And you Push your changes up here you'll see this you know Message And be able to click on Pull request So We've done that Next thing it will open a page Where Basically Identifies That you have forked VDM On the Square - IO for Joomla component Builder Snippets Master branch As the base there's only one branch at the moment And Then Your head Of the fork But you've got is over here And if it's says to you that it's able to do a merge Then You're in good shape everything shouldn't Be more complicated You also now see that those commit messages you've made Are now actually also showing up here And exactly every change that was done so basically you see we changed it From layout Two tables And weed That shows you that we've renamed it from this Do that Sorry the actually identified that for us And if we can see ok nothing of the Snippets have changed You can scroll and seopela snippet Isn't changed only those and the date Which is good for money Be able to see that what When was the last change to the file Here we can see that usage had A new Description added So that means if I was 2 now actually click On this link Add it according snippet Click there You see ok that's exactly what he did Hadeda call you and snippet And The same goes for every one of these commit messages And that's really what I meant when I said Giving good commit messages You make it so much easier for us to review the changes And to make sure that it is correct If it is very complicated and difficult Usually this kind of pull request will take longer So doing smaller amounts of snippet Contributions of Stead of hold back I suppose Would be Better Unless you already a trusted member in the community then I'll suppose it will go easier So yeah if you haven't done any of these before maybe take smaller steps at first Until we get to know you and until we more Confident that you Are a good contributor to do this project Yeah so trust is important for us So we'll be able to check this now no pull request has yet been made We've just come to the Page of where it starts You actually need to click on this create pull request This will now open in area Which You should give us information Of What would sort of summarise This pull request So if it's like a new library let's say 345 slippage to a new library Then just put Paris the title Whatever would be enough To actually give those That needs to review This enough information to sonoff the bad know what's happening And what's coming in specially If there is some Specific detail now I know That we will In time at some Documents to this repository Which will give you sort of Demo Names and stuff in in in this field So that you will know what to put in there So that will still come so often now just gonna say Illustration of snippet contribution Now I don't think you'll be able to make changes here It's only the admin that actually has the ability to actually add a reviewer And Assign a label and A project that a milestone And so that will be the responsibility of the admin They might not do it They might feel I will just merges and we don't need to make much fuss of it But if it's a big contribution and they need to be some real Heroes Work done here We must probably make use of these tools The description We could either just use the Commit messages as the description Or like I said That which we will maybe set up in the In the future We will now then create the pool request And Just given another glance and say ok everything is fine and click create pull request When I was a pull request and really here Is where we as the admin Will now get involved You cannot really take it further And Rightly so because we want to Protectors repository We wanna make sure only good Hero Well-documented Will explain wall named Snippets are contributed And so once you have come to this point You'll have to wait for one of our admin To get back to you at actually If they have issues they will start discussing it with you Ask questions And please We wanna just Protect you and protect everyone else So don't Be upset if they have questions In fact be glad that they would That will ensure that all of us Will enjoy this infrastructure So Once everything is satisfied and everyone is happy There will be some reviewers that will sign off On this pull request And I think at this stage if we have to review or sign off on it At least Then we can you know virgin into the master branch Now there are different ways on how the merging into the master branch is done This is mostly related and I'm doing this part mostly for the admin Who may need to be able to do this You could do it here on get up Just click merge pull request Since there is no conflicts If there is conflict then it gets more complicated And usually we will need more advanced admin Guys who knows get better Two maybe in a command line Be able to resolve some of this You can click on this link here in all show you the command line Way of dealing with it Or You could select One of these various emerging options Now all of that I'll explain more in editorial that's just specifically directed At the further steps that is necessary for admins Where is regarding You as a contributor This is really where you end And We take over Now Wanna tell you that Once the contribution is accepted and it's merged in Then it will again become visible In JCP In the snippet get area Which we demonstrated when we started out giving an overview of how things work And really that's what it's about it's really all of this complexity that we've now discussed Is Not the main focus The Focus is to Enable us 2 Enlarge the snippet Area Without Really intruding Upon constant updates in database tricks to win in Euro share the Snippets But instead have this easy way of Maintaining a GitHub repository Which in Effect will then be accessible via the JCB get area When you can add new Snippets You can obviously delete snap it's Just going to the Snippets area You can come in there and click here and trash a snippet And Then go to Trashed And here Completely delete the snippet from your repository Which will then Cause the snippet 2 Be seen as non existent in your surface area And so there are ways to remove duplicates And I don't wanna go into a very long explanation again On how to get Snippets area works But Our expectation is that some of you would feel Hello yeah I wanna contribute Share Snippets with the rest of the community and in the same time Get your name Out there since looking at the files changed You see that this new snippet As Yeah it looks like it just did what it's been doing you now because my name is on most of these What is because I added them And that's why my name is on there And so You are now also able to Add your name in here because you are adding Snippets And that's really the idea Well So we come to the end of this tutorial Thank you for watching And I'm looking forward to seeing all of you getting involved In this area as well \ No newline at end of file +Demonstrate to you The process of now taking You're committed changes to your forked version it's this one Not the master branch How is gonna be little different for you because of course I am a [00:00:20](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m20s) Administrator of the master branch So I'll see things that you maybe won't see But Moreless you should be able to actually make a pull request And If you're not able to please let us know So that I can Make sure that you're able to Do that And [00:00:41](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m41s) There will be more guys involved in managing these Snippets So it's not only myself that will be responding to issues But 4 most part if there is really a holdup I'll come in and help Make sure that everything Works as we expect So you should be able to after having Done What we've explained in the previous tutorial you know [00:01:08](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m08s) Updating the snippets , getting out a forked version Of the repository cloning it down and offline And then basically it Unzipping the package into that repository Updating those files committing those changes with messages And then pushing it up here after you have ensured that your branch is in sync with the upstream branch Ok That if you don't understand Please go back watch that tutorial it is the previous one the playlist [00:01:40](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m40s) On YouTube And then this one now Will be First steps Basically I'm off doing a pull request So once you are in your repository on GitHub And you have Push your changes up here you'll see this you know Message [00:02:01](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m01s) And be able to click on Pull request So We've done that Next thing it will open a page Where Basically Identifies That you have forked [00:02:18](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m18s) VDM-Io/ Joomla-Component-Builder.... Snippets Master branch As the base there's only one branch at the moment And Then Your head Of the fork that you've got is over here [00:02:38](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m38s) And if it's says to you that it's able to do a merge Then You're in good shape everything shouldn't Be more complicated You also now see that those commit messages you've made Are now actually also showing up here And exactly every change that was done so basically you see we changed it From layout To tables And it [00:03:03](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m03s) shows you that we've renamed it from this to that So it actually identified that for us And if we can see ok nothing of the Snippets have changed You can scroll and see the snippet Isn't changed only those and the date Which is good for we want to Be able to see when was the last change to the file Here we can see that usage had A new [00:03:30](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m30s) Description added So that means if I was to now actually click On this link Added the accordion snippet Click there You see ok that's exactly what he did added accordion snippet And The same goes for every one of these commit messages And that's really what I meant when I said Giving good commit messages [00:03:56](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m56s) You make it so much easier for us to review the changes And to make sure that it is correct If it is very complicated and difficult Usually this kind of pull request will take longer So doing smaller amounts of snippet Contributions in of stead of whole bulk I suppose Would be Better Unless you already a trusted member in the community then I'll suppose it will go easier So yeah if you haven't done any of these before maybe take smaller steps at first [00:04:29](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m29s) Until we get to know you and until we more Confident that you Are a good contributor to do this project Yeah so trust is important for us So we'll be able to check this now no pull request has yet been made We've just come to the Page of where it starts You actually need to click on this create pull request This will now open in area Which You should give us information [00:04:59](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m59s) Of What would sort of summarise This pull request So if it's like a new library let's say 3 4 5 snippets to a new library Then just put that as the title Whatever would be enough To actually give those That needs to review This just enough information to know what's happening And what's coming in specially If there is some [00:05:23](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m23s) Specific detail now I know That we will In time at some Documents to this repository Which will give you sort of Demo Names and stuff in this field So that you will know what to put in there So that will still come so for now I'm just gonna say Illustration of snippet contribution [00:05:50](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) Now I don't think you'll be able to make changes here It's only the admin that actually has the ability to actually add a reviewer And Assign a label and A project that a milestone And so that will be the responsibility of the admin They might not do it They might feel I will just merges and we don't need to make much fuss of it But if it's a big contribution and they need to be some real you know [00:06:22](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m22s) Work done here We must probably make use of these tools The description We could either just use the Commit messages as the description All like I said That which we will maybe set up in the In the future We will now then create the pull request And [00:06:47](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m47s) Just given another glance and say ok everything is fine and click create pull request When I now have the pull request and really here Is where we as the admin Will now get involved You cannot really take it further And Rightly so because we want to Protect this repository We wanna make sure only good ....... [00:07:17](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) Well-documented, Well explained, well named, Snippets are contributed And so once you have come to this point You'll have to wait for one of our admin To get back to you and actually If they have issues they will start discussing it with you Ask questions And please We wanna just [00:07:40](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m40s) Protect you and protect everyone else So don't Be upset if they have questions In fact be glad that they would That will ensure that all of us Will enjoy this infrastructure So Once everything is satisfied and everyone is happy There will be some reviewers that will sign off On this pull request [00:08:05](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m05s) And I think at this stage if we have two reviewers sign off on it At least Then we can merge it into the master branch Now there are different ways on how the merging into the master branch is done This is mostly related and I'm doing this part mostly for the admin Who may need to be able to do this You could do it here on GitHub Just click merge pull request Since there is no conflicts If there is conflicts then it gets more complicated [00:08:41](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) And usually we will need more advanced admin Guys who knows Git better Two maybe in a command line Be able to resolve some of this You can click on this link here and it will show you the command line Way of dealing with it Or You could select One of these various emerging options Now all of that I'll explain more in editorial that's just specifically directed [00:09:12](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s) At the further steps that is necessary for admins Where us regarding You as a contributor This is really where you end And We take over Now Wanna tell you that Once the contribution is accepted and it's merged in Then it will again become visible [00:09:35](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m35s) In JCB In the snippet get area Which we demonstrated when we started out giving an overview of how things work And really that's what it's about it's really all of this complexity that we've now discussed Is Not the main focus The Focus is to Enable us to Enlarge the snippet [00:09:58](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m58s) Area Without Really intruding Upon constant updates in database tricks to share the Snippets But instead have this easy way of Maintaining a GitHub repository Which in Effect will then be accessible via the JCB get area When you can add new Snippets You can obviously delete snippets [00:10:24](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m24s) Just going to the Snippets area You can come in there and click here and trash a snippet And Then go to Trashed And here Completely delete the snippet from your repository Which will then Cause the snippet to [00:10:45](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m45s) Be seen as non existent in your snippets area And so there are ways to remove duplicates And I don't wanna go into a very long explanation again On how to get Snippets area works But Our expectation is that some of you would feel yeah I wanna contribute Share Snippets with the rest of the community and in the same time Get your name Out there since looking at the files changed [00:11:14](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m14s) You see that this new snippet As Yeah it looks like it just did what it's been doing you now because my name is on most of these What is because I added them And that's why my name is on there And so You are now also able to Add your name in here because you are adding Snippets And that's really the idea Well [00:11:37](https://www.youtube.com/watch?v=vQ-yxVtc-Co&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m37s) So we come to the end of this tutorial Thank you for watching And I'm looking forward to seeing all of you getting involved In this area as well diff --git a/049-The-New-Library-Manager-Area.md b/049-The-New-Library-Manager-Area.md index a99b818..627f05d 100644 --- a/049-The-New-Library-Manager-Area.md +++ b/049-The-New-Library-Manager-Area.md @@ -1 +1 @@ -I'm very excited to announce the Actual Library manager implementation We busy with a pool request we should have it released within the next hour or so I'm very excited about this this new improvement Is really gonna make Libraries very Dynamic in JCB Not it has not been dynamic It's just Not in worries realise how easy it is to add new libraries So What I wanna do is quickly Not to elaborate x show you how it used to be done And then I want to jump into how it work now and you'll see why the new implementation is so much easier So much better and I think everybody's gonna enjoy it Ok so let's let's get started on how it used to work So if we go to a component and we open a component There are 3 libraries that are already built into JCB that just works out of the box And those 3 libraries can be selected With the add UI kit at food table Ok Let me see The other libraries that are being added Is a winner detects Basically some code in the certain areas of the script I'm not gonna elaborate on that Square take too long Point is this to you put select here simply By selecting You know now there's a new feature called dynamic And that is part of what we will need to look at Dynamic Basically means That it is added in on the basis of the views That are linked to the component So The Old Way You had to come to the component and sort of Talent here ok once you like it and I want food To table add it Anyway you could tell him you know what version you would like Or if you want it with the UI kit you could actually said that it adds both versions Now with improvements you'd said this to Dynamic which basically turns off The Global adding of the UI kit component And then Falls back Onto the new implementation which I will demonstrate with in a moment So let's leave it on this the way it was That was the first way of actually implementing some library The second way Which was their way that you could now scale it Is if you want to go to settings There is component files and folders that you could add So you could click here and say you don't what I want to I want to add a a Alive that isn't already part of JCB Ok so let's say you wanted to add Bootstrap So You would say ok there is a folder in your component on the administrative components Boland build up custom And inside that folder you placed the folder For Bootstrap so I don't have it here Let me quickly do that Is it now I'm just gonna refresh this page I I quickly went and added a folder to this custom folder Call Bootstrap Summer Just refresh this So I'm gonna get in click here And then there we have it select Bootstrap I want Bootstrap to be added to the media folder And since we do not do any Changing of the folder name will just leave that as it is So basically I move this folder into the media folder That's the way you would have done that in the past So close Now Having added the files to the component You will then Actually have to go to the view So if we go to side view And this looks View You will have to in the looks of you You know said That it actually now uses Now this is the new implementations I'm gonna undo that And just say Ok in the custom document script area You would add this snip it in here so you add a script now you know Show that you add the the Bootstrap 4 Folder to media But when it gets installed to Joomla It actually a create a component folder and put the A files in there If you do not know how they will work out at the folder install it onto Dumela website and go look in the media folder To get the correct path here And save and close and that's how you would in the past have extended JCB To actually use Other libraries then what's built into JCP And ok I list rated that simply so you know that we could have done this before But it was a little bit more complicated As the way it's going to work now So now With the new changes we've made You can actually Remove The The files If you have done this this manual way You can actually remove these files So close You don't need to add them any this way anymore They will be added on another way now I'm gonna demonstrate the the other way By actually starting at the libraries area Some closing out of the component I'm going to libraries And you see that with the upgrade There's now a Bootstrap 4 library uikit 3 2 Food table 2 and 3 and a no library Which is reading only necessary when greatest nippard it doesn't belong to any library Just your own snippet that you want to use So The Snippets are now directly linked to these libraries These libraries The 6th that would be Been shipped the JCB worth Should not be changed In relation to its name Or it's type But you can change its behaviour Bad behaviour is the file behaviour There are an a various file behaviours Let's open Bootstrap to show you some of those At the moment Bootstrap they said on always had And it is linking in basically a Content distributed Network link And it says that it it should add it as a link Now you can change that you can say no I don't want to add it as a link And you can edit this And Without Making any changes to the link you can change this to A local And that what JCP will then do Is during compilation he will download these files An add them into the component as local files Which would then be used instead as the link Which I think is quite nice You could also do the same thing here as we did previously you could add Files from the same custom folder And also folders Those are The same kind of implementation except It's now done on a library level So that even library gets add that to a view as I will show you in the moment You automatically use this Files So that means You don't need to do it Pro component You basically do it the library and I should link the libraries to Vuze It'll automatically incorporate these files into your component which makes it a little bit Less effort you just said it up once And thereafter you could just reuse reviews Do I'm gonna change this to local So now it will says local get There is an a few behaviours year there is a conditional custom script and do not add Now the cond Is still under development All these functionality used already here so you'll see all the links are showing up here But as related to its implementation in the compiler It's not ready yet So for now Skip the conditionals option until you see that when you compile that it doesn't give you a warning at This moment If you compile JCB Your give you a warning that the conditional options are not available yet I'm in fact we're planning to have them released with the next release Which would be 2.6 point 7 So any any version if you looking at this tutorial after 2.6 - 7 Then the conditional options are ready working So I'm gonna just demonstrated briefly The condition options works in two ways What is you first need to add some configuration fields How configuration fields Is basically Fields or be added to the global Options of the component And if those fields are tripped It will have an effect on whatever way you said it So to show you that If you look here you'd see there is an options area If we click on the options area That's now in a component you see there is uikit to settings And it has a bunch of Buttons here That's basically the kind of buttons That you can build So you first go and create the fields in JCB as you would normally create any other field And then in the library come here and click on getting the configuration fields So Here I'm just gonna select the anything so I'm just gonna say Add more maybe as an option And I want to Created under the tab called Food Strap Just like that So that's gonna be the tab name That's gonna be the the radio button Save and close this is the most Asian So now if I change this to configuration And I click on adding a configuration and then I say I want to add the local These two local files I want them to be included When add more is said to Yes That's basically How this configuration of conditions will work In a relationship so You won't see any option Fields if you haven't created Option fields In the configuration So if you if you wanna use this area when it is eventually getting in a.m. will be ready You will have an include and exclude option Based on buttons And then you select the files you that you want to Be added or Not not be added Based on these selections Now these buttons obviously as part of your component parameters And so within your code when you start developing at Amplats and your layouts You can draw upon these These parameters In your PHP And say ok if it's the switch is that then I want this HTML to load Otherwise I want that HTML to load So you could have Bootstrap alongside uikit With the same implementation So that is giving a idea of where this conditional Area is supposed to come into play The area that I have really like more is actually the custom scripting area Which really Is giving us the same behaviour as what we did in the side view right So we basically just add the same Files here And The only thing will change it will add Component component Like that Wherever we have the component name Because we want this to be Dynamic or that needs to be Three of those So that if it gets added to any component You'll dynamically update those names As related to The fact that it will use Bootstrap version 4 It really is using this name here And it's putting a little - between them and making it lowercase And These two files Are based on those names there so you basically need to use that name And That name And it will dynamically to take the this is a CSS file I put it in a CSS folder and same the same goes with age as a file So basically this is how you do a custom scripting for Bootstrap 4 And that that will be very similar to always add Because always add would basically write that script for you And so you just Add the files you always want to add And the behaviour is like this so Really I'm trying to give you as much Liberty as possible So that you can use libraries in any way you're like Write your own conditions Or your own custom script or just let JCP add it always Now I'm gonna demonstrate how this adding always is gonna work in a moment Can I save and close out of here So we have basically Bootstrap add always and UI kit at always And you like it Version 2 we using a built-in option as same for the food table and the food table Version 3 So the building options are only available for these 1 2 3 4 libraries Not for Bootstrap but for those for libraries And any other libraries that you add will not have a built-in option unless we build one and then it will become available Ok so that is sewing all around the libraries now Let's link the library to a view gonna go to side view I'm gonna go and open looks As the site View And basically I'm just gonna select Bootstrap 4 That's all the moment I select Bootstrap 4 the Snippets That will show up here will then be the Bootstrap 4 Snippets Since we do not anymore ship Snippets with JCB You'll have to install some slippers So let me show you that quickly You go to Snippets Are you don't really need to go to sleep it's Ok so the UI Kid Snippets are still being shipped But not the Bootstrap 4 Snippets You then click on get Snippets Select Bootstrap 4 And it will then load all the Bootstrap for Snippets that are available to the community You can deny the user bulk import Or you could import individual Snippets 4 Bootstrap 4 Once it's ready it will show you which ones are new So let's I'm gonna add That's Newport So yes I wanna do that So it's basically installing it And then I'm also gonna take that one Would you like to add it to say yes ok And also in so I've got over install to Bootstrap Snippets The way to install all of them since there's so many Is the use the bulk option So you could actually come here to bulk And you see that it has the new and you can click on this and it will install all of the the Bootstrap snippet Ok So that is the quick way of getting libraries Snippets into your system And installing them Just by clicking on On get snippet And it will basically do that for you Now let's go back to site views And again open the looks area So now if I select Bootstrap Then you'll see those two Snippets that I've been stalled And I can Click between them and really that's just for you to get the snippet And to be able to add it into your You know into your code Where ever you would like it to be like that Ok so I'm gonna do that I'm just gonna demonstrate Adding the library so selecting the library here Is what will add the library to the component and actually to this view So you can select Multiple libraries for one View But there could be a problem with that if you for example want you I get version 2 and UI Bike it Version 3 on this page but you want to have it Only use the one or the other based on certain switches in the global options of the component Now UI kit version 2 was set to fall back to Euro the internal Golden option And you like it Version 3 was said to fall back 2 Always add So if we just look at that Ok so that's always ADD and built-in Now you want to Actually have both libraries under the page But you wanted to work within some custom implementation the way to do that Click on new And use the bundler option Select Those two libraries Like that Decide how you want to do it so it will be possibly a custom script Or it will be a conditional one Which you will then have to create Obviously let me just say this So we could call those UI kit Bundle Let's call it just you like it like that And save Now Once you've saved it once You cannot you should now add the actual files So You would go to folders And then At you I get 3 wrong button Uikit 3 and 3 kids 2 And you wanna add them to the media folder So You have to still link the files remember kicks selecting those libraries Doesn't inherently Uno clone it's Files You need to still manually up the files so now we've got virgin 3 wait Why is this so difficult Erica The screens not working along here Ok you like it Version 3 and version 2 And save and close So now We have The files And here they are in as folders And it shows you all the files and folders That are found inside of those two folders that you've added So Yeah I think it's little difficult you cannot see which version is which year This might be a A good option to add Maybe the fall the name here I think they will be In the next release we will make that change But I think the other option which is also ideal for this kind of implementation is a custom scripting Which you could still create The the the config files Fields excuse me So when it when it's this UI kit version 2 is selected Load the UI kit version 2 files But you must understand if you create the buttons And it will be added to the component But if you use custom script And in here in the behaviour you write the custom script You need to Let me just show you in the file So in the file You see that it actually puts the parameters In params this params So You will need to down here Get The UI kit The switch the the button name That you are now Have tap created to the conflict fields You then get the value put it into a variable And then based on that variable You would either Add the file or or not at the farm So you basically write this script If I was to Just copy this is an example All the way up there And go here paste This is basically what the crust and scripted look like But that means that you created In the library config you created fire buttons With those names right And that the values are related to these values here They had a cheque option Is something that if you Do you go into the file you go look at the HP HP you might understand how to Use this And so the other chickens at this stage always being loaded If you don't wanna use the edit check then you just you know just don't use it But you could go and and try and figure out how the Heather check works And then use it Anyway so that is Making a bundle Now let me save this as an example And so now we got this UI kit And it's a bundle If we go back to the site View And we open that up again We will now instead of creating this one and that will do just create Select that bundle instead And that bundle will give me Uikit version to snip it and if we have any version 3 slip it's installed You also load that for me So I will be able to work with both libraries Why selecting is bundled Library option and JCB when it compiles He will basically use the the custom script that you wrote in The Bungalow To add it to the view so let me Show you that's all save and close You And let's go back to the library quickly And just do something silly to the code So that you will actually see it's implementation You gonna ads These bunch of lions here Save and close And then let's compile this Uninstall Ok let's look at the code So now you see that it's added in this library files Obviously it's also add it in The Originals because We haven't set that but not to show let me just show you what What I mean In the component You need to change the version Of the old library implementation You need to change that So now You need to change this from adding UI kit version 2 To basically two dynamic Save and close Knife we compile it now you will see it will not add the That that Coat To the file twice You're basically just add that you like it bundles Code that we wrote Ok let's look at the code So now We see that it only added the code that we wrote And then Remember in the Fire we added this as custom script So we need to go remove this In the end View We we added this in So interview we added these custom script We actually didn't need to add the spaces And we do have a little bit of a A discrepancy there Ok I'm gonna escape this just that you can see We don't need to add this in this way anymore We can go here And Basically That I still want that Bundler in there as well Ok so we don't need to do this anymore We can just Basically select Bootstrap Save and close And then I'm gonna run the compiler again There we go If you look at it hear it see that there is that escaped code that we removed And here is this code that JC be added Member I said to you that We basically in JCB We are LinkedIn We look at the library might not here Let's go here The Bootstrap 4 library reset ad always And we basically linking it from a link right and we just said local get Now if we look at the code We see that it Road For us this Pass So now I'll let check if it actually did add the path correctly So we wanna we wanna go to the media area of the of the Program And go to Me and not media Demo And so Received created a Bootstrap folder Added added to files According to the path That it's also set here so that it is really implementing the get Option For the libraries And all you really did is you just linked it to this view This does give another situation where To every view that you want is pacifically library to be available You need to link it To that View Which wouldn't be a problem If you prayed of you now and you said your library and then add the Snippets Then I mean then you're starting a fresh and you will actually select the right BC wanna use But if you since you haven't done this before all the components If you wanna use a library in the view You have to go and add it Or you just have to Basically in the components area for back On The Old Way of implementing The the libraries that are built into JCP so that means the old implementation still work If you If you basically set it here 2 Add both UI kit version 1 and 2 and 3 And also Maybe towards food table version 2 Does Implementations still work And doing that will add it to every customer and admin view where it's used Sorry Custom inside view custom admin view side view template layout So that that's the old way and that still works it's just that when you want to start using like Bootstrap 4 You'll have to actually link it to the custom at the view or side view template layout Where you want That specific Add library to be available So View link in Bootstrap over here Then it will be available to this layout and to every view where this layout is Used Ok so that's the quicker mistration of the new Libraries implementation We call it a library manager Because of The Diverse ways of you linking in the files and so forth We really hope that you Understood then are able to enjoy this new implementation We want to Make it possible for you to add libraries And then basically share this limits With the rest of community So those of you that are interested in doing that Please watch some of the previous tutorials about Snippets and the slip it manager Because I think doing this will not only help everyone else in the community but also get your name I'm out there I get people connected with with each other Anyway Thank you for watching \ No newline at end of file +I'm very excited to announce the Actual Library manager implementation We're busy with a pull request we should have it released within the next hour or so I'm very excited about this, this new improvement Is really gonna make [00:00:22](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) Libraries very Dynamic in JCB Not it has not been dynamic It's just Not everybody realizes how easy it is to add new libraries So What I wanna do is quickly Not to elaborate , show you how it used to be done And then I want to jump into how it work now and you'll see why the new implementation is so much easier So much better and [00:00:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) I think everybody's gonna enjoy it Ok so let's get started on how it used to work So if we go to a component and we open a component There are three libraries that are already built into JCB that just works out of the box And those three libraries can be selected With the add UI kit add food table Ok Let me see The other libraries that are being added Is when detects [00:01:22](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m22s) Basically some code in the certain areas of the script I'm not gonna elaborate on that, it's going to take too long Point is this two you could select here simply By selecting You know now there's a new feature called dynamic And that is part of what we will need to look at Dynamic Basically means That it is added in on the basis of the views That are linked to the component [00:01:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m50s) So The Old Way You had to come to the component and sort of tell it here ok , I want UiKit and I want food table added And you could tell him you know what version you would like Or if you want it with the UiKit you could actually set that it adds both versions Now with improvements you'd set this to Dynamic which basically turns off The Global adding of the Uikit component And then Falls back Onto the new implementation which I will demonstrate with in a moment So let's leave it on this the way it was [00:02:29](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m29s) That was the first way of actually implementing some library The second way Which was the way that you could now scale it Is if you want to go to settings There is component files and folders that you could add So you could click here and say you know what I want to add a library that isn't already part of JCB Ok so let's say you wanted to add Bootstrap So You would say ok there is a folder in your component on the administrator components [00:03:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m05s) Component Builder custom And inside that folder you would place the folder For Bootstrap so I don't have it here Let me quickly do that Just now I'm gonna refresh this page I I quickly went and added a folder to this custom folder Called Bootstrap So let me just refresh this So I'm gonna get in click here And then there we have it, select Bootstrap [00:03:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m36s) I want Bootstrap to be added to the media folder And since we do not do any Changing of the folder name will just leave that as it is So basically I move this folder into the media folder That's the way you would have done that in the past So close Now Having added the files to the component You will then Actually have to go to the view [00:04:03](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m03s) So if we go to site view And this looks View You will have to in the looks view you know set That it actually now uses Now this is the new implementations I'm gonna undo that And just say Ok in the custom document script area You would add this snippet in here so you add a script now you know that you add the the Bootstrap 4 Folder to media [00:04:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m36s) But when it gets installed to Joomla It actually a creates a component folder and put the A files in there If you do not know how that will work out add the folder install it onto Joomla website and go look in the media folder To get the correct path here And save and close and that's how you would in the past have extended JCB To actually use Other libraries then what's built into JCP And ok I Illustrated that simply so you'll know that we could have done this before But it was a little bit more complicated [00:05:13](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) As the way it's going to work now So now With the new changes we've made You can actually Remove The The files If you have done this this manual way You can actually remove these files So close [00:05:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m35s) You don't need to add them any this way anymore They will be added in another way now I'm gonna demonstrate the other way By actually starting at the libraries area Some closing out of the component I'm going to libraries And you see that with the upgrade There's now a Bootstrap 4 library ,Uikit 3 2, Food table 2 and 3 and a No Library [00:06:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m06s) Which is really only necessary when you create a snippet which doesn't belong to any library Just your own snippet that you want to use So The Snippets are now directly linked to these libraries These libraries These six which been shipped with JCB Should not be changed In relation to its name Or it's type [00:06:33](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m33s) But you can change its behavior now the behavior is the file behavior There are an a various file behaviors Let's open Bootstrap to show you some of those The moment Bootstrap is set on always add And it is linking in basically a Content distributed Network link And it says that it it should add it as a link Now you can change that you can say no I don't want to add it as a link [00:07:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m04s) And you can edit this And Without Making any changes to the link you can change this to A local And that what JCP will then do Is during compilation he will download these files And add them into the component as local files Which would then be used instead as the link Which I think is quite nice [00:07:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m32s) You could also do the same thing here as we did previously you could add Files from the same custom folder And also folders Those are The same kind of implementation except It's now done on a library level So that even library gets added to a view as I will show you in the moment You automatically use this Files So that means [00:08:01](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s) You don't need to do it per component You basically do it per library and as you link the libraries to Views It'll automatically incorporate these files into your component which makes it a little bit Less effort you just set it up once And thereafter you could just reuse, reuse Do I'm gonna change this to local So now it will says local get There is an a few behaviours year there is a conditional custom script and do not add Now the conditional Is still under development [00:08:34](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) All its functionality is already here so you'll see all the links are showing up here But as related to its implementation in the compiler It's not ready yet So for now Skip the conditionals option until you see that when you compile that it doesn't give you a warning at This moment If you compile JCB Your give you a warning that the conditional options are not available yet I'm in fact we're planning to have them released with the next release Which would be 2.6 point 7 [00:09:09](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m09s) So any any version if you looking at this tutorial after 2.6 - 7 Then the conditional options already working So I'm gonna just demonstrate it briefly The conditional options works in two ways the one is you first need to add some configuration fields now configuration fields Is basically Fields that will be added to the global Options of the component And if those fields are tripped It will have an effect on whatever way you set it [00:09:41](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m41s) So to show you that If you look here you'd see there is an options area If we click on the options area That's now in a component you would see there is Uikit2 settings And it has a bunch of Buttons here That's basically the kind of buttons That you can build So you first go and create the fields in JCB as you would normally create any other field And then in the library come here and click on getting the configuration fields [00:10:15](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m15s) So Here I'm just gonna select the anything so I'm just gonna say Add more maybe as an option And I want to Created under the tab called Boot.... strap Just like that So that's gonna be the tab name That's gonna be the the the radio button [00:10:37](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m37s) Save and close just as a demonstration So now if I change this to configuration And I click on adding a configuration and then I say I want to add the local These two local files I want them to be included When add more is said to Yes That's basically How this configuration of conditions will work [00:11:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) In a relationship so You won't see any option Fields if you haven't created Option fields In the configuration So if you wanna use this area when it is eventually ready You will have an include and exclude option Based on buttons And then you select the files you that you want to Be added or Not not be added [00:11:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) Based on these selections Now these buttons obviously as part of your component parameters And so within your code when you start developing your templates and your layouts You can draw upon These parameters In your PHP And say ok if it's the switch is that then I want this HTML to load Otherwise I want that HTML to load So you could have Bootstrap alongside Uikit [00:12:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) With the same implementation So that is giving a idea of where this conditional Area is supposed to come into play The area that I have really like more is actually the custom scripting area Which really Is giving us the same behaviour as what we did in the site view right So we basically just add the same Files here And The only thing will change it will add [00:12:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) Component Like that Wherever we have the component name Because we want this to be Dynamic or that needs to be Three of those So that if it gets added to any component You'll dynamically update those names As related to The fact that it will use Bootstrap version 4 It really is using this name here [00:13:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m05s) And it's putting a little - between them and making it lowercase And These two files Are based upon those names there so you basically need to use that name And That name And it will dynamically detect that this is a CSS file I put it in a CSS folder and same the same goes with the JS a file So basically this is how you do a custom scripting for Bootstrap 4 And that will be very similar to Always Add [00:13:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m39s) Because Always Add would basically write that script for you And so you just Add the files you always want to add And the behaviour is like this so Really I'm trying to give you as much Liberty as possible So that you can use libraries in any way you're like Write your own conditions Or your own custom script or just let JCB add it always Now I'm gonna demonstrate how this adding always is gonna work in a moment Can I save and close out of here [00:14:15](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s) So we have basically Bootstrap Always Add and Uikit Always Add And Uikit Version 2 we using a built-in option as same for the food table and the food table Version 3 So the Build-in options are only available for these 1 2 3 4 libraries Not for Bootstrap but for those 4 libraries And any other libraries that you add will not have a Built-in option unless we build one and then it will become available Ok so that is showing all around the libraries now Let's link the library to a view so I'm gonna go to site view I'm gonna go and open looks [00:14:57](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m57s) As the site view And basically I'm just gonna select Bootstrap 4 That's all the moment I select Bootstrap 4 the Snippets That will show up here will then be the Bootstrap 4 Snippets Since we do not anymore ship Snippets with JCB You'll have to install some Snippets So let me show you that quickly You go to Snippets you don't really need to go to snippets. Ok, so the Uikit Snippets are still being shipped [00:15:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m32s) But not the Bootstrap 4 Snippets You then click on get Snippets Select Bootstrap 4 And it will then load all the Bootstrap 4 Snippets that are available to the community You can deny the user bulk import Or you could import individual Snippets for Bootstrap 4 Once it's ready it will show you which ones are new So let's I'm gonna add That snippet [00:16:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m02s) Say yes I wanna do that So it's basically installing it And then I'm also gonna take that one It says would you like to add it too? say yes ok so I've install to Bootstrap Snippets The way to install all of them since there's so many Is the use the bulk option So you could actually come here to bulk And you see that it has the new and you can click on this and it will install all of the the Bootstrap snippets Ok [00:16:37](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m37s) So that is the quick way of getting libraries Snippets into your system And installing them Just by clicking on On get snippet And it will basically do that for you Now let's go back to site views And again open the looks area So now if I select Bootstrap [00:17:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m05s) Then you'll see those two Snippets that I've installed And I can Click between them and really that's just for you to get the snippet And to be able to add it into your You know into your code Where ever you would like it to be like that Ok so I'm gonna do that I'm just gonna demonstrate Adding the library so selecting the library here [00:17:29](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) Is what will add the library to the component and actually to this view So you can select Multiple libraries for one View But there could be a problem with that if you for example want Uikit version 2 and Uikit Version 3 on this page but you want to have it Only use the one or the other based on certain switches in the global options of the component Now Uikit version 2 was set to fall back to the internal Build-in option [00:18:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m04s) And Uikit Version 3 was said to fall back to Always add So if we just look at that Ok so that's Always Add and Built-in Now you want to Actually have both libraries under the page But you wanted to work within some custom implementation the way to do that is to click on new And use the bundle option [00:18:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m32s) Select Those two libraries Like that Decide how you want to do it so it will be possibly a custom script Or it will be a conditional one Which you will then have to create Obviously let me just say this So we could call those Uikit Bundle Let's call it Uikit like that [00:19:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m06s) And save Now Once you've saved it once You should now add the actual files So You would go to folders And then At Uikit 3.... wrong button Uikit 3 and Uikit 2 [00:19:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m39s) ......... And you wanna add them to the media folder So You'll have to still link the files remember selecting those libraries Doesn't inherently clone it's Files You'll need to still manually add the files so now we've got version 3...... Why is this so difficult here we go [00:20:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m07s) The screens not working along here Ok you like it Version 3 and version 2 And save and close So now We have The files And here they are as folders And it shows you all the files and folders That are found inside of those two folders that you've added So [00:20:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) Yeah I think it's little difficult you cannot see which version is which here This might be a A good option to add Maybe the folder the name here I think that will be In the next release we will make that change But I think the other option which is also ideal for this kind of implementation is a custom scripting Which you could still create The the the configed files Fields excuse me [00:21:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m04s) So when it when it's this Uikit version 2 is selected it will load the Uikit version 2 files But you must understand if you create the buttons it will be added to the component But if you use custom script And in here in the behaviour you write the custom script You need to Let me just show you in the file So in the file You see that it actually puts the parameters [00:21:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m36s) In params this params So You will need to down here Get The Uikit The switch the the button name That you now Have created to the configed fields You then get the value put it into a variable And then based on that variable [00:21:59](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m59s) You would either Add the file or not add the file So you'll basically write this script If I was to Just copy this is an example All the way up there And go here paste This is basically what the custom script should look like But that means that you created In the library config you created buttons [00:22:30](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m30s) With those names right And that the values are related to these values here The HeaderCheck option Is something that if you go into the file you go look at the PHP you might understand how to Use this And so the HeaderCheck at this stage always being loaded If you don't wanna use the edit check then you just you know just don't use it But you could go and and try and figure out how the HeaderCheck works And then use it [00:23:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m06s) anyway so that is Making a bundle Now let me save this as an example And so now we got this Uikit And it's a bundle If we go back to the site View And we open that up again We will now instead of creating this one and that one we will just create Select that bundle instead And that bundle will give me [00:23:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m32s) Uikit version 2 snippets it and if we have any version 3 snippets installed it will also load that for me So I will be able to work with both libraries Why selecting is bundled Library option and JCB when it compiles He will basically use the custom script that you wrote in the Bundler To add it to the view so let me Show you that so I'll save and close here And let's go back to the library quickly And just do something silly to the code [00:24:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m10s) So that you will actually see it's implementation I am just gonna add These bunch of lines here Save and close And then let's compile this and install Ok let's look at the code So now you see that it's added in this library files Obviously it's also added in The [00:24:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m43s) Originals because We haven't set that button to show let me just show you What I mean In the component You need to change the version Of the old library implementation You need to change that So now You need to change this from adding Uikit version 2 To basically to dynamic [00:25:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m10s) Save and close No if we compile it now you will see it will not add the That Code To the file twice You're basically just add that Uikit bundled Code that we wrote Ok let's look at the code So now We see that it only added the code that we wrote [00:25:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m38s) And then Remember in the file we added this as custom script So we need to go remove this In the View Where we added this in So in the view we added these custom script We actually didn't need to add the spaces And we do have a little bit of a A discrepancy there [00:26:08](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m08s) Ok I'm gonna escape this just that you can see We don't need to add this in this way anymore We can go here And Basically do that we still want that Bundler in there as well Ok so we don't need to do this anymore We can just [00:26:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m35s) Basically select Bootstrap Save and close And then I'm gonna run the compiler again There we go If you look at it hear we see that there is that escaped code that we removed And here is this code that JCB added remember I said to you that We basically in JCB We are Linked in If we look at the library might not here [00:27:12](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m12s) Let's go here The Bootstrap 4 library we set Always Add And we basically linking it from a link right and we just said local get Now if we look at the code We see that it wrote For us this Path So now let's check if it actually did add the path correctly So we wanna go to the media area of the [00:27:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m43s) Program And go to ......... Demo And so We see it created the Bootstrap folder And added the files According to the path That it also set here so that it is really implementing the get Option [00:28:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m07s) For the libraries And all you really did is you just linked it to this view This does give another situation where To every view that you want is pacifically library to be available You need to link it To that View Which wouldn't be a problem If you created a view now and just add your library and then add the Snippets Then I mean then you're starting a fresh and you will actually select the right views you want to use But if you since you haven't done this before all the components [00:28:46](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m46s) If you wanna use a library in the view You have to go and add it Or you just have to Basically in the components area fall back On the old way of implementing The the libraries that are built into JCB so that means the old implementation still work If you If you basically set it here to Add both Uikit version 1 and 2 and 3 [00:29:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m19s) And also Maybe to add food table version 2 those Implementations still work And doing that will add it to every custom and admin view where it's used Sorry Custom insite view custom admin view site view template layouts So that that's the old way and that still works it's just that when you want to start using like Bootstrap 4 You'll have to actually link it to the custom admin view or site view or template layout [00:29:53](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m53s) Where you want That specific library to be available So View link in Bootstrap over here Then it will be available to this layout and to every view where this layout is Used Ok so that's the quick and demonstration of the new Libraries implementation We call it a library manager [00:30:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m19s) Because of The Diverse ways of you linking in the files and so forth We really hope that you Understood then are able to enjoy this new implementation We want to Make it possible for you to add libraries And then basically share that snippets With the rest the community So those of you that interested in doing that Please watch some of the previous tutorials about Snippets and the snippet manager Because [00:30:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m50s) I think doing this will not only help everyone else in the community but also get your name I'm out there I get people connected with with each other Anyway Thank you for watching diff --git a/050-Easy-Translation-via-excel.md b/050-Easy-Translation-via-excel.md index d254232..cbe2340 100644 --- a/050-Easy-Translation-via-excel.md +++ b/050-Easy-Translation-via-excel.md @@ -1 +1 @@ -Out like to give you a Quick overview of the new implementation that we've had it To JCB That allows you to do translation We are a Excel spreadsheet It is really just to Make it easy for you to Build your component Extract your language strings Give it to someone else Have them do the translation in whichever language you like Have them give the spreadsheet back to you And imported into JCB without The necessary of struggling with Ini files any of that So that was what we wanted to achieve The other thing that you need to know Is a JCB Doesn't really work with placeholders When it comes to these translation strings It actually works directly with the English String And the reason we did that Is because the place holders Which in the Ini file is the Let me just show you Quickly If you look at these For example may be back This Word This English word here Might be ended up being used in multiple views the same English word But with a different Uno placeholder So What we did instead as we said to Ourselves ok To ensure that you always translate this Pacific English string only once We will only add the string and wherever it is reoccurs will replace it The string itself This should be an advantage I can understand that That you might want to have a different Lee But this is how we've gone about doing this And so when you think about create new Great new comes you know is used Many places over in In the Annoying the files It's sorry In relation to these placeholders But you only need to translate it this create new ones And we will add it The compiler will add it Correctly In every other place where it belongs So that's really The first thing you need to keep in mind The second thing which is Almost as important Is that you often have strings that are across multiple components So the string back for example again or cancel Clothes It is not only used in one component is used in many components And so we also said to Ourselves we want to still just translate clothes Once And then in every other component where it's used It will automatically be used And so when we go to JCB if you have a fresh install of JCB And you scroll down and your open language translations You see that there is no values there A same as if you opened languages there's also no values there If you want to have JCB Populate the translation the English strings So where does it get them what it gets them from your fields And from your side views And from Any other place either Your admin view or Hero Any other place where you use Translation strings In then it populates dynamically the language translation so you don't really ever need to click New To create any it creates it For you so the way to do that if you would go to the compiler You select the component that you would like to compile I need simply click compile and you need that do that only once how you can please clear that out again You don't need to use it Now if we go back to language translations Suddenly There's a whole bunch of things here and also tells you that it hasn't been translated and all So just that's quickly and we got I missed 200 49 strings here And like I said close will only be shown up once So It is with every other strain If we then open one of these You see that you cannot edit the English string now we've had request The people would like to edit the string but it doesn't really make sense because if the string is Being used In a Field How would we be able to know But their relationship here in his to change For example if you update a string here Now JCP needs to know In that field in needs to update the label for example There's no way for us to it Uno determine the at So uh basically change the string and it won't be useful Because it JCB on compilation Will deter will detect that this string doesn't exist Anel just crave it again To the way that you would change a string which is found here Is you need to go and change it in the decided The field where it was created Or the side view or the admin View And I mean in this case we know that this word Mo Is the components name right so if you wanna translate that string Oh sorry change that strain So for example I'll quickly demonstrate that I'm gonna change this demo to 2 hours Like that And then save and close Now I'll compile it again And just cleared out and then go back to our language translation And now You see the demo is gone because Demo is no longer being used anywhere Another component either so the system will automatically remove it If you go to the end of this string will see the new ones Have been added Seether So that's how you would Change a English string is you'd go back to where you said it And then from there haven't been change I'm gonna just change it back quickly And then compile it again Clear it out again Go back to language translations And you see that it's removed the other one and it's added to correct one back Now I'm gonna translate or I would like to translate only this one string And if I wanna do that You see that there's no language is available We decided to allow the languages to be set dynamically meaning That you would manually create them And use them as you like So there is an area called languages Youth click new here And then you'd give the language name and it's tag now the tag We've given you an example here But if you do not know how this should look There are ways for you to find out one of the easiest ways Is there actually just go to gym a Las translation area So if you go to community Data dot Org translations dot HTML And then you select I would say just use selective This one that's the newest And then you'll see there's a whole bunch of languages here Clicking on any of these Will take you down to that language And basically this is The little tag that you would be looking for So if you want to do for example Dutch Then this is the the one The the tag that you use You would use the Dutch as the name And then that Esther tag I'm gonna set up just for example I'm gonna setup Afrikaans Is my native language So Is it gonna use Afrikaans As the language we wanna create And obviously then this is the The tug And you can create any of the languages you want to use We might get some point at a few major languages here And ship it like that but Just that you know you could just create a language You Cannot create a translation for that language unless you've done this You must first create the language It is just the way it works Now we can go back and Let's take a string that Wood look different in Afrikaans So let's take also So now here if there's more components which the word author is used in It'll all be linked in here and it all be done automatically you wouldn't need to do any of that You will only really need to focus on this translation area so also in Afrikaans is Scriber Auto tier So will use the idea which is actually more correct And then Will you select the language for which that string belongs And then save and close Another simple as that From now on in any component Where the word author is used If The Afrikaans translation with relation to the other strings Is enough Dynamically add this language To the component And you would not need to translate it again Well this is all been the way it's been working up till now so this is none of this is new The area that is new He said you can actually export G-strings To a spreadsheet And then You can import them From the spreadsheet and it all dynamically be at it so I'm gonna just select a few strings here you don't need to select any of the already trans Slated strings But if you do it will also be used at it doesn't really matter I'm just gonna select a few And Click export data This will create a Excel Spreadsheet Which you can then save After open that spreadsheet and you see that it has a bunch ID is And then it has English It's got the The tug of the language And it's got the value that we already set So now I'm gonna set The value for these others in the spreadsheet So now you got your Language File back from your translators And they basically translated it This column Now you can have multiple language every every language will have its own column And Or do you need to ensure that this top header Is the language tag That's really what's important and that this language Is created and published in your system Do not let them change to English string When you import this file The system will look for the ID and the string To identify that this value exists If it doesn't exist it will simply ignore it So if you change also Even though the ID Remains the Same It will not find it and it will simply ignore this line On the way I'll demonstrate this is I'm just gonna change back to having to k's And Save this document And then let's go back and import it At import it is simple we just click on import data Then we select the file from our system Click upload file And it should dynamically map the columns in your spreadsheet To the Table columns so you would have Your language drinks if you got multiple language It should automatically map in If you are having multiple languages and you only one import for the one language Then all you need do is add this ignore the column next to the language as you do not want to m Report Ok and then you click continue And that is it you will now see That it has added translations Except for back Now At first it didn't actually had these so I had to quickly go and add it all fixed to the Ford I didn't realise that At the moment It actually would stop at the first failure And not import further But I've just fix that and shoot Within the next update this should be resolved Anyway Pointers Once you've imported it you'll see that it is added The translations to Those Strings And it's also mapped it to the correct language But back was not imported because the English string didn't actually correspond If we go back to our spreadsheet And fix this little error And in fact make a little tweak to What are the other strings Just for example sake And then go back to importing this file after Saving it of course Save So then import data Browse Nail see that back is been done And the other one that we also played with was disclosing new We added to the double T there So now you are able to export This language strings Translate the manner spreadsheet And easily import that spreadsheet Which word automatically update Your values here if you Have updated more than 50% of the end the English strings To a specific language It will automatically be added to your component You can change this percentage By going to options In JCB And then basically changing this Select the percentage any language should be translated before the system Should add the language to component during compilation So that means If more than 50% of your English strings have been translated It starts adding it to the component If not It will just ignore it Ok that is Giving you a QuickTime mistration of the new import export Option in translating The strings in your system And knowing that if you have translated any of these strings will only You need to do it once Any delay mummy be available to every other component that uses that field or that View And therefore these English strings Thanks for watching \ No newline at end of file +I"d like to give you a Quick overview of the new implementation that we've added To JCB That allows you to do translation via a [00:00:19](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m19s) Excel spreadsheet It is really just to Make it easy for you to Build your component Extract your language strings And give it to someone else Have them do the translation in whichever language you like Have them give the spreadsheet back to you And imported into JCB without The necessity of struggling with INI files any of that [00:00:47](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m47s) So that was what we wanted to achieve The other thing that you need to know Is that JCB Doesn't really work with placeholders When it comes to these translation strings It actually works directly with the English String And the reason we did that Is because the place holders Which in the INI file is the [00:01:13](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m13s) Let me just show you Quickly If you look at these For example may be back This Word This English word here Might be ended up being used in multiple views the same English word But with a different you know a placeholder [00:01:37](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m37s) So What we did instead as we said to Ourselves ok To ensure that you always translate this specific English string only once We will only add the string and wherever it is reoccurs will replace it The string itself This should be an advantage I can understand that That you might want to have a differently But this is how we've gone about doing this And so when you think about create new [00:02:09](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m09s) Create new comes you know is used Many places over in In the you know in the files sorry In relation to these placeholders But you only need to translate it this create new ones And we will add it The compiler will add it Correctly In every other place where it belongs [00:02:32](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m32s) So that's really The first thing you need to keep in mind The second thing which is Almost as important Is that you often have strings that are across multiple components So the string back for example again or cancel or close It is not only used in one component is used in many components And so we also said to Ourselves we want to still just translate close Once [00:03:00](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m00s) And then in every other component where it's used It will automatically be used And so when we go to JCB if you have a fresh install of JCB And you scroll down and your open language translations You see that there is no values there A same as if you opened languages there's also no values there If you want to have JCB Populate the translation the English strings So where does it get them well it gets them from your fields And from your site views [00:03:38](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m38s) And from Any other place either Your admin view or you know Any other place where you use Translation strings In then it populates dynamically the language translation so you don't really ever need to click New To create any it creates it For you so the way to do that if you would go to the compiler [00:04:04](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m04s) You select the component that you would like to compile And you simply click compile and you need that do that only once now you can just clear that out again You don't need to use it Now if we go back to language translations Suddenly There's a whole bunch of strings here and also tells you that it hasn't been translated and all So just that's quickly and we got Almost 249 strings here And like I said close will only be shown up once [00:04:37](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m37s) So It is with every other strain If we then open one of these You see that you cannot edit the English string now we've had request The people would like to edit the string but it doesn't really make sense because if the string is Is being used In a Field How would we be able to know That their relationship here needs to change [00:05:06](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m06s) For example if you update a string here Now JCB needs to know In that field in needs to update the label for example There's no way for us to it you know to determine that So you'd basically change the string and it won't be useful Because it JCB on compilation Will deter will detect that this string doesn't exist And it will just create it again So the way that you would change a string which is found here [00:05:35](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m35s) Is you need to go and change it in this either The field where it was created Or the site view or the admin View And I mean in this case we know that this word demo Is the components name right so if you wanna translate that string Oh sorry change that string So for example I'll quickly demonstrate that I'm gonna change this demo to two o Like that And then save and close [00:06:14](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) Now I'll compile it again And just cleared out and then go back to our language translation And now You see the demo is gone because Demo is no longer being used anywhere Another component either so the system will automatically remove it If you go to the end of the string will see the new ones Have been added See there So that's how you would [00:06:48](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) Change a English string is you'd go back to where you set it And then from there have it been changed I'm gonna just changed it back quickly And then compile it again Clear it out again Go back to language translations And you see that it's removed the other one and it's added to correct one back Now I'm gonna translate or I would like to translate only this one string And if I wanna do that [00:07:25](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) You see that there's no language is available We decided to allow the languages to be set dynamically meaning That you would manually create them And use them as you like So there is an area called languages You'd click new here And then you'd give the language name and it's tag now the tag We've given you an example here But if you do not know how this should look There are ways for you to find out one of the easiest ways [00:07:57](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m57s) Is there actually just go to Joomlas translation area So if you go to community .Joomla.Org/translations.HTML And then you select I would say just selective This one that's the newest And then you'll see there's a whole bunch of languages here Clicking on any of these Will take you down to that language And basically this is [00:08:24](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m24s) The little tag that you would look be looking for So if you want to do for example Dutch Then this is the the one The the tag that you would use You would use the Dutch as the name And then that as the tag I'm gonna set up just for example I'm gonna setup Afrikaans Is my native language So [00:08:54](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m54s) I'm just gonna use Afrikaans As the language we wanna create And obviously then this is the The tag And you can create any of the languages you want to use We might at some point at a few major languages here And ship it like that but Just that you know you could just create a language You Cannot create a translation for that language unless you've done this You must first create the language [00:09:28](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m28s) It is just the way it works Now we can go back and Let's take a string that Would look different in Afrikaans So let's take author So now here if there's more components which the word author is used in It'll all be linked in here and it all be done automatically you wouldn't need to do any of that You will only really need to focus on this translation area so author in Afrikaans is skrywer or outeur [00:10:11](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m11s) So will use the outeur which is actually more correct And then Will you select the language for which that string belongs And then save and close And that is as simple as that From now on in any component Where the word author is used If The Afrikaans translation with relation to the other strings Is enough [00:10:35](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m35s) It'll dynamically add this language To the component And you would not need to translate it again Now this is all been the way it's been working up till now so this is none of this is new The area that is new Is that you can actually export these strings To a spreadsheet And then You can import them [00:11:04](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m04s) From the spreadsheet and it will dynamically be added so I'm gonna just select a few strings here you don't need to select any of the already translated strings But if you do it will also be used if it doesn't really matter I'm just gonna select a few And Click export data This will create a Excel Spreadsheet [00:11:32](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) Which you can then save I have now open that spreadsheet and you see that it has a bunch IDs And then it has English It's got the The tag of the language And it's got the value that we already set So now I'm gonna set The value for these others in the spreadsheet So now you got your Language [00:12:00](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m00s) File back from your translators And they basically translated it This column Now you can have multiple language every every language will have its own column And All you need to ensure that this top header Is the language tag That's really what's important and that this language Is created and published in your system Do not let them change to English string [00:12:29](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m29s) When you import this file The system will look for the ID and the string To identify that this value exists If it doesn't exist it will simply ignore it So if you change author Even though the ID Remains the Same It will not find it and it will simply ignore this line On the way I'll demonstrate this is I'm just gonna change back to having to k's And Save this document [00:13:00](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m00s) And then let's go back and import it Now the imported is simple we just click on import data Then we select the file from our system Click upload file And it should dynamically mapped the columns in your spreadsheet To the Table columns so you would have Your language strings if you got multiple language It should automatically mapped in If you are having multiple languages and you only one import for the one language [00:13:35](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s) Then all you need do is add this ignore the column next to the language as you do not want to import Ok and then you click continue And that is it you will now see That it has added translations Except for back Now At first it didn't actually add these so I had to quickly go and add a little fixed to the import I didn't realize that [00:14:06](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m06s) At the moment It actually would stop at the first failure And not import further But I've just fix that and should Within the next update this should be resolved Anyway the point is Once you've imported it you'll see that it is added The translations to Those [00:14:27](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m27s) Strings And it's also mapped it to the correct language But back was not imported because the English string didn't actually correspond If we go back to our spreadsheet And fix this little error And in fact make a little tweak to What are the other strings Just for example sake And then go back to importing this file after Saving it of course Save [00:15:02](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m02s) So again import data Browse Now you'll see that back is been done And the other one that we also played with was disclosing new We added to the double T there So now you are able to export This language strings Translate them in a spreadsheet And easily import that spreadsheet Which word automatically update [00:15:38](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m38s) Your values here if you Have updated more than 50% of the English strings To a specific language It will automatically be added to your component You can change this percentage By going to options In JCB And then basically changing this Select the percentage any language should be translated before the system Should add the language to component during compilation [00:16:12](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m12s) So that means If more than 50% of your English strings have been translated It starts adding it to the component If not It will just ignore it Ok that is Giving you a quick demostration of the new import export Option in translating The strings in your system And knowing that if you have translated any of these strings will only [00:16:41](https://www.youtube.com/watch?v=q5NwKGnOHoQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m41s) You need to do it once And it will dynamically be available to every other component that uses that field or that View And therefore these English strings Thanks for watching diff --git a/051-Dynamic-Router-Implementation-Explained.md b/051-Dynamic-Router-Implementation-Explained.md index 6a801b2..867fa33 100644 --- a/051-Dynamic-Router-Implementation-Explained.md +++ b/051-Dynamic-Router-Implementation-Explained.md @@ -1 +1 @@ -I would like to demonstrate to you the new implementation Which isn't such a major thing but Something we've done to try and Help along some of the route to complexity So when you build a component And you have a front end For your component so you've got site views Your site views usually are getting it's data from a dynamic get Which you link up to the site View I just wanna make get basically returns her anyway Resultset As from this result set That we should get information By which we Combined with the view name Build what his called in Search engine friendly URL By your search engine friendly you always basically done with the router So JCB also built the router And a sort of guess is What should be these values So let me compile a component And show you what it guessed And then see how we women need to change it Ja component we working with here is so minister buter So I'm gonna compile it And I stole it to this website Your ass now the router doesn't really work I'm not gonna demonstrate Hot Dove actual front-end I'm just gonna show you the code And And let's take it from there So when you look at the website you've got your root directory admin And then components And then in here we've got some of those two And there's a file called router I'm gonna open this And you'll see there's got a function called build I'm a class method As well as a functional Pass I'm in this function Call Pass There is a switch Which basically Makes decisions based on the segments First value And if that segment value is Because usually that would be the view name In this forest Value Toyota termin switch Which view are we looking at is it preacher So we going through the list Now by Default without us You know making any changes JCB Builders for us All of it So If we look at preachers Which is a Basically a listview Let's open the preacher model So here is peaches We can scroll down And we'll see that In its Query It's basically get as a get items and here's got a list query And it really is just getting all the items from Database With no input from the URL whatsoever Let's see Yeah it doesn't do any of that and then it just Gives back So it's a simple as that It does not Need a euro value So that means it most probably will only Set this verse Value And all of this will really be that redundant it won't be used Because it's a listview So there isn't an alias We not looking at an individual item so there isn't an ID So we could Actually remove this year This code It's not doing anything Now It is also not gonna really Slow your site down that Dramatically it's fact it's it's hardly noticeable It's it's just that this is default Being generated Where us if we look at for example Preachers is there list view but then there is a view called preacher we see it here And it is saying that It needs to get the ID from Discernment able Which is actually in error So if I open the preacher And I look at the list query Then I see that in the list query about here It is getting an ID From the URL And it is asking that it should be equal to preacher So It is the main table is Is the Sermon table But it's not looking for the Sermon ID It is looking for the preacher Value in the Sermon table and that's why Jjc be fell back onto the table name And yet It should actually go to the preacher Table and See weather That future value is equal to this ID So it is actually Making an area Now you wrote the code or you set up the gate so you should understand the logic of what you see in the code here If you do not Then This is a feature with JCB has would you possibly won't be able to you know make use of Like we've said many times JCB is for those who know PHP And can actually write their own components Now I know that this is an error because we want to actually get the value the ID Of the preacher Is the one we need to check And it is is doing it wrong it should This value here should be preacher not sermon You can look at the Gateway are class you're at the bottom Yours to get bar cast And here you can see what it's going to do And how it's going to actually get the values So you can also use the get wow class Well you know for your own purpose So At this point we see at least one of the Router case Within the pass method In the case loop there's at least one A router area that needs to be changed I know by having looked at this before That there is actually more than one it's also this categories Down here This one Should also change This should also become Well actually it should just get a true Here FNB true because this is a category Look up Now the other place it also need to change is this one There should also be series So this is where the guessing which JCB doesn't Dynamically Did not match the complexity of our Dynamic get And I'm I'm sure that as time goes on we might Improve it's Guessing Ok we might get better ways of guessing correctly And Within the dynamics of the dynamic get Be able to actually build this case more effectively but Since we have not done that yet The quickest way for us to resolve this and which most probably be the most Dynamic option Is actually adding a way that you can replace the snippet of code Targeting the specific View So you'll never need to really know what is the view When you do this because they are placeholders And you need only remember where you at your dynamic Get So let me go and illustrate this within the JCP interface So all I wanted to show show you here is that we are actually targeting with this new Dynamic improvement age This little snippet This area here We not replacing the whole method Because really it is it is standard there's not much to do in Improving that and if we do it will be just improving it for everyone And the built function that really works well I haven't seen any issues with that So At the end of the day it seems like only the past method Needed a bit of an improvement So let's go back to the interface and let me let me show you Where we can make the changes To have the the category render correctly As well as the preacher This one here as well as the series where there's that one Parodies At what is this one Basically make the changes so that this will say Series And That this one will say true And this one This preacher would also say Preacher That's basically all we need to do and then this router Will work Without any errors Ok So here in the interface you have site views Now the site views the ones we wanted make changes to his this preacher The series and the category now I'm gonna show this to you little bit Long winded but Bear with me It's just make sure everybody say on the same page If you open preacher You would see that it has a dynamic Get called Sermons preacher ID and it say get list query Ok so This is the one We want to change They they get So that I may get As well as speaking about serieses The same is true of that We have this List query get series ID Sermons that we also want to change And so we not changing it in the view The idea was That if we change it in the dynamic get it automatically Right to correct code to whatever view you add it because we've added some custom Scripting Sorry placeholders within the script So let's take the first one is this sermon Where is it Sermon series So in custom script we scroll down to the bottom there is now a new Tab here option here Add PHP Pass method in routed little bit of explanation there Tick yes Any two Dynamic to load What is what I can consider the most basic implementation of that little snippet So you see it looks very familiar it's got his place holders And it has a specific It has a specific S View placeholder That's because we're dealing with the site View And it does to have this s in it To replace it with the site view name So wherever this is gonna you be used this this Dynamic get This Would be replaced with that specific site views a value Ok that's just to give you a heads up About the place holder and that's what makes it dynamic So that you can use it in any site view and it will automatically write this Because really the the display of the page is actually based on the database request right Which is built in the URL by the name of the view As well as the ID of the element And if there are multiple variables being passed To the Yeah - they are your l You can obviously update that and Replace multiple values So Here we want to within this one Did the default option here will actually resolve our issue because Remember these two values were not the same JCB Dynamic build actually change this value to Sermon instead of Leaving it The same And there is a very good reason For that Usually this would be the correct response but in this case because of complexity I'm not gonna explain It isn't the correct response and so you want these two values to be the same And it is basically the site to Vuze name So we could just save it close this The next 1 Min wanna do is this sermon preacher And it was also Having the same issue basically So we We gonna do the the same kind of Just add the the custom Option To ensure that these two values remain the same And then the last but not least was this category 1 It is also behaving Incorrectly And really it's only because it Didn't detect That this is actually category And that is primarily because it is using the Sermon table 2 - start instead In the cement table We have a joint here 2 Two category If you can see there And so it does load the category ended In the tweak You see that we are actually using This ID And this is a category ID So it should actually go look for the category And Botha the pass method based on the category And so Your We also gonna Just Add A true Today's get far Which tells the get far That method that this is actually a category This this name In effect is actually gonna be ignored Because it's gonna not be looking for this tables value is gonna go to the category table And look for the value there Ok so this will resolve this this issue We can save and close this one So now we have Done some customisation to our router Just by adding those Values to the dynamic get If we compile our components now Inner arm attic24 back onto Unto those Values Just Stolen again And I'll let's go look at the code So we see here That it did exactly what he wanted it added preacher preacher there And this is now Categories true And We see the series is series And so now at least we know that this actual The router will behave correctly This is the first step of our improvement to the router It seems to me that we already have a very workable Situation and this is really gonna make it too much better There was also the idea of adding some custom scripting into the built Method And we will look at that And I am invite You and anyone else too To get involved On this on get up just if you know how to improve his even more Then please I get in contact with me and let's let's work together This is so what we've done so far But like an all iterative developing concepts We'll continue improvement Proving this To the point where it really serves as well And holds up with changes also happening in gym about self Ok well thanks for watching \ No newline at end of file +I would like to demonstrate to you the new implementation Which isn't such a major thing but Something we've done to try and Help along some of the router complexity So when you build a component And you have a front end [00:00:17](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m17s) For your component so you've got site views Your site views usually are getting it's data from a dynamic get Which you link up to the site View and this dynamic get basically returns a Resultset and it is from this result set That we should get information By which we Combined with the view name Build what is called a [00:00:46](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m46s) Search engine friendly URL your search engine friendly URL is basically done with the router So JCB also builds the router And it sort of guesses what should be these values So let me compile a component And show you what it guessed And then see how we would need to change it the component that we're working with here is Sermon Distributer So I'm gonna compile it And install it to this website [00:01:16](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) as now the router doesn't really work I'm not gonna demonstrate the actual front-end I'm just gonna show you the code And And let's take it from there So when you look at the website you've got your root directory admin And then components And then in here we've got Sermon Distributer And there's a file called router [00:01:44](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m44s) I'm gonna open this And you'll see there's got a function called build I'm a class method As well as a function called parse and in this function called parse There is a switch Which basically Makes decisions based on the segment's First value [00:02:08](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m08s) And if that segment's value is Because usually that would be the view name In this first Value it determines which view are we looking at is it preacher And so we going through the list Now by Default without us You know making any changes JCB Builders for us [00:02:31](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m31s) All of it So If we look at preachers Which is a Basically a listview Let's open the preacher model So here is preachers We can scroll down And we'll see that In its [00:02:51](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m51s) Query It basically has a get items and here it got a list query And it really is just getting all the items from Database With no input from the URL whatsoever Let's see Yeah it doesn't do any of that and then it just Gives back So it's a simple as that It does not Need a URL value [00:03:18](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m18s) So that means it most probably will only Set this verse Value And all of this will really be redundant, it won't be used Because it's a listview So there isn't an alias We not looking at an individual item so there isn't an ID So we could Actually remove this here This code [00:03:44](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) It's not doing anything Now It is also not gonna really Slow your site down that Dramatically it's fact it's it's hardly noticeable It's it's just that this is default Being generated Where us if we look at for example Preachers is the list view but then there is a view called preacher we see it here And it is saying that [00:04:09](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m09s) It needs to get the ID from Discernment table Which is actually in error So if I open the preacher And I look at the list query Then I see that in the list query about here It is getting an ID From the URL And it is asking that it should be equal to preacher So [00:04:34](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) It is the main table is Is the Sermon table But it's not looking for the Sermon ID It is looking for the preacher Value in the Sermon table and that's why JCB be fell back onto the table name And yet It should actually go to the preacher Table and See weather [00:04:59](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m59s) That preacher value is equal to this ID So it is actually Making an error Now you wrote the code or you set up the get so you should understand the logic of what you see in the code here If you do not Then This is a feature with JCB has with you possibly won't be able to you know make use of Like we've said many times JCB is for those who know PHP And can actually write their own components [00:05:29](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m29s) Now I know that this is an error because we want to actually get the value the ID Of the preacher Is the one we need to check And it is is doing it wrong it should This value here should be preacher not sermon You can look at the getVar class here at the bottom Here is the getVar class And here you can see what it's going to do And how it's going to actually get the values [00:05:56](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m56s) So you can also use the getVar class for your own purposes So At this point we see at least one of the Router case Within the parse method In the case loop there's at least one router area that needs to be changed I know by having looked at this before That there is actually more than one it's also this categories [00:06:25](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m25s) Down here This one Should also change This should also become Well actually it should just get a true Here there should be true because this is a category Look up Now the other place it also need to change is this one There should also be serious [00:06:43](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m43s) So this is where the guessing which JCB does Dynamically Did not match the complexity of our Dynamic get And I'm sure that as time goes on we might Improve it's Guessing Ok we might get better ways of guessing correctly And Within the dynamics of the dynamic get Be able to actually build this case more effectively but Since we have not done that yet [00:07:17](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) The quickest way for us to resolve this and which most probably be the most Dynamic option Is actually adding a way that you can replace the snippet of code Targeting the specific View So you will never need to really know what is the view When you do this because they are placeholders And you need only remember where you at your dynamic Get So let me go and illustrate this within the JCB interface So all I wanted to show you here is that we are actually targeting with this new Dynamic implementation [00:07:53](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m53s) This little snippet This area here We not replacing the whole method Because really it is it is standard there's not much to do in Improving that and if we do it will be just improving it for everyone And the built function it really works well I haven't seen any issues with that So At the end of the day it seems like only the parse method Needed a bit of an improvement So let's go back to the interface and let me let me show you [00:08:22](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m22s) Where we can make the changes To have the the category render correctly As well as the preacher This one here as well as the series ........... ............ Basically make the changes so that this will say Series And That this one will say true [00:08:48](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m48s) And this one This preacher would also say Preacher That's basically all we need to do and then this router Will work Without any errors Ok So here in the interface you have site views Now the site views the ones who wanna make changes to his this preacher The series and the category now I'm gonna show this to you little bit [00:09:15](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m15s) Long winded but Bear with me It's just make sure everybody is on the same page If you open preacher You would see that it has a dynamic Get called Sermons preacher ID and it say get list query Ok so This is the one We want to change [00:09:35](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m35s) The get the dynamic get As well as speaking about serieses The same is true of that We have this List query get series ID Sermons that we also want to change And so we not changing it in the view The idea was That if we change it in the dynamic get it automatically [00:09:57](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m57s) Right to correct code to whatever view you add it because we've added some custom Scripting Sorry placeholders within the script So let's take the first one is this sermon Where is it Sermon series So in custom script we scroll down to the bottom there is now a new Tab here option here Add PHP Parse method in router little bit of explanation there [00:10:29](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m29s) click yes And it will Dynamically load What is what I can consider the most basic implementation of that little snippet So you see it looks very familiar it's got his place holders And it has a specific It has a specific S View placeholder That's because we're dealing with the site View And it has to have this s in it To replace it with the site view name [00:10:55](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m55s) So wherever this is gonna be used this this Dynamic get This Would be replaced with that specific site view's value Ok that's just to give you a heads up About the place holder and that's what makes it dynamic So that you can use it in any site view and it will automatically write this Because really the the display of the page is actually based on the database request Which is built in the URL by the name of the view As well as the ID of the element And if there are multiple variables being passed [00:11:32](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) To the URL You can obviously update that and Replace multiple values So Here we want to within this one Did the default option here will actually resolve our issue because Remember these two values were not the same JCB's Dynamic build actually changed this value to Sermon instead of [00:11:57](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) Leaving it The same And there is a very good reason For that Usually this would be the correct response but in this case because of complexity I'm not gonna explain It isn't the correct response and so you want these two values to be the same And it is basically the site view's name So we could just save it close this The next one we wanna do is this sermon preacher And it was also [00:12:25](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m25s) Having the same issue basically So we We gonna do the the same kind of Just add the the custom Option To ensure that these two values remain the same And then the last but not least was this category It is also behaving Incorrectly And really it's only because it [00:12:47](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m47s) Didn't detect That this is actually category And that is primarily because it is using the Sermon table To to start instead In the Sermon table We have a joint here too category If you can see there And so it does load the category and [00:13:12](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m12s) the tweak You see that we are actually using This ID And this is a category ID So it should actually go look for the category And build the parse method based on the category And so here We also gonna Just Add [00:13:33](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m33s) A true To this getVar Which tells the getVar method that this is actually a category This this name In effect is actually gonna be ignored Because it's gonna not be looking for this tables value is gonna go to the category table And look for the value there Ok so this will resolve this this issue We can save and close this one [00:13:59](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) So now we have Done some customisation to our router Just by adding those Values to the dynamic get If we compile our components now It will automatically fall back Unto those Values Just install again [00:14:21](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) And now let's go look at the code So we see here That it did exactly what he wanted it added preacher preacher there And this is now Categories is true And We see the series is series And so now at least we know that this actual The router will behave correctly This is the first step of our improvement to the router [00:14:49](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m49s) It seems to me that we already have a very workable Situation and this is really gonna make it too much better There was also the idea of adding some custom scripting into the built Method And we will look at that And I invite You and anyone else too To get involved On this on GitHub just if you know how to improve his even more Then please [00:15:16](https://www.youtube.com/watch?v=hYycPLbaMos&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m16s) I get in contact with me and let's let's work together This is so what we've done so far But like an all iterative developing concepts Will continue improving this To the point where it really serves as well And holds up with changes also happening in Joomla itself Ok well thanks for watching diff --git a/052-Automated-database-updates-in-Joomla-during-development-of-a-component.md b/052-Automated-database-updates-in-Joomla-during-development-of-a-component.md index 6ef6c74..b51d3f8 100644 --- a/052-Automated-database-updates-in-Joomla-during-development-of-a-component.md +++ b/052-Automated-database-updates-in-Joomla-during-development-of-a-component.md @@ -1 +1 @@ -I would like to give you a explanation As well as demonstration Of how JCB deals with jamalife Implementation Morning regards to creating off Database tables As well as updating them or even adding more You was a way of doing this through specific file convention Within your components file structure Package JCB is also been Designed to actually detect changes in your component development And create with files for you The best way to illustrate this is well this is compile a component So we have Similar to Beauty here Who's gonna compile that for us And then we'll go to the zip file Unzip it Have a look at it And see those files Videos of Thailand business extracted here An inside of this we have an admin folder and inside admin a sepal folder And here is the first fire with interest It's what you mean I use this to actually build a database upon the first install of the component Do take note that it runs this file only on a fresh install of the component Thereafter it will not run it again even if that's file gets updated Even if more values get added and usually it does JCB updates this file as you create new table New views which in Then it means and you table And if you add Fields which means a new column or field in the database And so This file update but it is for those Clients of yours that it couldn't install the component for the first time all those who already have the component installed This far will mean nothing to them All the files in this update folder Is what would actually be relevant If you have a client Which has version 1.3.2 installed Honour system Any gets this package from you this 2.0.0 Package Actually Start with This file Then that one and so forth It will start with a Fire which is the same Version as the version that is currently installed on The Joomla website So That means JCB builds these files In that expected way Ok Now let's go make a change to the component and see how JCB updates these files Just gonna install the component So we have it in the database We can look at the database in the moment To see how things change Now I'm gonna open the admin views and I'm gonna add A field To be at the at The View called sermon Is it gonna be any generic field So that we can at least see it in action I'm gonna call it mobile telephone And Just put in the fourth position The left tab that's not really important but Ok so there we go Reality fuel No you could at this point also add a new view and JCB world take both of them And will add both of them to the update file But You could even do that You know Make this change run the compiler Have this new update Then make it out of Change run the compiler and it'll follow along Incrementally Incrementing the diversion Value of the component As you go Just for our sake Maybe let me add a view Already in another View And then you'll see how they should be combined to these values N21 update So I'm going to grab a If you that isn't already part of this component And just where does stration Save and close Today we go we gotta view and it a new field If we compile the component now It will Do all those things that I've explained The receive its increment ID into 2.0.1 And if we go to the zip file Regain extracted open it up at 9 Sequel Updates When I'll see you there is actually a new file let's open this file Justin Investigate a little So we see here's the Command to actually add that new field And here is another one To create That new table And all of that is been placed into this 2 Dot co.za File Which like I said is the current version Of this installed Component If we look at the database at this point You see there there is no Look table And if we look at the Sermon table and structure Then we see that there is you know No Mobile field here Ok so that's install it now and see the change Ok it's been successful go back to the table Fastest refresh this I know you have it Got field added Africa back to the new table that it had to create Scroll down And there is the new table So it's done both of those as expected Secondly let me show you where it made some changes in JCB To relation to this component Will see that the component has automatically incremented it's version number If we open this component updates area You see that it has dynamically Store the same values that we saw on the file here next to the correct version And it is actually created a new Version entry You have to manually update this URL As there are too many variations here we couldn't actually implement This Dynamic Lee Is this your L is what is being used in your updates server file If your component is said to have an update server file And so At this point You can now continue even adding another view or even another field L just the same it Winkler meant it and it will update your database upon installation And really that is as simple as it is There are some places where that behaviour may not function as expected The only one I'm very much aware of is the one that happens when you Actually import Or Export a component from one JCB to another There's a few that have used this you can export a component and then Import It Again That effectively creates all the data in the relation to JCP but it does Recreate the history and the acid it is and everything else which is related to its end Integration Within the Joomla Interface or Database So that means for example your There is no history Regarding the admin views And the only way to start any history for that View Would be to open it And to save and close it That's the only way Now that specific area will have a history track Same goes with the admin Fields reviews You have to open them and save them This one not not there Open view itself but the actual Fields of the app review Open them save them again This will create its first entry and serve as a reference point The last time to the which those values were changed If you compile the component that point it will actually Add two component ID to that specific entries And use it as a reference point like I've said Then having after having compiled it so you first saved them then compile the component And then only start making your changes So that you'll basically Bring the component into the motion of What would be the natural com Flow of development This natural flow that you would Create a component add views then add Fields to it all along saving closing saving And that generates the history values that we actually need To detect changes If you import a component none of those values exist and so It won't behave is expected Well that's just a heads up I supposed many of you might not even have this issue but If you do You will know at least where to look and what to do to fix it Anyway that is a Quick overview of JCB Implementation To correspond to Gmail as conventions In creating tables And updating them Dynamically Through The Secret Files In the updates folder And yes I hope that This is gonna be helpful to to those who view that may not have understood this before Thanks for watching \ No newline at end of file +I would like to give you a explanation As well as demonstration [00:00:06](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m06s) Of how JCB deals with Joomla's Implementation when regards to creating of Database tables As well as updating them or even adding more Joomla's way of doing this through specific file convention Within your components file structure Package JCB is also been Designed to actually detect changes in your component development [00:00:37](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m37s) And create with files for you The best way to illustrate this is well just let's compile a component So we have sermon distributer here that's gonna compile that for us And then we'll go to the zip file Unzip it Have a look at it And see those files extracted here [00:01:04](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m04s) And inside of this we have an admin folder and inside admin ,a SQL folder And here is the first file of interest that's what Joomla uses to actually build a database upon the first install of the component Do take note that it runs this file only on a fresh install of the component Thereafter it will not run it again even if that's file gets updated Even if more values get added and usually it does JCB updates this file as you create new views which in Then it means a new table And if you add Fields which means a new column or field in the database And so [00:01:46](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) This file update but it is for those Clients of yours that it couldn't install the component for the first time all those who already have the component installed This file will mean nothing to them All the files in this update folder Is what would actually be relevant If you have a client Which has version 1.3.2 installed on his system Any gets this package from you this 2.0.0 [00:02:14](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m14s) Package It will Actually Start with This file Then that one and so forth It will start with a File which is the same Version as the version that is currently installed on The Joomla website So [00:02:34](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m34s) That means JCB builds these files In that expected way Ok Now let's go make a change to the component and see how JCB updates these files Just gonna install the component So we have it in the database We can look at the database in the moment To see how things change Now I'm gonna open the admin views and I'm gonna add [00:03:07](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m07s) A field To the admin View called sermon Is it gonna be any generic field So that we can at least see it in action I'm gonna call it mobile telephone And Just put in the fourth position The left tab that's not really important but Ok so there we go We added a field [00:03:34](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m34s) Now you could it disappoint also add a new view and JCB will detect both of them And will add both of them to the update file But You could even do that You know Make this change run the compiler Have this new update Then make another change ,run the compiler and it'll follow along Incrementally Incrementing the the version [00:04:01](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m01s) Value of the component As you go Just for our sake Maybe let me add a view Already in another View And then you'll see how JCB combines to these values in one update So I'm going to grab a view that isn't already part of this component And just for illustration [00:04:26](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) Save and close There we go we gotta view and it a new field If we compile the component now It will Do all those things that I've explained There you see it's incremented into 2.0.1 And if we go to the zip file again extracted open it up admin Sequel Updates [00:04:53](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m53s) we now see there is actually a new file. Let's open this file just Investigate a little So we see here's the Command to actually add that new field And here is another one To create That new table And all of that is been placed into this .... 2.0.0 [00:05:16](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m16s) File Which like I said is the current version Of this installed Component If we look at the database at this point You see there is no Look table And if we look at the Sermon table and structure Then we see that there is you know No [00:05:36](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m36s) Mobile field here Ok so that's install it now and see the change Ok it's been successful go back to the table Let's just refresh this I know you have it Got field added if we go back to the new table that it had to create Scroll down And there is the new table So it's done both of those as expected [00:06:09](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m09s) Secondly let me show you where it made some changes in JCB To relation to this component so you'll see that the component has automatically incremented it's version number If we open this component updates area You'll see that it has dynamically Stored that same values that we saw on the file here next to the correct version And it is actually created a new Version entry You have to manually update this URL As there are too many variations here we couldn't actually implement this dynamically [00:06:49](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m49s) this URL is what is being used in your updates server file If your component is set to have an update server file And so At this point You can now continue even adding another view or even another field and it'll just the same it'll increment it and it will update your database upon installation And really that is as simple as it is There are some places where that behaviour may not function as expected The only one I'm very much aware of is the one that happens when you Actually import [00:07:32](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m32s) Or Export a component from one JCB to another Those of you that have used this you can export a component and then Import it Again That effectively creates all the data in the relation to JCB but it does'nt Recreate the history and the asset IDs and everything else which is related to its Integration Within the Joomla Interface or Database So that means for example your There is no history [00:08:08](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) Regarding the admin views And the only way to start any history for that View Would be to open it And to save and close it That's the only way Now that specific area will have a history track Same goes with the admin views You have to open them and save them This one not the admin view itself but the actual Fields of the admin view [00:08:36](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m36s) Open them save them again This will create its first entry and serve as a reference point To last time to the which those values were changed If you compile the component at that point it will actually Add two component ID to that specific entries And use it as a reference point like I've said Then having after having compiled it so you first saved them then compile the component And then only start making your changes So that you'll basically Bring the component into the motion of What would be the natural [00:09:16](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m16s) Flow of development This natural flow that you would Create a component add views then add Fields to it all along saving closing saving And that generates the history values that we actually need To detect changes If you import a component none of those values exist and so It won't behave as expected Well that's just a heads up I supposed many of you might not even have this issue but If you do You will know at least where to look and what to do to fix it [00:09:51](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m51s) Anyway that is a Quick overview of JCB's Implementation To correspond to Joomla's conventions In creating tables And updating them Dynamically Through The SQL Files In the updates folder And yes I hope that [00:10:16](https://www.youtube.com/watch?v=zN2M15fzf_M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m16s) This is gonna be helpful to to those who may not have understood this before Thanks for watching diff --git a/053-Quick-Subform-Demonstration.md b/053-Quick-Subform-Demonstration.md index 6facfd4..ef92ae6 100644 --- a/053-Quick-Subform-Demonstration.md +++ b/053-Quick-Subform-Demonstration.md @@ -1 +1 @@ -A present they had this Request on the Forum By Marco Regarding some help with Sub forms How to generate a subform itself writing in JCB Where to find the XML details in relation to repeated subform fields in View How the date of the subform is populated How posted data of a subform is validated How the data of a subform is processed and Persisted My Samsung is it above is done as part of JCB and would not require manual construction Of XML files Reduce Google find an answer to no avail Yes At the moment We have Only made tutorials about I think repeatable fields And repeatable Fields as such has been discontinued I don't think I've actually made it story about subforms as yet So here it goes let's do it Ok first thing First Subforums have fields in them that much we know right So if we gonna go to component for example and it's a we open this app and view We are actually looking at a subform ride this is a subform And each of these little Fields here is a field in the subform And actually is only an ID which you need to add to create Getting the stuff form so what do you do if your first create what this is a dynamic Custom field The basically grabs values out of the admin view so this is a custom field this one You create that one this is a list field You create list field this is a checkbox so you basically create these Fields First That's the first thing you do you create a field you wanna use in the subform So for our purposes I'm gonna use existing fields I just to saute demonstrate Ok so we've got what we have the description mobile number name we got a few Fields here Ok so First we wanna create a new field So I'm gonna Fastest creator Open the warehouse open so I can get the ID is So then here click new And basically select subform right Sop form there we go N8 actually populates your XML for you Now something tells me That If you haven't actually looked at all the tutorials That is available on Google Sorry on YouTube Then a lot of us were maybe not even make sense of what I'm doing where I'm doing it and all that and So For those that maybe just seeing this video for the funeral haven't watched any of the other tutorials Please go to YouTube and type in Joomla component Builder And try to find the playlist there's old playlist full of tutorials Start at the top working through way down it so many tutorials many hours that I've spent trying to t Teach And by people in using this component and I know it does tutorials will make you You quite able to build amazing things Ok so I'm gonna just leave this options the option list This form source if you read here you can add a path to an XML file containing the field So you can add a custom A XML file to your component how to add custom files to component hold not a topic it's It's also possible within your controller component to add files and folders all those kind of things But that means this specific source can still be used but you don't need to If you Use the fields Option then you basically need to remove the source option right only one of them so I need the fields All the fields form source So these are the two options I see it's currently set to mandatory the fields But I think you can change that Going to the few pipes change that to optional And then that you can select other Fields or field source form source I think the compiler will in any case if it it takes it there is a form source it will behave correctly Ok so here we need to add the ID is so we can come here and I want to have a name Sources 199 I just add 199 and 8 comma And then let's add something else let's say Website 280 So it's 280 And let's do an email as well Where is it There's no email here oh there's an email And it's 100 Ok so where That in place we can add a description We can add a maximum A filter a show on I'm just gonna leave this the validation of these fields I think That is an area which I haven't actually looked into But if I'm correct And also the reason why they moved away from repeatable fields Is that every field is validated On its own merit So for example The name field If you create a name field you're obviously Saying ok I want this to be a string and it has this filter string Value And since this is part of the XML it will be validated on this I can be mistaken here And yeah I haven't actually looked at the code so my dad but that's That's what I anticipate it will do most cases I would say Anticipate that it doesn't and try and do some custom scripting I'm not gonna illustrate that now Are you need to Actually no little bit more about JCB which there are tons of the toriel stew show you How to do custom scripting all around it component and even to do custom scripting anywhere and in Any area of the component through the custom code area implementation So I'm gonna talk more about that now So For now we want to Just Make sure it got all the spelling right here Ok good I'm gonna save this just give it a name Options and test so I can see it This obviously I would make A text The default means that JCB already Store method It already has The air it will detect that this is a sub Form Animal add the needed PHP in storing the file and in loading the file into the form again So that takes care of that So you don't need to actually say Jason it it will On its own by its default to the correct implementation here so you need to sort it out it click Text or medium text depending on what this value is gonna be Anyway I think 4:50 text is quite enough And that's it saving close Ok Sorry about that Elspan there Let's see with got that field here it is I'm gonna just add it to any view for now Let's see I'm gonna add it to this look View Just so we can see it in action Zelda look beauty part of the demo component So I'm just gonna dump it in here that's y Above to have full with details A description I think let's just add it there Details also full width Naked the 2nd And I say Options And then we got a test right Ok save and close so we've added it to a view Now I'm just gonna compile this component which the view belongs to Which at this stage it is demo Uninstall it Now let's go open that component And let's open a look And here we go name enter name here enter website address enter email Matric there And our values are there Let's you save 1 High Children We can do I think that's the only one that's Oh yes you do have Let's do that and why enter those values and then some Value Sorry And I'm just gonna grab this Appear Basted in there few times Just gonna put here Jamala at VDM driver Put that in here Together sort of a feel for it Ok save Ok it's saved the values it loaded it back it's done all of that high There Rand 7 close ISO If we open it again It it shows it up again And now we can shuffle it Let me just put Number for Top So close And open again And so it is loading it also correctly Ok well that's a quick dinner station Marco I hope this helps And getting you able to use subforms With JCB Is as easy as that Thanks for watching \ No newline at end of file +I recently had this Request on the Forum By Marco Regarding some help with Sub forms How to generate a subform itself writing in JCB Where to find the XML details in relation to repeated subform fields in View How the data of the subform is populated How posted data of a subform is validated [00:00:32](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) How data of a subform is processed and Persisted My assumption is it above is done as part of JCB and would not require manual construction Of XML files Googled but found an answer to no avail Yes At the moment We have Only made tutorials about I think repeatable fields [00:01:01](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m01s) And repeatable Fields as such has been discontinued I don't think I've actually made a tutorial about subforms as yet So here it goes let's do it Ok first thing First Subforums have fields in them that much we know right So if we gonna go to component for example let's say we open this admin view We are actually looking at a subform right this is a subform And each of these little Fields here is a field in the subform And actually is only an ID which you need to add to create [00:01:44](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m44s) the subform so what do you do if your first create what this is a Custom field That basically grabs values out of the admin view so this is a custom field this one You create that one this is a list field You create list field this is a checkbox so you basically create these Fields First That's the first thing you do you create a field you wanna use in the subform So for our purposes I'm gonna use existing fields I just to sort of demonstrate Ok so we've got what we have the description mobile number name we got a few Fields here Ok so [00:02:27](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m27s) First we wanna create a new field So I'm gonna First create Open that we have both open so I can get the IDs So then here click new And basically select subform right Subform there we go and it actually populates your XML for you Now something tells me That [00:03:00](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m00s) If you haven't actually looked at all the tutorials That is available on Google Sorry on YouTube Then a lot of this world maybe you not even make sense of what I'm doing where I'm doing it and all that and So For those that maybe just seeing this video and not watched any of the other tutorials Please go to YouTube and type in Joomla component Builder And try to find the playlist there's old playlist full of tutorials Start at the top working through way down it so many tutorials many hours that I have spent trying to Teach [00:03:37](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m37s) And guide people in using this component and I know those tutorials will make you You quite able to build amazing things Ok so I'm gonna just leave this options the option list This form source if you read here you can add a path to an XML file containing the field So you can add a custom A XML file to your component how to add custom files to component hold not a topic it's It's also possible within your Joomla component to add files and folders all those kind of things But that means this specific source can still be used but you don't need to If you Use the fields [00:04:23](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m23s) Option then you basically need to remove the source option right only one of them so only the fields or the field form source So these are the two options I see it's currently set to mandatory the fields But I think you can change that Going to the field types change that to optional And then that you can select other Fields or field source form source I think the compiler will in any case if it detects there is a form source it will behave correctly here we need to add the IDs so we can come here and I want to have a name So it's just 199 [00:05:04](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m04s) I just add 199 and a comma And then let's add something else let's say Website 280 So it's 280 And let's do an email as well Where is it There's no email here oh there's an email And it's 100 Ok so we have [00:05:33](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m33s) That in place we can add a description We can add a maximum A filter, a show on, I'm just gonna leave this the validation of these fields I think That is an area which I haven't actually looked into But if I'm correct And also the reason why they moved away from repeatable fields Is that every field is validated On its own merit So for example [00:06:05](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m05s) The name field If you create a name field you're obviously Saying ok I want this to be a string and it has this filter string Value And since this is part of the XML it will be validated on this I can be mistaken here And yeah I haven't actually looked at the code so mind that but that's That's what I anticipate it will do most cases I would say Anticipate that it doesn't and try and do some custom scripting I'm not gonna illustrate that now [00:06:44](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m44s) Are you need to Actually know little bit more about JCB which there are tons of the tutorials to show you How to do custom scripting all around it component and even to do custom scripting anywhere and Any area of the component through the custom code area implementation So I'm gonna talk more about that now So For now we want to Just Make sure it got all the spelling right here Ok good [00:07:15](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m15s) I'm gonna save this just give it a name Options and test so I can see it This obviously I would make A text The default means that JCB already the Store method ....... it will detect that this is a Subform And will add the needed [00:07:39](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m39s) PHP in storing the file and in loading the file into the form again So that takes care of that So you don't need to actually say Json it will On its own by its default to the correct implementation here so you need to make sure either to click Text or medium text depending on what this value is gonna be Anyway I think for 50 text is quite enough And that's it saving close Ok Sorry about that it will span there [00:08:19](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) Let's see we got that field here it is I'm gonna just add it to any view for now Let's see I'm gonna add it to this look View Just so we can see it in action now the look view is part of the demo component So I'm just gonna dump it in here let's see Above tab full width details description I think let's just add it there Details also full width make it the 2nd And I say [00:08:49](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) Options And then we got a test right Ok save and close so we've added it to a view Now I'm just gonna compile this component which the view belongs to Which at this stage it is demo and install it Now let's go open that component And let's open a look And here we go name enter name here enter website address enter email We click there [00:09:26](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m26s) And our values are there Let's just save one Hi Children We can do I think that's the only one that's Oh yes you do have Let's do that and why enter those values and then some Value Sorry And I'm just gonna grab this up here [00:09:55](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m55s) paste it in there few times Just gonna put here Joomla@ VDM.io Put that in here To get sort of a feel for it Ok save Ok it's safe to values it loaded it back it's done all of that Hi There then save and close and so [00:10:45](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m45s) If we open it again It shows it up again And now we can shuffle it Let me just put Number for a Top Save it close And open again And so it is loading it also correctly Ok well that's a quick demonstration Marco I hope this helps [00:11:09](https://www.youtube.com/watch?v=3j4xPQC4apI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m09s) And getting you able to use subforms With JCB It's as easy as that Thanks for watching diff --git a/054-VDM-Package-Import-Option.md b/054-VDM-Package-Import-Option.md index 90fc041..39762af 100644 --- a/054-VDM-Package-Import-Option.md +++ b/054-VDM-Package-Import-Option.md @@ -1 +1 @@ -Great news I think option that we've Put in place especially for those of you that have really purchase some DStv packages Like the demo Was the main component all the Sermon distributed component This will be excellent news so let me demonstrate what we Done And also makes address Of future Changes On the import components area now There is an extra tab And with this tab you can now easily Import Paid or free Components That We ask Distribute It's called the wedding packages so it took of moment to load it it does take a while because Aquarius At the moment it queries GitHub And check and gets a list of all the latest packages So if we You know updated get up is all the matic Please show them the new packages Here So And we will be adding more free options Hi we are planning to to add some more free packages here the moment there is only 2 To really most of them are paid So you could You can buy any of these packages and user Where you like So The whole world is free and the demo version Nearest free but you could know yes you can actually get any of these and if you You're ready but just a sermon distributor version Are you going to select Ear Because you know JCB is constantly improving I'm so swimmin this too Uterus also improving And so we making changes to To some of distributor and if you wanna update yours or even if you have played with it and you wanna reset it But I'll remember If you got a reset it it will reset everything in Including every field and even Fuel pipes So Do Keep that in mind That if you For this package Over the In 1 It will revert everything Back what is great though Is that Gmail obviously Tree right If you put your history on for the JCP component so that means you could actually take a step back and some of those ever If you want it Anyway that's just a little Side note so you basically select the package you want to install and then click on get package This will take a while as it's downloading it from get up please make sure to read all these things I didn't even know True that but Read All of these packages are fully you know that Is written there So you end up at the page which We usually would Shows you who made the package If you still didn't get it Tuk Click on this link here Taxi cab I take And I get it For any of the other packages Well Or before getting here there's a there's a link That says By packages you could also click on those in Like the bucket you like Here it'll show you the component that is actually being Stalled Zurich Distributor 2.0 2.0.2 Which is the latest version And You then add your key here Which I will do in a moment And then click continue Which then makes it Install We had a this new switch here quiet And some of your Riffs Releases that might be a spelling mistake like this This one here it is But we fixed it and We did push out The The Fixer For this Which means in JCB 7.11 Possibly 2.7 Oh so it was 7.1 Come on We'll have this type of fixed Anyway what does stars Is it give the option to see exactly everything it does they say busy Importing on the back So the actually tells you what it was changed to what ID It doesn't give you the names just give you ID references so gives you a lot of more Sort of inside of what happen Which is obviously used for when something doesn't go right you can click on this so usually it's set to quiet Really wanna see all that detail you just want to know it's done but if you wanna see the detail you basically Yes And here if you want to override Data See how the force location update works Is if it finds an item And that item is New Year Then the one That is Being imported then it Drops the import option And it keeps the newer version in your system So if you click here that's how usually works with the force local update to know No if you change this to Yes Then it will ignore the time stamp completely And update the item irrespective whether it is newer or older or whatever Ok so that's that So we're at the ID and then we click Continue on I'm gonna pause the video from home as you want to see the ID Do you have it So it gave me a very detailed Print out so when it didn't find when it founded It says it found it and then it updated But if it didn't find it it will actually say that I did so and so in field Was changed to ID so and so And it's been Imported so there is the list Of everything Did Yes quite a long list Scrolling Scrolling Ok and then the bottom it says great if that's what you would usually see Just that So All of the rest It actually just Showed you because Not to be quiet so now was SIM distributor imported Are you gonna open at look at it Basically it's Should have all the data here The licensing my Danger so just add another licence here and then Saving Close And then you can actually compile it as easy as that So similar to Beauty Decompile And Then once it's compiled obviously then you have the July package so what does does It also included the The external script with Is also the sort of it then Demonstration of The adding eggs So it's grabbing it from GitHub Simply script that text For my types And it tells you that first time very d Detailed in there after you lonely This And only if it changes will you see Something like that again Ok so you can click here on install And now if you go to components there it is some of those too Tubular Fully map Well all functional JCB Has Built This by importing it first from our get up repository and And then you're able to adapt it and Use it in Anywhere you like Anyway yeah that is the The new feature I wanted to sort of demonstrate I hope you like it What does the suggestion is at the moment we can do Just go back there for a moment Importing components The suggestion is to have even a 5th tab So there will be This tab VDM packages and then a Community tab Hi can we hear Which Those of you in the community Did want to share Free Components We could add that in here And we still thinking about the paid You know share sharing paid components Yeah we still think about how that could Work Of course at the moment it shouldn't become Too complicated because if you if you Trick on anything And then click get package That package It's has it in Internal The variables Which actually Besides the What does values Be right So if we Click this value It takes you to my shop Where you then purchase that Safic product Ok So That is a valued Determined by the package Which means it shouldn't be that hard for us to actually include paid options faith components What is a little bit of a challenge Is whether JCB should actually ask for little bit of her Yeah contribution To support a project in Way I'm so we still discussing that anyway anyone have suggestions please post it here at the bottom of the Video make comments Tell me what you think The end of day You wanna make sure that the You can use this Long run that it becomes And I stool I'm even thinking of moving this option this whole getting to Importing of components To an actual tab On the desk From the dashboard So you can get to this page without having to first go to Components and then Click through here So there is even that kind of discussion but just for now we wanted to demonstrate the new feature it's Sir It's actually been able to Could do that already We just didn't have that extra w could have copied The links to those packages on I'm good up and have her imported them that way that's Shooter basic Clearwater what the ReadMe files would have shown you if you put it \ No newline at end of file +Great news I think the option that we've Put in place especially for those of you that have really purchase some JCB packages Like the demo Advanced demo component or the Sermon distributor component This will be excellent news so let me demonstrate what we've [00:00:20](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m20s) Done And also makes suggestions Of future Changes On the import components area now There is an extra tab And with this tab you can now easily Import Paid or free Components [00:00:39](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m39s) That We actually distribute. It's called the VDM packages so it took of moment to load it it does take a while because it actually queries At the moment it queries GitHub And check and gets a list of all the latest packages So if we You know updated GitHub it will automatically show then the new packages [00:01:01](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m01s) Here So And we will be adding more free options I, we are planning to to add some more free packages here the moment there is only 2 To really most of them are paid So you could You can buy any of these packages and use it in anyway you like So The Hello World is free and the demo version [00:01:24](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m24s) here is free but you could, yes you can actually get any of these and if you You're ready purchased a sermon distributor version you can just select it here Because you know JCB is constantly improving And so Sermon Distributor is also improving And so we making changes to To sermon distributor and if you wanna update yours or even if you have played with it and you wanna reset it But know remember [00:01:52](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m52s) If you got a reset it it will reset everything in Including every field and even Field types So Do Keep that in mind That if you install this package Over the existing one [00:02:07](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m07s) It will revert everything Back what is great though Is that Joomla obviously keeps history right If you put your history on for the JCB component so that means you could actually take a step back and some of those every If you want it Anyway that's just a little Side note so you basically select the package you want to install and then click on get package This will take a while as it's downloading it from GitHub please make sure to read all these things I didn't even now Trough that but [00:02:37](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m37s) you should read All of these packages are fully you know all that Is written there So you end up at the page which We usually would Shows you who made the package If you still didn't get the key you could click on this link here To actually go buy the key [00:02:55](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m55s) And get it For any of the other packages as well Or before getting here there's a there's a link That says By packages you could also click on those and then select the package you like Here it'll show you the component that is actually being in Stalled which is says here is sermon Distributor [00:03:12](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m12s) 2.0 2.0.2 Which is the latest version And You then add your key here Which I will do in a moment And then click continue Which then makes it Install We added this new switch here quiet And some of your [00:03:31](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m31s) Releases that might be a spelling mistake like This one here which is Quite But we fixed it and We did push out The the fix For this Which means in JCB 7.8.1 Possibly [00:03:50](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) 2.7. O oh sorry 2.7.1 Come on We'll have this typo fixed Anyway what this does Is it give the option to see exactly everything it does JCBs Importing on the package So the actually tells you what ID was changed to what ID It doesn't give you the names just give you ID references so gives you a lot of more Sort of insight of what happened [00:04:19](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m19s) Which is obviously used for when something doesn't go right you could click on this so usually it's set to quiet you don't really wanna see all that detail you just want to know it's done but if you wanna see the detail you basically click yes And here if you want to overwrite existing Data You see how the force location update works Is if it finds an item And that item is Newer Then the one [00:04:48](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m48s) That is Being imported then it Drops the import option And it keeps the newer version in your system So if you click here that's how usually works with the force local update to No if you change this to Yes Then it will ignore the time stamp completely And update the item irrespective whether it is newer or older or whatever Ok so that's that [00:05:15](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m15s) So we're at the ID and then we click Continue I'm gonna pause the video from home as you want to see the ID And there you have it So it gave me a very detailed Print out so when it didn't find when it founded It says it founded and then it updated it But if it didn't find it it will actually say that ID so and so in field Was changed to ID so and so And it's been [00:05:44](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m44s) Imported so there is the list Of everything he Did Yeah it's quite a long list I'm Scrolling I'm Scrolling Ok and then the bottom it says great if that's what you would usually see Just that So All of The Rest [00:06:00](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m00s) It actually just Showed you because we ticked it Not to be quiet so now was Sermon Distributor imported Now you can open at look at it Basically it's Should have all the data here The licensing might have changed so just add another licence here and then Save and Close And then you can actually compile it as easy as that [00:06:28](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m28s) So Sermon Distributor click compile And Then once it's compiled obviously then you have the Joomla package so what this does It also included the The external script with Is also the sort of a Demonstration of actually The adding external scripts So it's grabbing it from GitHub. You can go and look at that. [00:06:54](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m54s) It is simply a script that checks For mime types And it tells you that first time very Detailed in there after you only see This And only if it changes when will you see Something like that again Ok so you can click here on install And now if you go to components there it is Sermon Distributor Fully mapped [00:07:17](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) Well all functional JCB Has Built This by importing it first from our GitHub repository and then you're able to adapt it and Use it in Anywhere you like Anyway yeah that is the The new feature I wanted to sort of demonstrate I hope you like it What the suggestion is at the moment we can [00:07:44](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m44s) Just go back there for a moment Importing components The suggestion is to have even a 5th tab So there will be This tab VDM packages and then a Community tab like over here Which Those of you in the community Good one to share [00:08:04](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m04s) Free Components We could add that in here And we still thinking about the paid You know share sharing paid components Yeah we still think about how that could Work Of course at the moment it shouldn't become Too complicated because if you if you click on anything [00:08:28](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m28s) And then click get package That package It's has it Internal The variables Which actually decides the What this values going to Be right So if we would [00:08:42](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m42s) Click this value It takes you to my shop Where you then purchase that specific product Ok So That is a valued Determined by the package Which means it shouldn't be that hard for us to actually include paid options paid components What is a little bit of a challenge [00:09:06](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s) Is whether JCB should actually ask for a little bit of a Yeah contribution To support a project in this Way so we still discussing that anyway anyone have a suggestions please post it here at the bottom of the Video make comments Tell me what you think The end of day We wanna make sure that the community can use this [00:09:33](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) In long run that it becomes a nice tool I'm even thinking of moving this option this whole getting to Importing of components To an actual tab On the desk on the dashboard So you can get to this page without having to first go to Components and then Click through here [00:09:54](https://www.youtube.com/watch?v=OHvawooT67s&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m54s) So there is even that kind of discussion but just for now we wanted to demonstrate the new feature it's It's actually been able to do that already We just didn't have that extra tab but you could have copied The links to those packages on GitHub and have imported them that way that's Should basically what what the ReadMe files would have shown you if you purchase any of these keys. Ok well thank for watching again. and speak to you again. diff --git a/055-Dynamic-File-and-Folder-Inclusion-concept.md b/055-Dynamic-File-and-Folder-Inclusion-concept.md index 8f89c01..0c4bd5b 100644 --- a/055-Dynamic-File-and-Folder-Inclusion-concept.md +++ b/055-Dynamic-File-and-Folder-Inclusion-concept.md @@ -1 +1 @@ -I would like to Introduce you to a feature that we've been working on for quite some time now And I'm very sure it will Come as a surprise to some of you that actually can do this Most of the features already existed For quite a while It's just that I've been Trying to make it Stable so that It will work well And in doing so I had to extend it a bit So I wanna I wanna look at this feature It actually has three Two or three concepts which maybe is best if I explain that So what is this all about Ok It's about adding Dynamic Files Folders Or even external Files Which maybe is on a website Or On GitHub And you want to Get the content from a file and add it Maybe is code Or even as a file To your Fuel system So Here's the thing I'm working with components that is pulling data from all over the place And so Most of these features are really what what I've been needing to Get projects going And Trying to save myself Time That I don't need to Copy paste and move things around to ensure that it's a correct copy being used and on compilation Andre CB itself is maybe one of the best Explanations So let's look at this You know that there is a feature But you can add files And folders This feature is like I said it's always been there But currently Afrix penitus By adding an advanced tab to this feature It's got this basic which is the normal one Which if you watched some of the previous tutorials the auditor Orioles I do actually explain How this works And how you get these files and I'm not gonna go into that There is now a new area called advance Sorry I had to just quickly update that note for us Advanced area now Is able to Grab Files from anywhere in your system An added to the component Now It can be files outside of the root Directory of your Joomla website Just being sure That The PHP Which usually is a patches permission Has the right to the file and can read it So this is just the only thing But for most cases We won't need to grab files outside of the Joomla root directory because we actually Maybe just editing a custom script Custom file Inside of a G Muller Component which we've created But this file or This folders are not Generated by JCB So we want those files Weather actively running inside of a component We want them to be Basically taken and put into the package without us having to move it around That's what this featuring will now do So you can like a I'm doing here I you can use constants You'll see there's a little note here that tells you that That you can use Crossing paths and the full path Directly without quotes that means You don't need to do You know like in PHP here are you do something like that wait no not And you put this part in quotes right like that What are you doing need to do any of that You put the constant directly Like that and The compiler will deal with this And make it right So That you can do also with folders as well as with files And then You obviously need to still set the target path and relation To the ZIP package So you have folders Called admin But as you can see here I'm actually doing A folder called libraries And That means I am targeting a A folder which isn't actually Usually part of a package I know a component package But because I want that folder to be installed with my component every time And I don't want to to to actually have a separate A package for For this library I've actually Improved JCB to include this Package Which is basically if you guys go look at this You see that is It's basically a cop Composer A file and I'm including some Composer Class is there which we are now using in JCB And I'm moving it Every time with each install Into its place Now That might be Outside of convention I suppose But there is no the rules against it I think in Yeah so That's what we doing What's nice though is that when JCB detects that you are not targeting the normal atman Or Media Or Image folder site Those are there did normal folders Then Await not Imagefal is neither is that normal But did you got your see that site admin and Media If If Jason be detected your Gonna be moving content Into a folder that some part of the Expected package component package folders It will actually had a little script Do the script install So that it all move this folder into its correct place On upon installation of the component Or whether the component is updated So you can go look at that In fact I can show you just briefly So Europe got the component open The Script file for component Builder Scroll down for this huge file But here at the bottom when I have this new little script It's great name the little weird so it doesn't conflict with any other method in it at anytime And basically It gets the The details from the above methods And then it checks whether The folders obviously it gets there the day that I have the namak install folder It takes whether there is more than one And Then If it's One of these it ignores it because those already being deal dealt with by Jace And if it isn't It actually moved it into it's correct place Now this is a dangerous featuring As you can see here I'm saying you must use this with caution because you can literally Grab With this new function Any Thing anywhere from your Joomla website and overwrite It anywhere On the Users installation website Which could be problematic And Something you shouldn't do Unless you are I know that I listen to all right to do so Ok so this is the new feature in in doing dynamic Movement of folders And files What's make this all so nice if you're using these constants in your naming of your paths And you export and import this component into another Joomla website Then I mean as a JCB packets right If you export a JCB package and you imported at another JCB install It actually remaps these files it actually export them Remaps them and move them back into place on the other install Which Really makes it very comfortable in you in a working in a team and you wanna have these Is files always be the same everywhere This is so gonna be very helpful for that I can also Obviously because of the feature I give you the heads Up But if you import a package From anyone And and you do not know or you do not trust them Record actually move files Through this method into your system And is therefore part of first security which you need to consider With whom you are sharing packages Anyway So this is so some of the Feature regarding the new folder in Plantation folder in 5 of limitation Yeah that aspect which I mentioned earlier Were you actually able to get content from anywhere Works as follow So anywhere in any custom area of JCB Where you can actually add custom script You can also now used to this external code Snippet Now this could be a URL Or it could be a folder inside of your system This folder does not yet work with With Constance I should actually make it that it does And it actually needs to be the exact for the path of the stage But the reality is that with this external code Concept You can take For example Ballet variable From a Gets snippet let me let me show you We here I have what Is it called fancy date Which is basically a few functions static functions Which are not wrapped in the class yet so it's basically outside of a class And why because I want to include it Into my Helper class With the snippet So That I can have others work with me on this code on GitHub And If any changes be made to this code it automatically updates my system The I know that there is some question of security and doing so But with added a few little Tricks in the compiler The actually notify you If there's been a change to the code So what that means is the first time you use that snippet To include this snap Leopard that you've got here You obviously do something like Raw And then here I have basically a text file So you'd grab that you're all An added like this You can take away The actual because currently It is bound to a specific version Which obviously If anybody makes it changed to the snippet You won't get the new version Well that's the way of locking it in But if you wanted to have it be Dynamic you can actually remove a part of this I think it's this part Let me just check Yeah that's right Then you can use it like that Now this pacific's piece of text that you see here Will dynamically be added to my component Let me demonstrate So you arrive open component Builder And it's back end I'm gonna scroll that I've gone to this lips and helpers tab I'm gonna scroll down To this area which is called Admin class so I'll just do in the admin area so that's easily Detectable I'm gonna add that slip it like that so it says external code With the path of the euro And That's it I'm gonna save and close Then let's go to the compiler Now what should happen Is that the moment you've compiled this it should tell you That you've added This kind of external code to your component If it doesn't tell you that then something's wrong it should tell you the first time you and the snippet Because it actually creates a hash Off that snippet So that in the future if it changes You get notified So when we grab the snippet from Get help Nne worry in the middle you know Tempest with it It will notify you that the snip it was changed now if you know that it should have changed because You made a change to the gates Uno snippet or someone else in your team did That obviously you'll be expecting that But you could still for safety sake go check in the code of the component Where the snip it is being added to ensure that it is actually still accurate So I'll show you that Let's compile this So we see two messages that are relevant to the issue at hand This one is a new message which I'm not gonna go into now But it's basically dealing with that That is actually detected That Remember we said we have this folder we Putting inside of the Library folders And Everytime You compile You actually tell you that You tell you That it is detected it and it's added The Script to the script PHP So I said I was gonna explain it I did Anyway so that's what that is about but this first line here Is showing you the snippet And it's telling you there's been at it for the first time And that you should be investigating so the correct code string was used So you should go To the place where in JCB the Surrey in the package The compile package where this would have been added Go and check that it is the correct That what you see here on get up The string here Is also what you gonna see in the code That's the first thing Every time there after it should give you this little message here And it should tell you how many coach strings are being added to this component as an external code Anti voice sipping your component with malicious code string always make sure that the correct code string values Were used I did tell you that if we did take the change it will also notify you so First let's go do what it said here Let's go check that it is to correct code Cuz I won I'm in the ZIP package So we see here that's why I like the library folder it being added Yeah we gonna go to the admin area helpers and then open Component Builders helper File which is where I added the snip it right Just open that And then Here we have it Glow fancy date And fancy datetime So Basically from here To hear Was taken from get up and put inside of the component Now I'm gonna go make it change to the snippet I'll get up I'm gonna just do something small So that we can see what happens if it change is made To this code And how Jason B response I'm just adding this New little string here saying trains was made And I'm updating this public Guest So it now tells us that it's been revised for a second time And a change was made Now let's compile the component without doing anything else just make the trains here and get up Then go back to the component and compile it Sorry we are Selecting version Compile I can see how have the maybe add some space in between the messages here Doesn't always seem clear enough That the messages are not related to each other like Here it's showing that other message again like it said it would But you might miss that So I think I'll have to look at that anyway Here in the warnings area We see this We see that It has changed Since the last compilation Please investigate To ensure that changes safe That means JCB is automatically detected That the snippet that you originally had it has actually been updated At this point we anticipated that so If we go and look at the code We see that it just added this little party or change was made And the rest of it is exactly the way we want that And so everything is fine It's a change we anticipated So we know that nobody else has tampered with the script And neither was there a man in the middle attack An in any case If there is someone tampering with the script It will end up as a string here So they say they'd put something in here for Will do Something like that whatever they put in And you will see this error In your file So that's Basically how it will work no play out But in the actual reality Jason he will detect that It will see that the hash for the script is changed And it will notify you with that message I'm gonna do my part and trying to make sure that it's more obvious you won't miss that message But that anyway when you use this kind of implementation It is not the most ideal implementation it's just that sometimes we wanna include index Sternal value in R component Which is the name changing And Wanna do it without really thinking about her time And this is what this feature is ideal for I'm so use it with caution and You know know what you're doing Or don't use it at all So that was a quick overview Of the new Folder file Inclusion As well Ext external code Inclusion Features which I really trust would be useful to you It's powerful tools so I realise They are the danger of it being abused But at the same time I think component development works upon reputation and if you wanna have a good trip Station in the community You shouldn't do anything that will hurt others Or damage there Contribution And their applications What is a steer Within the parameters of your own component And your own implementation and any case because people are gonna look at your code they are gonna answer Zip your package they are gonna see If you're doing things that are not You no good they're gonna notice that and your reputation will get hurt And that's the last thing you would want When you're developing components for Joomla Anyway thank you for watching \ No newline at end of file +I would like to introduce you to a feature that we've been working on for quite some time now And I'm very sure it will Come as a surprise to some of you that actually can do this Most of the features already existed For quite a while It's just that I've been Trying to make it Stable so that It will work well [00:00:32](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) And in doing so I had to extend it a bit So I wanna I wanna look at this feature It actually has three Two or three concepts which maybe is best if I explain that So what is this all about Ok It's about adding Dynamic Files [00:00:55](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m55s) Folders Or even external Files Which maybe is on a website Or On GitHub And you want to Get the content from that file and add it Maybe as code Or even as a file [00:01:17](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m17s) To your system So Here's the thing I'm working with components that is pulling data from all over the place And so Most of these features are really what what I've been needing to Get projects going And Trying to save myself [00:01:39](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m39s) Time That I don't need to Copy paste and move things around to ensure that it's a correct copy being used and on compilation And JCB itself is maybe one of the best Explanations So let's look at this You know that there is a feature But you can add files And folders This feature is like I said it's always been there [00:02:03](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m03s) But currently I have expanded this By adding an advanced tab to this feature It's got this basic which is the normal one Which if you watched some of the previous tutorials the older tutorials I do actually explain How this works And how you get these files and I'm not gonna go into that There is now a new area called advance Sorry I had to just quickly update that note for us [00:02:35](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m35s) Advance area now Is able to Grab Files from anywhere in your system An added to the component Now It can be files outside of the root Directory of your Joomla website Just being sure That [00:02:55](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m55s) The PHP Which usually is a php has permission Has the right to the file and can read it So this is just the only thing But for most cases We won't need to grab files outside of the Joomla root directory because we actually Maybe just editing a custom script Custom file Inside of our Joomla Component which we've created [00:03:24](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m24s) But this file or This folders are not Generated by JCB So we want those files Where they are actively running inside of our component We want them to be Basically taken and put into the package without us having to move it around That's what this featuring will now do So you can like a I'm doing here I you can use constants [00:03:52](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) You'll see there's a little note here that tells you that That you can use constant paths and the full path Directly without quotes that means You don't need to do You know like in PHP you know you do something like that wait no not And you put this part in quotes right like that Well you don't need to do any of that You put the constant directly Like that and The compiler will deal with this [00:04:21](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m21s) And make it right So That you can do also with folders as well as with files And then You obviously need to still set the target path and relation To the ZIP package So you have folders Called admin But as you can see here I'm actually doing A folder called libraries [00:04:45](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m45s) And That means I am targeting a A folder which isn't actually Usually part of a package you know a component package But because I want that folder to be installed with my component every time And I don't want to do actually have a separate A package for For this library I've actually [00:05:15](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m15s) Improved JCB to include this Package Which is basically if you guys go look at this You see that is It's basically a Composer file and I'm including some Composer Classes there which we are now using in JCB And I'm moving it Every time with each install [00:05:39](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m39s) Into its place Now That might be I'll sort of convention I suppose But there is neither rules against it I think in Yeah so That's what we're doing What's nice though is that when JCB detects that you are not targeting the normal Admin Or Media [00:06:02](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) Or Image folder or site Those are the normal folders Then oh wait not Image folder is neither is that normal But did you got your three that is site admin and Media If If JCB detects you're gonna be moving content Into a folder that's not part of the Expected package component package folders [00:06:28](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m28s) It will actually add a little script To the script install So that it all move this folder into its correct place On upon installation of the component Or whether the component is updated So you can go look at that In fact I can show you just briefly So here I got the component open The Script file for component Builder I'm gonna scroll down it's obviously a huge file [00:06:58](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) But here at the bottom we know have this new little script It's named a little weird so it doesn't conflict with any other method in it at anytime And basically It gets the The details from the above methods And then it checks whether The folders obviously it gets there the dynamic install folder It checks whether there is more than one And Then [00:07:29](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m29s) If it's One of these it ignores it because those already being deal dealt with by Joomla And if it isn't It actually moves it into it's correct place Now this is a dangerous featuring As you can see here I'm saying you must use this with caution because you can literally Grab With this new function Any Thing anywhere from your Joomla website and overwrite [00:07:59](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m59s) It anywhere On the Users installation website Which could be problematic And Something you shouldn't do Unless you are You know unless it is your right to do so Ok so this is the new feature in in doing dynamic Movement of folders [00:08:25](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m25s) And files What's make this all so nice if you're using these constants in your naming of your paths And you export and import this component into another Joomla website Then I mean as a JCB package right If you export a JCB package and you imported at another JCB install It actually remaps these files it actually export them Remaps them and move them back into place on the other install Which Really makes it very comfortable in you know working in a team and you wanna have these [00:09:06](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s) Is files always be the same everywhere This is so gonna be very helpful for that I can also Obviously because of the feature I give you the heads Up But if you import a package From anyone And and you do not know or you do not trust them they could actually move files Through this method into your system [00:09:32](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m32s) And is therefore part of first security which you need to consider With whom you are sharing packages Anyway So this is so some of the Feature regarding the new folder implementation folder and file implementation The other aspect which I mentioned earlier Were you actually able to get content from anywhere Works as follow So anywhere in any custom area of JCB Where you can actually add custom script [00:10:06](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m06s) You can also now used to this external code Snippet Now this could be a URL Or it could be a folder inside of your system This folder does not yet work with With Constance I should actually make it that it does And it actually needs to be the exact for the path of the stage But the reality is that with this external code Concept You can take [00:10:36](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) For example variable From a Gits snippet let me let me show you So here I have what I've called fancy date Which is basically a few functions static functions Which are not wrapped in the class yet so it's basically outside of a class And why because I want to include it Into my [00:11:07](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m07s) Helper class With the snippet So That I can have others work with me on this code on GitHub And If any changes be made to this code it automatically updates my system Now I know that there is some question of security in doing so But we've added a few little Tricks in the compiler They actually notify you [00:11:36](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) If there's been a change to the code So what that means is the first time you use that snippet To include this Snippet that you've got here You obviously do something like Raw And then here I have basically a text file So you'd grab that URL An add it like this You can take away [00:12:11](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m11s) The actual because currently It is bound to a specific version Which obviously If anybody makes a change to the snippet You won't get the new version Well that's the way of locking it in But if you wanted to have it be Dynamic you can actually remove a part of this I think it's this part Let me just check Yeah that's right [00:12:35](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m35s) Then you can use it like that Now this specific piece of text that you see here Will dynamically be added to my component Let me demonstrate So here I've opened component Builder in it's back end I'm gonna scroll I've gone to this libs and helpers tab I'm gonna scroll down To this area which is called Admin class so I just do in the admin area so that's easily Detectable [00:13:07](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m07s) I'm gonna add that snippet like that so it says external code With the path of the URL And That's it I'm gonna save and close Then let's go to the compiler Now what should happen Is that the moment you've compiled this it should tell you That you've added This kind of external code to your component If it doesn't tell you that then something's wrong it should tell you the first time you've add the snippet [00:13:43](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m43s) Because it actually creates a hash Of that snippet So that in the future if it changes You get notified So when we grab the snippet from Github An anybody in the middle you know tampers with it It will notify you that the snippet was changed now if you know that it should have changed because You made a change to the gits you know snippet or someone else in your team did [00:14:15](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s) That obviously you'll be expecting that But you could still for safety sake go check in the code of the component Where the snippet is being added to ensure that it is actually still accurate So I'll show you that Let's compile this So we see two messages that are relevant to the issue at hand This one is a new message which I'm not gonna go into now But it's basically dealing with that That is actually detected That [00:14:50](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m50s) Remember we said we have this folder we Pulling inside of the Library folders And Everytime You'd compile You actually tell you that You tell you That it is detected it and it's added The Script to the script PHP So Yeah I wasn't gonna explain it I did [00:15:11](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m11s) Anyway so that's what that is about but this first line here Is showing you the snippet And it's telling you there's been added for the first time And that you should be investigate to insure the correct code string was used So you should go To the place where in JCB the sorry in the package The compile package where this should have been added Go and check that it is the correct That what you see here on GitHub The string here [00:15:44](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m44s) Is also what you gonna see in the code That's the first thing Every time there after it should give you this little message here And it should tell you how many code strings are being added to this component as an external code And to avoid shipping your component with malicious code string always make sure that the correct code string values Were used Now I did tell you that if we did take the change it will also notify you so First let's go do what it said here Let's go check that it is to correct code Because I'm in the ZIP package [00:16:25](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m25s) So we see that this the library folder been added we gonna go to the admin area helpers and then open Component Builders helper File which is where I added the snippet right So let's just open that And then Here we have it fancy date And fancy datetime So [00:16:53](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m53s) Basically from here To here Was taken from GitHub and put inside of the component Now I'm gonna go make it change to the snippet on GitHub I'm gonna just do something small So that we can see what happens if it change is made To this code And how JCB response I'm just adding this [00:17:20](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m20s) New little string here saying change was made And I'm updating this public Gist So it now tells us that it's been revised for a second time And a change was made Now let's compile the component without doing anything else just make the changes here on GitHub Then go back to the component and compile it So here we are Selecting version Compile [00:17:51](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m51s) I can see I will have the maybe add some space in between the messages here Doesn't always seem clear enough That the messages are not related to each other like Here it's showing that other message again like it said it would But you might miss that So I think I'll have to look at that anyway Here in the warnings area We see this We see that [00:18:18](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m18s) It has changed Since the last compilation Please investigate To ensure that changes safe That means JCB is automatically detected That the snippet that you originally added has actually been updated At this point we anticipated that so If we go and look at the code We see that it just added this little part here the change was made [00:18:49](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m49s) And the rest of it is exactly the way we want that And so everything is fine It's a change we anticipated So we know that nobody else has tampered with the script And neither was there a man in the middle attack An in any case If there is someone tampering with the script It will end up as a string here So let's say they put something in here it will it'll do [00:19:16](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m16s) Something like that whatever they put in And you will see this error In your file So that's Basically how it will play out But in the actual reality JCB will detect that It will see that the hash for the script is changed And it will notify you with that message I'm gonna do my part and trying to make sure that it's more obvious you won't miss that message But that anyway when you use this kind of implementation [00:19:52](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m52s) It is not the most ideal implementation it's just that sometimes we want included an external value in our component Which is dynamically changing And And we wanna do it without really thinking about all the time And this is what this feature is ideal for I'm so use it with caution and You know know what you doing Or don't use it at all So that was a quick overview [00:20:21](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m21s) Of the new Folder file Inclusion As well external code Inclusion Features which I really trust would be useful to you It's powerful tools so I realize There are the danger of it being abused But at the same time I think component development works upon reputation and if you wanna have a good [00:20:54](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m54s) reputation in the community You shouldn't do anything that will hurt others Or damage their Contribution And their applications but you should steer Within the parameters of your own component And your own implementation and any case because people are gonna look at your code they are gonna unzip your package they are gonna see If you're doing things that are not [00:21:22](https://www.youtube.com/watch?v=_c7wzW075lA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m22s) You no good they're gonna notice that and your reputation will get hurt And that's the last thing you would want When you're developing components for Joomla Anyway thank you for watching diff --git a/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md index 2e64c11..1b4dcb5 100644 --- a/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md +++ b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md @@ -1 +1 @@ -Ok let's do this Mowana and a File Field Good component And upload a file So I I'm gonna use this demo component He's got a few at nephews who got the errors Look I got a side view looks And looking I'm gonna add this field to do look Admin View But I first need to create the field And We need to sort of look at The steps that will need to implement Currently JCB doesn't matter the box actually Address this We might think of doing this Maybe The future but Because of some of the security risks It's actually best you do this is self Because then At least you uncle Control And the risk is Really yours Adult How to put anyone else address Ok So you're uploading a file The field you wanna use already exists In the Sorry if you types So we got the field types There is a field called File See where is it Must be none Yeah we go File Now this Obviously Everything in here Was taken From Zuma Las documentation So it shows you a whole lot of attributes their values some of the description But also shows you where to actually get more info on this And so it's always good To actually do that Ok so here we are Scroll down And there is the file field So It actually now has this new except Perimeter Which is nice Extra which wasn't available when I first set it up So if yours doesn't have it You see that I Actually Have Since I did it It's not Ok so Midas As well add it now then So you're on the size it's at that new attributes So it's accept The value of gonna leave it to being image and can be changed 5 give it some Affirmation is regarding The scripture that Present I'm here ok so We got this new attribute set Those of you running the latest Release of JCB Might already have this there it only gets added if you do fish install It doesn't update the database Ok great 7 clothes So we got our file type set If we go to files now And we can Create a new file Sorry field I-Traffic Files I mean Fuel And we select the file Come on You see that it gives you the Information And there is that new Attribute Available to us And you'll see that it's also showing up here And so this is the beginning Of actually setting up The File field type Deponent I'm just gonna call this file And Then here we can just say File Well let's call it image Here we say image to take me to computer And most of these other values we could actually take away Will come back to this Once we've added to the component and started looking Hot Found the other things that must be done because this is only step a they are actually 3 steps to take Of which this is the easiest So we have here Image Need to say that this Close ok now we go to our rapid View And that's this Look I'm gonna go directly to it fields So could you said that File Fuel type Little bit Chunk in here's I'm gonna Zoom out a bit Ok Where will I place this They are Two tabs I think let's do it in the more areas At the bottom here More And Image and we'll see there are quite a few files here Image Thank you Tile Africa And That should do it Let's make it forward For now And then one Just 1 and 7 close so now If we What open the atom View We should see the new Field has been added And it is said to being in the full view Sorry full width of the The club In the more tab And We could actually now compile the car Component As it has a beginning to see ok how I was gonna workout Powder And then Install it Then have a look at it It's a great new demo Go to more So here we see The file So it's telling us File one Ok we have a weather problem here We've got to 2 mm Fields with the same name image So I'll have to go change this Can I go back I'm gonna uninstall this Is gonna be the easiest way to do that And then go back To the fields Corset Last one I'm created End Image And it's strange this 2 Banner Think that'll be ok Not the type Ok so I think we'll use banner I'm weak all this also banner so it stays the field type is file but will use the Label banner ANN7 close Now let's try again You know if you have Two of the same fields Meaning exactly the same name JCB automatically calls the one The name with being image one the other one image two And doing that is not good practice it usually doesn't come out right in Events Busy with history Because it only tracking one field right And When it actually takes the history that field name doesn't match any field So So when it comes to the history and updating of the database Automatically as you add new fields Using the same field multiple times is not recommended ok So let's try this again And then install it Now if we go and have a look We should see a different Reality here great Banner Got all the necessary information Obviously this is set And your server Tells you that And now you can click here and select a Image So I'm gonna do that So I got this autumn tree forest that I've selected And Need to add a name and some That seems to be all I need to do and then save and we have a problem NOSA A little glitch that I love you should have I Tampered with some of the Validations In a previous day Pretoria Anyway Now I fixed it and As you can see When I saved the item It actually Didn't upload anything So the file is not in my system And that's where usually All of you would sort of Ok so you've used file EUFA Selected there Banner whatever you wanted to upload And it just nothing happened and that's because There needs to be a server side Which needs to actually validate the file Move the file and check the file everything Make sure that it's a correct file Secure the file And then place the files path back in Into this Field When it puts the value in there by And it's that process which is to be custom code Ok so let's go back to our component and let's do it What are the things I like to do before I actually start coding anything Cos rule look Under the hood look at what's going on especially if it's the first time I'm doing it so So many of you this might be your first time I'm gonna show you someone how this is done and it's Like inspecting what's going on Under The Hood and how can I use it So I'm gonna open this item again and I'm going to again select our Image And then having the image selected I'm gonna go to the code So I know where the code is for this website right so I'm gonna go into my editor and I'm going to the Admin area office component and off this View Model Into where it actually saves the values so Follow Me Follow Me There So here we have the component without this one that one to my mouth then An administrator components demo And then models and look I wanna go there Double click on go to open and you could just go to almost the bottom of the file somewhere there Look for the safe Method Function really That's where we wanna sort of pork because It's at this point where all the data from the browser is available to us and And we should be able to access it now you could ride the helper class and put it in your helper function And use the same uploading sort of Class if you want to reuse it but you could also scripted writing here and I'll show you how to do it that way Obviously I like reusing scripts so the helper class I beer is more appealing because I put it there and everywhere I Are used as field Type For fire uploading I just also use this helper class to deal with moving the data and using it Ok so for now What we gonna do as we gonna ride down some values just to the screen When we click save in the UI to see what happened so Let's do that So basically two One is the actual data that is available here and the other is this we getting the Input Trust And I'm gonna Check in files what do we have there I am the input of the application and if so Ok we can save this changes then Go back to the The website And basically just click save Ok so now we got a a dump if yours doesn't look like this it might be because you do not have Xdebug install on your server You would turn 12 at some sort of Formatting Something like this Echo Free Just to sort of add some formatting their balls into one line Ok I don't need that I've got extra bug so it does it for me Ok so now we here we have the data and we see that our Where is it Baby it's not even in the data list but that's ok Just crawled down you see we dumped a different set of data and it actually it was Scroll a little We'll see that has a protected value called a form name type temporary Name error size Overcome information then in the temple name and has The actual file name Banner with its temporal occation so it creates a temporal look Patient for the file A thousand type is image.jpg and also gives us the file name And so this is the array would you want to actually get hold of and With whom you would want to yes make changes Move that image Give it it correct name back after validating it and doing whatever sanitation is required And then saving that value back into the banner data position Which should be in the first array here but it is It isn't there But it should be here So you should actually just create it Ok so going back to the code let's do some of that There is a nice Get function here We can just say Jay form if you remember that was where the data is and if we want all the values back Bakkies under a or that it should be nice if there is none existing So we gonna save that and then Just upload the file again to see You know how does it look now Have to do it again because of previous values are actually gone So we'll stick save again and Larry go we've get a little different array But more useful An easier to pass And now we can take the next step to actually check the disarray exist There is a function already or a class in Joomla which already does All of this for you In fact I would say let's go look at that and let's just copy some of those functions Impact that's copy the function and adapted to our needs and just put it into Our our class so in components you go to the Installer then the model and then uninstall Scroll down to see one that says get package from Load Frank is what it says yeah get package from upload This is the function which is really ideal for the task It takes care of a lot of sanitizing it has little chicks in it and it should Should be Yeah it should be useful for us in this case we'll obviously take some stuff Way and our own little messages so we don't depend on the installers Messages so we'll just copy this whole function all the way up there Control copy it go to look our class And for now I'm just gonna paste it in here above There are some key things I would like to change here for example I'm thinking let's It stains a function name and recorded My Upload function For now And We we gonna pass it the input So we don't want that To be done twice And We know that this is going to be Jay form and we definitely don't want to have raw Because it's an image We want this to be a Rea So we can actually check the values And then This looks fine We can stay here Upload Sorry up Road Ring Images Not Available now wait and set uploads are not enabled in PHP that seems fine Ok we can actually take these messages and put them in here because JCB is gonna grab this France we put it into our component Gonna add it to all language files for all component and this is really wanna make sure that that happens We don't need the lip because we not gonna on zip anything So we could actually move this part Now there is gonna check where we actually got a file set of files here so It's got a check with her that User file is an array And if it's not I want to say if I was not know if I was selected or no Why was uploaded so we can just type that in If at this point we detect any errors we basically want to Throw raise those errors and actually break out of this upload So let's see Upload error warning upload error I suppose we need to go look at these language strains in the lung Language file off installer to correctly translate this For now I'm not gonna do that so I'm just gonna say ever You can get I do that on your own Ok now what we wanna take you is All Upload size you want to make sure that our upload size is what we expected Is the maximum field size too small in the php.ini and that's really what What's happening here and so again it will give an error saying File too large I got the same here It's tracking again this time it's first check whether it's in the fire knife while here is actually check the file size Data is a file size And so we can again say Upload error again you should just check what is the actual file language string And replace that with the English version here Ok then We Built appropriate bath We take the filename great the path we used to be great this temporal s r See which is source bath And then we Move the file with the J file upload This point the file is being uploaded to the server And they are storm validation still to do in our Script with me actually Just grabbed from the app loader class We do this impact now we don't need and pack we wanna do some other things here Which are More appropriate for our purpose First thing I'm gonna Actually move the get classes function up a few lines And also make sure to have the folder class actually available in case Then I'm going to clean the name So that it is everything is fine and well it anywhere later we might not have any Ok so then we still have what we did here before This actually is going to be replaced with little function Which I sort of started writing called Check upload I'm gonna change this function as one of my own Sort of functions which I've already adapted For other projects and The past The mike you've seen Remove this one out That one can stay like that So Are we here We are going to just do a little check-up to actually make sure that the package Which we are actually going to Give back and which were used to store in a database and all the rest is actually you know AFK 3 here we just gonna grab the result of this which basically be true or false and we gonna check it If it's Falls we gonna say No something like upload Failed And Then If we still going We going to actually do this check So now we've got this check upload in place And we first gonna get the format from the file And then we going to use a little Custom script here to validate our format I've got a In my component I usually set formats that I allow So it's a global Same That means In your component you would have to actually go in and add config Drop down With a list of Allowed Formats now Do sort of sidestep that in Instead of find Esplanade Explain all that I'm just going to go and remove this Function here you could You know pause this and copy that down if you know what I'm talking about the That case You don't need to pause this you know how to type it I'm so I'm gonna remove that And you sad You know some format was I think ok I'm I'm ok with this JPEG I'm ok with that format and I'm also gonna be ok with JPG Ok I'll be there At the top there Palm And Maybe GIF BMG And then GIF So those are the formats that I'm Gonna say yeah There's a fine of course because it's really the file extension that we are checking you right So we not gonna use a global value here we just gonna use the file format Allow file formats And then here would basically gonna check Is this file format in this array If it's not We gonna say Invalid file Format I never go and is gonna ever out but with this error out we will ne Need to do some house cleaning So Will have to look at that at the moment So what I think I'll do is I'm going there also pass it the destination of where we've moved the file And Then Because that's where the file currently is right So here we got the temporal destination which is really In the Tempo passa Temple folder of the Joomla website it's not where we want to end up It's just where we gonna keep the fire until we happy that it's safe It's ok I got it in the temple there's the nation with moved it up there And now We protected something happened yet fine Check the upload And Here If we leave now Find The dis Actual file Is Problematic we gonna have to remove it Forgot have a renewal class year And then we gonna say more remove It's a file I think that's right And we gonna write this will remove file in a moment Ok so let's say for a reason you'll see here got a lot of Validation whether the user actually has permission to upload stuff Now that again I'm I'm gonna remove that from now because Yeah It's gonna be a little bit Beyond the scope of what we're explaining Now I want to pass a package back Which We are happy with Saying This is actually where our file is And what its name is And So we gonna just do that So that's the directory And that is the package name And we gonna Pass that back As the package We could Since we've got the Format And maybe you wanna store that We could also add that to the Rain So There we go everything is good Got the package name directory path as well as the format and will return that back As the package And we give that back To the model The safe function Is going to call this so in the save function we gonna go This Year of yes we said We are going to Has it The input Field The input value since we're really getting it why get it again so we gonna pass that over here See something like That ok That looks good So Now all that needs to be done is over here instead of this Function We can now do The following This My upload function And the import Have you got So I will actually end up with that package in Formation of right in this variable And we can then just exit out to see how that will look And even if you've got some typo errors here Oh yes we still need to create remove far if we have a Crazy why do we need to remove the file Well all the way up to hear the father is actually not on the server It is somewhere in memory Somewhere in limbo And If something happens And we returned Falls here we don't need to do anything it's not really anywhere it's just gonna do Disappear Same with it Happening here or there Or any of these other areas before here But the moment we do this We are actually moving the file to the server And it is now if that is true it is on the server I'm so when we pass the destination and the filename here to check upload We ready have the file on the server And so if we then discuss this cover that this file is not legit we don't want it we must remove it Or any other chicks we do Even if it's something more complicated than this You must remove it Because it's on the server And so I will remove function I'm trying to save a song Summer Unnecessary Thanks I'm gonna also super it up a bit because we're ready up here We got the classes for the file in a folder so we don't need to load that again We going to pass at the destination Which is the folder And We gonna That's gonna be fine So All of us we are able to Actually Get out and hey we don't need this we just need to pack 3 here we gonna ask is it a file Then delete then if there's something not right we gonna do clean paraffin just checking Again and delete in this should remove The file From The server You can test that if something's wrong just Google it And Cricket but this should be ok So we gonna basically pass it The destination path Which is the one to where we moved it Remember Appear So that's the same path we are passing all the way down to the remove Function and then It will clear it out for us I'm in if everything is fine and it doesn't need to We gonna continue on and then bus it back here To the package Which will be returned 2 hour Save Method So all of this code that I just wrote here now I'll take it and dump it on get out as a kiss So you could go there all L give the A link to it but if this is Quickly code it I mean I'm sure that you could improve it Wikipedia pasted stuff from other You know other classes To sort of get this working but there's nothing really to extravagant here the only thing Yeah that we didn't go into his exactly what does clean do and what does apply do and Those kind of things but you can obviously go through the tumor libraries Exactly what does it do But for the most part it's just in a wreck HP Functionality And so yes That it would be enough To actually upload the file So let's give it a spin So we back over here if we Click on this it will actually take us out of the Item so we can just click the back there then name And we would have again to select the actual image so there we have the the image And we can click save And see what happens whips we gotta bounce it is here A Galaxy undefined index undefined index we've got trouble Let me go see why Ok so I didn't take Rosie Tension here I'm just gonna do another one down Take the exact way to sort us possibly need to do a for each It might want to upload more than one But Or we could force it to just use the first I think I wrote something about this Already somewhere let me just check I think this should do the trick If it's an array we just wanna grab the first value out of the array If you got multiple Fields That are uploading files In the same view you gonna have to change this little chunk Because then you gonna have to deal with each others Files In a footage loop inside of this function Which basically would mean you could Skip all these as they are Global to everyone of them and then from about Yes from about here You would add a for each loop Because you would Ok and then here you won't Echo well you won't break out you just grab the error into an array Wish you would have been chilly then pass More Targeting specific package Really And then return Here The older successes as well as the areas and handle it somewhere else So since we just uploading one file I'm not gonna You know Do all that just gonna grab that First Value and we gonna work with that first value in that should do it Ok let's go back and try again Save Again we have a problem Not user files Use a file Sorry Use a file Is a file Come so Littles Changes like that can Throughout Arizona And at last we actually have The file on the server What I had to do is hard to take away these points here I had that was Bought wrong so don't need the actual point and actually To be without it and you'll see that now there is a file in our 10 Pro for the it is actually The server and and also we have the path And we have the name And all those things Impact Everything now is Is good we can now move File To its final location now we could deal with moving the file To its final location Here in our Save class Or we can again have another Function Which we passed this Value to which then moves the file to where we would want every image Found 2go Ok let me quickly type that out here and I'll package Got the file name so that's Really important And we got the full path which is where the file currently is And what is It's formatted We could actually have more values in this if we wanted we could do something like this Instead of just passing That use a filename And name Was it the whole The whole array Like that and then here we change that to archive And Then here we do Fat Which actually means we've got this array 2 hour You know it's available So instead of doing check we can then do Package name And then Endure And Format And Return the archive package Now we'll have all the information which we actually were using even up Here will have all of that information to our disposal Scores also need to Shames this 2 The Hub Well you know what the name is already there Set of package name We can just be satisfied with the name Ok and then we could cool call this 4 Full Pass Yes So that would be the in any only information that we are adding notes really new with these two values So we can just do that An hour a looks so full It's got the type the temporal regional temporal The longer they are Any errors that might have come up The size of the File the full path and the format So we got all those information to to use now at the end of the day the only information we really gonna Keep is up to us We could decide to skip the size of the file We could decide to keep it for me it is really up to us And really I'm not gonna go into how to deal with all that we just have one Name Field of How use a column In the database called Bana In which we are to place our final Information and that information should be a You know the path in in relation to The image folder Where we have Placed this This file The First I'm going to get some Konstanz to use I like this Using this route As that is Always going to be the root path To our website And then next actually add Just the path to the images Where we going to place our m So I'm gonna copy this So we going to just Add The path the relation to the root folder to the banner In the database Now You do realise that this is actually just for you it's so did you know where the file is later You will then on the front end of the site where you gonna use this value You have to When you get the value from the database you'll still need to create The Actual image html tag To actually load the image or whatever you gonna do with this file You're gonna still have the code that nothing of that's gonna be done Are you gonna just at least have the path to exactly where the father is because you're storing it that way in the Banner Common that's the field Ok And now here we taking the root path And that exact value And we are moving The full path which we build-up here right which is the actual current destination We are going to move it from the full path to the Final Destination And that is really yet At this point We got the image on the server And We are moving it to the correct location And we are storing the value In the database And we've done with saving and uploading the actual value As Yes that would be all that's required Now In any of these steps You might wanna be more Yeah do some more things be more secure be more validating Because it's not only images your obviously going to be uploading if you uploading PDF If you uploading other kind of content You gonna have to do some Googling to anywhere in these steps Especially in this check upload area To do the correct validation because at this point the file is on your server And you need to make sure that it's the right file Now this isn't Airtight Because this really just Checks that the files type Is one of these The extension It doesn't actually valid data File to really being an image They are more Secure ways to To do that But some of them are little bit more Yeah if you do use them the server side You know If you have to Keisha is gonna be running And shared environments Then it will cause problems because some of those functions are not available in all Environment But if you wanna be Like very specific You could actually help the user along to who uses your application to Enable those functions on their server And by that giving them extra Security with uploading of files This is obviously a very big topic Which I don't think we have time to go into in that dept But in general this sort of implementation is really how most are doing it And yet Yeah Let me know sir Get too too concerned This should be ok Now We have moved everything in place let's give her a trial run So it says that it's been saved to excessively But No file selected is shown here Now we might want to Show The file that is now currently in the database Instead of this upload or Show the upload still but let's say someone decides to upload another one that it Actually changes it And remove the old one and adds the new one And displays the little image here As it is in the database now let's first see is it in the database Ok so here in the database we see there is our file And it is actually said to be in images autumn trees forest Building grass Dot JPG that is where it is Ok now let's see if it actually was moved To that Place So here in the folder structure we gonna open images we gonna click here on images then Scroll down C David is autumn tree You can see it there If it is in its place So the actual image does now Exist in the image folder It is been uploaded and it actually is in the database also Our little snippet there says that it can't be no Before we continue with that kind of custom scripting we need to take what we have done so far And actually added to JCB We've done and in the year i d e And if we compile in in Store this component now You actually override everything you've written And boom it's gone So what to do Let's go grab that custom scripting and added to the component In JCB Cause we wanna grab everything From Upload my uploads function You wanna do check upload And remove file all of that we want to get So we gonna say cut And Got that in the The board Then go to JCB And in the look at Man view which is where all this is happening we can open up Then there is a place called custom buttons You gonna say yes here And then there is the controller method when I adding anything there But here is the The model method And so this is a place for us to actually add Subscript to the model And we gonna just paste what we've got Out Write in here And overhearing the list control over not adding anything Also in this this car Controller not adding anything So we basically just adding that Which we threaten to the model method at your PSP here is gonna go into the As methods so This is the methods That's a method That is obviously a method All of these are methods We want it to be available to the class Now on We are not actually at this point dealing With if you upload a new file that it removed the old one That should still Be further custom Scripting And so this point all Just add the new file it won't Remove the old one So could be that he's adding more files and more files and it just gets added to the image folder But it's not being removed You have the remove Profile function already here So you could actually yeah you could actually fix this quite easily But I'm not gonna show you how to do that I wanna encourage you to Study up some of your Bitch be as well Now Here we need to also add obviously The Script that we are adding to the save method so here is the PHP safe method Before data modelling this is where we want to actually Jump In And like it says there the value stored in the data array So we just gonna go back to the idea And scroll down to Sorry this What's up Just gonna scroll up To this Lil snippet here Because this is everything new Right I just copy that on its cut that as well Go back to The JCP interface And pasted in there Ok so now we have our In the safe Method before modelling We have this little snippet that will be executed And the same goes with In a custom buttons Bartender Models we've got our classes that are being added Now we said If we open the item So that means after we've saved it We want to actually take the value in this banner By the display it in the page How they are many ways to do this Since we already have this value I shouldn't be that hard So JavaScript to the rescue I'm gonna use JavaScript to do this So we have hands our script to the view file Or add JavaScript to the view footer so that means we can decide where to add the drama script Do we want to add to JavaScript in a file that gets included in the header of the document Or do we want to add it to the bottom of the view as a snippet ok that is really we were To do it Because you wanna use PHP So We gonna actually do some PHP in this Area here Where us in this is file area we cannot do pH So to show you exactly where this is gonna come out he's gonna just add a comment here Add Java Script Here And I'm gonna show you how we gonna do PHP P HP Also Works And We gonna save that Now we actually can go out of here and go compile this component And install and then go look at it scored So here and our save class We have Upload image And that is all Good and right Now let's search for our function here And there is a function also in the same class been added Through JCB interface so it was not lost It's not exactly the same place we were originally Placed it but it is in the same class and it's what we want we want those Classes to be available to us here Ok so that part is still good Now you wanna go look at the view And see where that JavaScript going to be at it So will this close images here Then go back up and open the view Then wait what Where are we Paula You wanna go to the demo View look And edit So we are looking at that specific View And you see here Is The JavaScript Ok So it's added it 2 hours script Area And I actually am able to To do PHP Echo In the script area Which is what We are going to do We going to check with her that Banner Value is available to us on this page And then we are going to Use it to actually render the image Are in it Appropriate place How to know where the values are We go back to its view HTML dot PHP Area And we see that here it gets the item and it places it in the item Global Class value So we have the value item we can therefore check if banner is in the item So what I will do Just So that you can Sort of see what's happening as well can't copy that And then I'm gonna go back to the editor View Where we put our I'm gonna say I just Wa dump That specific value And safe And so we can see all of that so let's go to the interface Ok we ask I have to add the word Exit exit sexy the correct way of doing it J exit To this and go little up because we got a little fader here it's gonna hide this and just Let's just take that out for now So we can see What's going on And then later Refresh or page Ok so we got it all broken that's fine But here at the bottom Are still not showing Let's take it to the top So we've added it here above everything it should actually shown Refresh There we go that's what you wanna see So we see that it is publicly accessible there's the banner value so we can check whether there Is actually A value in this weather it's a string and a hazard value because we know we controlling and value Busy can actually manually Add that value there Needs to do it through the upload field So we can check whether that has a string And if it does We can just create a little Show the image Underneath it's appropriate placement Ok so that's how I get to see the value So if you are dealing with something similar You can Do these kind of poking into the result sets to exactly where is Wharton How does it look and how do I get to it in Yeah that way You're not dependent on the way sort of Not knowing what's going on So now we here back in JCB we going to say F We gonna say if It is Set And If It is a I'm using the helper class here we've got a function in the helper cross called check string To see whether it has a length And that it is a string Not an array or Boolean or something like that Now This is the way you can Sort of use the helper class to use the brackets brackets brackets Component and then bracket bracket bracket help the salon salon Are you got And If that is true We want to Obviously load the image Because then it exists Now we wanna see where we wanna add this image and it's actually underneath the the upload I'm just gonna have it show up like a normal image so we gonna just do some jQuery 322 To do that Ok so we are doing This image source and we are going there item better We know it's a string We can add a class here Now you can target this class And make it nice with CSS Just add your sis is here To view Just here you can add your CSS so here you just add the the class name that you gonna type it with you CSS and you can do All kinda nice things with it I'm gonna have all the better And we gonna insert it after the banner Field so there You know is the way we know what this value is Is the open one of those views Bike so And we drill down Until we find That's so we use our Spectre Rap maybe The banner Label Pandrol until we find the ID J form banner That's how I get it Gay And Then We just add this after It after the control group so that looks nice fits in with the layout and I think it's broken Ok so That should trigger it So we saying See if we have a banner if we do at this JavaScript we done Safe Now let's compile and in Install So File And in Stall Go back to all of you And Obviously close this and refresh Now go to more and Waller there is our image Now to show you it in action we gotta change the image It won't remove the old one But it will immediately show you the new one once we click save So let's do that So I've selected to different image from my computer and then click save And go back and while there is the new image so that is how you could implement The file Fuel type in JCB so as you can see there is some cross and scripting needed I'm gonna quickly I show you a URL where you can go and get this customer script And use it in your own component And of course May be adapted to change it At least use it as a place to start with And Start using this Custom Joomla field type For uploading files Thanks for watching Is any questions or even Suggestions of how to do this easier or faster or safer Leave the commons in the area below the video I'll be happy to look at it and Make any necessary changes to house in a bit Or even at the slip it itself that might be a better place And the gates where the euro I'm gonna show you now Are you can go there and make comments there and we will just make pull request in the whatever and we'll fix it up so So that works well for everyone thanks for watching \ No newline at end of file +Ok let's do this We want to add a File Field to a component And upload a file [00:00:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) So I I'm gonna use this demo component it got a few admin views who got the areas Look I got a site view looks And looking I'm gonna add this field to do look Admin View But I first need to create the field [00:00:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) And We need to sort of look at The steps that will need to implement Currently JCB doesn't out of the box actually Address this We might think of doing this Maybe in The future but Because of some of the security risks It's actually best you do this yourself [00:00:54](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m54s) Because then At least you're under Control And the risk is Really yours And not put anyone else at risk Ok So you're uploading a file The field you wanna use already exists [00:01:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m11s) In field types So if you go to field types There is a field called File See where is it Must be in the next one Yeah we go File Now this [00:01:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m32s) Obviously Everything in here Was taken From Joomla's documentation So it shows you a whole lot of attributes their values some of the descriptions But also shows you where to actually get more info on this And so it's always good To actually do that Ok so here we are [00:02:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m00s) Scroll down And there is the file field So It actually now has this new except Perimeter Which is a nice little Extra which wasn't available when I first set it up So if yours doesn't have it You see that I Actually [00:02:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m23s) Have Since added it It's not showing up here Ok so Might As well add it now then So you're under size let's add that new attributes So it's accept The value I'm gonna leave it to be in image and can be changed let's give it some information [00:02:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) as regarding description that just copy that and place in here ok so We got this new attribute set Those of you running the latest Release of JCB Might already have this there it only gets added if you do a fish install It doesn't update the database with these values Ok great [00:03:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) save and close So we got a file types set If we go to files now And we can Create a new file Sorry field Files I mean Field And we select the file Come on [00:03:35](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m35s) You see that it gives you the Information And there is that new Attribute Available to us And you'll see that it's also showing up here And so this is the beginning Of actually setting up The File field type [00:03:55](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) to your component I'm just gonna call this file And Then here we can just say File Well let's call it image Here we say, Choose an image from computer with maximum 100Kb And most of these other values we could actually take away we will come back to this Once we've added to the component and started looking [00:04:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) at some of the other things that must be done because this is only step A they are actually 3 steps to take Of which this is the easiest So we have here Image don't need to say that just save and Close ok now we go to our admin View And that's this Look I'm gonna go directly to it fields [00:05:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m05s) So I could add that File Field type I'm a little bit chunt in here so I'm gonna Zoom out a bit Ok Where will I place this There are Two tabs [00:05:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m21s) I think let's do it in the more area At the bottom here More And Image and we'll see there are quite a few files here Image Think it should say file ,here we go And That should do it [00:05:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) Let's make it full width For now And then one there is just one and save and close so now If we should open the admin View We should see the new Field has been added And it is said to being in the full view Sorry full width of the [00:06:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m15s) The tab In the more tab And We could actually now compile the Component As a beginning to see ok how it will work out compile it And then Install it Then have a look at it [00:06:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m39s) It say create a new demo Go to more So here we see The file So it's telling us File one Ok we have a problem here We've got two Fields with the same name image So I'll have to go change this [00:07:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m06s) go back I'm gonna uninstall this Is gonna be the easiest way to do that And then go back To the fields because it's the Last one I'm created End Image And lets change this [00:07:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m36s) to Banner Think that'll be ok Not the type Ok so I think we'll use banner and we'll call this also banner so it stays the field type is file but will use the Label banner and save and close Now let's try again You know if you have [00:08:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) Two of the same fields Meaning exactly the same name JCB automatically calls the one image one the other one image two And doing that is not good practice it usually doesn't come out right in Events especially with history Because it is only tracking one field right And When it actually checks the history that field name doesn't match any field [00:08:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) So So when it comes to the history and updating of the database Automatically as you add new fields Using the same field multiple times is not recommended ok So let's try this again And then install it Now if we go and have a look We should see a different Reality here great Banner [00:09:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m07s) Its got all the necessary information Obviously this is set in your server Tells you that And now you can click here and select a Image So I'm gonna do that So I got this autumn tree forest that I've selected And Need to add a name and some [00:09:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) That seems to be all I need to do and then save and we have a problem Now as A little glitch that None of you should have I Tampered with some of the Validations In a previous tutorial Anyway Now I fixed it and [00:09:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m56s) As you can see When I saved the item It actually Didn't upload anything So the file is not in my system And that's where usually All of you would sort of End up ok so you've used file you've Selected the [00:10:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m14s) Banner whatever you wanted to upload And it just nothing happened and that's because There needs to be a server side Which needs to actually validate the file Move the file and check the file and everything Make sure that it's a correct file Secure the file And then place the files path back Into this Field [00:10:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) When it puts the value in the database And it's that process which is to be custom coded Ok so let's go back to our component and let's do it One of the things I like to do before I actually start coding anything is really look Under the hood look at what's going on especially if it's the first time I'm doing it so So since many of you this might be your first time I'm gonna show you someone how this is done and it's Like inspecting what's going on Under The Hood and how can I use it So I'm gonna open this item again and I'm going to again select our Image And then having the image selected I'm gonna go to the code [00:11:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m31s) So I know where the code is for this website right so I'm gonna go into my editor and I'm going to the Admin area office component and of this View Model Into where it actually saves the values so Follow Me Follow Me There So here we have the component wait not this one that one the Joomla Mount An administrator components demo And then models and look I wanna go there Double click we gonna open and you could just go to almost the bottom of the file somewhere there [00:12:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m13s) Look for the save Method Function really That's where we wanna sort of poke because It's at this point where all the data from the browser is available to us And we should be able to access it now you could write the helper class and put it in your helper function And use the same uploading sort of Class if you want to reuse it but you could also scripted writing here and I'll show you how to do it that way Obviously I like reusing scripts so the helper class Idea is more appealing because I put it there and everywhere I [00:12:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m57s) use this field Type for file uploading I just also use this helper class to deal with moving the data and using it Ok so for now What we gonna do is we gonna var dump some values just to the screen When we click save in the UI to see what happened so Let's do that So basically two One is the actual data that is available here and the other is this we getting the [00:13:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) Input And I'm gonna Check in files what do we have there In the input of the application and if so Ok we can save this changes then Go back to the The website And basically just click save Ok so now we got a a dump now if yours doesn't look like this it might be because you do not have XdD bug install on your server [00:13:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) You would then want to add some sort of Formatting Something like this Echo pre some like that should do it Just to sort of add some formatting that it doesn't bulge into one line Ok I don't need that I've got XD bug so it does it for me Ok so now we here we have the data and we see that our Where is it Banner B it's not even the data list but that's ok [00:14:43](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m43s) Just crawled down you see we dumped a different set of data and it actually if we scroll a little We'll see that has a protected value called jform name type temporary Name error size All that information then in the temporal name and has The actual file name Banner with its temporal occation so it creates a temporal location for the file It tells us type is image jpeg and also gives us the file name And so this is the array would you want to actually get hold of and [00:15:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m29s) With whom you would want to yes make changes Move that image Give it it correct name back after validating it and doing whatever sanitation is required And then saving that value back into the banner data position Which should be in this first array here but it is It isn't there But it should be here So you should actually just create it Ok so going back to the code let's do some of that There is a nice [00:16:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m05s) Get function here We can just say jform if you remember that was where the data is and if we want all the values back as an array or that it should be null if there is none existing So we gonna save that and then Just upload the file again to see You know how does it look now Have to do it again because of previous values are actually gone So we'll click save again and there we go we've get a little different array But more useful An easier to parse [00:16:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m42s) And now we can take the next step to actually check the this array exist There is a function already or a class in Joomla which already does All of this for you In fact I would say let's go look at that and let's just copy some of those functions In fact that's copy the function and adapted to our needs and just put it into Our our class so in components you go to the The Installer then the model and then uninstall and scroll down till you see one that says get package from upload [00:17:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) I think what it says yeah get package from upload This is the function which is really ideal for the task It takes care of a lot of sanitizing it has lot of error checks in it and it should Should be Yeah it should be useful for us in this case we'll obviously take some stuff away and add our own little messages so we don't depend on the installer Messages so we'll just copy this whole function all the way up there just control copy it go to look our class And for now I'm just gonna paste it in here above So there are some key things I would like to change here for example [00:18:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) I'm thinking let's Let's change a function name and we call it My Upload function For now And We we gonna pass it the input So we don't want that To be done twice And [00:18:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m50s) We know the this is gonna to be jform and we definitely don't want to have raw Because it's an image We want this to be array So we can actually check the values And then This looks fine We can say here Upload Sorry up load ing [00:19:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m19s) of images Not Available no wait and set uploads are not enabled in PHP that seems fine Ok we can actually take these messages and put them in here because JCB is gonna grab this Once we put it into our component and gonna add it to all language files for all component in this is really wanna make sure that that happens We don't need the Zlib because we not gonna unzip anything So we could actually move this part Now there is gonna check where we actually got a file set of files here so It's got a check wither that [00:20:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m06s) User file is an array And if it's not it want to say no file was selected or a file was uploaded so we can just type that in If at this point we detect any errors we basically want to You know erase those errors and actually break out of this upload So let's see Upload error warning upload error I suppose we need to go look at these language strings in the Language file of the installer to correctly translate these For now I'm not gonna do that so I'm just gonna say error [00:20:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m59s) You can you know do that on your own Ok now what we wanna check here is our Upload size you want to make sure that our upload size is what we expected Is the maximum upload size too small in the php.ini and that's really What happening here and so again it will give an error saying File too large there we go the same here It's checking again this time it's first checked whether it's in the INI files here it actually check the file size that there is a file size And so we can again say [00:21:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m57s) Upload error again you should just check what is the actual file language string And replace that with the English version here Ok then We build appropriate path We take the filename create the path we used create this temporal SRC which is source path And then we Move the file with the Jfile upload Now at this point the file is being uploaded to the server [00:22:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m34s) And they are still validation still to do in our Script what we actually Just grabbed from the uploader class We do this unpack now we don't need unpack we wanna do some other things here Which are More appropriate for our purpose First thing I'm gonna Actually move the get classes function up a few lines And also make sure to have the folder class actually available in case Then I'm going to clean the name [00:23:10](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m10s) So that it is everything is fine and well it anywhere later we might not have any issues Ok so then we still have what we did here before This actually is going to be replaced with little function Which I sort of started writing called Check upload I'm gonna change this function as one of my own Sort of functions which I've already adapted For other projects and The past Like you've seen we already move this one out [00:23:38](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m38s) That one can stay like that So over here We are going to just do a little check-up to actually make sure that the package Which we are actually going to Give back and which were used to store in a database and all the rest is actually you know Ok So here we just gonna grab the result of this which basically gonna be true or false and we gonna check If it's False we gonna say No some that I did upload [00:24:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m12s) Failed ok And Then If we still going We going to actually do this check So now we've got this check upload in place And we first gonna get the format from the file And then we going to use a little Custom script here to validate our format I've got a [00:24:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m41s) In my component I usually set formats that I allow So it's a global thing That means In your component you would have to actually go in and add config Drop down With a list of Allowed Formats now To sort of sidestep that in [00:25:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m07s) Instead of trying to Explain all that I'm just going to go and remove this Function here you could You know pause this and copy that down if you know what I'm talking about but then in That case You don't need to pause this you know how to type it I'm so I'm gonna remove that And just add You know some format was I think ok I'm ok with this JPG [00:25:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m30s) I'm ok with that format and I'm also gonna be ok with jpeg Ok obviously Add the dot there And Maybe gif let's see or wait png And then gif So those are the formats that I'm [00:25:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m56s) Gonna say yeah Those are fine of course because it's really the file extension that we are checking here right So we not gonna use a global value here we just going to use the file format Allowed file formats And then here would basically gonna check Is this file format in this array If it's not We gonna say Invalid file Format [00:26:27](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m27s) And there we go and is gonna error out but with this error out we will Need to do some house cleaning So We will have to look at that at the moment So what I think I'll do is I'm going there also passes the destination of where we've moved the file And Then Because that's where the file currently is right So here we got the temporal destination which is really In the temporal path the temporal folder of the Joomla website it's not where we want to end up [00:27:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m02s) It's just where we gonna keep the file until we happy that it's safe and so Ok we got it in the temporal destination we moved it up there And now we checked if something happened yet fine Do check the upload And Here If we now Find That this Actual file [00:27:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m26s) Is Problematic we gonna have to remove it So we gonna have a little new little class here And then we gonna say remove let's say file I think that's right And we gonna write this little remove file in a moment Ok so let's say for our reason you'll see here I've got a lot of Validation whether the user actually has permission to upload stuff Now that again I'm I'm gonna remove that from now because [00:27:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m58s) Yeah It's gonna be a little bit Beyond the scope of what we're explaining Now I want to pass a package back Which We are happy with Saying This is actually where our file is And what its name is And [00:28:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) So we gonna just do that So that's the directory And that is the package name And we gonna Pass that back As the package We could Since we've got the Format And maybe you wanna store that [00:28:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m41s) We could also add that to the array So There we go everything is good The package name directory path as well as the format and will return that back As the package And we give that back To the model The save function Is going to call this so in the save function we gonna call This [00:29:17](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m17s) here oh yes and we said We are going to Has it The input Field The input value since we're really getting it why get it again so we gonna pass that over here See something like That ok That looks good So [00:29:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m44s) Now all that needs to be done is over here instead of this Function We can now do The following This My upload function And the input there we got So I will actually end up with that package [00:30:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m07s) information right in this variable And we can then just exit out to see how that will look And even if we've got some typo errors here Oh yes we still need to create remove file if we have a problem Ok so why do we need to remove the file Well all the way up till here the files is actually not on the server It is somewhere in memory Somewhere in limbo And If something happens [00:30:40](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m40s) And we returned False here we don't need to do anything it's not really anywhere it's just gonna Disappear Same with it Happening here or there Or any of these other areas before here But the moment we do this We are actually moving the file to the server And it is now if that is true it is on the server And so when we pass the destination and the filename here to check upload We ready have the file on the server [00:31:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m12s) And so if we then discover that this file is not legit we don't want it we must remove it Or any other checks we do Even if it's something more complicated than this You must remove it Because it's on the server And so our little remove function I'm trying to save a some Some Unnecessary things I'm gonna also snipper it up a bit because we're ready up here [00:31:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m36s) We got the classes for the file in a folder so we don't need to load that again We going to pass it the destination Which is the folder And We gonna That's gonna be fine So All of us we are able to Actually clear out the name we don't need this we just need to package name [00:32:04](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) So here we gonna ask is it a file Then delete then if there's something not right we gonna do clean path and just check Again and delete in this should remove The file From The server You can test that if something's wrong just Google it And Tweak it but this should be ok So we gonna basically pass it [00:32:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m29s) The destination path Which is the one to where we moved it Remember up here So that's the same path we are passing all the way down to the remove Function and then It will clear it out for us And if everything is fine and it doesn't need to We gonna continue on and then pass it back here to the package [00:32:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m56s) Which will be returned to our Save Method So all of this code that I just wrote here now I'll take it and dump it on GitHub as a gist So you could go there I'll give the link to it but if this is Quickly coded I mean I'm sure that you could improve it We copy it and pasted stuff from other You know other classes [00:33:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m23s) To sort of get this working but there's nothing really to extravagant here the only thing that we didn't go into his exactly what does clean do and what does apply do and Those kind of things but you can obviously go through the Joomla libraries and Check exactly what does it do But for the most part it's just generic php Functionality And so yes That it would be enough To actually upload the file [00:33:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m57s) So let's give it a spin So we back over here if we Click on this it will actually take us out of the Item so we can just click the back there then name And we would have again to select the actual image so there we have the the image And we can click save And see what happens oops we gotta bounce of errors here Ok let's see undefined index undefined index we've got trouble Let me go see why Ok so I didn't pay close [00:34:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m36s) attention here I'm just gonna do another var dump So I can get the exact way to sort of most possibly need to do a for each It might want to upload more than one But Or we could force it to just use the first I think I wrote something about this Already somewhere let me just check Think this should do the trick If it's an array we just wanna grab the first value out of the array If you got multiple Fields [00:35:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) That are uploading files In the same view you gonna have to change this little chunk here Because then you gonna have to deal with each of those Files In a for each loop inside of this function Which basically would mean you could Skip all these as they are Global to everyone of them and then from about Yes from about here You would add a for each loop Because you would [00:35:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) Ok and then here you won't Echo well you won't break out you just grab the error into an array Which you would have eventually then pass More Targeting each specific package Really And then return Here All the successes as well as the errors and handle it somewhere else So since we just uploading one file I'm not gonna You know [00:36:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m07s) Do all that just gonna grab that First Value and we gonna work with that first value in that should do it Ok let's go back and try again Save Again we have a problem Not user files User a file Sorry User a file [00:36:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) user a file It become so Little Changes like that can Throughout errors ok And at last we actually have The file on the server What I had to do is had to take away these points here I had that one part wrong so it won't need the actual point actually be without it and you'll see that now there is our file in our temporal folder it is actually on [00:37:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m03s) The server and and also we have the path And we have the name And all those things In fact Everything now is Is good we can now move the File To its final location now we could deal with moving the file To its final location Here in our [00:37:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m28s) Save class Or we can again have another Function Which we passed this Value to which then moves the file to where we would want every image File to go Ok let me quickly type that out. So here in our package We've got the file name so that's Really important And we got the full path which is where the file currently is [00:37:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m58s) And what It's format is. We could actually have more values in this if we wanted we could do something like this Instead of just passing That user a filename And name pass it the whole The whole array Like that and then here we change that to archive And [00:38:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m23s) Then here we do that Which actually means we've got this array to our You know it's available So instead of doing check we can then do Package name And then dir And [00:38:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m42s) Format And Return the archive package Now we'll have all the information which we actually were using even up Here will have all of that information to our disposal Of coarse also need to change this to that Well you know what the name is already there [00:39:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m13s) so instead of package name We can just be satisfied with the name Ok and then we could call this full Full path Yes So that'll be there in any only information that we are adding which is really new with these two values So we can just do that And now our array looks full [00:39:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m44s) It's got the type the temporal original temporal obviously that's no longer there Any errors that might have come up The size of the File the full path and the format So we got all those information to to use now at the end of the day the only information we really gonna Keep is up to us We could decide to keep the size of the file We could decide to keep it format it's really up to us And really [00:40:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m14s) I'm not gonna go into how to deal with all that we just have one Name Field How will you say a column In the database called Bana In which we are to place our final Information and that information should be a You know the path in in relation to The image folder Where we have [00:40:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m42s) Placed this This file So first I'm going to get some constants to use I like Using this route As that is Always going to be the root path To our website And then next actually add Just the path to the images [00:41:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m07s) It's where we going to place our image So I'm gonna copy this So we going to just Add The path the relation to the root folder to the banner In the database Now You do realize that this is actually just for you it's so that you know where the file is later You will then on the front end of the site where you gonna use this value You have to [00:41:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m33s) When you get the value from the database you'll still need to create The Actual image html tag To actually load the image or whatever you gonna do with this file You're gonna still have the code that nothing of that's gonna be done you gonna just at least have the path to exactly where the file is because you're storing it that way in the Banner Column that's the field Ok And now here we taking the root path [00:42:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m02s) And that exact value And we are moving The full path which we build-up here right which is the actual current destination We are going to move it from the full path to the Final Destination And that is really yet At this point We got the image on the server And We are moving it to the correct location And we are storing the value [00:42:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m28s) In the database And we've done with saving and uploading the actual value As Yeah that would be all that's required Now In any of these steps You might wanna be more Do some more things be more secure be more validating Because it's not only images your obviously going to be uploading if you uploading PDF If you uploading other kind of content [00:42:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m56s) You gonna have to do some Googling to anywhere in these steps Especially in this check upload area To do the correct validation because at this point the file is on your server And you need to make sure that it's the right file Now this isn't Airtight Because this really just Checks that the files type Is one of these The extension [00:43:22](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m22s) It doesn't actually valid data File to really being an image They are more Secure ways to To do that But some of them are little bit more Yeah if you do use them the server side You know If your application is gonna be running And shared environments [00:43:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m42s) Then it will cause problems because in some of those functions are not available in all shared environments But if you wanna be Like very specific You could actually help the user along to who uses your application to Enable those functions on their server And by that giving them extra Security with uploading of files This is obviously a very big topic Which I don't think we have time to go into in that dept [00:44:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m14s) But in general this sort of implementation is really how most are doing it And yet Yeah Let me know Get you too concerned This should be ok Now We have moved everything in place let's give her a trial run So it says that it's been saved to excessively But [00:44:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m39s) No file selected is shown here Now we might want to Show The file that is now currently in the database Instead of this upload or Show the upload still but let's say someone decides to upload another one that it Actually changes it And remove the old one and adds the new one And displays the little image here As it is in the database now let's first see is it in the database [00:45:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m12s) Ok so here in the database we see there is our file And it is actually set to be in images autumn trees forest Building grass Dot JPG that is where it is Ok now let's see if it actually was moved To that Place So here in the folder structure we gonna open images we gonna click here on images then Scroll down and see [00:45:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m46s) there it is autumn tree You can see it there Yip it is in its place So the actual image does now Exist in the image folder It is been uploaded and it actually is in the database although Our little snippet there says that it can't see it Before we continue with that kind of custom scripting we need to take what we have done so far And actually added to JCB We've done and in the IDE [00:46:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m19s) And if we compile in install Store this component now You actually overwrite everything you've written And boom it's gone So what to do Let's go grab that custom scripting and added to the component In JCB Ok so we wanna grab everything From Upload my uploads function [00:46:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m41s) You wanna do check upload And remove file all of that we want to get So we gonna say cut And Got that in the The clipboard Then go to JCB And in the look Admin view which is where all this is happening we can open up Then there is a place called custom buttons You gonna say yes here [00:47:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m07s) And then there is the controller method we are not adding anything there But here is the The model method And so this is a place for us to actually add some script to the model And we gonna just paste what we've cut Out right in here And overhearing the list controller we're not adding anything and Also in this list [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) Controller we're not adding anything So we basically just adding that Which we written to the model method at your PHP here is gonna go into the model As methods so This is the methods That's a method That is obviously a method So all of these are methods We want it to be available to the class from now on [00:47:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m59s) We are not actually at this point dealing With if you upload a new file that it removed the old one That should still Be further custom Scripting And so this point all Just add the new file it won't Remove the old one So could be that he's adding more files and more files and it just gets added to the image folder But it's not being removed You have the remove [00:48:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m26s) file function already here So you could actually yeah you could actually fix this quite easily But I'm not gonna show you how to do that I wanna encourage you to Study up some of your PHP as well Now Here we need to also add obviously The Script that we are adding to the save method so here is the PHP save method Before data modelling this is where we want to actually Jump In [00:48:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m56s) And like it says there the value are in the data array So we just gonna go back to the IDE And scroll down to Sorry this time it's up Just gonna scroll up To this little snippet here Because this is everything new Right I just copy that or let's just cut that as well [00:49:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m23s) and go back to The JCB interface And paste it in there Ok so now we have our In the save Method before modelling We have this little snippet that will be executed And the same goes with In a custom buttons we've got in the [00:49:45](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m45s) Models we've got our classes that are being added Now we said If we open the item So that means after we've saved it We want to actually take the value in this banner And we want to display it in the page Now there are many ways to do this Since we already have this value It shouldn't be that hard So JavaScript to the rescue [00:50:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m15s) I'm gonna use JavaScript to do this So we have hands our script to the view file Or add JavaScript to the view footer so that means we can decide where to add the Javascript Do we want to add to JavaScript in a file that gets included in the header of the document Or do we wanna add it to the bottom of the view as a snippet ok that is really we were want to do it Because you wanna use PHP So We gonna actually do some PHP in this Area here [00:50:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m50s) Where as in this is file area we cannot do PHP So to show you exactly where this is gonna come out he's gonna just add a comment here Add Java Script Here And I'm gonna show you how we gonna do PHP P HP Also [00:51:20](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m20s) Works And We gonna save that Now we actually can go out of here and go compile this component And install and then go look at it code So here and our save class We have Upload image And that is all Good and right [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Now let's search for our function here And there is our function also in the same class been added Through JCB interface so it was not lost It's not exactly the same place we were originally Placed it but it is in the same class and it's what we want we want those Classes to be available to us here Ok so that part is still good Now we wanna go look at the view And see where that JavaScript going to be added So we'll just close images here [00:52:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m31s) Then go back up and open the view Then wait what Where are we this is the installer You wanna go to the demo that one View look And edit So we are looking at that specific View And you see here Is [00:52:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m59s) The JavaScript Ok So it's added it to our script Area And I actually am able to To do PHP Echo In the script area Which is what We are going to do [00:53:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m14s) We going to check whether that Banner Value is available to us on this page And then we are going to Use it to actually render the image in its Appropriate place Now to know where the values are We go back to its view HTML dot PHP Area [00:53:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m39s) And we see that here it gets the item and it places it in the item Global Class value So we have the value item we can therefore check if banner is in the item So what I will do Just So that you can Sort of see what's happening as well copy that And then I'm gonna go back to the edit View Where we put our html I'm gonna say [00:54:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m09s) I just var dump That specific value And save And so we can see all of that so let's go to the interface Ok we actually have to add the word Exit jexit is actually the correct way of doing it J exit To this and go little up because we got a little fader here it's gonna hide this and just Let's just take that out for now So we can see [00:54:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m44s) What's going on And then let's Refresh or page Ok so we got it all broken that's fine But here at the bottom ah still not showing Let's take it to the top So we've added it here above everything it should actually show now. So let's go see. Refresh There we go that's what you wanna see [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) So we see that it is publicly accessible there's the banner value so we can check whether there Is actually A value in this whether it's a string and has a value because we know we controlling that value the user cannot actually manually Add that value there It needs to do it through the upload field So we can check whether that has a string And if it does We can just create a little Show the image [00:55:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m39s) Underneath it's appropriate placement Ok so that's how I get to see the value So if you are dealing with something similar You can Do these kind of poking into the result sets to exactly where is what How does it look and how do I get to it and Yeah that way You're not dependent on the way sort of Not knowing what's going on So now here back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) if We gonna say if It is Set And If It is a string I'm using the helper class here we've got a function in the helper class called check string To see whether it has a length And that it is a string [00:56:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m36s) Not an array or a Boolean or something like that Now This is the way you can Sort of use the helper class to use the brackets brackets brackets Component and then bracket bracket bracket helper colon colon and there you go And If that is true We want to Obviously load the image [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) Because then it exists Now we wanna see where do we wanna add this image and it's actually underneath the the upload I'm just gonna have it show up like a normal image so we gonna just do some jQuery to To do that Ok so we are doing This image source and we are echoing the item banner because we know it's a string We can add a class here Now you can target this class [00:57:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m30s) And make it nice with CSS Just add your CSS is here To view Just here you can add your CSS so here you just add the the class name that you gonna target with your CSS and you can do All kind of nice things with it you gonna have alt and banner And we gonna insert it after the banner Field so the You know is the way we know what this value is Is we open one of those views [00:57:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m57s) like so And we drill down Until we find That's so we use our inspector grab maybe The banner Label then drill until we find the ID J form banner That's how I get it ok [00:58:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m13s) And Then We just add this after It after the control group so that looks nice fits in with the layout and I think it's broken Ok so That should trigger it So we saying See if we have a banner if we do add this JavaScript we done Save Now let's compile and in Install [00:58:37](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m37s) So compile And install Go back to our view And Obviously close this and refresh Now go to more and Walla there is our image Now to show you it in action we gotta change the image It won't remove the old one [00:59:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m05s) But it will immediately show you the new one once we click save So let's do that So I've selected to different image from my computer and then click save And go back and wow there is the new image so that is how you could implement The file Field type in JCB so as you can see there is some custom scripting needed I'm gonna quickly I show you a URL where you can go and get this custom script And use it in your own component And of course [00:59:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m44s) May be adapted to change it At least use it as a place to start with And Start using the Custom Joomla field type For uploading files Thanks for watching Is any questions or even Suggestions of how to do this easier or faster or safer Leave the commons in the area below the video I'll be happy to look at it and [01:00:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m11s) Make any necessary changes to our snippet ok Or even at the snippet itself that might be a better place And the gits where the URL I'm gonna show you now Are you can go there and make comments there and we will just make pull request in the whatever and we'll fix it up so So that works well for everyone thanks for watching diff --git a/057-Drag-and-Drop-Upload-functionality-in-JCB.md b/057-Drag-and-Drop-Upload-functionality-in-JCB.md index c644b8f..37ac170 100644 --- a/057-Drag-and-Drop-Upload-functionality-in-JCB.md +++ b/057-Drag-and-Drop-Upload-functionality-in-JCB.md @@ -1 +1 @@ -Ok if those of you who have Fur not already Watch this How to use the field type So the file fuel type To upload a A file If you haven't watched this Then How to dress is your first come and watch The Sartorialist Cause a lot of things But I explain it here Words I'm not gonna go into that depth Again Otherwise it Is it gonna be 2 hours But in this tutorial I'm going to the sort of the Talk about a Dragon Drop Automated Crop Functionality Which could also be used instead of this Implementation So this implementation would be I said it's more Limited You could do a crop With this one as well But we haven't Actually demonstrated that we going to demonstrate it now In this tutorial And The library I'm going to use before I Your enemy just I'll actually add a link to this video Underneath The one that you're watching Ok So The other thing you need to know about is you like it Of course I suppose by now You're very wealthy like it You like it has a very nice File uploading front-end Which I have used quite often So I am gonna demonstrate using UI kits upload But If you know anything about JavaScript and that kind of stuff It wouldn't be hard to Plug-in Bootstraps or Any other library which You actually wanna use JCB Can be scaled To be using other libraries it is go to libraries in Set up the new library and then in your Include the files in your admin View And there you go so At this point I'm just gonna use JCP sorry I like it now I'm gonna use the older version to you I get in my Presentation And that's simply because that's the one I've already got going in some of my projects I'm lazy or the reluctant Two actually Embrace the later release Because of his lack of compatibility backward compatibility Which is to me like Not not good Ok anyway let me Grant about that So where you wanna go You would like to go to get Uikit Version 2 And actually it to components This is where you would like to actually go Then You will see Sorry You'll see there is a Upload at the very bottom That actually explains too How to use this This library This is the JavaScript that will be using So it's got a nice progress bar and everything Up And This is the HTML Ruby using And it's got a nice You know Drag and drop area And selecting area So you can Dim sum Information here to the user As well as heaven drop the file right there And it works very well I've used it for Number of years now It's got some some Eventsair And it's very similar to Version 3 So if you wanted to see version freeze option you'd simply click on version 3.2 Station And scroll Summer to the bottom it says download And here it is Select Where is the market for the select And then the Dragon Drop there is the markup for the Dragon Drop so YouTube This And then this Jarvis So it's look very much the same as the few changes course Little bit changes in the Rosebud For the most part it's generally the same kind of approach so you would naturally just be able to plug-in this Instead you wanna use you I can 3 Or any other library You gonna see me making for example this dynamic And The euro is going to be done I make And weather is going to be allowing multiple or only one all those kind of I see I think the previous one and had the multiple option But this one also has allowed You know what what What type of image of file do you want to permit to be uploaded And the action is where the URL is right And yeah so you'll see me actually make some of this dynamic With the script that I'm using And of course here we are talking Ajax Oh so you are able to upload the File without saving The item Weather for this area is available And you simply can use a note Two actually At this Script to your page So that's what I usually do I use a note and just add this Somebody drop something here it's gonna post to the server And so if the item has ID I passed the ID So that it gets stored in the database immediately I'm sorry even if you save it Don't save the file actually gets added to that item And if it's a new item which means no ID we actually add a hidden field To the farm So we return the actual value that must go to the database And we put it in that hidden field So did when you then do save the item It actually does I store it in the other correct place So that's sort of the approach I'm gonna demonstrate that to you Step-by-step With an existing component which I really I got out there and which Not using And it is actually available In JCB so you'll see there is a new import JCB packages You could either click on this Or you can go to Joomla components and click on import components Is the same is really the same thing Tango go back to his dashboard And click on import HP packages There has been a release fix I think it was beIN The previous release if you clicked on import a submit package is it actually didn't Yeah I didn't give you this doesn't give you This Package tab here It gave you only those In fact it's still broken So best that go to gym along components And Ensure to click on Import components Then to be sure that it gives you this VDM packages tab This video and packages tab is in new extension on the import of components It's actually the only Part of the import of the components that already does Actual validation on the package integrity So for each of these packages that I hear we actually do have a validation Conserve giving your example how the world is not Already Free come here will See how the world isn't here So If I was 2 now Select hello world Click get package Roxy wetsuits from get up And it has a method of actually Getting a hash a checksum Of the package Now you can make sure that Elzhi hear that the validation so now this boy in the package On your server Now you can click cancel and that will delete the package from your server But This year tells you that the validation is pass so what is The actual package that we are distributing is the one you've now got And you can verify that By click on this link to click on this link It should open a simple A text ring Ok and this text string Should be the same As long as You see here That is sort of just a heads up and said area which we now We started adding song Caltex on validation And yeah it's not military grade but it's Fair enough I think I anyone trying to NOW stand in the middle of this He's gonna have Quite crazy gymnastics too To take care of Ok so at this point we The package is being imported this Displayed here and you just click Quiet means that You don't see all of the things it's doing I would suggest you Say now you wanna see everything Force update Means that if it finds a similar field type or a similar field or a similar atmosphere View anything that is similar And the creation date Is Younger in your system It actually Overrides it Because you're forced it if it If it finds it and the actual current date in your system Is older So that the one you importing is younger it all matic Lee updated With the latest Newest version This is how it works And that's why we telling you to make backups Because well the other advantages if you get to field type that was overwritten And it's not really what you expected You actually got history you can go back one step Usually would Ok So I'm gonna say yes force that and then continue And that simply adds Whole list of What it's done What is imported And it also moved an image shows you that Tells you done Ok so there we go hello world is Is now in the system Now We are going to look at something completely different And it is actually The Document manager is it paid Is a paid package Wedge We distribute You can obviously by this package From us It actually does have all this functionality you that I'm going to demonstrate now In it and so I'm just gonna use that can I add a key here and quick Continue And then basically install this component In JCB And then from there we will start demonstrating it's functionality Ok so we got document manager now installed here Let me quickly show you how Locks in action So I'm gonna install it to this component to my website And they must rate it Ok Now We have a deer component manager Sorry document manager We can create a document quite easily By clicking your document and you'll see that there is some allowed image formats are not set in the global settings please Notify assistant at Straighter So you can't disappoint upload Actually anything The image is not the documents neither any media So we'll go out of this and in the options of the component there is actually A media tab That says what type of documents you wanna allow So For our purpose I'm just gonna say PDF now with the media I'm just MP3 Hand with the images just take a Now with The images I know in Mike This component I'm only having one image and I wanted to be a specific dimension So I'm gonna say I want the word To be 200 And the heights Tubidy 300se makers C50 So it's almost like a book A four kind of Dimensions I'm so that's gonna Be used Crop my Image I'm using a library which l Show you in a moment which gets these values To decide upon how to act Actually go ahead Cropping It's an image Obviously if it's any of these it doesn't do anything only if it's an image Does it actually use the crop mechanism And it doesn't y on Ajax ok so we've done that 7 close If we now Again click on new documents We see this Dragon Drop area Like We are looked here I get help Sorry on Get a UI kit We see this thing in action really so we see it says that your Upload your image and it tells you Dad This is the What did the mentions should be And if not the doc will be cropped to this size So that means if it's not this Dimension it will be cropped that I the light enlarged or Uno downsize By dropping the file here or selecting a file from your computer And formats allowed JPG So it tells you what formats are allowed This is all Done Basically to dynamically through this Script role show you the moment Then the same goes here with the document it tells your PDF is allowed and where the media tells you MP3 Now the image I'm only allowing one image Words with the documents I'm allowing multiple Comments and multiple media for one document How this displays in works on the front end Works lovely no problems I'm going to demonstrate that that's not what this is all about I'm just Just gonna demonstrate Dysfunctionality of uploading a file And you need to you know if you use this in your own car Component you will need to extend that and use it and make it more functional as a As it should Should be in your Component Ok So now let's go and look at the code Very which we need to focus on first is basically the document Area of course We'll have to Look at somebody's fieldset attached here Some of its JavaScript And The Ajax area which is really where everything Things happening I shall see I'm using custom Go placeholders Most everywhere Because I'm re using a lot of the scripts Everywhere on other components And I've stayed for Adapted it so that it could be used multiple places So you'll see you're also of God upload file remove file Functions And it's got target and Type and field filename target Flash Type Values All these values play a role within the behaviour that we will eventually have Ordered be demonstrated On a pay well I didn't demos Strated I just Showed you how it is I will actually demonstrate it You also see here I've got this set a vast deaf mod Which is basically A function The generator For some variables Which this case is called VDM Which gets placed in a Terrible Call was Def mod This formation Is what is used to identify the view From which the query is made This is a long string which really is related to the cash At that stage Of The View ID and name This is how I passed the view name and ID So I do not really pass it by other The Ajax query I actually have it in Session memory And only if these keys valid they does it Actually work I'm sort of another layer And another layer this many layers in this to To try and make this secure Then this admin kit 2 is where I am actually loading All the Uikit Files So I am manually adding it to the View the admin backend Doesn't actually work as the site views where We could select A Library in a dynamically Ok answer to the view on compilation you have to manually add it to the view and you'll do it basic Sickly in the cust Script of the document Now I can show you some of these Snippets And then Then we can take it further There's obviously in the custom door buttons area This is the get VDM for the metallic Explain Again we have some custom script here And that's basically all that we have there And then into JavaScript area we again have set file Part of the scripted will have to look at And you see I'm using set file here Here and I'm here because we have an image We have Documents And we have media And they all Using the set file Method Which is the JavaScript Function Which is declared in this custom Script and here at the bottom of the footer We got What is known as get file Snippet which again deals with actual some of the automated integration Of the file when Drag and drop And that it actually made it Plays On the page this this takes care of that Ok so We'll go at look at those individual Concepts We also going to see like I said previously Some notes So here is the Main media uploader note There is the main document upload the note and there is the document image uploader Goodnight And so this is where I've added the HTML For the drag and drop that you see in the air Admin View Then we have for each of those correspondingly a hidden View value For the document image key Main document Documents Skip and a Main media key All of these are hidden Fields Which Basically is where we store These values Under That's really We'll look at some of that as well Ok So Let's go and see the code that is used Baby let's start in the Right So let's first look at one of these I'm uploading Concepts But since I know what's happening there I am already aware that The actual code is not there So it's actually also custom Placeholder submit so before we actually dive in let me Anyway Open the customer code area and go back into documents So that when we see the code Snip it We can actually go and Look at the code snippet Let's use this document uploader Note And open that So here we have the document uploaded note Basically we have a diff All the way down there Which has an ID And then it has the Class for the placeholder Some icons And you'll see Try again have here upload your document They're here I've got a span tag That says main documents formats so it's basically gone Be the place we load the formats with JavaScript And Then select the file from your computer is So this is all basically It's this Newport Just with a little bit of extra Flavour That's really all we looking at And then obviously there are some conventions Like main documents uploader That again here Upload drop main documents Nelson when is which if we go over the code Eventually you'll see that those conventions is what really makes this Usable then in the script area I added a JavaScript View footer And a JavaScript I'm using Is this you I get file uploader custom code so let's look at that then First We can just search for it There it is we can open that so this is the code that gets added So it's got a little bit of beer BHP here And it is saying ok great Argument 0 Formats so we are asking we getting the global parameters Of the formats reset Which remember I showed you we said it in the global settings so here we are saying document is the First Parameter passing So we are basically saying document formats here So we getting the document format and then Here we have part 2 and art one progress bar So if you think about the ID here It is progress bar The 2nd hour Which is the third argument Is Maine Document sister Second argument sorry the first argument because we counting from 0 so it's actually saying Main document So if you look back at our thing here is his main documents Formats So this is all part Of Main Documents It is the way we Identify the progress bar to progress bar and see The progress bar Uranus Progress bar main documents so it's an ID There's only one of them on the page So it's targeting it here saying ok that's the progress bar we gonna And Then Is having some settings the settings obviously the action We using J router now this J router is a little JavaScript Trick that I wrote because of an x You have this Side view or are the admin View You have it in the back end And you have it in the front end And so this is this just takes care of whether it's a backend or front-end call So that it actually executes correct Now that is your component name The argument one again would be the second argument Which is in our case Documents So basically there it says documents the type and then this the third argument which is showing as a sec Second one is Main So it's passing the target is made Rose true it has the token and there is our key Which is being used to identify the view ok so it's making a query On this This area here And it said dynamic Then over here We know that the formats must be Added to this area with pipe fitter in it It's like you remember here It adds the formats were With a pipe So we're just basically exploding the array we got here from the global parameters For documents And it is play City In here Then again we have other This actual snippet I will add under this name on a GitHub gist So you could actually copy paste it from there and adapted for your purpose Begin here We are also Imploding the formats because he wanted this play it I want to show the use of the formats So we have you Second argument or sorry Third argument and The second argument format which would be Documents and Main so if we look at our d'oeuvres We see there the formats is Documents main format is targeting this span tag And basically adding it in there Ok so that is Adding the formats HTML to this ID Then if We've detected up here That you didn't have any for maths set We basically gonna update the whole Turf Which is the upload drop area worth allowed formats are not set in a global setting Notify system that Best rated So that's the final part of our JavaScript so we have JavaScript next in with H2 Gmail Taking care of Someone do this Play and I'll behaviour on that page Ok so that is the reusable snap it So I'm re using this same snippet fileuploader For various areas So If we were to close out here And I was then to actually open the media Note You'll see that it's really just using the same snap it so if it goes the script it's the same snippet I'm just changing the variables I'm passing here is saying media media Main Where's the other one was saying document documents plural and Main This one is saying medium medium a And then The same goes with the with the image The image we also have That kind of behaviour Say you are cute image upload this one is not using the file uploader Is using the image of load which is a little different There is an image Uploader and Les images uploader in my custom Snippets I'll show you Why there are difference One allows one image And the other one allows More Wait him I'm over file one Allows one A more than one this one only allows one So it has a little bit of a different flavour and behaviour And yes I will also Should place this out there get For you to have a look at Always remember these arguments are Behaving the similar way as an array Which means that the first argument will always be zero the second argument one and so forth So I'm basically using arguments in And this slip it every where where I declare it I am actually passing There are three arguments that is required use this plus there to pass And the Death of History looks very similar except that it now would say images And Images Either using different placeholders So you need to update those accordingly As it's needed So that's just to set up the field Set up the field you need to have that JavaScript in place and you need to have that diff Sort of in place Regarding the hidden if I was to take one of the hidden Fields let's say the documents Hidden field you see there is some naming conventions here that is quite the I need to follow So it says main documents it doesn't do say documents And you'll see when we actually add the value back to the page Were able to targeted based on these naming conventions so yeah that's Quite important and then for some security Which It's really just a little extra layer I like the guy one guy said you know it's not that we can Really stop that we can just make it very hard So there are different encryption option this medium encryption local file Is actually better than the basic the basic stores the the the key in the database Which in that case means that if somebody sweeped your database it they actually do have the key But it could happen that they were able to get hold of your database but not actually all of your files Specially those that are behind the public repository so the medium encryption option can actually generator File behind the public folder which therefore is not publicly accessible And That makes it just that little bit more difficult to actually get a key to open The value And the reason is let's say your documents are You know not available to every group on your system maybe to some groups can access that document then the This is another layer of security that's already my default built into the fuel behaviour Ok So that is Really just looking at the fields now the admin view documents have some Custom script in it as well So we got to hear the set file which really is the JavaScript that Why is the The weather Gets the request back from from from the Ajax call You'll see me show you if we go back Here Here on autocomplete which Are all complete sorry there is a function And then At some point when everything is satisfied and has you set file key And it passes a bunch of variables to it Does really this is really the function That we're gonna have to look at So Let's say let's who's that set files as And insert it here So here we go So we'll see here there is a set file key function In the Document And That's what's being so in your Ajax which you using UI kits Uno function It has an auto complete So even if you look here Sony auto complete or complete which is a place where there when you know the server restore It's done everything is good then you can do some house cleaning in the browser And that's really what we doing We're taking you know if it's done We take away the progress bar we if it has an arrow we actually Pop out there is an alert if it's successful because we decide what this responds you going B So we decided to give a successful Value in the array then we fire the set file key Which is actually I'm looking at our Admin View We're adding this custom code in here and it is actually adding all the score that See here Is being added Squad a lot of code But it's all being added To the admin of you and it can be used for different admin views If it's obviously dealing with either images documents or media so I'm gonna try Try and explain all this looks almost end up teaching you some JavaScript Hello I'm being accused of writing telescope like b2b yeah sorry Ok.is The JavaScript here actually does some taking and validating in and I'll put this is Well I'll just put it out there and Really when it discovers that everything is fine the file actually was added Then it You know goes ahead Yeah it's checking the length of the filename see if the filename length is not Not greater than 20 Or if the Sorry and if it's not an image or a document Then it must be removed So the return values are here quite key To make sure that there We have this week Move file from server Functioning place Am I so due in the at View that we've got these Remove file tasks And the methods well this basically is going to force Scroll down a bit Here Here it is It's basically Querying that Remove And it's passing all the necessary variables To remove the correct file Yeah it's also checking That a person who is trying to remove the files actually logged in user and on the file Where will late when the moment we are look at the actual PHP which will again Validate that that user actually has permission to remove The file So there are all these checks and balances across the piano every step of the this implementation And I see you bye now I might realise this implementation is far more complicated then The one where you know the normal file upload that simple this really gets into them Nitty gritty of some of these things because you wanna give a real easy sort of Behaviour for your user But that will mean that you need to do way more To sort of thing for them and protect them So they don't Actually become vulnerable at any time Ok so Once we satisfied that the file is correct and it doesn't need to To be removed We actually Trigger A few Things which actually puts the file In the page That's really what we wanna Eventually end up doing Set file Is what We are moving To Wards Because we want to make sure Diet The file now after you've dragged and dropped it on the page Boom it shows in the page once it's really on the server And that's really what's Being done here a little bit It's doing a little bit of checking just to make sure we're all good Everything's fine And we end up with what we now called File name And it get past here And now We are moving Into set file And the sent file is gonna take the the target And it's going to Determine What kind of target it is Get the format get to this get that that So we can build the file name correctly And now I've got some functions here Which maybe not what you need But I mean You look through this And you decide what Keeping what is Throughout But we end up building a notice Which actually has You know You're so so happy Set And Then It Triggers The get file The get file is At the other function Which if you look at the admin View Let's go back here JavaScript We've got you the set far And here we've got the get far The get file is it getting another layer of validation and also just like Ensure that everything Is really Behaving as we would want in Spect it to behave So the rest of the snip it here is just a remove file and is Jason's String we also have a look Supper to check if If it's just ring Empty So part of just Sanitizing and validating Making sure everything Is the way we expect Ok so That's Will now wanna look at the gets filed as Which Has different Implementation and as you can see It is in the footer view footer so we have ph Speed In that area of the JavaScript So is this set and this is They get file In the get file We have a Again and Link That was a code Which we are now gonna use to actually load To make it that it can be downloaded Now that's really there should If it's a document or if it's a media We obviously don't wanna display it but we wanna have you be able to To download it So we have different behaviours for image and M Images As well as if you Scroll down for Documents at 4 media So it has different behaviours it continues building Buttons and displays And Pop this code also out there on the gates And you can look at it And See if you can make sense out of it This thing here the document link Order document button Is The potential idea about this If we go to actually Close out here And go to the actual document manager In the document manager when you create a document You have hear what I what we call description So if you add a document you can actually use those Place holders In the description And It's the beginning of Actually using these documents Across the website And not just in the component So we all eventually right little plugin And if you actually use This place holder which Generates If if you use that Anywhere The plugin Will identify at And will load either a link or a button Depending on which one you using This is the bottom this is the link That's really what it's doing So You might say I don't need placeholders and you Crap that Parton Take it out Also then we ever The bar placeholder Tom is being used in You need to remove Four example of There Because we got a file box that Building And it's basically getting the place holders The download and a delete button All of them get loaded into To the file box And If we are having more than one file We are treating And really that is what we do here being the document All different Behaviour but somewhat the same And That is what actually then does the final stretch Slikour name Erase one carries it this far and then the other one takes it over Carousel further And this one is at the very last end of the match Where it is now finally putting the in Back into the page And All of the nice little Frozen bells and whistles happen And of course this is where you can really Spice It Up JavaScript And And you can see how I'm I'm using you I get to Actually with Ok So Now you've seen The Front-end As we would call it Of the behaviour of HR Dragon Drop So you've seen how I set up the field You've seen how When the Ajax has finished it's crew Quest It actually Runs this set file key And the set file key Then Triggers Whole bunch Which ends up Adding the The file to the page Let me demonstrate here In the In our little New document Let me demonstrate some of these function Ucansi That was off now explained exactly what it does So here I've got a bunch of images Is Justin Eric open Kind of Images So I'm just gonna grab one And dump it in And You didn't see that wait Scroll down Get that image again Put it down a little lower then we get another one Let's use this house And I'm gonna drag it there and highlights it Ben from moment it has this little uploader because we are Local network Fast But usually it's eating Uploads And then when it started says your document images set So that was built with JavaScript And there is the document Meat on display And there is now remove Click that and he'll tell me are you sure you wanted to leave this document Yes and Form-Scaff Ok so and we back at Square One As if we had nothing And it doesn't only deleted from the page it actually removed On the server As well So let's drag another one just Drager tear drop Uploads and there is all nicely cropped image Obviously crops in the centre of the Image because How does it know the house is on On the side I'm not doing that Smart Dictionary We just cropping the image And the most Sensible way Now with the uploading of a document More less the same let me just get a document Ok so we got a document here And you can Dragon Drop it in there And again it uploads it And with the upload It generates those links I told you would you could Copy And I'll put it in In the Description If you want Or you could taste it What is noteworthy here Is that the name of the document doesn't Actually get lost While The the place where documents are added Is actually in the same Older so You could add multiple documents to This document I'll just keep on stacking them Though they even have the same name It will have each one will be I think Eclectic uniquely tagged Do not be the same as the other Which means that on the server we are storing this document with Long hash Sort of added on The name Which is an extra layer of security so people If they could access the folder there at least No no what the name is in Same with the image if we were to Actually inspect the Image You'll see That that image He's got this Huge name dog image JPG Grand Island through JPG So it's no longer than that same name as As the one you uploaded It actually changes it if there is preserve the name for example in And the documents Option here So did you giving to someone the document they get what you expect But we do actually Adaptor names For security So that You can't be actually allocated On the server if for some reason Ok and so you could taste it by clicking here And it should then just Bring it up in And be available as a download Now how the download works here with the document I'm actually using a controller so if we Hovered over this Link here You see ok you can't see See that Showed you Well Maybe I'll just show you the Ok I've copy the link here now Huge because we are using Basically a very much of a Encrypted Path to the to the file Sometimes being group to the sometimes just be PHC basic 4 inch But point is we have what we see here as a task download Document so there is actually a controller called Dell download In my component And I will show you how this diet download document Concept works but You need to write that You need to To figure that one out That's sort of Onto you That's if you want people to download your Your documents If it's yours to upload images Course You don't need any of this But only when you gonna actually have it downloadable File Or media So next one we wanted to show you here It's just upload some media file Ok so here I have a bunch of audio files And I'm going to upload them What I'm going to do is I'm going to select Whole bunch of them And then upload them all at once Which is really what this uploaded can actually do So See there we go Drop it there And Can't see it yet but it's actually uploading uploading uploading And Think I need to refresh the page So let's give it a name Let's say The Document Let's say More Soon And then save this And then see ok it didn't Actually upload all of them Interesting Let me try again Ok now I've got 6 of them uploaded so I can see there are 6 documents and you can Actually download them and test them See if they are still fine Why the home The order of the home Yes We see that the documents Work outlets sorry than media is working But it's also do that with documents let's add some more document So I've got a few selective and Drag and drop them there 123 And is uploaded I need to maybe check some of the JavaScript I see you didn't add the download button here But without saving if we just refresh the page you'll see that it actually has All those documents are there Because it's really used a jacket Store them in Database And so every end of day That is the behaviour we wanted here in our component we wanted the option to upload multiple Documents to one document and multiple media files And To be able to test them in the backend if you wanted to test any of them And in even be able to remove Any of them At any time You could just click on remove and it will be removed and in the front We'll be able to use the file names and The user Would be able to identify oh ok so this is what I want And so the filenames actually get preserved While it is actually being stored Ended in the server With this Hash behind it And so We are seeing the JavaScript we looked at earlier in action it is uploading is deleting This one is actually cropping which will look at it a little more So That is seeing our Dragon Drop Options in action Now let's go look at the server side of the simpler Annotation The server side we have in the documents admin View Opening the PHP tab Got this Ajax error ID And Like a show before Youth office Lee need to set up the Ajax with this area targets the controller So in the controller it creates all these necessary script To make this Method Which is again we gonna look at inside of that Custom code Make this method available to the Ajax call There are some values that we set because every Component I used to stuff in is different and so for somewhere using images And media As the types And for some The target on Main and dark and the allowed view there's only one of you in this component that is a lie To use the app loader and that is the document view and so they get view ID Is the function With which I get the actual view name And i d And it is basically using The Session to sort of Throw That around I'm doing sure That nobody is able to tamper with That value through the front and anyway So little extra little gymnastics to make Just add another layer there Ok so we gonna look now at this PHP Ajax uploader in the custom codes area So let's just go here and then Search for it So here in the customer codes area and why I'm using custom code because I'm Reusing this At the moment it doesn't look like I'm re using it many places it only says it's used in component but this is not the Area where I'm actually doing my work this is just for tutorials I'm using a whole different developing environment Runner developing System to my website then this one so this one is just for this Explaining and This demonstrating ok so I'm reusing This code in many components And here We have format image formats that are allowed and In the system Document formats that are allowed in the system Media formats that is allowed in the system and this you can adapt to whatever you need At the end of the day It's up to you to decide what you want to Allow and what you wouldn't the reality is this is the available formats but as you remember Here where was it again I'm in the options area of all component It has a media area and there we have allowed documents allowed media formats and allowed image Format and These is Should be the same right it's would be the same list having the same values But these are what is it The custom field we created in Joomla List field and so we manually added this Do the components configuration area so if you don't know what that is Let me quickly show you So in the component Here is our component it has the Where is it there it is component config If your component doesn't show one like this hello world doesn't show a component config You can go into the component And then here in Let's see thanks settings There is this button here of great component config For this Joomla component and it's in this I'm gonna close out here I don't want to do that one of I could just show you with a doctor Manager Basically big I could use the same button in settings There it is We can actually edit or now if it hasn't have one if you can Create an ear you select fields With a custom values and the tabs in which they should Should this play and it's basically as you can see here I've selected allowed document formats list Which is just a list of The format and I obviously said it to allow multiple selection So that's how I'm doing this allowed media allowed image and allow documents and And then here's the crop document image and so you if you do not know how to create a field and how to Set radio buttons or list Then go review the videos about that I'm gonna Why not now But that's really how we deal with that and that list that list that we looked at now Now is the same list as what To see here It should be the same Because This is the allowed And that list Shows the View user what is allowed for the system So how can I Sorry notice Sorry about that Notice came up and messed up everything But I hate to start over now Anyway So this is what you you could say as available for maths and then those Dropdowns is what you as the owner of this website Where this application will run is what you will allow Ok and that this list would be the same as the one there but it also is sort of going Going to be use so that people Post a specific type As if it is allowed we're gonna able to sort of bounce this and make sure that Security wise we are safe So here's the upload file function And the upload file Stars by first getting the view ID Taking it And Then making sure that there is a view set Boss And that that view is actually part of the allowed views array so they allowed views array if you remember In our Where did I show you that Ok it's in the admin View document at mizzou Maybe this one no here it is The allowed views is documents So that's why I'm saying I'm saying that outside of the Custom code because it Depends on which component we are working in right So if it is an allowed you We then get the target And the type and we said it to Global target and global target type Then we take that this type What is the format that we are talking about so If we think about The format There is Again we go back to this one I hear it's move it closer so we know Close to each other That is the Formats that we allow the types because we want to Sort of validate that the person and who is uploading Is uploading the things we anticipate so it is setting the format with the type So if it's image it will be images If it's images it will be images If it's document lb document if it's documents it'll be document and media will be media so that's the Types And we setting that is the format type now then we using a function get package from I'm upload now if you watch the previous tutorial of using the file type uploader Then it's more or less the same kind of function So if I scroll down Get to it where is it I get package from upload so Are the differences we doing the application update and Put in the function And we are targeting files because we are passing those values in the files place Then We are seeing what is the file we are checking whether these things are allowed warning import a file Error This kind of error you'll see I'm not throwing it Tu Jo Mila I'm adding it to the error messages Error error message Because we gonna have to give it back to the view Where were you when I'm able to at this is Ajax call he did nobody will see it if we just You know I used to raise warning or something So we are actually grabbing the value in saying We done here get out of here if we still going and so you see you could go through this and Very much the same implementation than the one we've demonstrated the only difference though is our Check method is actually Hello bit more Taking that View And again validating it So we doing a 2nd layer of validation here And then checking whether this Pacific user that is now logged in has the right to actually Edit this item so it says doing some user validation And if not it removes the archive And it's really we still gonna have that remove method with little bit of the code that you saw me take out Is still left in it here In the previous two Tutorial I use some of these codes and yeah so that's really all this Same I'm not gonna go into depth if you don't understand what I've just looked at here then please go back to the The previous tutorial watch that I give you enough information so that we actually up here in our file upload Upload file here we at this point have the package And we passed the package to upload now Now move the file into place so remember we had to do that in the The previous year I'm using a function upload now and in the upload now function we We are returning and if Any error now still remains It's gonna be down here where is errors that might have a good year if this was false We would use that See that's the error message put it in error And Pass It Off and if we were having Any other issues we will do there it's been an error and will pass it out so this error handling there already Now in upload now package We are checking whether the package is actually there the package name and we're starting to From that we are building the Name X showed you or explain to you That we are using This we're preserving the filename but we are sort of hiding the filename so we Using the target the target type the file format and then this random key Now I'm not exactly sure I think all JCB helper classes comes out with this Random key so you could just use it in your component and you can decide how long this string should B and then I'm using a little place holder which is little generic placeholder BDM Hyundai Then I'm adding the actual name of the file after this placeholder so that everything before What is placeholder Is really internal my system uses this but the client uses everything they say Side And so then if it's a document We are gonna need the folder path for hidden file path so again Get folder path is a function which I wrote And I'm not gonna share that with you But you can build your own helper class function To get a pass to where you wanna put the file this is up to you I'm using a hidden file path But there is A lot of Discussion behind that If I don't pass any values I would like in this case It will most probably return a public path And which would be where the images So every documents go in a hidden area Images go public And usually because the image you wanted to load somewhere So you don't want it to be behind The root folder of your website Ok now we end up here with the full path which is the file path Sorry for this this one here The filename and the file format So that becomes the file name And this becomes The file format Now I think you will notice that at this stage The package Name Is Is really was used to build this And we stripping the file format from that package Sure That it doesn't have a file Really to ensure that this Yeah this file is stored in exactly the format we detected as and not as what do I save it Now We move The Buckets Where I get interesting To its Final Destination if something fails at this point By the Dozen We actually remove the package and we say there was an error So we just like without We not gonna worry about it If it succeeds then obviously if it's an image At this stage Image We definitely want to resize it so I've got a resize Image helper Class This is also something that you would need to write yourself Which Helps me to resize my image Time passing it some values 22 actually target the image and resize it And it really doesn't change anything with the image location Or anything like that so I don't need any value back I just need it to resize it and get it done and I don't need to know anything else Then I'm doing something Christian here To see whether the basic encryption is available in this program And Then to actually use that in Christian When I start storing the documents To the database So Here is a local file And We are checking if it's a document or a media We are going to in And Then again here we make sure that this ID value Is greater than zero because if it's still unsaved item We don't have any place in the database to add this So we could just skip this pace So if we realise ok this This file or this Upload Doesn't have an ID Then we skip this function here and we rather do if it's an image If it's a document or is it it Give me if it's a media Then we load The filename like that And We are going to pass it back 2 The View Basically taking the results See here Formats it's got a lock value Teratogen Link Soda has different behaviour for the And all bills this result array and this is what we Give them back We give them back to result rate And it gets started over here File format is added Her success gets the file name which is this value here And then we start building some other things Switch on Acer Siri Like the token link Forwarded for them Because you want to have the downloadable if Media document of its media If it's an image now we don't need any worse we can just skip that And then the key name And there we go We done Where is it it is actually a safe item We are going to update the database right now With this new target type And Target So this is where the hidden field name Remember I said to you there's some Some convention In the hidden Field name Well this is where that Convention comes into To play the hidden field name is build up from Target And target type Under these two are not correct we are going to not save this value At all And so we are building an object Which then we take And since we have validated this this is definitely I love you And this Object and this ID and then we update the database And Yes We're done We've got the File name And we are basically going to pass the filename Here Same way And return to the browser So that's the service side Of this implementation There are some things which I haven't explained Like This Encryption Sorry Resizing of the image I didn't give much Get the folder path didn't in You need to write all that up But You could make this work without knowing those things You You could Put a Hardcoded path Here is the file path And you could You know not do any Many cropping and let Let the user Make sure about The cropping That is really How I upload many of my Documents Things Obviously this is Connor Sleep improving Because I'm using the slip it across multiple Places It's very easy for me to come in here And say all this is not Ideal and Fix it And then it fix it Everywhere for every every place it's News And so there is sometimes the Need of decoupling some of these functions in some but I'm trying to The highest Rise much as I can to Do that So set filename array that's another function that you saw Here in in the upload Set filename array The Stepfather Marais is really T when you realise that the actual file Already exists So there it is there Because that means that there are other files possibly still already in the database So with The ad and basic view we actually trigger the set filename array Function To check the database For that specific Target Field get the values I decrypt them and Load new values to that And then basically Pass it back to us Where is he the item doesn't exist That means it doesn't have an ID I don't know if you remember when we Did some demonstration I was Actually adding multiple Media file that only one ended up Being remembered And that sort of the downside Of the current Implementation Is that if the ID doesn't Exist We're not able to actually keep track of So it's only when the ID exist That we are able to Actually do multiple uploads Once So I should actually Give a little bit heads up of the about that That you want to save the item You're actually really to To expand upon it And to allow Multiple upload Once So the set filename array is Is really dealing with multiple when you are having multiple so you'll see there is image And document Is when the file I'm using the The plural You tell me That it should allow multiple So if it's single or Image And document that I don't allow multiple I'm just gonna remove the old one And Anthony Done And when it is plural And we are using the set filename array And we basically building It 2 GB Multiple And then One thing I didn't Empress Desai's here Is That we actually remove the The files as well There is a remove file right There's remove file And it also at some point does a validation To take whether the user has the Permission to remove files And And then will basically remove Defile So that Also it's Also uses Is this file name But then it passes the remove Variable to it Which stand means the action is not to add but to take Away and You will see that there The action here There is the Add So behave still different So we still basically get back the array we still build an object and we still updated Database As well as Actually removing the file here Ok so all of this code I will dump on GitHub and the gifts For you to reuse as you see fit you lovely have to Adapt IT And Keep it under an open source licence That's Only requirement Ok well That if all those things line-up and are in place Going back to our Admin View Basically That needs to be there These Need to be here so you could Pause the phone And Video And just make sure that you have the same kind of Ajax Query calls option And then here I am actually Doing some opening of the files You see that I'm building but I'm called links So this is going a little Beyond Just showing it above my information and these links Eventually End up on the page So we go back 2 Our JavaScript Here Scroll down We see this get filed as Now let's Again look at that get file jsp Because You'll see the doors links Actually come in To play there Remember See here Oh I see now is not in that JavaScript Is actually down here You see that here I got a Load the links to the page document links And I'm actually adding it to a variable called document C So in the Custom script Where is it It's this one you'll see if I If I now search So I'll take this copy Hear all search You see that I'm actually using that array And saying is this Just Property there And then creating a link And so that is how we deal with some of that And it it works very well To sort of pass value Strong JavaScript 2 BHP And have it available there Ok well I know this was a lot of Things to sort of take in and I would expect you to realise that that previous implementation is So much easier But like you scene When someone actually does create a document And they Are able to so easily Just dragon Drop stuff And it just crops in It just gives your component so much easier you know for you feel to it Instead of The olds you could still do the old select But the Dragon Drop is Becoming quite popular And this implementation Really Very Very Yeah it's very nice to have And I'm sure from what I've shown you you should be able to get this going in your component I'm not really gonna give support on to this meaning that If you get stuck you on your own Because if It is really the truth that you will need to know your JavaScript you'll need to Uno Your pH Speed and you will need to know how to debug Allowed to line-up these Concepts That they old I work in Synergy together It's not gonna be So easy for meat Do that Speci since I usually do not see the code But if there isn't any of the code that I've share on Gets Which I will also put in the description below this video Even have that code has issues in it Or errors in it that the That are like ok And a big problem or something Then please do feel free to Give me a heads up over there And we'll collaborate Improve it as Necessary At the end of the day This feature is really way behind What What you really need There is a media manager in In Joomla Which is actually ideal The advantage about this way is that your user is Is never gonna interfere with other user's Stuff So if you use this concept they not ever gonna actually look on your server at a list And select stuff This is why I think people would like the Because they can upload stuff in It doesn't affect other people it doesn't make Immovable as the owner of the system Who uses the application So it is I think we better approach But like I said there is a media manager So if you go to content There is a media manager And there is a media file type Which Works very well And And can also add These kind of functionality to your component If this is a little bit too challenge Challenge for you Anyway thanks for watching I know this might again be solved such a long 2 Tutorial But I'm trying my very best to To sort of get you on your feet \ No newline at end of file +Ok if those of you who have not already Watch this How to use the field type To the file field type [00:00:09](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m09s) To upload a A file in JCB If you haven't watched this Then I would suggest if your first come and watch this tutorial Cause a lot of things that I explain in here Which I'm not gonna go into that depth Again Otherwise [00:00:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m25s) It's gonna be 2 hours But in this tutorial I'm going to the sort of the Talk about a Drag and Drop Automated Crop Functionality Which could also be used instead of this Implementation So this implementation would be I said much more limited [00:00:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m47s) You could do a crop With this one as well But we haven't Actually demonstrated that we going to demonstrate it now In this tutorial And The library I'm going to use before I go on let me just I'll actually add a link to this video Underneath [00:01:08](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m08s) The one that you watching Ok So The other thing you need to know about is UIKit Of course I suppose by now You're very aware of UIkit UIkit has a very nice File uploading front-end Which I have used quite often So [00:01:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m29s) I am gonna demonstrate using UI kits upload But If you know anything about JavaScript and that kind of stuff It wouldn't be hard to Plug-in Bootstraps or Any other library which You actually wanna use JCB [00:01:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) Can be scaled To be using other libraries it is go to libraries in Set up the new library and then in your Include the files in your admin View And there you go so At this point I'm just gonna use JCB sorry UIkit now I'm gonna use the older version to you UIkit in my Presentation [00:02:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m14s) And that's simply because that's the one I've already got going in some of my projects I'm a little lazy or a little reluctant To actually Embrace the later release Because of his lack of compatibility backward compatibility Which is to me like not good Ok anyway let me rant about that So where you wanna go [00:02:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) You would like to go to get UIkit Version 2 And actually to components This is where you would like to actually go Then You would see Sorry You'll see there is a Upload at the very bottom [00:03:00](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m00s) That actually explains to you How to use this This library This is the JavaScript that will be using So it's got a nice progress bar and everything And This is the HTML that we'll be using And it's got a nice [00:03:20](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m20s) You know Drag and drop area And selecting area So you can give some Information here to the user As well as have them drop the file right there And it works very well I've used it for Number of years now [00:03:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m37s) It's got some some Events here And it's very similar to Version 3 So if you wanted to see version threes option you'd simply click on version 3 documentation And scroll Somewhere to the bottom it says download And here it is Select there is the markup for the select [00:04:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m01s) And then the Drag and Drop there is the markup for the Drag and Drop so you'd use This And then this JavaScript So it's look very much the same as the few changes of course Little bit changes in the those but For the more part it's generally the same kind of approach so you would naturally just be able to plug-in this If instead you wanna use UIkit 3 [00:04:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) Or any other library You gonna see me making for example this dynamic And The URL is going to be dynamic And whether it's going to be allowing multiple or only one all those kind of Let me I don't think the previous one and had the multiple option But this one also has allowed You know what what What type of image of file do you want to permit to be uploaded And the action is where the URL is right [00:05:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) And yeah so you'll see me actually make some of this dynamic With the script that I'm using And of course here we are talking Ajax Oh so you are able to upload the File without saving The item Whether for this area is available And you simply can use a note To actually Add this [00:05:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m24s) Script to your page So that's what I usually do I use a note and just add this Somebody drop something here it's gonna post to the server And so if the item has ID I passed the ID So that it gets stored in the database immediately so even if you save it or don't save the file actually gets added to that item And if it's a new item which means no ID we actually add a hidden field To the form So we return the actual value that must go to the database [00:05:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m59s) And we put it in that hidden field So did when you then do save the item It actually does store it in the correct place So that's sort of the approach I'm gonna demonstrate that to you Step-by-step With an existing component which I really I got out there and which is using [00:06:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m19s) And it is actually available In JCB so you'll see there this new import JCB packages You could either click on this Or you can go to Joomla components and click on import components Is the same is really the same thing So I'm gonna go back to dashboard And click on import JCB packages There has been a release fix I think it was been in a The previous release if you clicked on import JCB packages it actually didn't Yeah I didn't give you this doesn't give you [00:06:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) This Package tab here It gave you only those In fact it's a little broken So best then go to Joomla components And Ensure to click on Import components Then to be sure that it gives you this VDM packages tab [00:07:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) This VDM and packages tab is in new extension on the import of components It's actually the only Part of the import of the components that already does Actual validation on the package integrity So for each of these packages that I hear we actually do have a validation so giving your example Hello World is not Already if we come here will See Hello World isn't here So [00:07:39](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m39s) If I was to now Select Hello World Click get package It actually fetches it from GitHub And it has a method of actually Getting a hash a checksum Of the package Now you can make sure that It tells you here that the validation so now this point the package is on your server [00:08:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s) Now you can click cancel and that will delete the package from your server But This here tells you that the validation is pass so what is The actual package that we are distributing is the one you've now got And you can verify that By click on this link so if you click on this link It should open a simple A text string it's taking a moment my network here Ok and this text string Should be the same [00:08:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m32s) As the one You see here That is sort of just a heads up and its an area which we now We started adding some that checks on validation And yeah it's not military grade but it's Fair enough I think I anyone trying to NOW stand in the middle of this He's gonna have Quite crazy gymnastics too [00:08:58](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m58s) To take care of Ok so at this point we The package which is being imported is Displayed here and you just click Quiet means that You don't see all of the things it's doing I would suggest you Say no you wanna see everything Force update Means that if it finds a similar field type or a similar field or a similar admin View anything that is similar [00:09:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m29s) And the creation date Is Younger in your system It actually Overwrites it Because you're forced it if it If it finds it and the actual current date in your system Is older So that the one you importing is younger it automatically update it With the latest [00:09:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) Newest version This is how it works And that's why we telling you to make backups Because well the other advantages if you get to field type that was overwritten And it's not really what you expected You actually got history you can go back one step Usually you would Ok So I'm gonna say yes force that and then continue And that simply adds [00:10:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m16s) a whole list of What it's done What is imported And it also moved an image shows you that Tells you done Ok so there we go Hello World is Is now in the system Now We are going to look at something completely different And it is actually [00:10:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m35s) The Document manager is it paid Is a paid package which We distribute You can obviously buy this package From us It actually does have all this functionality that I'm going to demonstrate now In it and so I'm just gonna use that can I add a key here and click Continue [00:11:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m02s) And then basically install this component In JCB And then from there we will start demonstrating it's functionality Ok so we got document manager now installed here Let me quickly show you how it looks in action So I'm gonna install it to this component Joomla website And demonstrate it Ok Now [00:11:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) We have a here component manager Sorry document manager and we can create a document quite easily By clicking a new document and you'll see that there is some allowed image formats are not set in the global settings please Notify your system administrator So you can't at this point upload Actually anything Neither image neither documents neither any media So we'll go out of this and in the options of the component there is actually [00:12:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m03s) A media tab That says what type of documents you wanna allow So For our purpose I'm just gonna say PDF for now with the media I'm just MP3 and with the images just jpeg Now with The images I know in my This component I'm only having one image and I wanted to be a specific dimension [00:12:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m28s) So I'm gonna say I want the width To be 200 And the heights To be 300 so make it 350 So it's almost like a book A four kind of Dimensions I'm so that's gonna Be used [00:12:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m45s) to crop my Image I'm using a library which l'll Show you in a moment which gets these values To decide upon how to Actually go ahead and crop the image It's an image Obviously if it's any of these it doesn't do anything only if it's an image Does it actually use the crop mechanism And it doesn't via on Ajax ok so we've done that save and close If we now [00:13:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) Again click on new documents We see this Drag and Drop area Like We are looked here I GitHub Sorry on UI kit We see this thing in action really so we see it says that your Upload your image and it tells you That This is the what the dimensions should be [00:13:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s) And if not the doc will be cropped to this size So that means if it's not this Dimension it will be cropped that either large or you know downsize By dropping the file here or selecting a file from your computer And formats allowed JPEG So it tells you what formats are allowed This is all Done Basically to dynamically through this [00:13:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) Script that I'll show you the moment Then the same goes here with the document it tells your PDF is allowed and with the media tells you MP3 Now the image I'm only allowing one image Where as with the documents I'm allowing multiple documents and multiple media for one document How this displays in works on the front end Works lovely no problems I'm going to demonstrate that that's not what this is all about I'm just Just gonna demonstrate this functionality of uploading a file [00:14:30](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m30s) And you need to you know if you use this in your own Component you will need to extend that and use it and make it more functional as a As it should Should be in your Component Ok So now let's go and look at the code There which we need to focus on first is basically the document Area of course We'll have to [00:14:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m55s) Look at some of its fields that is attached here Some of its JavaScript And The Ajax area which is really where everything Things happening As you'll see I'm using custom code placeholders Most everywhere Because I'm re using a lot of the scripts Everywhere under components [00:15:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m15s) And I've therefore Adapted it so that it could be used multiple places So you'll see you're also of God upload file remove file Functions And it's got target and Type and field filename target Flush Type it got values All these values play a role within the behaviour that we will eventually have [00:15:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m40s) Or did we demonstrated On a pay well I didn't demonstrate it I just Showed you how it is I will actually demonstrate it still You also see here I've got this set a vastdevmod Which is basically A function That generates For us some variables Which this case is called [00:16:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m05s) VDM Which gets placed in a variable Called vastDevMod This formation Is what is used to identify the view From which the query is made This is a long string which really is related to the cash At that stage Of The View ID and name [00:16:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m33s) This is how I passed the view name and ID So I do not really pass it via The Ajax query I actually have it in Session memory And only if these keys validate does it Actually work ..... sort of another layer And another layer this many layers in this to [00:16:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) To try and make this secure Then this adminKittwo is where I am actually loading All the Uikit Files So I am manually adding it to the View the admin backend Doesn't actually work as the site views where We could select A [00:17:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m19s) Library and it dynamically answer to the view on compilation you have to manually add it to the view and you'll do it basically in the custom Script of the document Now I can show you some of these Snippets And then Then we can take it further There's obviously in the custom buttons area This is the get VDM which I have [00:17:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m48s) Explained Again we have some custom script here And that's basically all that we have there And then in the JavaScript area we again have set file which is part of the script that will have to look at And you see I'm using set file here Here and I'm here because we have an image We have Documents And we have media [00:18:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m15s) And they all Using the set file Method Which is the JavaScript Function Which is declared in this custom Script and here at the bottom of the footer We got What is known as get file Snippet which again deals with actual some of the automated integration [00:18:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m37s) Of the file when Drag and drop And that it actually immediately displays On the page this this takes care of that Ok so We'll go and look at those individual Concepts We also going to see like I said previously Some notes [00:18:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m56s) So here is the Main media apploader note There is the main document apploader the note and there is the document image apploader note And so this is where I've added the HTML For the drag and drop that you see in the Admin View Then we have for each of those correspondingly a hidden value For the document image key [00:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m26s) Main document Documents key and a Main media key All of these are hidden Fields Which Basically is where we store These values and [00:19:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s) That's what We'll look at as well Ok So Let's go and see the code that is used maybe let's start in the interface Right So let's first look at one of these Uploading Concepts [00:19:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m59s) But since I know what's happening there I am already aware that The actual code is not there So it's actually also custom Placeholder snippet so before we actually dive in let me Anyway Open the custom code area and go back into criptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptdocuments So that when we see the code Snippet We can actually go and Look at the code snippet [00:20:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m28s) Let's use this documents apploader Note And open that So here we have the document apploader note Basically we have a diff All the way down there Which has an ID And then it has the Class for the placeholder Some icons [00:20:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m52s) And you'll see Try again have here upload your documents There, here I've got a span tag That says main documents formats so it's basically gone Be the place we load the formats with JavaScript And Then select the file from your computer is So this is all basically It's this snippet Just with a little bit of extra [00:21:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) Flavour Yeah that's really all we looking at And then obviously there are some conventions Like main documents apploader That again here Upload drop main documents there are conventions which if we go over the code Eventually you'll see that those conventions is what really makes this reusable then in the scripts area I added a JavaScript to View footer And a JavaScript I'm using [00:22:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m03s) Is this Uikit file apploader custom code so let's look at that then First We can just search for it There it is we can open that so this is the code that gets added So it's got a little bit of PHP here And it is saying ok great Argument zero Formats so we are asking we getting the global parameters Of the formats reset Which remember I showed you we said it in the global settings so here we are saying document is the First Parameter passing [00:22:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) So we are basically saying document formats here So we getting the document formats and then Here we have arg 2 and arg 1 progress bar So if you think about the ID here It says progress bar The 2nd Which is the third argument Is Main Documents is the Second argument sorry the first argument because we counting from [00:23:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m16s) zero, so it's actually saying Main documents So if you look back at our thing here it says main documents Formats So this is all part Of Main Documents It is the way we Identify the progress bar to progress bar ,let's see [00:23:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m44s) where is the progress bar Here it is Progress bar main documents so it's an ID There's only one of them on the page So it's targeting it here saying ok that's the progress bar we gonna And Then Is having some settings the settings obviously the action We using J router now this J router is a little JavaScript [00:24:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m17s) Trick that I wrote because often times You have this Site view or are the admin View You have it in the back end And you have it in the front end And so this is this just takes care of whether it's a backend or front-end call So that it actually executes correctly Now that is your component name The argument one again would be the second argument Which is in our case [00:24:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m52s) Documents So basically there it says documents the type and then this the third argument which is showing as a Second one is Main So it's passing the target is main Raw is true it has the token and there is our key Which is being used to identify the view ok so it's making a query On this This area here And it is set dynamically Then over here [00:25:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m23s) We know that the formats must be Added to this area with pipe between it It's like you remember here It adds the formats With a pipe So we're just basically exploding the array we got here from the global parameters For documents And it displays it In here Then again we have other [00:25:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m48s) This actual snippet I will add under this name on a GitHub gist So you could actually copy paste it from there and adapted for your purpose Begin here We are also Imploding the formats because he wanted display it I want to show the use of the formats So we have here Second argument or sorry [00:26:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m16s) Third argument and The second argument formats which would be Documents and Main so if we look at our diff We see there the formats as Documents and main format so it's targeting this span tag And basically adding it in there Ok so that is Adding the formats HTML to this ID Then if [00:26:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m44s) We've detected up here That you didn't have any formats set We basically gonna update the whole diff Which is the upload drop area with allowed formats are not set in a global setting Please notify system administrator So that's the final part of our JavaScript so we have JavaScript next in with HTML Taking care of [00:27:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m11s) Some of the displays behaviour on that page Ok so that is the reusable snippet So I'm reusing this same snippet file apploader For various areas So If we were to close out here And I was then to actually open the media Note You'll see that it's really just using the same snippet so if it goes the script it's the same snippet [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I'm just changing the variables I'm passing here is saying media media Main Where's the other one was saying document documents plural and Main This one is saying media media main And then The same goes with the image The image we also have That kind of behaviour Say Uikit image apploader, this one is not using the file apploader Is using the image apploader which is a little different [00:28:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) There is an image apploader and there is images apploader in my custom Snippets I'll show you Why there are difference One allows one image And the other one allows More Wait him I'm over file one Allows one A more than one this one only allows one [00:28:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m45s) So it has a little bit of a different flavour and behaviour And yes I will also Show place this out there and Git For you to have a look at Always remember these arguments are Behaving the similar way as an array Which means that the first argument will always be zero the second argument one and so forth So I'm basically using arguments in And this snippet everywhere where I declare it I am actually passing The three arguments that is required use this plus there to pass [00:29:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m23s) And the diff obviously looks very similar except that it now would say images And Images you see there it's using different placeholders So you need to update those accordingly As it's needed So that's just to set up the field Set up the field you need to have that JavaScript in place and you need to have that diff Sort of in place [00:29:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m52s) Regarding the hidden if I was to take one of the hidden Fields let's say the documents Hidden field you'll see there is some naming conventions here that you need to follow So it says main documents it doesn't do say documents And you'll see when we actually add the value back to the page Were able to target it based on these naming conventions so yeah that's Quite important and then for some security Which It's really just a little extra layer I like the guy one guy said, that it's not that we can [00:30:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m31s) Really stop them, we can just make it very hard So there are different encryption options this medium encryption local file key Is actually better than the basic the basic stores the the key in the database Which in that case means that if somebody sweeped your database , they actually do have the key But it could happen that they were able to get hold of your database but not actually all of your files Specially those that are behind the public repository so the medium incription option can actually generate File behind the public folder which therefore is not publicly accessible And That makes it just that little bit more difficult to actually get a key to open The value [00:31:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m19s) And the reason is let's say your documents are You know not available to every group on your system maybe to some groups can access that document then This is another layer of security that's already by default built into the field behaviour Ok So that is Really just looking at the fields now the admin view documents have some Custom script in it as well So we got to here the set file which really is the JavaScript that fires when it [00:31:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m56s) Gets the request back from the Ajax call You'll see, let me show you if we go back Here on all complete there is a function And then At some point when everything is satisfied it has here a set file key And it passes a bunch of variables to it this is really the function That we're gonna have to look at [00:32:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m36s) So Let's say let's use that setFileJS And insert it here So here we go So we'll see here there is a set file key function In the Document And so in your Ajax which you're using Uikits [00:33:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m03s) function here It has an auto complete So even if you look here at allcomplete which is a place where there when you know the server has told you It's done everything is good then you can do some house cleaning in the browser And that's really what we doing We're checking if it's done We take away the progress bar and if it has an error we actually Pop out the errors and alert if it's successful because we decide what this response going to be So we decided to give a successful [00:33:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m43s) Value in the array then we fire the set file key Which is actually looking at our Admin View Where adding this custom code in here and it is actually adding all this code that you see here Is being added it's quite a lot of code But it's all being added To the admin view and it can be used for different admin views [00:34:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m13s) If it's obviously dealing with either images documents or media so I'm gonna try and explain all this,it looks almost as if I'm going to end up teaching you some JavaScript altough I'm being accused of writing Javascript like PHP yeah sorry the point is The JavaScript here actually does some checking and validating and I'll put this I'll just put it out there and Really when it discovers that everything is fine the file actually was added Then it You know goes ahead here it's checking the length of the filename see if the filename length is not [00:34:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m59s) Not greater than 20 . and if it's not an image or a document Then it must be removed So the return values are here quite key To make sure that We have this remove file from server Function in place where I showed you in the admin [00:35:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m21s) View that we've got these Remove file tasks And the methods well this basically is going to be as I Scroll down a bit Here Here it is It's basically querying that, you see Remove that And it's passing all the necessary variables [00:35:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m42s) To remove the correct file Yeah it's also checking That a person who is trying to remove the files actually logged in user and on the file Where we will look at in a moment,at the actual PHP which will again Validate that that user actually has permission to remove The file So there are all these checks and balances across every step of the this implementation And as you by now I might realise this implementation is far more complicated than the normal file upload, that's simple this really gets into the Nitty gritty of some of these things because you wanna give a real easy sort of [00:36:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) Behaviour for your user But that will mean that you need to do way more To sort of thing for them and protect them So they don't Actually become vulnerable at any time Ok so Once we satisfied that the file is correct and it doesn't need to To be removed We actually Trigger [00:36:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m55s) A few Things which actually puts the file In the page That's really what we wanna Eventually end up doing Set file Is what We are moving Towards Because we want to make sure [00:37:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m12s) that The file now after you've dragged and dropped it on the page Boom it shows in the page once it's really on the server And that's really what's Being done here a little bit It's doing a little bit of checking just to make sure we're all good Everything's fine And we end up with what we now called File name And it get past here And now [00:37:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m36s) We are moving Into set file And the sent file is gonna take the the target And it's going to Determine What kind of target it is and Get the format get the this ,get the that So we can build the file name correctly And now I've got some functions here Which maybe not what you need [00:38:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m02s) But I mean You look through this And you decide what Keeping what is Throughout But we end up building a notice Which actually has You know You're so so have been Set [00:38:20](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) And Then It Triggers The get file The get file is the other function Which if you look at the admin View Let's go back here to the JavaScript We've got here the set file [00:38:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m38s) And here we've gotta get file The get file is it getting another layer of validation and also just like just make sure that everything Is really Behaving as we would want and expect it to behave So the rest of the snippet here is just a remove file and is Json's String we also have a little snippet to check if If it's a Json string [00:39:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) and if it's empty it's all part of just Sanitizing and validating Making sure everything Is the way we expect Ok so we now wanna look at the get's file JS Which Has different [00:39:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m23s) Implementation and as you can see It is in the footer,the view footer so we have PHP In that area of the JavaScript So is the set and this is The get file In the get file We have a Again a link That was a echoed [00:39:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m44s) Which we are now gonna use to actually load the file To make it that it can be downloaded Now that's really the issue If it's a document or if it's a media We obviously don't wanna display it but we wanna have you be able to To download it So we have different behaviours for image and Images As well as if you Scroll down for [00:40:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m04s) Documents at for media So it has different behaviours it continues building Buttons and displays And I'll Pop this code also out there on the Gits And you can look at it And See if you can make sense out of it This thing here the document link Or the document button Is [00:40:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m26s) The potential idea about this If we go to actually let me Close out here And go to the actual document manager In the document manager when you create a document You have here what we call description So if you add a document you can actually use those Place holders In the description And It's the beginning of [00:40:58](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m58s) Actually using these documents Across the website And not just in the component So we'll eventually write a little plugin And if you actually use This place holder which it generates If you use that Anywhere The plugin will identify it [00:41:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m17s) And will load either a link or a button Depending on which one you're using This is the bottom this is the link That's really what it's doing So You might say I don't need placeholders and you can grab that part and Take it out also then wherever The bar placeholder [00:41:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m36s) is being used and You need to remove For example over There Because we got a file box that we are building And it's basically getting the place holders The download and a delete buttons All of them get loaded into the file box [00:41:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m53s) And If we are having more than one file We are treating it differently than just having one file And really that is what we do here being the document and a little different Behaviour but somewhat the same And That is what actually then does the final stretch it's like a relay race, one carries it this far and then the other one takes it over [00:42:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m17s) Carries it a little further And this one is at the very last end of the match Where it is now finally putting the image Back into the page And All of the nice little thrills, bells and whistles happens here And of course this is where you can really spice it up with some JavaScript And [00:42:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m37s) And you can see I 'm using Uikit to actually deal with most of the styling Ok So Now you've seen The Front-end As we would call it Of the behaviour of our Drag an Drop [00:42:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m53s) So you've seen how I set up the field You've seen When the Ajax has finished it's request It actually Runs this set file key And the set file key Then Triggers a Whole bunch of things Which ends up Adding the [00:43:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m11s) The file to the page Let me demonstrate here In the In our little New document Let me demonstrate some of these function so you can see That which I now explained and exactly what it does So here I've got a bunch of images Is Just generic open source [00:43:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m29s) kind of Images So I'm just gonna grab one And dump it in here And You didn't see that let me scroll down Get that image again Put it down a little lower let me get another one Let's use this house [00:43:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m50s) And I'm gonna drag it there and highlights it then for a moment it has this little apploader because we are on Local network It's very fast But usually would see it Uploads And then when it started says your document images set So that was built with JavaScript And there is the document [00:44:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m10s) image on display And there is now remove document image I can Click that and it'll tell me are you sure you wanted to leave this document Yes, and boom it gone Ok so and we back at Square One As if we had nothing And it doesn't only deleted from the page it actually removed from the server As well So let's drag another one just [00:44:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m33s) Drag it there and drop Uploads there is our nicely cropped image Obviously crops in the centre of the Image because How does it know the house is on On the side It not doing that kind of Smart Detection yet We just cropping the image in the most [00:44:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m50s) Sensible way Now with the uploading of a document More less the same let me just get a document Ok so we got a document here And you can Drag and Drop it in there And again it uploads it And with the upload It generates those links I told you would you could [00:45:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m10s) Copy And now put it in In the Description If you want Or you could test it What is noteworthy here Is that the name of the document doesn't Actually get lost While [00:45:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m25s) The the place where documents are added Is actually in the same folder so You could add multiple documents to This document I'll just keep on stacking them though they even have the same name each one will be uniquely tagged to not be the same as the other Which means that on the server we are storing this document with a [00:45:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m53s) Long hash Sort of added onto The name Which is an extra layer of security so people If they could access the folder they at least know what the name is Same with the image if we were to Actually inspect the Image You'll see [00:46:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m12s) That that image it got this Huge name doc image Jpeg wrrllll&&&&&&& ext. So it's no longer than same name as the one you uploaded It actually changes it if there is preserve the name for example in the documents Option here So did you giving to someone the document they get what you expect But we do actually [00:46:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m38s) Adapt the names For security So that You can't be actually allocated On the server if for some reason not a good document Ok and so you could test it by clicking here And it should then just Bring it up in And be available as a download Now how the download works here with the document [00:47:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m01s) I'm actually using a controller so if we Hovered over this Link here You see ok you can't see See that Showed you Well Maybe I'll just show you the Ok I've copy the link here now it's a little huge because we are using [00:47:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m25s) Basically a very much of a Encrypted Path to the file it could sometimes being encrypted or sometimes just be basically 64 encrypted But the point is we have what we see here as a task and download Document so there is actually a controller called download In my component And I will show you how this download document [00:47:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m54s) Concept works but You'll need to write that You need to To figure that one out That's sort of Onto you That's if you want people to download your Your documents If it's just to upload images of course [00:48:09](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m09s) You don't need any of this But it is only when you gonna actually have a downloadable File Or media So next one we wanted to show you here It's just upload some media file Ok so here I have a bunch of audio files And I'm going to upload them What I'm going to do is I'm going to select Whole bunch of them [00:48:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m33s) And then upload them all at once Which is really what this apploader can actually do So let me see, there we go Drop it there And Can't see it yet but it's actually uploading uploading uploading And Think I need to refresh the page So let's give it a name [00:49:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) Let's say The Document Let's say More Soon And then save this And then see ok it didn't Actually upload all of them Interesting [00:49:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m24s) Let me try again Ok now I've got 6 of them uploaded so I can see there are 6 documents and you can Actually download them and test them See if they are still fine Why the home The order of the home Yes We see that the media is working let's also do that with documents let's add some more documents [00:49:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m57s) So I've got a few selected and Drag and drop them there 123 And is uploaded I need to maybe check some of the JavaScript I see you didn't add the download button here But without saving if we just refresh the page you'll see that it actually has All those documents are there Because it's really used Ajax to Store them in the Database And so at the end of day That is the behaviour we wanted here in our component we wanted the option to upload multiple [00:50:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m31s) Documents to one document and multiple media files And To be able to test them in the backend if you wanted to test any of them And in even be able to remove Any of them At any time Just click on remove and it will be removed and in the front We'll be able to use the file names and The user Would be able to identify oh ok so this is what I want [00:50:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) And so the filenames actually get preserved While it is actually being stored in the server With this Hash behind it And so We are seeing the JavaScript we looked at earlier in action it is uploading it is deleting This one is actually cropping which will look at it a little more So That is seeing our Drag and Drop [00:51:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m26s) Options in action Now let's go look at the server side of this implementation The server side we have in the documents admin View we're opening the PHP tab Got this Ajax area And Like I showed before you would obviously need to set up the Ajax with this area targets the controller So in the controller it creates all these necessary script [00:51:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m54s) To make this Method Which is again we gonna look at inside of that Custom code Make this method available to the Ajax call There are some values that we set because every Component I used this stuff in is different and so for some we're using images ,documents and media As the types And for some [00:52:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m23s) The target or Main and Doc and the allow view there's only one of you in this component that is allowed To use the apploader and that is the document view and so they get view ID Is the function With which I get the actual view name And ID And it is basically using The session to sort of throw that around to insure That nobody is able to tamper with That value through the front in anyway [00:52:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m55s) So little extra little gymnastics to make Just add another layer there Ok so we gonna look now at this PHP Ajax apploader in the custom codes area So let's just go here and then Search for it So here in the custom codes area and why I'm using custom code because I'm Reusing this At the moment it doesn't look like I'm reusing it many places it only says it's used in component but this is not the The area where I'm actually doing my work this is just for tutorials I'm using a whole different developing environment [00:53:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m33s) or rather a developing System Joomla website than this one, so this one is just for Explaining and demonstrating ok so I'm reusing This code in many components And here We have formats, image formats that are allowed In the system Document formats that are allowed in the system [00:53:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m57s) Media formats that is allowed in the system and this you can adapt to whatever you need At the end of the day Is up to you to decide what you want to Allow and what you wouldn't, the reality is this is the available formats but as you remember Here where was it again in the options area of our component It has a media area and there we have allowed documents allowed media formats and allowed image Formats and These is Should be the same right it should be the same list having the same values But these are what is [00:54:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m36s) a field we created in Joomla a List field and so we manually added this to the components configuration area so if you don't know what that is Let me quickly show you So in the component Here is our component it has this component config If your component doesn't show one like this Hello World doesn't show a component config You can go into the component And then here in [00:55:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m16s) Let's see think settings There is this button here of create component config For this Joomla component and it's in this I'm gonna close out here I don't want to do that one of I could just show you with a document Manager Basically we could use the same button in settings There it is We can actually edit or now if it hasn't have one you can Create and here you select fields [00:55:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m50s) With a custom values and the tabs in which they should display and it's basically as you can see here I've selected allowed document formats list Which is just a list of The formats and I obviously said it to allow multiple selection So that's how I'm doing this allowed media allowed image and allowed documents and then here's the crop document image and if you do not know how to create a field and how to Set radio buttons or list Then go review the videos about that I'm gonna explain that now But that's really how we deal with that and that list that list that we looked at now [00:56:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m29s) is the same list as what To see here It should be the same Because This is the allowed And that list Shows the user what is allowed for the system So how can I Sorry notice [00:57:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m03s) Sorry about that Notice came up and messed up everything But I hate to start over now Anyway So this is what you could say as available formats and then those Dropdowns is what you as the owner of this website Where this application will run is what you will allow Ok and that this list should be the same as the one there but it also is sort of going to be use so that people Post a specific type [00:57:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m38s) As if it is allowed we're gonna able to sort of bounce this and make sure that Security wise we are safe So here is the upload file function And the upload file starts by first getting the view ID checking it And Then making sure that there is a view set of course And that that view is actually part of the allowed views array so they allowed views array if you remember In our [00:58:08](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m08s) Where did I show you that Ok it's in the admin View document admin view Maybe this one no here it is The allowed views is documents So that's why I'm saying I'm setting that outside of the Custom code because it Depends on which component we are working in right So if it is an allowed View We then get the target And the type and we set it to Global target and global target type [00:58:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m45s) Then we check that this type What is the format that we are talking about so If we think about The format There is Again we go back to this one, where is it? Here let's move it closer so we Close to each other That is the Formats that we allow the types because we want to [00:59:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m17s) Sort of validate that the person and who is uploading Is uploading the things we anticipate so it is setting the format with the type So if it's image it will be images If it's images it will be images If it's document it will be document if it's documents it'll be document and media will be media so that's the Types And we setting that is the format type now then we using a function get package from upload now if you watch the previous tutorial of using the file type uploader Then it's more or less the same kind of function So if I scroll down [01:00:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m02s) We'll get to it where is it get package from upload so the only differences we doing the application at get and the input in the function And we are targeting files because we are passing those values in the files place Then We are seeing what is the file we are checking whether these things are allowed warning import a file Error This kind of error you'll see I'm not throwing it to Joomla I'm adding it to the error messages [01:00:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m35s) Error error message Because we gonna have to give it back to the view We're not able to this is Ajaxs call he did nobody will see it if we just You know used the arrays warning or something So we are actually grabbing the value in saying We done here get out of here if we still going and so you see you could go through this and Very much the same implementation than the one we've demonstrated the only difference though is our Check method is actually a little bit more Taking that View [01:01:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m12s) And again validating it So we doing a 2nd layer of validation here And then checking whether this specific user that is now logged in has the right to actually Edit this item so it is doing some user validation And if not it removes the archive And it's really we still can have that remove method with little bit of the code that you saw me take out Is still left in it here In the previous Tutorial I use some of these codes and yeah so that's really all the Same I'm not gonna go into depth if you don't understand what I've just looked at here then please go back to the [01:01:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m56s) The previous tutorial watch that It gives you enough information so that we actually up here in our file upload Upload file here we at this point have the package And we passed the package to upload now Now move the file into place so remember we had to do that in the The previous here I'm using a function upload now and in the upload now function We are returning and if Any error now still remains It's gonna be doubt here where is errors that might have a curred here if this was false We would use that [01:02:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m36s) See that's the error message put it in error And Pass It out and if we were having Any other issues we will do there it's been an error and will pass it out so this error handling there already Now in upload now package We are checking whether the package is actually there the package name and we're starting to From that we are building the Name. Now remember I showed you or explain to you That we are using This we're preserving the filename but we are sort of hiding the filename so we Using the target the target type the file format and then this random key generator [01:03:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m17s) Now I'm not exactly sure I think all JCB helper classes comes out with this Random key so you could just use it in your component and you can decide how long this string should Be and then I'm using a little place holder which is little generic placeholder VDM And Then I'm adding the actual name of the file after this placeholder so that everything before this placeholder Is really internal my system uses this but the client uses everything this Side And so then if it's a document [01:03:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m56s) We are gonna need the folder path for hidden file path so again Get folder path is a function which I wrote And I'm not gonna share that with you But you can build your own helper class function To get the path to where you wanna put the file this is up to you I'm using a hidden file path But there is A lot of Discussion behind that If I don't pass any values like in this case [01:04:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m28s) It most probably return a public path And which would be where the images So every documents go in a hidden area Images go public And usually because the image you wanted to load somewhere So you don't want it to be behind The root folder of your website Ok now we end up here with the full path which is the file path Sorry for this this one here The filename and the file format [01:04:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m57s) So that becomes the file name And this becomes The file format Now I think you will notice that at this stage The package Name Is Is really what it's used to build this name here And we stripping the file format from that package name making sure [01:05:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m19s) That it doesn't have a file format in it Really to ensure that this Yeah this file is stored in exactly the format we detected as and not as what do I say it is Now We move The package This is where get interesting To its Final Destination if something fails at this point like it doesn't move [01:05:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m45s) We actually remove the package and we say there was an error So we just like we are done We not gonna worry about it If it succeeds then obviously if it's an image At this stage Image We definitely want to resize it so I've got a resize Image helper Class This is also something that you would need to write yourself [01:06:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m12s) Which Helps me to resize my image I passing it some values to actually target the image and resize it And it really doesn't change anything with the image location Or anything like that so I don't need any value back I just need it to resize it and get it done and I don't need to know anything else Then I'm doing some encryption here To see whether the basic encryption is available in this program And [01:06:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m42s) Then to actually use that encryption When I start storing the documents To the database So Here is a local file And We are checking if it's a document or a media We are going to encrypt it And Then again here we make sure that this ID value [01:07:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m04s) Is greater than zero because if it's still a unsaved item We don't have any place in the database to add this So we could just skip this basically So if we realize ok this This file or this Upload Doesn't have an ID Then we skip this function here and we rather do if it's an image If it's a document or is it it excuse me if it's a media [01:07:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m29s) Then we load The filename like that And We are going to pass it back to The View Basically taking the results you See here Formats it's got a lock value Then a token [01:07:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m46s) Link So it has different behavior for different things And all builds this result array and this is what we Give them back We give them back to result array And it gets started over here So the File format is added Success gets the file name which is this value here And then we start building some other things Switch are necessary [01:08:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m10s) Like the token link for the link Because you want to have the downloadable if Media document or if it's media If it's an image no we don't need any of this we can just skip that And then the key name And there we go We done Where is it it is actually a safe item We are going to update the database right now [01:08:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m35s) With this new target type And Target So this is where the hidden field name Remember I said to you there's Some convention In the hidden Field name Well this is where that Convention comes into To play the hidden field name is build up from Target And target type [01:08:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m52s) and if these two are not correct we are going to not save this value At all And so we are building an object Which then we take And since we have validated this this is definitely the allowed view And this Object and this ID and then we update the database And Yes We're done [01:09:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m13s) We've got the File name And we are basically going to pass the filename Here Same way And return to the browser So that's the service side Of this implementation There are some things which I haven't explained Like [01:09:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m33s) This Encryption Sorry Resizing of the image I didn't give much explanation Get the folder path didn't You need to write all that up But You could make this work without knowing those things You [01:09:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m48s) You could Put a Hardcoded path Here is the file path And you could You know not do any cropping and let Let the user Make sure about The cropping [01:10:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m01s) That is really How I upload many of my Documents and Things Obviously this is constantly improving Because I'm using the snippet across multiple Places It's very easy for me to come in here And say oh this is not [01:10:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m17s) Ideal and Fix it And then it fix it Everywhere for every every place it's been used And so there is sometimes the Need of decoupling some of these functions in some but I'm trying to Yes try as much as I can to not Do that So set filename array that's another function that you saw Here in in the upload where is it [01:10:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m47s) Set filename array This set file name array is really a key when you realize that the actual file Already exists So the ID is there Because that means that there are other files possibly still already in the database So with The add and basic view we actually trigger the set filename array Function To check the database [01:11:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m16s) For that specific Target Field get the values I decrypt them and Load new values to that And then basically Pass it back to us Where if the item doesn't exist That means it doesn't have an ID I don't know if you remember when we [01:11:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m35s) Did some demonstration I was Actually adding multiple Media files that only one ended up Being remembered And that sort of the downside Of the current Implementation Is that if the ID doesn't Exist We're not able to actually keep track of that [01:11:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m55s) So it's only when the ID exist That we are able to Actually do multiple uploads at Once So I should actually Give a little bit heads up of the about that That you want to save the item You're actually ready to To expand upon it And to allow [01:12:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m13s) Multiple upload at Once So the set filename array is Is really dealing with multiple when you are having multiple so you'll see there is image And document Is when the file I'm using the The plural to tell me That it should allow multiple [01:12:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m32s) So if it's singular Image And document then I don't allow multiple I'm just gonna remove the old one And add the new Done And when it is plural And we are using the set filename array And we basically building It to [01:12:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m50s) actually be Multiple And then One thing I didn't Emphasize here Is That we actually remove the files as well There is a remove file right [01:13:06](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m06s) There's remove file And it also at some point does a validation To check whether the user has the Permission to remove files And And then will basically remove the file So that is Also and it's Also uses [01:13:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m23s) Is this file name But then it passes the remove Variable to it Which then means the action is not to add but to take Away and You will see that there The action here There is the Add and there is the take away option So behave still different [01:13:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m41s) So we still basically get back the array we still build an object and we still updated Database As well as Actually removing the file here Ok so all of this code I will dump on GitHub and the gits For you to reuse as you see fit you'll obviously have to Adapt it And Keep it under an open source licence That's Only requirement Ok well [01:14:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m14s) That if all those things line-up and are in place Going back to our Admin View Basically That needs to be there These things Need to be here so you could Pause the film And Video [01:14:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m31s) And just make sure that you have the same kind of Ajax Query calls option And then here I am actually Doing some opening of the files You see that I'm building but I'm called links So this is going a little Beyond Just showing you a little bit of my implementation and these links Eventually End up on the page [01:14:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m57s) So we've go back to Our JavaScript Here Scroll down We see this get filed JS Now let's Again look at that get file JS Because You'll see that those links [01:15:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m13s) Actually come in To play there If I Remember correctly let see here Oh I see now is not in that JavaScript Is actually down here You see that here I got a Load the links to the page document links And I'm actually adding it to a variable called document links you see [01:15:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m37s) So in the Custom script Where is it it's not this one It's this one you'll see if I If I now search So I'll take this copy and here I'll search You'll see that I'm actually using that array And saying is this property there [01:16:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m03s) And then creating a link And so that is how we deal with some of that And it it works very well To sort of pass value from JavaScript to PHP And have it available there Ok well I know this was a lot of [01:16:22](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m22s) Things to sort of take in and I would expect you to realize that that previous implementation is So much easier But like you've seen When someone actually does create a document And they Are able to so easily Just drag and Drop stuff And it just crops and It just gives your component so much an easier you know for you feel to it [01:16:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m52s) Instead of The olds you could still do the old select But the Drag and Drop is Becoming quite popular And this implementation is Really Very Very Yeah it's very nice to have And I'm sure from what I've shown you you should be able to get this going in your component [01:17:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m14s) I'm not really gonna give support on to this meaning that If you get stuck you on your own Because if It is really the truth that you will need to know your JavaScript you'll need to know Your PHP and you will need to know how to debug And how to line-up these Concepts That they all [01:17:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m36s) I work in Synergy together It's not gonna be So easy for me to Do that Specially since I usually do not see the code But if there isn't any of the code that I've share on Gits Which I will also put in the description below this video Even have that code has issues in it [01:17:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m57s) Or errors in it that the That are like ok a very big problem or something Then please do feel free to Give me a heads up over there And we'll collaborate Improve it as Necessary At the end of the day This feature is really way behind What [01:18:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m19s) What you really need There is a media manager in In Joomla Which is actually ideal The advantage about this way is that your user is Is never gonna interfere with other users documents or images or Stuff So if you use this concept they not ever gonna actually look on your server at a list And select stuff This is why I think people would like this [01:18:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m43s) Because they can upload stuff in It doesn't affect other people it doesn't make you more vulnerable as the owner of the system Who uses the application So it is I think we better approach But like I said there is a media manager So if you go to content There is a media manager And there is a media file type Which [01:19:07](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m07s) Works very well And And can also add These kind of functionality to your component If this is a little bit too challenge To a big of a challenge for you Anyway thanks for watching I know this might again be so such a long Tutorial But I'm trying my very best [01:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m26s) To sort of get you on your feet and you to go.OK. diff --git a/058-The-Quick-Hello-Word-with-JCB.md b/058-The-Quick-Hello-Word-with-JCB.md index f79f026..f16f498 100644 --- a/058-The-Quick-Hello-Word-with-JCB.md +++ b/058-The-Quick-Hello-Word-with-JCB.md @@ -1 +1 @@ -Ok well recently I was asked whether I'm seriously saying that I Holla world Tutorial should be an hour long and I had to laugh because of course That tauriel is doing way more than what a hello world tutorial should do right so yeah Yorgos we gonna do the real quick hello world tutorial we go to extensions Install We searched for JCB We open it And we click install And again install On success we go to component Builder And we click on Import JCB packages We go to medium packages we select The Hello world Component for free with click get package We see that it has a checksum validation 413 4 We click the cell link here To check and make sure that it is the same key as on GitHub So we can check that that key Much is this one And it does So we know it's a package Still Authentic and Then we we can say yes Force update and click continue Great import was successful and we go back to Gmail or components we see that our hello world component has Been installed We go to compiler And we click hello world And compile It successfully compiled so we click install And We look at the back end We create a greeting Say Hi James Save clothes Answer our prayers greeting is said We go to menu Main menu we change the main menu to be a select Action type Barloworld Greetings And That should be it we save and close And we click on double amount we see there is a page Direction Is not erecting properly So that might be a problem in the component we go back to hello world And we click on the global options And permissions And we search for sight Because there are some side views that we need to allow A24 Public That one That one Supposed to wash oh and That we say the other here we refresh the front And there we have it There is a greeting Hi James we can click on it And it says hi James we can go back one And then click on edit It says I'm not allowed to edit I'm not in the edit group We can go back to the backend to corn options And we could actually give me edit permissions as public but I think you get the boy How the world in place functional and It was really very quickly to do And that is the quick or the real hello world how to set up a Hollywood component in Joe Maila Component builder without Writing a whole hour thanks for watching \ No newline at end of file +Ok well recently I was asked whether I'm seriously saying that Hella World Tutorial should be an hour long and I had to laugh because of course That tutorial is doing way more than what a Hello World tutorial should do right so Here it goes we gonna do the real quick Hello World tutorial we go to extensions Install We searched for JCB We open it And we click install [00:00:37](https://www.youtube.com/watch?v=MEKs1c7LfO8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m37s) And again install On success we go to component Builder And we click on Import JCB packages We go to VDM packages we select The Hello World Component for free with click get package We'd see that it has a checksum validation 413 4 [00:01:06](https://www.youtube.com/watch?v=MEKs1c7LfO8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m06s) We click this a link here To check and make sure that it is the same key as on GitHub So we can check that that key Matches this one And it does So we know it's a package Still Authentic and Then we we can say yes Force update and click continue Great import was successful and we go back to Joomla components we see that our Hello World component has [00:01:35](https://www.youtube.com/watch?v=MEKs1c7LfO8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m35s) Been installed We go to compiler And we click Hello World And compile It successfully compiled so we click install And We look at the back end We create a greeting Say Hi James [00:02:02](https://www.youtube.com/watch?v=MEKs1c7LfO8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m02s) Save and close And so our first greeting is set We go to menu Main menu we change the main menu to be a selection type Hello World Greetings And That should be it we save and close And we click on Joomla Mount we see there is a page [00:02:37](https://www.youtube.com/watch?v=MEKs1c7LfO8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m37s) Is not directing properly So that might be a problem in the component we go back to hello world And we click on the global options And permissions And we search for site Because there are some site views that we need to allow it to show Public That one and That one [00:03:02](https://www.youtube.com/watch?v=MEKs1c7LfO8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m02s) so those two will show and yeah we save out of here we refresh to front And there we have it There is a greeting Hi James we can click on it And it says hi James we can go back one And then click on edit It says I'm not allowed to edit I'm not in the edit group We can go back to the backend click on options [00:03:29](https://www.youtube.com/watch?v=MEKs1c7LfO8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m29s) And we could actually give me edit permissions as public but I think you get the point Hello world in place functional and It was really very quickly to do And that is the quick or the real hello world how to set up a Hello world component in Joomla Component builder without Waiting a whole hour thanks for watching diff --git a/059-Adding-none-database-fields-to-an-admin-view.md b/059-Adding-none-database-fields-to-an-admin-view.md index f4e270c..92e2898 100644 --- a/059-Adding-none-database-fields-to-an-admin-view.md +++ b/059-Adding-none-database-fields-to-an-admin-view.md @@ -1 +1 @@ -We've added a new function To JCB which allows you to add a field 12 you Without adding the field to the database Now when will that be useful Usually When you have a field which maybe is getting data from another table And You want to actually change the behaviour on the page based on the data selected But that selection itself isn't relevant Or when you want to actually combine two fields As one in the database Then you could have both fields on the page And on submission in your safe area in the admin View You can add some custom PHP script To take the value from that other field And actually Save it in to this Feel that you intend to Combine the two values And so you don't want both values to be stored in the database Or the other option is you have fields on a page which Actually only get used to generate data in another table So when u save that item it takes those values put it into The other table And basically Leave just one value in this table Which next time you open it out all those fields are hidden based on that value selection Something like that So it's really got multiple implementations and sort of helps you to get A subform on the page Or any kind of other field type To be able to you know use it Once And you know what use it within your custom scripting either in case it JavaScript Or in PHP A previously this wasn't possible if you add a fuel to view it always gonna get Stored into the database But now If you go to admin views And You Let's take one That has this function going For use the app and view Fields So you'll see that this new Feature is Replaced your admin view list of shin Because now you got showing list And then you have the default which was the previous Check or uncheck option Which basically is 1 and 0 But now you got a third one Which is called No DB I have a field called not required which basically is what you would usually add If you are using Conditional jcps Intel conditional option And you have Fields that actually are required But within certain criteria those fields are hidden And obviously then not required Then I'm using this not required field Do basically Store Some values with JavaScript that upon submission You did UPS the validation on the server side Well I don't really want that value in the database so I'm using this Non DB option If you changed any other Fields I'm just gonna do demonstration Obviously I do want this field in the database but just to export of show you If you select no DB It will automatically give you this notice Basically these two notices I want saying the non DB option Will remove this field from being saved in the database And then this one Only use the non DB option if you're planning on targeting this field With JavaScript August in PHP To move it's value into another field that does get saved Database In one form or another basically saying to you But if you use this value we not gonna store whatever is placed Innit In the database for you You will need to manually Do that So that's really why it's there it's really for custom 9 customers Asian to your components behaviour And so you'll see that also clears out Audio selections because None of these features Will be Of you no be used to this field Because this field After saving Dumps is value and it doesn't exist Unless you grab it and Mourinho Use it into your script Ok so If you use the list of shin We now have this automated Counter adding So Every time you do that if counts all the fields that are available Already in your script And then it adds the next Logic number But anyway that's Beyond of what I'm actually explaining or demonstrating So for now Our Purpose here Is to show you that there is a new No DB Field behaviour Which Some of you have been requesting And I also needed it in the past So it's available now You can try it out play with it And of course if it doesn't make sense to you just don't use it Ok well thanks for watching \ No newline at end of file +We've added a new function To JCB which allows you to add a field to a view [00:00:09](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m09s) Without adding the field to the database Now when will that be useful Usually When you have a field which maybe is getting data from another table And You want to actually change the behaviour on the page based on the data selected But that selection itself isn't relevant Or when you want to actually combine two fields As one in the database Then you could have both fields on the page [00:00:41](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m41s) And on submission in your save area in the admin View You can add some custom PHP script To take the value from that other field And actually Save it in to this Field that you intend to Combine the two values And so you don't want both values to be stored in the database Or the other option is you have fields on a page which Actually only get used to generate data in another table [00:01:16](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) So when you save that item it takes those values put it into The other table And basically Leave just one value in this table Which next time you open it up all those fields are hidden based on that value selection Something like that So it's really got multiple implementations and sort of helps you to get A subform on the page Or any kind of other field type To be able to you know use it [00:01:47](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) Once You know what use it within your custom scripting either in JavaScript Or in PHP A previously this wasn't possible if you add a field to view it always gonna get Stored into the database But now If you go to admin views And You well Let's take one [00:02:13](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m13s) That has this function going We use the admin view Fields So you'll see that this new Feature is Replaced your admin view list option Because now you got show in list And then you have the default which was the previous Check or uncheck option Which basically is 1 and 0 [00:02:44](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m44s) But now you got a third one Which is called No DB I have a field called not required which basically is what you would usually add If you are using Conditional JCBs Internal conditional option And you have Fields that actually are required But within certain criteria those fields are hidden And obviously then not required Then I'm using this not required field [00:03:18](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m18s) To basically Store Some values with JavaScript that upon submission It did adapts the validation on the server side Now I don't really want that value in the database so I'm using this Non DB option If you changed any other Fields I'm just gonna do demonstration Obviously I do want this field in the database but just to sort of show you If you select no DB It will automatically give you this notice Basically these two notices [00:03:50](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) The one saying the non DB option Will remove this field from being saved in the database And then this one Only use the non DB option if you're planning on targeting this field With JavaScript or custom PHP To move it's value into another field that does get saved to the database In one form or another basically saying to you But if you use this value we not gonna store whatever is placed In it [00:04:21](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m21s) In the database for you You will need to manually Do that So that's really why it's there it's really for custom customization to your components behaviour And so you'll see that also clears out All your selections because None of these features Will be Of you know be used well a vailable to this field Because this field [00:04:47](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m47s) After saving Dumps is value and it doesn't exist Unless you grab it and you know Use it into your script Ok so If you use the list option We now have this automated Counter adding So [00:05:08](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m08s) Every time you do that if counts all the fields that are available Already in your script And then it adds the next Logic number But anyway that's Beyond of what I'm actually explaining or demonstrating So for now Our Purpose here Is to show you that there is a new No DB [00:05:32](https://www.youtube.com/watch?v=6OTRDIgxgq0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m32s) Field behaviour Which Some of you have been requesting And I also needed it in the past So it's available now You can try it out play with it And of course if it doesn't make sense to you just don't use it Ok well thanks for watching diff --git a/060-The-custom-dashboard-option-in-JCB.md b/060-The-custom-dashboard-option-in-JCB.md index 8e036d8..aedf978 100644 --- a/060-The-custom-dashboard-option-in-JCB.md +++ b/060-The-custom-dashboard-option-in-JCB.md @@ -1 +1 @@ -The option to now add your own custom dashboard To your component has actually finally come I might have mentioned this in some previous tutorials but it's somewhat hidden So I thought Well let's do it quick tutorial just about this Turn the past or component basically it's layout ended up as the dashboard looking like this Obviously with your own icons But you could do only about what you see here And this is still the default dashboard So if you don't add your own You're basically Builders for you Based on your Fields based off on it's icons and layout selection So you could add tabs like we have here And these two halves are quite powerful You can really Ads A lot Functionality within that But for some of you this might be boring and not really what you would like and fact you wanna look different You don't want your component to look like it was built with chasing me And I don't blame you because that is what makes components Valuable Is that they are actually unique An app that is really why JCP exists it exist because I didn't want a cookie cutter I wanted to build my own components that actually look different from Each other in yet have similar Behaviour because of my company's approach But None of the others out there actually Could do that for me They all We ended up looking Just like The one We were using Janelle JCB We constantly Trying to make sure that this is not the case in fact that's why the side view area is it a bit more difficult Because you wanna give you The opportunity to express your components functionality In a way that you need to you This might be a challenge but in the long run believe me it is the advantage If you could do it without knowing Any job script with CSS or HTML Then anyone else can do it as well So there is like a little bit of her Yeah incentive to sort of Get your head around some of these Technologies And any case to be a good component developer and not knowing PHP And those Front-end languages Is most certainly a risk ok Well So without further ado if we were to go We'll have your this common known Hello world Component Panoply Open it in the website now This is it dashboard Now it doesn't have a custom dashboard And I'm not gonna add one at this point but I am gonna Take-away The dashboard it has and So then it's sort of behaves Like the article manager for example If we would go here there's an in the components area there is a new tab or rather TabGold lips Sorry - uninstall You see here it has the default And then here It has some description of what that means If you click on dynamic It actually gives you a list of all the available Sites Views that are linked to the component And that would be custom Hatton views As well as Normal admin views it will show you a list of them all And you can dance select Any of those And that will become the new dashboard for your component So basically save and close And go to the compiler and compile the Hello world Component And basically just reinstall So to demonstrate how that changed our components behaviour So Store Then we will Basically go to components and click on This hello world link To see what it does now as its default dashboard And so it loads the listview and the dashboard is gone So from this point forward Your whole world component Actually Looks like this And it doesn't have a dashboard Now you could use a custom dashboard Which and In our case If you If you're using A component That has custom admin views So JCB has The compiler and the gets Snippets area as custom admin views So if we were to do the similar Sing with JCB We could just as well Select One of those Obviously say dynamic And select One of those views So scroll down a bit Where is it There The compiler we could make the compiler Jcps Dashboard Now I know it's gonna break a lot of things so my life suppose but let's try it out So we got a CB now we switched it to have another dashboard Instead of the normal dashboard The compiler to hear And then install Before install it I just want to tell you what I meant by Things My Break We got a bunch of times here And all these times are getting information and making it available To you so you could just say get Griffin And we got the version here in the last build date and Yeah so you are basically gonna remove this whole area So or we just did If I click on this end Paul Receive First It tells us that this language string is no longer here And at first it seems like it's a broken issue but if we refreshed it You see rail actually remove it And so it's just a cash thing there So basically the dashboard scar And if I was to Go here and click on Component builder Hill from now on open right at the compiler And that will now be used before page Which is what we told it And so the behaviour is correct We don't see any issues And actually if you were to gonna go to the code Dashboard is completely removed all is files everything And so numb trace of it is left Obviously to undo this Liquids Simply say default again And save and close And then compile it again And it will taste the dashboard back So That's not really any harm done to the component But for those of you wanna take the custom admin views And design a much more Impressive maybe not at boring Dashboard Can L do so By Simply using this new feature And I'm sure it's gonna be a lot of fun So there we refresh now Are dashboards back and if you click on it There we go everything is fine again Shoo away thanks for watching \ No newline at end of file +The option to now add your own custom dashboard To your component has actually finally come I might have mentioned this in some previous tutorials but it's somewhat hidden [00:00:14](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m14s) So I thought Well let's do it quick tutorial just about this So in the past all components basically it's layout ended up as the dashboard looking like this Obviously with your own icons But you could do only about what you see here And this is still the default dashboard So if you don't add your own You're basically Build this for you Based on your Fields based on it's icons and layout selection So you could add tabs like we have here And these tabs are quite powerful [00:00:49](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m49s) You can really Add A lot of Functionality within that But for some of you this might be boring and not really what you would like in fact you wanna look different You don't want your component to look like it was built with JCB And I don't blame you because that is what makes components Valuable Is that they are actually unique And that is really why JCB exists it exist because I didn't want a cookie cutter component [00:01:22](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m22s) I wanted to build my own components that actually look different from Each other in yet have similar Behaviour because of my company's approach But None of the others out there actually Could do that for me They all We ended up looking Just like The one [00:01:42](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m42s) We were using So now with JCB We constantly Trying to make sure that this is not the case in fact that's why the site view area is it a bit more difficult Because you wanna give you The opportunity to express your components functionality In a way that's unique to you This might be a challenge but in the long run believe me it is the advantage If you could do it without knowing Any Javascript with CSS or HTML [00:02:13](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m13s) Then anyone else can do it as well So there is like a little bit of a Yeah incentive to sort of Get your head around some of these Technologies And any case to be a good component developer and not knowing PHP And those Front-end languages Is most certainly a risk ok Well So without any further ado if we were to go [00:02:41](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) We'll have your this common known Hello World Component and if we would to Open it in the website now This is it dashboard Now it doesn't have a custom dashboard And I'm not gonna add one at this point but I am gonna Take-away [00:03:02](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m02s) The dashboard it has and So then it's sort of behaves Like the article manager for example If we would go here there's an in the components area there is a new tab or rather a tab called Dash&Install You see here it has the default And then here It has some description of what that means If you click on dynamic [00:03:27](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m27s) It actually gives you a list of all the available Sites Views that are linked to the component And that would be custom admin views As well as Normal admin views it will show you a list of them all And you can then select Any of those And that will become the new dashboard for your component So basically save and close [00:03:52](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) And go to the compiler and compile the Hello World Component And basically just reinstall So to demonstrate how that changed our components behaviour So we're going to install Then we will Basically go to components and click on This hello world link [00:04:17](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) To see what it does now as its default dashboard And so it loads the listview and the dashboard is gone So from this point forward Your Hello World Component Actually Looks like this And it doesn't have a dashboard Now you could use a custom dashboard Which and In our case If you [00:04:42](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) If you're using A component That has custom admin views So JCB has The compiler and the gets Snippets area as custom admin views So if we were to do the similar thing with JCB We could just as well Select One of those [00:05:04](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m04s) Obviously say dynamic And select One of those views So scroll down a bit Where is it There The compiler we could make the compiler JCB's Dashboard Now [00:05:20](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m20s) I know it's gonna break a lot of things somehow I suppose but let's try it out So we got JCB now we switched it to have another dashboard Instead of the normal dashboard The compile it here And then install Before install it I just want to tell you what I meant by things may break We got a bunch of times here And all these tabs are getting information and making it available To you so you could just get information from us [00:05:50](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) And we got the version here in the last build date and Yeah so you are basically gonna remove this whole area So or we just did If I click on this install we see first It tells us that this language string is no longer here And at first it seems like it's a broken issue but if we refreshed it You see that actually removed it And so it's just a cash thing there [00:06:23](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m23s) So basically the dashboard is gone And if I was to Go here and click on Component builder, it will from now on open right at the compiler And that will now be it's default page Which is what we told it And so the behaviour is correct We don't see any issues And actually if you were to gonna go to the code Dashboard is completely removed all is files everything [00:06:51](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m51s) And so no trace of it is left Obviously to undo this you could Simply say default again And save and close And then compile it again And it will place the dashboard back So That's not really any harm done to the component But for those of you wanna take the custom admin views [00:07:17](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) And design a much more Impressive maybe not a boring Dashboard Can now do so By Simply using this new feature And I'm sure it's gonna be a lot of fun So there we refresh now Are dashboards back and if you click on it There we go everything is fine again Shoo away thanks for watching diff --git a/061-Add-or-Remove-Prefix-to-Component-Name-in-Joomla-Menu.md b/061-Add-or-Remove-Prefix-to-Component-Name-in-Joomla-Menu.md index 927bc4b..b666375 100644 --- a/061-Add-or-Remove-Prefix-to-Component-Name-in-Joomla-Menu.md +++ b/061-Add-or-Remove-Prefix-to-Component-Name-in-Joomla-Menu.md @@ -1 +1 @@ -I would like to demonstrate you the new feature of removing and adding a prefix to your Component name in the Joomla menu Take a look at the menu there's little Heroine front of component Builder And that's the prefix we talking about Deposit without that automatically Now it will still do that but you can actually change it so Go to the global options of a component And under the global tab You see a new area called admin you prefix And that has a little description there And you can say no And then it won't have any prefix Or you can change this to any Other prefix you want Are there you don't need to add a space here and the space is automatically done so you can check out This list here is a link to Twitter to a list After HTML character entities that you need to use here This will obviously translate to that Aero And You need to make sure to use something that can be just placed inside of an XML file So That means that if you wanna use strange characters like that arrow You need to use the html you could also use your company name or You can use anything it'll basically just add that As a prefix to the component name So just of illustrate this Let me change this a little bit Song grabbing the the Valley here The one without the x is the one we looking for so this the and hash Value this one here I'm gonna grab that little circle with a daughter Well let's let's take the one with the Circle in a circle that looks nice Ok I'm gonna take that one I'm gonna add it in here And that I'm going to click save Ok it's asking me to add some other info as well Ok try again 7 close Now let's go from file Monitor Thermo components here So you can say demo And compile And install it Nailsea houses all Circle Next to the demo name That's the way we can Change that little Prefix And then obviously the option to just remove it altogether It's also there Basically Saying no prefix save and close And it's do it again Compile So And I you see it's just the way you two components will look there is the demo So this will Prefix can be added or removed now thanks to this new feature \ No newline at end of file +I would like to demonstrate you the new feature of removing and adding a prefix to your Component name in the Joomla menu Take a look at the menu there's this little arrow in front of Component Builder And that's the prefix we talking about in the past it would add that automatically Now it will still do that but you can actually change it so Go to the global options of a component And under the global tab You see a new area called Add Menu Prefix [00:00:38](https://www.youtube.com/watch?v=vwZyhKp_L38&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m38s) And there's a little description there And you can say no And then it won't have any prefix Or you can change this to any Other prefix you want Are there you don't need to add a space here and the space is automatically done so you can check out This list here. There is a link to a list of HTML character entities that you need to use here This will obviously translate to that arrow And [00:01:10](https://www.youtube.com/watch?v=vwZyhKp_L38&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m10s) You need to make sure to use something that can be it just placed inside of an XML file So That means that if you wanna use strange characters like that arrow You need to use the HTML you could also use your company name or You can use anything it'll basically just add that As a prefix to the component name So just of illustrate this Let me change this a little bit So I am grabbing the the value here The one without the x is the one we looking for so this the & hash [00:01:49](https://www.youtube.com/watch?v=vwZyhKp_L38&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m49s) Value this one here I'm gonna grab that little circle with a dot. Well let's take the one with the Circle in a circle that looks nice Ok I'm gonna take that one I'm gonna add it in here And I'm going to click save Ok it's asking me to add some other info as well Ok try again save and close Now let's go and compile one of the [00:02:19](https://www.youtube.com/watch?v=vwZyhKp_L38&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) demo components here So you can say demo And compile And install it Now you'll see it has this little circle Next to the demo name That's the way we can Change that little Prefix And then obviously the option to just remove it altogether [00:02:45](https://www.youtube.com/watch?v=vwZyhKp_L38&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m45s) It's also there Basically Saying no prefix save and close And let's do it again Compile and install And now you'll see it's just the way usual components will look there is the demo So this little Prefix can be added or removed now thanks to this new feature diff --git a/062-Add-your-own-JCB-packages-to-the-JCB-Communty-Directory.md b/062-Add-your-own-JCB-packages-to-the-JCB-Communty-Directory.md index 74e1558..34df739 100644 --- a/062-Add-your-own-JCB-packages-to-the-JCB-Communty-Directory.md +++ b/062-Add-your-own-JCB-packages-to-the-JCB-Communty-Directory.md @@ -1 +1 @@ -I want to Demonstrate The way to add JCB packages to the community Directory The moment if you go to import jsp packages this now in new tab called community package Pictures Where we would like to encourage all of you to start sharing packages Main focus or purpose for it would become To be quick start For developing Components You could serve As a back up for yourself too easily Pool on alt Packages that you've developed To maybe have a specific feature for example Linking your jamalife users Yeah into your component I know Absa from finance that does that And I often want to reuse that So You can now with this new Idea Be able to import that component over and over I without merging it with The old version But actually creating a new Component including Fields and everything else And so that way You are able to quickly start a new project And you don't need to really do all that over again and again It's sort of similar as the Clone feature that now has become available so they CB components now Clone feature You could select a component And you can clone it And in cloning it It basically creates A Exact Copy of the component But not linked To the components so even did admin views You see it actually great and you at The View And the same goes for the fields You actually created Holding you Sarah fields Specifically For this component you see it's got the same Suffix Yo Ok so That is the Clone feature and how the import feature has the same functionality So if I was to go and say that's a import The timer component Then Once it's Cottondale component from GitHub We will see That it has this merge option or no don't match now Remember We ready have the timer component here and it is exactly the same component But I don't want it to update this one I wanted to really Bring it in as a new component and then I will Take this to know and it does give you a little explanation here and also tells you that the but a day shin rules Fuel types lipid languages and language strings These things will still be managed And that simply is unavoidable Ok and then if you wanna see You know what happens on the hood And then you click on continue And what will do now It's obviously give you a whole lot of information of the import And also whatever files it moved But it actually created a new component It didn't update the old one And that is a very nice option because now You can quickly start with this component without affecting this one Now you'll see that Even the admin view is Dislocated it's not the same at The View The same again with the fields so if we look at the fields you'll see it also has there r a Suffix Do it Ra Ra This name doesn't anywhere appear In the compiled version of the components all system names So that are a will just be for your own Do know that this Fuel belongs to this component and so on So that's sort of what the new JCB package import option is sort of been improved to to manage Now with the community option You can actually do what we wanna call What is a share Like I've been doing Sharing So many in a lot of information with all of you Components tools And so the idea that all of you would have this attitude off Giving back to the community And the other option is that if you want to distribute a package And the same time maybe get some marketing This is also gonna be doing that Ok so let me get this straight to you the process of getting a package into the community Packages We are going to use Get up Basically this repository there should be community packages This is the euro VDM Dash IO Ford slash JCB - community - packages You will need to fork this package I'm not gonna teach you how to use GitHub Night I'm gonna teach you how to use geth I'm gonna illustrate it just by doing it Doing what you need to do Demonstrating it to But I'm not gonna teach you how to do this More far away So you need to Go and study up get up And get Specifically to be able to manage this And what will happen is anyone who wants to add a package must start by for king The repository And then once it's been forced They need to clone it down to their the developing environment Where they have JCP Or to where they can move a JCB package Because then they they need to add their package which they want to contribute To their forked version Of This JCB community packages And then once they done all bad and it pushed up the changes to their repository Then they'll make a pull request To add the change Into the community Version of this repository now Hope that all makes sense to you You'll get it you're out here On your own repository Copy that And then you'll go to T or developing environment Hopefully It will be Linux Because you need to Run a bash script Needs to be a bash environment And Yeah so you could run it in the VMware ever you want Just get it going so I'm gonna open a terminal now And then the terminal I'm simply gonna clone Yo this repository And then once it's finished cloning it will gonna change to that directory Now if we list out The items You see that it is exactly the same as what we have here and get up It is in literally the same Information So it is actually a folder a folder on your computer And we will then now need to go to JCP Extract the package you want to share And simply place it into this folder And then Run This sharp script Ok So let me do that So here we are in our JCB program And I want to share this question and answers Uno component and I would ask that you won't share things that do not work If you still busy developing the thing then you know so time to share it yet But when it's ready And you know that it works that means you've compiled it and tested it and you know it stable Then anyone share it Does need to be a big component it could have just one View Doesn't matter But it needs to be something other than already what exist So no more new demo components You need to be something else So Always please check that if you wanna contribute something Be something that's already there If there is already one And you want to improve it sure then you can do that you can Holiday Inn make it better and make it pull request to improve it But just know that will have to be able to taste it So if you're using a key Then then the person that you get it from You can't Contributed without a key Back and f***** If someone places A package in the Community And has a key Then The SWOT of lockout everybody else Because then only they can improve it But as soon as I take the key away Then everybody else can improve it because there is no key And doesn't matter we all can check it out Ok So I'm not exactly sure how old is gonna workout I am very open to all of you to just give me feedback input how you think this should be done The idea is not true Infringe on each other's projects But to help each other get projects going quite quickly That's really the agenda The idea is if you wanna build a project let's get something that can sort of service at base From which to start so this question and answers Program is there is a very nice base it's got just Few views a few fields It's got a very simple straight forward implementation Q&A for your front in of your website And so I thought well this is a nice thing to Phil Hughes As a demonstration So I'm gonna export this Wait a minute let me just show you something else before we do that Is going to the component And Does if you want to maybe give away the component But you want to sort of Africa first visit Maybe a video that you've made The way you could do this Is by this by linq here you'll basically make that link Direct to your video So that when they click on the BiO link they go to the video Were you gonna give them the key for free And they can Watch the video get the key come back and open the package I'm when I currently Already implementing package link The bucket link should be Where the package is Which most of the time will be there positive Which is why we not fully implementing this because it's sort of yeah we don't need it So we left it here maybe for future purposes But at the moment we don't need it the way we setup things You can sort of just use the report you're also So there's only the BiO link that's really important If it's a free pay if it's not a free package or if it's a free packet with your given the key away So the other idea is not add a key at all So If you don't add a key here Then it will be a free package This is how you make something a free package it's just Leaving the key out That's simple as that And Then will be a free package Worse if you leave the key in M People will have to get the key from you And if you've got a contributor to the community Then Are you going to Cherokee with the admin of Depository So they can validate the component and check that it's safe for distribution We'll stop with something's in place maybe a forum Procedure on how to do this Inside of JCB or maybe just in there In the read more of the repository Butter yeah we'll We'll give you a heads up when that happens For now their explanations simple if you want to have people get the key from you Where ever they need to get it where the free or paid Needs to be this link here And The key This year is what we used to build the key it's not the actual key It's just used to build a key so you can put in anything here really Ok Now what you got all that in place You will compile your component Or export the JCB package really that's the right name Swansea got the component Exported Then the package is available Any specific Direct to call temporal directory in your Developing environment And this is the package That you wanna add to the repository This is the key that you now need to give to everybody That wants to use the package So this is whiskey Go nowhere to be found And there's on this page I wish now where you compile it I'm so store this key in safe place Or use it in your video Give it to the people in the right playtime Whatever you like to to do this The Next Step would be to now move this package into The Repository with be cloned down to your local developing environment To hear I got the folder open where the package is CC there Is following that path which we found When we look at this it's same path So basically we gonna just drag And drop The file into the other folder which is where that Clone repository is at the moment In my home folder So here we have The package been added And We basically done And we can close this one out And go back to the terminal Once in a terminal if you say get Status You see that it tells you that is one file That isn't Have been tracked Now before you had the file You first need to run The Hash Sure FOB program Which is a battle script So you need bus to run it and a few other two other programs actually I'm pretty sure you that It's this Take you and shower want some These two programs is also required And that the script will actually shouted you that UEFA if it doesn't if it's anything sister will say hey ok you need to get these Save you You can just say Google take you Bosch Install and Give you information And adding these two programs to your Developing environment And then run that script What does scribble do 3 simple Ill go to the files in the repository that are zip files that's what it does here Operator song And then place the song In a file with the same name except Added the shot to the farmer So there is acid Then it will put the grab information Oh sorry get a short file name then I'm dip The file to get the info dot pitch David Em file from visit package Then change that to the shop filename Which should be the same as your package name just within 4 as the 3 letter Which is what we need to show the people what a package name is and who owns in these things So that's where that info comes from Then it takes that information and It adds it to an array Which Then later gets written to the checks on torch Asian That's all this does Nothing Not not no not smart really it's just straight forward Song Little Bosch Do to get the information from the file For you without your having any issues And that it Just follow convention So I'm gonna go run the file now and you can see what it does So basically you add the the Dot here make sure in the repository then the Dot And then The has got sh And enter and it should just do that simple as that Shouldn't take long and if it did Then something is wrong This is all it should do Now if you again do the get status You see that now there are actually 3 files That off not be tracked and tricks some file Has been modified And why because there is now a new line been added To detect some so if we do Get Dove You see that your component the one that you are adding This one Is being added And so that line was changed because it got a comma But this is the new line that it is added So basically just added your component To the text song And that is all that should change You shouldn't change any out of files In the repository Only the ones that you are contributing Are the ones that you must change Ok so There we go The next thing is to get Add Those files So if you do get Status The Angel tree Download the come up the comment The comment I think We there's like Convention out there I'm not so cute up on all that So the moment I think we can do Get Then Add it Question and answers package I think that's simple enough And then Press enter Oops I left out something and it's to commit word So she say get commit Then a.m. The m is for the message in the as for pushing it all into the branch So there we go and then you have if you have a pass phrase The new Which I should actually have Then there you have your commit signed If you don't know how to sign commits in git then please Google that and get your keys in place We would expect that all commits to this report Be signed Specially since we need to be sure That it is you That I am I adore making the commit Now when you've done all that you do can get And you push it up To your repository on GitHub At this point you are still not affecting the community repository It is just affecting The the repository that you fart And That is This is a very secure way of dealing with this So if we now go back to bed How And in a we refresh the page You see that it'll say this branch is one commit ahead of EDM And then there is this make a pull request So you make a pull request there And it will basically take you To the main repository And all explain to you which one is being pulled where and it will tell you that it is able to be merged And The Disney information that's being added For the info For the shore And obviously for the package which it doesn't show because it's too big I'm CC binary file not shown Parodies And so there is also the changes to the checksum Now at this point You need to Create a poo request to click on create pull request And This Comment that you made in your repository when you you know Contributed the package would usually be added as the title You wanna give a little explanation of things that we as the admin team need to have dissipate Because we got obviously have to test this now We can't add packages to the community packets branch without being able to test it So if you have a key for the package Then Yes I think we will create a form Eventually Where you will be able to submit that And we'll put that in the information because at the moment this area doesn't even have a pull request template So we will add a pull request template So that when you create a pull request that tells you where to send the key Set the moment if there's a pull request maybe just keep the package is coming that are free at the moment Sinister the templates in place then then you can use it And I didn't make a pull request And Then I'm at the moment the only one that Manage this but I hope that others would get involved There are some other developers already Quad involved on the JCB Repository But I would like to also encourage them to get involved here And be able to sort of help me Testies packages Make sure that only valid in Stable packages gets Added And so That's really it yeah you now click create pull request now gonna do this Because it's all premature I I want to I don't wanna pull this into this The repository at the state I'm gonna do so later But the point is This is the procedure that you need to follow To actually get a package into the community packages Because once it's get merged into the master branch It will also become available on this page Automatically Automatically in all show up in this dropdown In fact That is a simple as it is Well thanks for watching and if you have any questions please open a issue At the correct place So if you wanna talk about the packages for the community Open issue here Please don't make a open issues at kcbs repository regarding this issue So that we'll have you know clear Separation Between these two concepts \ No newline at end of file +I want to demonstrate The way to add JCB packages to the community Directory The moment if you go to import JCB packages this now in new tab called community Packages Where we would like to encourage all of you to start sharing packages Main focus or purpose for it would become To be quick start For developing Components [00:00:28](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m28s) it could serve As a back up for yourself too easily Pull on old Packages that you've developed To maybe have a specific feature for example Linking your Joomla users into your component I know apps or componants that does that And I often want to reuse that So [00:00:52](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m52s) You can now with this new Idea Be able to import that component over and over I without merging it with The old version But actually creating a new Component including Fields and everything else And so that way You are able to quickly start a new project And you don't need to really do all that over again and again [00:01:17](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m17s) It's sort of similar as the Clone feature that now has become available so they JCB components now Clone feature You could select a component And you can clone it And in cloning it It basically creates A Exact Copy of the component But not linked To the components so even did admin views You see it actually create a new admin View [00:01:44](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m44s) And the same goes for the fields You actually created a whole new set of fields Specifically For this component you see it's got the same Suffix (EO) Ok so That is the Clone feature and now the import feature has the same functionality [00:02:05](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m05s) So if I was to go and say let's import The demo component Then Once it has gotten the component from GitHub We will see That it has this merge option or no don't merge now Remember we Already have the demo component here and it is exactly the same component But I don't want it to update this one [00:02:33](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m33s) I want it to really Bring it in as a new component and then I will detect this to No and it does give you a little explanation here and also tells you that the paradation rules Field types snippet languages and language strings These things will still be merged And that simply is unavoidable Ok and then if you wanna see You know what happens on the hood And then you click on continue And what it will do now [00:03:03](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m03s) Obviously give you a whole lot of information of the import And also whatever files it moved But it actually created a new component It didn't update the old one And that is a very nice option because now You can quickly start with this component without affecting this one Now you'll see that Even the admin view is Dislocated it's not the same admin View The same again with the fields so if we look at the fields you'll see it also has the (Ra) [00:03:36](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m36s) Suffix to it (Ra) (Ra) This name doesn't anywhere appear In the compiled version of the components it's all system names So this (Ra) will just be for your own to know that this Field belongs to this component and so on So that's sort of what the new JCB package import option is sort of been improved to to manage Now with the community option You can actually do what we wanna call [00:04:07](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m07s) What is a share Like I've been doing Sharing So many in a lot of information with all of you Components tools And so the idea that all of you would have this attitude of Giving back to the community And the other option is that if you want to distribute a package And at the same time maybe get some marketing This is also gonna be doing that [00:04:33](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m33s) Ok, so let me illustrate to you the process of getting a package into the community Packages We are going to use GitHub Basically this repository JCB community packages This is the URL VDM - IO / JCB - community - packages [00:04:57](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m57s) You will need to fork this package I'm not gonna teach you how to use GitHub neither how to use Git I'm gonna illustrate it just by doing it Doing what you need to do Demonstrating it to you But I'm not gonna teach you how to do this in a More thorough away So you need to Go and study up GitHub [00:05:22](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m22s) And Git Specifically to be able to manage this And what will happen is anyone who wants to add a package must start by forking The repository And then once it's been forced They need to clone it down to their the developing environment Where they have JCB Or to where they can move a JCB package Because at the end of the day they need to add their package which they want to contribute To their forked version [00:05:53](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m53s) Of This JCB community packages And then once they done all that and pushed up the changes to their repository Then they'll make a pull request To add the change Into the community Version of this repository now Hope that all makes sense to you You'll get the URL here [00:06:14](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) On your own repository Copy that And then you'll go to your Developing environment Hopefully It will be Linux Because you need to Run a bash script, so Needs to be a bash environment And [00:06:32](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m32s) Yeah so you could run it in a VM where ever you want Just get it going so I'm gonna open a terminal now And then the terminal I'm simply gonna clone this repository And then once it's finished cloning it we gonna change to that directory Now if we list out The items You will see that it is exactly the same as what we have here on GitHub It is in literally the same Information [00:07:13](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m13s) So it is actually a folder a folder on your computer And we will then now need to go to JCB Extract the package you want to share And simply place it into this folder And then Run This hash.sh script Ok So let me do that So here we are in our JCB program [00:07:39](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m39s) And I want to share this question and answers component and I would ask that you won't share things that do not work If you still busy developing the thing then it is not time to share it yet But when it's ready And you know that it works that means you've compiled it and tested it and you know it stable Then anyone share it Does need to be a big component it could have just one View Doesn't matter But it needs to be something other than already what exist So no more new demo components [00:08:15](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m15s) it need to be something else So Always please check that if you wanna contribute something Be something that's already there If there is already one And you want to improve it sure then you can do that you can pull it in make it better and make it pull request to improve it But just know that we will have to be able to test it So if you're using a key Then the person that you get it from [00:08:42](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m42s) You can't Contributed without a key Back in fact If someone places A package in the Community And has a key Then it sort of lockout everybody else Because then only they can improve it [00:08:59](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m59s) But as soon as I take the key away Then everybody else can improve it because there is no key And doesn't matter we all can check it out Ok So I'm not exactly sure how all this is gonna workout I am very open to all of you to just give me feedback input how you think this should be done The idea is not to Infringe on each other's projects But to help each other get projects going quite quickly [00:09:26](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m26s) That's really the agenda The idea is if you wanna build a project let's get something that can sort of serve as a base From which to start so this question and answers Program is there is a very nice base it's got just Few views a few fields It's got a very simple straight forward implementation of Q&A for your front in of your website And so I thought well this is a nice thing to to sort of use As a demonstration [00:09:55](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m55s) So I'm gonna export this Wait a minute let me just show you something else before we do that Is going to the component And those of you who want to maybe give away the component But you want to sort of have people first visit Maybe a video that you've made The way you could do this Is by this Buy Link here you'll basically make that link [00:10:23](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m23s) Direct to your video So that when they click on the Buy Link they go to the video Were you gonna give them the key for free And they can Watch the video get the key come back and open the package we're not currently Already implementing package link The package link should be Where the package is Which most of the time will be the repository [00:10:45](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m45s) Which is why we not fully implementing this because it's sort of yeah we don't need it So we left it here maybe for future purposes But at the moment we don't need it the way we've set up things You can sort of just use the repo URL So it is only the Buy link that's really important If it's not a free package or if it's a free package but you're giving the key away So the other idea is not add a key at all So If you don't add a key here Then it will be a free package [00:11:21](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m21s) This is how you make something a free package it's just Leaving the key out That's simple as that And Then it will be a free package Where as if you leave the key in then people will have to get the key from you And if you've got a contributor to the community Then you'll need to share the key with the admin of the repository [00:11:43](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m43s) So they can validate the component and check that it's safe for distribution We'll stop with some things in place maybe a forum Procedure on how to do this Inside of JCB or maybe just In the read more of the repository We'll give you a heads up when that happens For now the explanation is simple if you want to have people get the key from you Where ever they need to get it weather it's free or paid Needs to be this link here And [00:12:15](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m15s) The key This here is what we used to build the key it's not the actual key It's just used to build a key so you can put in anything here really Ok Now once you got all that in place You will compile your component Or export the JCB package really that's the right name once you got the component Exported Then the package is available [00:12:41](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m41s) in a specific Directory called "temporal directory" in your Developing environment And this is the package That you wanna add to the repository This is the key that you now need to give to everybody That wants to use the package So this key can nowhere to be found unless on this page [00:13:02](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m02s) where you compiled it store this key in a safe place Or use it in your video and give it to the people in the right playtime Whatever you like to to do this The Next Step would be to now move this package into The Repository which we cloned down to your local developing environment Here I got the folder open where the package is so you see there Is following that path which we found [00:13:35](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s) When we look at this it's same path So basically we gonna just drag And drop The file into the other folder which is where that Clone repository is at the moment In my home folder So here we have The package been added And We basically done [00:13:56](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m56s) And we can close this one out And go back to the terminal Once in a terminal if you say get Status You see that it tells you that is one file That isn't been tracked Now before you add the file You first need to run The hash.sha [00:14:20](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m20s) ... program Which is a bash little script So you need bash to run it and a few other two other programs actually I'm pretty sure you that It's this JQ and sha1sum These two programs is also required And that the script will actually shout at you that if it doesn't exist will say hey , you need to get these [00:14:48](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m48s) So if you You can just Google JQ Bash Install and it will Give you information And adding these two programs to your Developing environment And then run that script What that script will do [00:15:02](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m02s) is very simple it'll go through the files in the repository that are zip files that's what it does here it will create a sum And then will place the sum In a file with the same name except Added the sha to the file name So there it adds it Then it will get a shop file name and then unzip The file to get the info. [00:15:28](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m28s) VDM file from the zip package Then change that to the shop filename Which should be the same as your package name just with info as the prerogative Which is what we need to show the people what your package name is and who owns it and these things So that's where that info come from Then it takes that information and It adds it to an array Which Then later gets written to the checksum.json That's all this does [00:15:55](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m55s) Nothing Not not no not smart really it's just straight forward Some Little Bash Do to get the information from the file For you without your having any issues And that it Just follow convention So I'm gonna go run the file now and you can see what it does So basically you add the the Dot here make sure in the repository then the Dot And then [00:16:21](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m21s) The hash.sh And enter and it should just do that simple as that Shouldn't take long and if it did Then something is wrong This is all it should do Now if you again do the git status You'll see that now there are actually 3 files That of not be tracked and tricks some file Has been modified And why because there is now a new line been added [00:16:49](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m49s) To check some so if we do Git diff You'll see that your component the one that you are adding This one Is being added And so that line was changed because it got a comma But this is the new line that it is added So basically just added your component To the check some [00:17:15](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m15s) And that is all that should change You shouldn't change any other files In the repository Only the ones that you are contributing Are the ones that you must change Ok so There we go The next thing is to git Add Those files [00:17:34](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m34s) So if you do git Status They are now green now the comment The comment I think We there's like Convention out there I'm not so keyed up all that So the moment I think we can do Git [00:17:53](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m53s) Then Add it Questions and answers package I think that's simple enough And then Press enter Oops I left out something and it's to commit word So she say git commit Then a m The m is for the message in the a is for pushing it all into the branch So there we go and then you have if you have a pass phrase [00:18:21](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m21s) and you Which I should actually have Then there you have your commit signed If you don't know how to sign commits in git then please Google that and get your keys in place We would expect that all commits to this repo Be signed Specially since we need to be sure That it is you That am you know making the commit Now when you've done all that you do git [00:18:49](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m49s) And your push it up To your repository on GitHub At this point you are still not affecting the community repository It is just affecting The the repository that you forked And That is This is a very secure way of dealing with this So if we now go back to Git Hub [00:19:11](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m11s) And you know were fetch the page You see that I'll say this branch is one commit ahead of VDM And then there is this make a pull request So you make a pull request there And it will basically take you To the main repository And all explain to you which one is being pulled where and it will tell you that it is able to be merged And Did this is the information that's being added For the info [00:19:40](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s) For the sha And obviously for the package which it doesn't show because it's too big So you see Binary file not shown there it is And so there is also the changes to the checksum Now at this point You need to Create a pull request to click on create pull request And This [00:20:02](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m02s) Comment that you made in your repository when you you know Contributed the package would usually be added as the title You wanna give a little explanation of things that we as the admin team need to have dissipate Because we got obviously have to test this now We can't add packages to the community packets branch without being able to test it So if you have a key for the package Then Yes I think we will create a form Eventually [00:20:35](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) Where you will be able to submit that And we'll put that in the information because at the moment this area doesn't even have a pull request template So we will add a pull request template So that when you create a pull request that tells you where to send the key Set the moment if there's a pull request maybe just keep the packages coming that are free at the moment as soon as the templates in place then then you can use it And then make a pull request And Then I'm at the moment the only one that [00:21:07](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m07s) Manage this but I hope that others would get involved There are some other developers already Quite involved on the JCB Repository But I would like to also encourage them to get involved here And be able to sort of help me Test these packages Make sure that only valid in Stable packages gets Added [00:21:30](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m30s) And so That's really it here you now click create pull request now I'm gonna do this Because it's all premature I I want to I don't wanna pull this into this The repository at the stage I'm gonna do so later But the point is This is the procedure that you need to follow To actually get a package into the community packages [00:21:58](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m58s) Because once it's get merged into the master branch It will also become available on this page Automatically So automatically it'll show up in this dropdown In fact That is a simple as it is Well thanks for watching and if you have any questions please open a issue At the correct place So if you wanna talk about the packages for the community Open issue here [00:22:27](https://www.youtube.com/watch?v=8FplwKKa708&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m27s) Please don't make a open issues at JCBs repository regarding this issue So that we'll have you know clear Separation Between these two concepts. Ok thanks for watching. diff --git a/064-How-to-install-jcb-packages.md b/064-How-to-install-jcb-packages.md index f29713e..09cf4a3 100644 --- a/064-How-to-install-jcb-packages.md +++ b/064-How-to-install-jcb-packages.md @@ -1 +1 @@ -I would like to give you a quick tutorial on how to install A JCB package Organ port Is the right word relief Now At the end of day You already have JCB on yours System So I'm not gonna explain how we got to this point But from here on further There are two ways to To get to the in Installing View One is by clicking on this icon I'll take you there The other one is going to Jabula components And there is a button Up here this is important Packages And that will take you to the same place You see that there is another of tabs here And you can actually If you don't If you're not interested in these Tour tabs There's action option in the global options Where at this point we are controlling those tabs Through this Global switch that says manage data package the directories You can say show all Shounen Or manually select The repositories that you want the show at the moment they are then he's 2 But they are Reasons to expect that they might become more Us We see You know This area becoming more active Ok so Once you're on this page And you have yourself exported a JCB package then this is where you can select it from your Computer Or from a directory Or from a URL And with these import methods There is not a checksum validation feature in place So you need to be sure of the Integrity of that package We cannot validate that package integrity And since if it's being Selected from your desktop and you are in a your local development environment There should be no reasons for concern If you're pulling it from an external source Then possibly You need to be more cautious Where is it when it comes to the medium packages and the JCB community packages These are the areas where we are trying to add some layoffs Purity To try and protect you And to ensure that The package area remains as stable as possible And so there is ways for you to add your own Daisy package To the community repository Here is a tutorial to show you how to do that And Also Explaining Why We will do things The way we do them Because of The fact that everybody will then have access to that package In this area You can then also also Now get free keys For the medium packages The past you have to pay for them And we have decided in In a initiative to Sort of Show all of you exactly how they speak and work and function We have decided to give these packages way Asking you to follow few steps In supporting Us by For king starring or Were watching These packages in their specific repositories on GitHub Are you needing more guidance about this You can just click on that link And all show you exactly what you need to Do I want you Got the key for that Safic package You can come and select that package here Obviously It's only related to some of the packages at this point Which the first being Most prominent Component builder itself And so I would say Suspect that would Would be your First Choice Is Well At once you've selected the package you simply can click on Get 2 How the package be Taken From GitHub And Broad To your Developing barman And in doing so It will actually run a validation on the Integrity of the package Because they are checksums In place But You need to validate the check song Manually And why you do that Is ill show you the checksum that was used Elevate The Package integrity And since it's past the validation You know the district some is the one that you need to see If you're open This link Total opening this link will also reveal a checksum But at this time you will be seeing a verification Bye Dizzy Shirt And It must be at least This part of the year l Must be correct There This will vary from packet But it should have the package name here And this should correspond To the value you See here And that little bit of manual effort All you need to do To be sure that the package that you have now got In your position Is the original authentic package that we have Beauty So at this point you're all good to go or did it now Take the key that we have sent you And to add it here To the key area Bikesa Now you need to make a choice Whether you want to if the SACP already is installed on your system maybe it's the second time you doing Then you might not want to merge you might want to have it be like a clone I like a second instance of JCB it will literally Then create all the fields and all the views And all the linked Concepts Again Where is if you choose merge And There is a change in the package which is newer Then the version you have it will Actually update That version If you wanna force it To update it You will say yes up here The force local update really Only Words If you selected merge Then there's also show all import information Which year was the first time that you're importing package It might be ideal to to check this too Because it was show you literally everything that it does every field it adds But not showing names of sweet ID so lot of it will be like ok that doesn't make sense To see anyway But at the very bottom of the list It shows you that Files that is moved and this is what you need to see You need to see the files that is moved in Into your system Specially if it's not a package that we are providing Or someone else that is being Sort of validated through the community But it's someone that you've Imported through a URL Walkthrough package from you Distributor package you received Or from a directory Then you most certainly wanna C o import info Because you wanna make sure that what they told you is what you get and that's what that little feature is all there About Then there is also the component that is being imported should show Here the same as the one you saw before we got the package Now there's a few that have used this area multiple times You will know But you're actually able to add Multiple components into one package It's just because they we had BBM Are distributing one component at a time That's why there's only one component in the package But in in Integrated perspective You can actually import a backup package Right here And that would be Then everything That you have done So in my case I all the components out build are actually zipped in a bucket patch package And I can import all of those into JCP at once at the moment I've tested it up to at least 20 components which is It takes a while but it and actually gets there Ok so at this point Everything looks fine And you can click continue This depending on the size of the component All the size of package Might take longer and shorter And I was just a dress that you wait it out Take a sip Coffee or something It it does take a while because literally at this point It is updating the ideas Everyone One at a time So with every field the ideas are being updated with They review and everywhere that ID in any other ideas being used anywhere across the component Everything is dynamically being updated During this process And So as you can expect it is a lot of Compilation Lot of algorithm Lot of things happening under the hood And therefore does take a little bit longer than You might expect Because the ID is changed And the way we export the package Is literally Just taking a photocopy of the package as it is in the JCP where it was Develop Or when it resides And when you imported we now recreate and remap every ID To ensure that it remains functional although basically all it's identifiers Changed Ok so just wait and in the moment it will show you that it's been successful But it does take a while Once it's done You get this Longest especially if it was JCB Which you've imported I mean it's a long list It has over 1000 field so You can anticipate a long scroll Hunger and grabs Here Please try get And it goes and goes and goes And it's Huge But they're very much at the bottom you start seeing different things Like the files every little file that has been in Imported And that's really helpful If you are importing a package From a developer which you do not No or You're not absolutely sure we can Trust The now you must check Every one of these Fields that they are legitimately related to this component And that it is actually what you into Dissipated Or expected And you can also Therefore go look at these folders They are all related The custom folder At the moment as we scroll around here Awesome Folders that are related to the administrator BDM compiler Yes This is in the compiler so there's a lot of files for the car Bailar I draw 3 Then for the helper this This little thing here is just like her Space so really By which we sort of Create the string And so there you get all the files that have been moved into place and low me hold There is component builder the fully mapped Package In your sis And that's really as simple as it is to get The component that You need Fully map Into your system And as you can see All it's Views of Ricky Martin here And if you open any of those views Are you all again see that all it's fields Are also Correctly Map And You do realise that every one of these Fields their ideas have changed And even The fields They again Have field types And even those Might have changed The field types Itself And so Down to the very Smallest detail we've tried To make sure that every little thing All across the board Esri map And You know Fixed so that your component is again Fully Active and stable ready for further development Ok so that is the quick tutorial on how to import a daisy package into JCB \ No newline at end of file +I would like to give you a quick tutorial on how to install A JCB package Or import Is the right word really Now At the end of day You already have JCB on your System [00:00:16](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m16s) So I'm not gonna explain how we got to this point But from here on further There are two ways to To get to the in Installing View One is by clicking on this icon It'll take you there The other one is going to Joomla components And there is a button [00:00:35](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m35s) Up here this is import JCB Packages And that will take you to the same place You'll see that there is a number of tabs here And you can actually If you don't If you're not interested in these Two tabs There's action option in the global options Where at this point we are controlling those tabs Through this [00:00:57](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m57s) Global switch that says manage JCB package the directories You can say show all Show none Or manually select The repositories that you want the show at the moment they are the least two But they are Reasons to expect that they might become more as We see You know [00:01:17](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m17s) This area becoming more active Ok so Once you're on this page And you have yourself exported a JCB package then this is where you can select it from your Computer Or from a directory Or from a URL And with these import methods There is not a checksum validation feature in place So you need to be sure of the Integrity of that package [00:01:44](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m44s) We cannot validate that package integrity And since if it's being Selected from your desktop and you are in a your local development environment There should be no reasons for concern If you're pulling it from an external source Then possibly You need to be more cautious Where is it when it comes to the VDM packages and the JCB community packages These are the areas where we are trying to add some layer of Security [00:02:13](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m13s) To try and protect you And to ensure that The package area remains as stable as possible And so there is ways for you to add your own JCB package To the community repository Here is a tutorial to show you how to do that And Also Explaining Why [00:02:34](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m34s) We will do things The way we do them Because of The fact that everybody will then have access to that package In this area You can then also also Now get free keys For the VDM packages In the past you have to pay for them And we have decided in [00:02:55](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m55s) In a initiative to Sort of Show all of you exactly how JCB can work and function We have decided to give these packages way Asking you to follow few steps In supporting Us by Forking starring or watching These packages in their specific repositories on GitHub needing more guidance about this [00:03:22](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m22s) You can just click on that link And they'll show you exactly what you need to Do and once you've Got the key for that specific package You can come and select that package here Obviously It's only related to some of the packages at this point Which the first being [00:03:38](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m38s) Most prominent Component builder itself And so I would Suspect that would Would be your First Choice as Well and once you've selected the package you simply can click on Get to Have the package be [00:03:53](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m53s) Taken From GitHub And Brought To your Developing environment And in doing so It will actually run a validation on the Integrity of the package Because they are checksums In place But [00:04:09](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m09s) You need to validate the check some Manually And the way you do that Is it'll show you the checksum that was used to evaluate The Package integrity And since it's past the validation You know this checksum is the one that you need to see If you're open [00:04:26](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) This link So opening this link will also reveal a checksum But at this time you will be seeing a verification By Digi Cert And It must be at least This part of the URL Must be correct [00:04:46](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m46s) Up There This will vary from package to package But it should have the package name here And this should correspond To the value you to See here And that little bit of manual effort Is all you need to do To be sure that the package that you have now got In your position [00:05:04](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m04s) Is the original authentic package that we have distributed So at this point you're all good to go all you need now Is to take the key that we have sent you And to add it here To the key area like so Now you need to make a choice Whether you want to if the JCB already is installed on your system maybe it's the second time you doing this Then you might not want to merge you might want to have it be like a clone [00:05:33](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m33s) I like a second instance of JCB it will literally Then create all the fields and all the views And all the linked Concepts Again Where is if you choose merge And There is a change in the package which is newer Then the version you have it will Actually update [00:05:53](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m53s) That version If you wanna force it To update it You will say yes up here The force local update really Only Works If you selected merge Then there's also show all import information Which if it is the first time that you're importing package It might be ideal to to check this yes Because it'll show you literally everything that it does every field it adds [00:06:20](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m20s) But it will not show your names or shows your IDs a lot of it will be like ok that doesn't make sense To see anyway But at the very bottom of the list It shows you that Files that is moved and this is what you need to see You need to see the files that is moved Into your system Specially if it's not a package that we are providing Or someone else that is being Sort of validated through the community [00:06:44](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m44s) But it's someone that you've Imported through a URL Or through a package from you Distributor package you received Or from a directory Then you most certainly wanna see all import info Because you wanna make sure that what they told you is what you get and that's what that little feature is all there About Then there is also the component that is being imported should show [00:07:08](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m08s) Here the same as the one you saw before we got the package Now those of you that have used this area multiple times You will know That you're actually able to add Multiple components into one package It's just because we at VBM Are distributing one component at a time That's why there's only one component in the package But in in Integrated perspective [00:07:32](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m32s) You can actually import a backup package Right here And that would be Then everything That you have done So in my case all the components I've build are actually zipped in a backup patch package And I can import all of those into JCB at once at the moment I've tested it up to at least 20 components which is It takes a while but it and actually gets there Ok so at this point [00:07:59](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m59s) Everything looks fine And you can click continue This depending on the size of the component All the size of package Might take longer and shorter And I would just suggest that you wait it out Take a sip Coffee or something It it does take a while because literally at this point It is updating the IDs [00:08:21](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m21s) Everyone One at a time So with every field the IDs are being updated with Every view and everywhere that ID in any other ID is being used anywhere across the component Everything is dynamically being updated During this process And So as you can expect it is a lot of Compilation Lot of algorithm [00:08:41](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) Lot of things happening under the hood And therefore does take a little bit longer than You might expect Because the ID is changed And the way we in export the package Is literally Just taking a photocopy of the package as it is in the JCB where it was Develop Or when it resides And when you imported we now recreate and remap every ID [00:09:05](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m05s) To ensure that it remains functional although basically all it's identifiers have changed Ok so just wait and in the moment it will show you that it's been successful But it does take a while Once it's done You get this Longest especially if it was JCB Which you've imported I mean it's a long list It has over 1000 field so [00:09:32](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m32s) You can anticipate a long scroll I'm gonna grab this thing here and drag it And it goes and goes and goes And it's Huge But they're very much at the bottom you start seeing different things Like the files every little file that has been Imported [00:09:50](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m50s) And that's really helpful If you are importing a package From a developer which you do not No or You're not absolutely sure you can Trust The now you must check Every one of these Fields that they are legitimately related to this component And that it is actually what you anticipated [00:10:09](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m09s) Or expected And you can also Therefore go look at these folders They are all related The custom folder At the moment as we scroll and now here Are some Folders that are related to the administrator VDM compiler Yes This is in the compiler so there's a lot of files for the [00:10:31](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m31s) compiler Joomla 3 Then for the helper this This little thing here is just like a Spacer really By which we sort of Create the string And so there you get all the files that have been moved into place and low and behold There is component builder the fully mapped Package [00:10:51](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m51s) In your system And that's really as simple as it is to get The component that You need Fully mapped Into your system And as you can see All it's Views are correctly mapped in here And if you open any of those views [00:11:07](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m07s) you'll again see that all it's fields Are also Correctly Mapped And You do realize that every one of these Fields their IDs have changed And even The fields They again Have field types [00:11:23](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m23s) And even those Might have changed The field types Itself And so Down to the very Smallest detail we've tried To make sure that every little thing All across the board is remapped [00:11:37](https://www.youtube.com/watch?v=PGmEoliopv8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m37s) And You know Fixed so that your component is again Fully Active and stable ready for further development Ok so that is the quick tutorial on how to import a JCB package into JCB. Ok thanks for watching. diff --git a/065-JAB18-Using-Joomla-Component-Builder.md b/065-JAB18-Using-Joomla-Component-Builder.md index 587a3ef..7080a54 100644 --- a/065-JAB18-Using-Joomla-Component-Builder.md +++ b/065-JAB18-Using-Joomla-Component-Builder.md @@ -1 +1 @@ -Person could use in trying to create extensions Things you can interact on social media with any of these items with I've gotta love I'm not gonna read them out Top Gear So I'm gonna tell a bit of what's out there because there's more Solutions than June not components Builder why you say to her that I'm focusing on the Joomla component builder itself and You have a nice giveaway at the end of the session So why use it too little What are there We are component create I think that's about it well-known extension by the or esteemed Joomla Sharon it's such a size solution it's closed source Is freeware one table you have to pay subscription This is wonderful to All That Put on job since 2015 or even earlier Tubidy Which is actually a model driven Also it actually abstracts your ideas and then generates a code out of it meaning you could A theory create a Joomla a Drupal or a WordPress website go 4 if that's nice plugins for app store money clips if you gave it a stop it Now I also has a workout after it has some basic reverse engineering staff Theoretically you theoretically you can feed it any extension and it should be able to make model I am 4 size the theoretical part because I think there's quite some limitations for that to actually work What is over 16 developers are the back of the room and You can't travel back in time but you could have seen their session And is this Joomla component Builder a very unknown Tool What it has its own characteristics tumor component be able what is a component that you logged in Enter your website It actually is on your platform it builds the component for your You in your fat form so you don't you're not dependent on any SA Solution whatsoever And the doors actually used to build itself So the model that is used as they refer to themselves as the nap Joomla component that's rather you have the cool Wii interaction and stuff that Used to generate its own coat The compatible with the compiled source is open source Component but that's gonna change however Even at this point in time there is no licence costs and I know limitations So how's component creator allows you to create a component based on one table yeah you can't do Dad There still doesn't have any Annotations Play me stop by Asking you what are the challenges that you see when you Lie before start with the question who created components or has created the wrong components in the past Ok that's quite a lot of People so what are the challenges that juicy In That's so let me start with my esteemed colleagues even picked her life specially want to thank Funding for the promise to do that so what's Why you create a new component That will be Yeah And you're not lazy you want to Cut Riddle That for a petition Ok Hey buddy I say remarks at people thank you very much thank you thank you Anybody else have something Where does it they're on their on their due to correct them yeah I miss that changes because of the things that you do yourself ours changes that standby too much Whatever Change it and then have to change Anybody want to add something Yes Yeah You can really quickly create a basic Something special Ok ok have some rice some of the Things that annoy me and doing that stuff that's a boilerplate What he was referring to setting up the directory structure creating all the crap files now Stores that will help you with that bitch be storm but still it's tedious work and you have to wash the car Capitalisation of the names and the slots of naming conventions And really I'm lazy And you saying that it all can do for me I'm very happy with I also like Do you stop Obviously if you've already create a lot of extensions then you can reuse previous word back copy pasting But Yeah you want to rename it so there's some work involved you might want to reuse Other people's work Maybe somebody pray there's something lies inside and obviously use libraries in general Contain Us truck sales There's a lot of stuff in July that we all Love I think But you still have to do some stuff By yourself and your own component if you want to have away make that work being multilingual Support Having four of groups Access control structure Adding history to your Components used just as with article so that you can see you who changed what and what time Custom fields All support that and obviously the tools out there have their limitations at the beer cost Biut the licensing scheme Opiate the skills required And Advanced items I would say ok can you extend that tool Easily to Accommodate new features So should that be a Workflow extension to Joomla How is it can you add up to your own component Tools should a theory be able to Add that without bothering you with Order Lady Grey details Can you do reverse engineering Tubidy is a tool that can do that Imposter that's ok But To me more pointy is the roundtrip development in a mansion Typically a little when you start you have their school while you can easily click the Gatherer table and use and stuff like that You were exported to cut your component then you start working on it As soon as you realise that you missed a field or whatever something you're screwed She can't go back to that nice graphical model then you have to delve into it Robin I wanna do something That I fell you Collaborative development Working together on a single component with not with multiple people and that same model Those were things that I would like to see In a tool that supports my workflow Handsome Juma component Builder And specifically Version 297 that's the Latest and current version So anything I'm telling you protected this version not the rodeo version so If you want to check it out check this version out that's the latest Galleria Mall So there is this Link to a component welder on ww3 Mio What is presentation will be available you will not need to copy at all It's only if stanchions directory Unfortunately in this talk We can't bought scratch The surface so what I wrote to Convey in the Starke Ayres Bad I thought on the ideas if I could do that that will be fine still you would need to doubt To this Hey yourself To cut into the details 40 Days Quite song Documentation in the form of videos Doesn't Dozen dozen so far was a video Which doesn't make for the easiest in Looking up stuff but it does make is if you win just sitting in your own couch and streaming YouTube Videos to your TV on Soccer10 Yeah we must write a server so you would really need to have a deep will look afterwards to see How to do staff party resonate with you in what you can do because I'm How to convert data please Then you're in for a real treat That is go back Because Contact why I started this is because my son wanted to have a website And children are like any customers It's really easy Nothing complex I just want And this Casey wants to wanted to create a website with Disney characters and the autographs and stuff like that That's all you wanted Wealth Easy will do that with Fields custom fields 2 days in and require but I want to list and parades and I want to do this and I want to do that Not gonna happen so I introduce them to this Tool And He made it happen and he was able while he's not dumb for her is actually quite intelligent so What is not a diehard programmer Body could make it happen with some out now I must say that When we started Yeah the word worms The number of resources were limited to how fast are the world videos Something's wrong clear Over the last few months I've been an extensive contact with a developer Llewelyn And order my sis Opened up to the idea of a number of challenges that we see And you will see in the giveaways at the Antwerp that Result of them And that will actually really help you in Getting started If you look at Computer builder I think the first thing that you will see you as the dashboard Aberdare control panel Wiki Notice board Is marketing a lynx But most importantly for you that says Wiki With Yeah you find in Find all the tutorials all day Links to the YouTube videos so once you install the component Builder You got access about 2 that just by looking at The wiki So far so it's there is a next person legally sleep because it's Yeah it's part of open source Not structured in terms of technical documentation whilst Videos are indexed in terms of time stands and say he is talking about this year's talking about that Still it's Disability is limited There's a 4 on the way you can do Crush and allowances And there's a lot of you so you can directly access that list of videos to YouTube channel to look at Stuff So if you look at the weakness of planning and you will hit this is a sample of the Video on field times at us ok at the 1 minute and 5 we're talking about create field 5 IPhone error 57 issue It hurts but it's not Perfect So let's not talk about The word for what does it take And what's possible in creating component I put together this Diagram which is simplified These are the topics we are called to touch upon so we have to add the components that's the stuff that you want to build The field types fields We have peaceful code that sweetie custom code to yourself We have a dynamic at the fuel issue I can few customers you Stuff that has to do with interacting with the data Off your model controller Salivary song graphical stuff I will touch on each of these items So Last Thoughts on the components for applicator Diagram So this is what you see when you Look and added a Component These are the types you have cycle through him so well yeah your details tab where you can setup The name the first name Do stuff with debugging line numbers yeah anything Rachel you related to a Component We have a suffix manual Why you can configure that thing more in depth You see the list the reference to the administered if you decide to use Chris Matthews Wfo I'll deal with it later Libraries and helpers The dashboard where you can create a custom dashboard for your extension with icons and stuff like that MySQL data The ReadMe file widget weekly that gets Exported with your Extension And as Dynamic integration I'll start from that after Last time of the year Presentation So How do we build a component The component How Michael come as a surprise we have field types I we have Feels So feel tight so basically the things that we know a lot from Juma There's a calendar category checkbox check boxes colour Anything like that so That's the upside definition of something that you would want to Create You could Add your own Filter type 2 that These types And tells her the fields are share between all your Components So you don't that's where you get part of the reuse of You create a month and then if you've got a very specific field for a specific action Some kind of zip codes address validator thingee Ukulele teacher And then you can setup Feels I'm so sorry institutions of field types You can create your own Fields you can pay special for us with that again it's validation Stuff like that and the feels are the stuff that Eventually will underpin the database And the tables Private so now nothing is stored it Just abstract You can set up your bespoke Fields so stuff that you Like the sound so dusted the type value that it has you can assign icons And I should come in for here You can have a lot of attributes to And if you just about anything that you would Like You can add extra properties Here Hey you can Can you see And That's what we coming to wear this Dave this is in this field in which views It's used Interview series in admin view preacher and admin view sermons That's of the installed applications that I have Information on the Attributes used to filter so there's a lot of stuff That you can configure per field type To set it up You and Bob Marley right gonna be sore The views it was used in and That's where it gets tangible so once you set up your field types Are your fields If you at least need new ones that are not be filled with the tool You're gonna set up your views and I think you're familiar with the list use and the item hues List users why you got your tabular tabular display of multiple items I like them he was a typical View of one of those Items so that's the item View Components Builder it seduces Elsa Wyk Austin View Which is used to like for reporting where you can do graphing or anything special that's no Necessarily in the realm of a I can feel Itself or lest you So these fields are the stuff that's gonna get Added to the database You can have all kinds of conditions in the view For that You can add buttons to if you Not much understand what's if I commit bye Any other accidents And there's a plethora of options to hook into your Cold sore Adding an Ajax Jackal App that's wrong on the cut item so when you have a singular item At the beach before back at speed beach before After publishing Before deleting Post safe mouth For the list query so you could say Read data from the database and manipulate it Too short and the different forms or if you have Numeric presentation of whatever attribute you could change that then to display as and I can or What you would wish Lots of options Yeah and it covers a lot of Items already So they said they talked into BIOS version if you only get to do if you would also it tomorrow and controller At last part you saw something about the MySQL so you can act and MySQL done to initialise That table on her installation And as the usual staff regarding publishing Affirmations that we all know from Honey Standerton life But that also means that At this level you The entire workflow in component Builder you can at the same restrictions to As we had fun over component so you can have some people in some groups have the right to Create fields on Not create Fields create tables Anything But you would well So we here we have The Linksfield to feel that are linked to that table so that's a view of it so ANOVA you can say ok is is suitable Can I search it So you can turn it on and off Where does it show when it up So not everything shows in long how does it Order What's with the formations that's not here but late areas All over you and you can add it each Item from here so you can have at the attributes of how you behave in a listview or in an item View To your house is higher He has an opinion that I shouldn't be more than 60 fields in And happens you yeah Not Unrealistic You can also add conditions Tour field When it's supposed to be shown On which circumstances so that you can have a More Clean display And that's all Draws back in in one building all this time that you wanna mechanisms That we are video files to show or hide or show all How to delete a sent an email but you can show on Something of another field in the XML file So That in basic golfers Of you and the staff that we have in the Table Now you want to Free sure why's that It allows Dumping as a it's cold I have a buddy recognise this structure where you have to default PSP feel that your side to you And then you can split it up in Separate parts and make it more readable And those are called the tablets Tablets that you can use in different Bass shoes Sitefusion To set up your And there's no shame to Add Layouts The best leader But you know how to set them up through the week and then you can write for some Ganja Usual way Point being that he gives you access to all of these Items that typically are Normally call Furthermore we are the options to add libraries Global Apple Standard support staff for Bootstrap 4 UI kit I'm a number of libraries what if you have heard of a framework that you like for JavaScript You can find out for that future with noted in And it's reference I need to worry about it It's just an example of how it looks like Carel The type Yes No probably got depends on what you're our you can provide here so I think in this case is gay 300 blah blah blah blah for that fashion Off Your created component So once you bring out the new component new version Your coat Check if there's new version if you like it Put it in here and generator Capone and the Gang What Santa's here just answer as a piece of code And unloading the data but it said we enter face to ensure that it gets on all the pages that This reference Filegooi Depending on the cloud CDN So it gets it from there so it will just be a reference in the code to load it from there but there's nothing Calling you back to actually set it up locally Change the URL here and then Tweak it Whatever you aware you want which one to Now we had a very basic Table Fuel that's one table But YTS At least not our typically my components work Because we have Want to enroll and relations in decomposed on normalise in your data So you would want to be able to Combine that Interview And that's why I did Dynamic cut That I'm a cat has two basic tabs Filter I hope it's better we'll and here you can see where it says access level ID Age of access Webster I said actually knows about the access level Of the user Answers we have a access level in there in that table Offered at element Is ensure that it'll only show So anyway you can Restrict access Stuff you can Have where filtering where you can say Oki Only want the published ones You can Sort it Are you can even set Global stats you can use in your code while Scrolls is not the best practice but Pay Here you can do a lot of Things in Extending your data filtering it's you can add At search For it by Here addressing the search Elements from the post Anime ensure that you feel her on that so Sorry powerful There's all gas translated into Basic database libratone typically it's MySQL queries And all the aspects of vs How to Create relationships because having one table Probably we first two other tables And that's why I did Is called a joint But Now you see your K series single SB during a series equal Yeah you find your joining queries between your tables Socket for that you You got 1 combined table That's also all the information To be displayed Richard and Australia Powerful Now define dynamically you can add them yes you can So there's no actual limitation Do it this will just Translate 1 to 1 in MySQL stuff Yes this is a repeatable field you can an add in as many as you want them You can make any kind of yes Yes Left and right join in a drawing of the train To understand that combination with being able to Join tables At the filtering That's an awful lot you can already do A database level Watch can't do a database for you can do at the PHP level where is salt Get list items you could do with some stuff there So the options are Forcefully Limitless Custom code Not to be Cause your S4 code There is some options to have What is called customer code in the code snippets that you are defining and The Crossing Could be Micros So it's a certain replaced thing you define Snippets I'm by Adding this in an axle piece of Cold at all Pattern that larger piece of code so that you don't need to Record your dad if you ID Every time You can also pass values to that Sample of gold special it's going down the function So that's just a centralised or code Functions At 11 Done Ok this should have been the bespoke old not the postal code Because that's To me that's The Unicorn Fin of this Component builder and this is what got me Interested in it There's a lot of options in there Part For whatever reason I always end up wanting to change something that can't be changed Directly And the Khoi That's why I this Computer component builder excels I think Because it will allow you to Add codes or change code anywhere In your compile component The only limitation is that you have to Atom Structure on that are commenting on that so that it can be found so that's in syrup type like this I'm in the southern anything in between there Will be inserted The beauty of it if you do that The Build It wall the last track these pieces of gold And the next time around to build it it will re insert them So you will Be able to change staff at any location be it and PHP or HTML And Haven't be imported So that would for example mean if you now have a 3.8 components Which has a shortened file layout structure at satellite setup If In a few months time That is a version that can build 4 To my 40 Your changes will be port In the relevant files in other locations I will need worry about it It will just build With your cross and changes what that 4 to 4 Photos Familiar Jumma for has a slightly Was it works with Joomla 3 The directory structure and file structure That's not the best practice the best practices Baffles of Shuffle around a little bit Anybody wants to know just ask George You'll be happy to tell you about it I see there is a List of the number a number of stuff so you can set it so if this or replace a piece of it Cheston cold And So when it so you see what happens when it gets Added back in the Gang Awesome tag so that it can do with homework and actually knows Piece of soap price change that what Location So guess what really what got me a sushi ask about this tool because this is not something I've seen Before And it'll allow for Roundtrip development Where did and going Modify to your accent you can already modify lot in the component build of itself If not you can take it anywhere else And it will be sucked in again And then if you want to add a new Database table in new few extra columns I will take care of that it will create associated a bit Script for the MySQL databases Everything Some stuff needs to be compiled This is A bit what you can see when it gets compiled So You select your component In this case I've got component build a swimming distributor question and answers Damelin download fonts CK one of them and hit the compile button Cut it Once it's done it make some assumptions assumptions about the time you saved It's almost time to have released Cat sounds that you actually save time because she didn't have to create the Directory structure Nothing like that I want to compile you can Click on this one to install the mediately or you download it Are you Reference what I forgot And if you have it somewhere else Ryan you can use this You're out or pass depending on where it is Now you could if you have one development site is easy to run component over And because every package can be exported An important in an office site Without problems There is a option to if you have a commercial component to have faith in cryptids Security So that it only can be installed if you have that key Watching like this in Waterberg Yeah Started with some misc stuff you'll find someone sounds for example in there that And he calls recital was really a nice one that adds deals with Drag and drop off loading with all kinds of Filtering on content type security looking at Wits PDF Filesize resizing images There's a very complex example there on how to use that with ACL so that only short and glue People can't do that Yes very Interested Another thing that Probably Renee also would like to see is that there is a sorry I would say I know you but I know most of the people in the room so sorry So familiar Collaborative workflow If you work on so you can work on there Sing Installation What time you deal with the normal July Problems of locking up Joe article And I'm your door was locked and somebody else cannot work with it What does actually So you can't do stuff so what time of day is There's actually a workflow setup while you can do Multiple developers work on their local insulation Where the changes get merch Using git So you can have a collaborative What's on that So the map components Versions in your home kids stuff There's a community components that you were saying were floor or similar workflow As a similar way for a thing we have The Upstream repository So you thought out in your local Theatre you Clone it to your local development and Farmer You make changes to 4 simple question and answers component You set up your upstream And I knew Push it and make a pull request and then Pull request me on me not that accept it And then you can download the new passion and also component again but that works ok you can also setup locally Now for the giveaways So until today are actually until the start of this presentation Freedom That's the company for of Llewellyn Salt the map components Packages So The question-and-answer modules Bugatti 94 dollars The Sermon distributor Because your 46 stars And The big thing The component builder so the thing that We are talking about which bills itself would such a half 800 dollars Totalling over a thousand dollars which is a lot of Money I was in the last months talking to you welwyn and he he talking to his team It was a big change in his attitude and giving back So anybody that here If you use this link Take time to take pictures outside So you can fetch time I meant this presentation this one Why you can Hit me later if you need it All that date you can get these three packages You pay If you open at page now you will see that you can access these and you Can get the keys the only thing To be eligible for the keys is that you are like that you star share After February 4th The respective components If you have a public email address you we should get some Turkey Automatically show public email address in get that publicly accessible If not You can claim Yorkie on this page So You can get The summon distributor of the question and answers and the tube the component of itself Watch watch for start And you got notified if you have a public email address and get That is very easy at the age of You got to the components you can import the package is here Sowetan Import acb packages that you can They were blessed No need to search for them you can also see that you can export packages And then you got something Like this Where are you at the key that you got this tribute it And this is what shows when you Progress so I got component build up a door lock that it's installed Hear Costa All the extensions I've got a little preparation cutting these Affront So I'm sure I have keys but don't ask me for fees I will not give them There's a perfectly simple way to cut them Just start for share And you got your own tea I was that I want to say you just thanks a shout out to You unfollow Marilyn Hussar in Africa Honey shorter look this back Any questions Obvious It's a lot to take a knife and try I actually don't know I know he has his But I don't know how to space company is the Picture of the office building is huge office building but I don't think he owns It Off This is a huge thing I guess you didn't click this I don't know Know how you feel came across it before and that's actually how Circuit my son to use it I actually heard of it here's back but to me it's a bit like to myself I heard about it but only when I saw that it started to be multilingual and that access control I got interested And the thing that got me interested in here is the fact that I can do modification in any location Component I have no limitations on that and I can still do wrong trip retirement By giving back obviously you're well hope someone's Everybody to contribute as so that we He can extend this even further And I've already started to talk with my friend from the gym Didi To see if there's maybe that's Common Ground because I also very much like their idea about having model 3 Devourment Don't know how to beat it yet but since it's now going to be open source two ways Yorkshire Nexus And that's really exciting to me Yeah you could use it but you couldn't change it and Free free Are you could use it for free but you could you couldn't have the map the bone and so the one that builds itself and change And you wouldn't have the Example components example components so that you could look how does he do this how do I Filter how does he do this And something Yeah but starting today you are two example components that Will really help you on the lips that I struggled in finding things out And you have a tumor component builderware I hope that the community will take it up Ok Tyson Sorry signal that it's young Thank you Janice If there's any more questions just Ask me when I'm moving around \ No newline at end of file +Person could use in trying to create extensions My name is Marco Dings you can interact on social media with any of these items since I've got a lot sites. I'm not going to read them out Interact here So I'm gonna tell a bit of what's out there because there's more solutions out there than Joomla Component [00:00:33](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) Builder why use a tool and then I'm focusing on the Joomla component builder itself and We'll have a nice giveaway at the end of the session So why use a tool at all What's out there? We have Component Creator I think that's a about it well-known extension by RST Joomla sermon it's SAAS solution it's closed source It's free for one table you have to pay subscription Well you do get provisional support. This is a wonderful too that's been Presented on JAP since 2015 or even earlier JoomDD Which is actually a model driven [00:01:23](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m23s) Tools or it actually abstracts your ideas and then generates a code out of it meaning you could A theory create a Joomla a Drupal or a WordPress website go forward if that's nice plugins for please in store many clips if you gave it a stuff and Now I also has a web editor it has some basic reverse engineering starts Theoretically you theoretically you can feed it any extension and it should be able to make model of them I emphasize the theoretical part because I think that's quite some limitations for that to actually work What is open source so the instinct developers are the back of the room and You can't travel back in time but you could have seen their session And is this Joomla component Builder a very unknown Tool [00:02:20](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m20s) What it has its own characteristics Joomla component builder is a component that you logged Into your website It actually is on your platform it builds the component for your You in your plat form so you don't you're not dependent on any SAAS Solution whatsoever And the tools was actually used to build itself So the model that is used as they refer to themselves as the mapped Joomla component that's where the you have the gooey interaction and stuff that Used to generate its own coat The compiled source is open source So the mapped Component isn't but it's gonna change however [00:03:14](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m14s) Even at this point in time there is no licence costs and are no limitations So as component creator allows you to create a component based on one table yeah you can't do very much with that There still doesn't have any Any limitations So Let me start by Asking you what are the challenges that you see when you Let we for start with the question who creates components or has created their own components in the past Ok that's quite a lot of [00:03:48](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m48s) People so what are the challenges that you'd see In That's so let me start with my esteemed colleagues Eve and Victor who I specially want to thank For attending for the promise to do that so Eve what challenges do you see when you create a new component Well nothing Yeah And you're not lazy you want to get Rid of that of that repetition. Let's say yes. [00:04:38](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m38s) Ok Everybody as a remark that people thank you very much thank you thank you Anybody else want to add something. If sometimes if you change a name or something Where it is their and their and their you have to correct them yeah and does it that changes because of things that you do yourself ours changes that it's done by Joomla. no the change you do by yourself Whatever it does I should Change to this and then have to change it everywhere Anybody want to add something. Rene. It is big the way components actually hold together Yes. You can get lost you know. Yeah [00:05:31](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m31s) you can really quickly create a basic component but if you want to do something special and you can't do it with these component creators. You can't load it back to your component field. Ok ok have summarize some of the Things that I think annoy me and doing that stuff that's a boilerplating that is Specially what Eve was referring to setting up the directory structure creating all the crop files now there is tools that will help you with that beach be storm but still it's tedious work and you have to watch the Capitalisation of the names and the slots of naming conventions And really I'm lazy And you think that a tool can do for me I'm very happy with I also like [00:06:24](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m24s) to reuse stuff Obviously if you've already create a lot of extensions then you can reuse previous word back copy pasting But Yeah you want to rename it so there's some work involved you might want to reuse Other people's work Maybe somebody created something nice and we use that and obviously use libraries in general that contain abstract stuff There's a lot of stuff in Joomla that we all Love I think [00:06:59](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m59s) But you still have to do some stuff By yourself and your own component if you want to have away make that work being multilingual Support Having from of groups Access control structure Adding history to your Components use just as with article so that you can see you who changed what and what time Custom fields And not all tools support that and obviously the tools out there have their limitations either be it cost Be it the licensing scheme [00:07:38](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m38s) Or be it the skills required And Advanced items I would say ok can you extend that tool Easily to Accommodate new features So should that be a Workflow extension to Joomla How is it can you add up to your own component Tools should in theory be able to Add that without bothering you with [00:08:09](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m09s) all the nitty gritty details Can you do reverse engineering JoomDD is a tool that can do that Impart so that's ok But To me more importantly is the roundtrip development which Rene mentioned Typically in the tool when you start you have their school while you can easily click together a table and view and stuff like that You exported to got your component then you start working on it As soon as you realize that you missed a field or what else something you're screwed because you can't go back to that nice graphical model then you have to delve into it [00:08:47](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m47s) Round trip development is something That I value Collaborative development Working together on a single component with multiple people and that say model Those were things that I would like to see In a tool that supports my workflow Hans income Joomla component Builder And specifically Version 297 that's the [00:09:19](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m19s) Latest and current version So anything I'm telling will projected this version not the earlier version so If you want to check it out check this version out that's the latest basically gather a little more So there is this Link Joomla component builder on www.vdm.io well Since this presentation will be available you will not need to copy it all It's only extensions directory Unfortunately in this talk We can but scratch [00:09:53](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m53s) The surface so what I ought to Convey in the stork is that I thatch on the ideas. He say oh yeah if you could do that that will be fine still you would need to delve in To this yourself To get into the details fortunately there's Quite some Documentation in the form of videos Dozen [00:10:19](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) Dozen and dozen of hours of video Which doesn't make for the easiest in Looking up stuff but it does makes easy viewing just sitting in your own couch and streaming YouTube Videos to your TV on Suck it in Yeah we can but scratch the surface so you would really need to have a deeper look afterwards to see How to do stuff but if resonate with you in what you can do because Hope to convey that at least Then you're in for a real treat Let me go back [00:10:58](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m58s) Because Contact why I started this is because my son wanted to have a website And children are like any customers It's really easy Nothing complex I just want And this case he wants to wanted to create a website with Disney characters and the autographs and stuff like that That's all he wanted Well Easy will do that with Fields custom fields [00:11:27](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s) but 2 days in and require but I want to list and parades and I want to do this and I want to do that Not gonna happen so I introduce them to this Tool And He made it happen and he was able while he's not dumb for her is actually quite intelligent so What is not a diehard programmer Body could make it happen with some out now I must say that When we started Yeah they were weren't The number of resources were limited to help us so there were a few videos [00:12:07](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m07s) but something were unclear Over the last few months I've been an extensive contact with a developer Llewelyn And over the months he Opened up to the idea of a number of challenges that we see And you will see in the giveaways at the end what that the result of them And that will actually really help you in Getting started So If you look at [00:12:35](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m35s) Joomla computer builder I think the first thing that you will see is the dashboard but control panel Wiki Notice board has some marketing links But most importantly for you that says Wiki With Yeah you find in Find all the tutorials all the Links to the YouTube videos so once you install the component Builder [00:13:06](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m06s) You'll got access to that to that just by looking at The wiki So unfortunately it's there is a explicit link obviously because it's Yeah it's part of open source unfortunately is not structured in terms of technical documentation whilst the Videos are indexed in terms of time stands and say he is talking about this here talking about that Still it's search ability is limited There's a forum on the way you can do Crash on answers [00:13:46](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m46s) And there's obviously you can directly access that list of videos to YouTube channel to look at Stuff So if you look at the WiKi that some general planning and you will hit this is a sample of the Video on field types it's ok one minute and 5 we're talking about create field types at one minute 57 is list view It helps but it's not Perfect So let's not talk about The work for what does it take And what's possible in creating component [00:14:25](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m25s) I've put together this Diagram which is simplified These are the topics we are called to touch upon so we have to add the components that's the stuff that you want to build yourself The field types fields We have bespokel that's really custom code to yourself We have a dynamic get the view list view item view custom view. Stuff that has to do with interacting with the data Of your model controller Salivary some graphical stuff I will touch on each of these items [00:15:04](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m04s) Let's starts on the components first I've applicated the diagram So this is what you see when you Look and added a Component These are the tabs you have we'll cycle through and so well your details tab where you can setup The name the first name Do stuff with debugging line numbers yeah anything really you related to a Component [00:15:36](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m36s) We have a settings manual Why you can configure that thing more in depth You see the list the reference to the administrator views the site views custom admin views I'll deal with it later Libraries and helpers The dashboard where you can create a custom dashboard for your extension with icons and stuff like that MySQL data The ReadMe file which is readme that gets Exported with your [00:16:09](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m09s) Extension And as Dynamic integration after Last part of the Presentation So How do we build a component The component How Michael come as a surprise we have field types I we have Fields [00:16:39](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m39s) So field types so basically the things that we know a lot from Joomla There's a calendar category checkbox check boxes colour Anything like that so That's the extra definition of something that you would want to Create You could Add your own Filter type to that These types And those are the fields are share between all your Components [00:17:09](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m09s) So you don't that's where you get part of the reuse of You create a month and then if you've got a very specific field for a specific action Some kind of zip codes address validator thingee you create it here And then you can setup Fields and So are the institutions of field types You can create your own Fields you can paste special fields with dedicated validation Stuff like that and the fields are the stuff that Eventually will end up in the database [00:17:53](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m53s) in the tables Probably unto now nothing is stored it it's just abstract You can set up your bespoke Fields so stuff that you Like yourselves so there is the type value let it has can assign items And as you can info here You can have a lot of attributes to And if you just about anything that you would Like You can add extra properties [00:18:26](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m26s) Here you can here you see And That's what we coming to where this is in this field in which views It's used So it is an admin view series in admin view preacher and admin view sermons That's of the installed applications that I have and here is Information on the Attributes used to filter so there's a lot of stuff That you can configure per field type [00:18:59](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m59s) To set it up Here in the bottom on the right corner we gonna saw The views it was used in and That's where it gets tangible so once you set up your field types and your fields If you at least need new ones that are not default with the tool You're gonna set up your views and I think you're familiar with the list views and the item views so the List views is where you got your tabular tabular display of multiple items and your items used a typical View of one of those [00:19:35](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m35s) Items so that's the item View Component Builder it uses also a custom View Which is used to like for reporting where you can do graphing or anything special that's not Necessarily in the realm of a Item view Itself or list view So these fields are the stuff that's gonna get Added to the database You can add all kinds of conditions in the view [00:20:09](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m09s) For that You can add buttons to a view Not necessarily understand what is saved I commit or Any other actions And there's a plethora of options to hook into your Code so Adding an Ajax called PHP that's run on the get item so when you get a singular item At the PHP for batch add PHP for [00:20:44](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m44s) After publishing Before deleting Post save well For the list query so you could Read data from the database and manipulate it Too show it in the different forms or if you have Like numeric presentation of whatever attribute you could change that then to display as and item or What you would wish Lots of options Here added got a lot of [00:21:16](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m16s) Items already So basically it tooks into while if you looks out to do if you would also it model and control apart At last part you saw something about the MySQL so you can add a MySQL done to initialize That table on installation And as the usual stuff regarding publishing And commissions that we all know from Hanni standerd Joomla thing But that also means that At this level you [00:21:53](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m53s) The entire workflow in component Builder you can add the same restrictions to As we had a for other component so you can have some people in some groups have the right to Create fields or Not create Fields create tables Anything But you would want So here we have The Linked fields the fields that are linked to that table so that's a view of it so And a overview you can see ok is this sortable Can I search it [00:22:28](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m28s) So you can turn it on and off Where does it show in a tab So not everything shows in long how does it Order What's with the permissions that's nothing here but links areas So there is a whole overview and you can add it each Item from here so you can added the attributes of how you behaves in a list view or in an item View To your hearts desire He has an opinion that I shouldn't be more than 60 fields in Admin view yeah [00:23:05](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m05s) Not Unrealistic You can also add conditions To a field When it's supposed to be shown On which circumstances so that you can have a More Clean display And that's all Draws back in in one building on the standard Joomla mechanisms [00:23:30](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m30s) That we have in the XML files to show hide or show on but you can show on Something of another field in the XML file So That in basic covers Of view and the stuff that we have in the basic table Now obviously you want to visualize that It allows [00:24:05](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m05s) Dump the thing as a it's called I hope everybody recognize this structure while you have the default PHP if that's your site view And then you can split it up in Separate parts and make it more readable And those are called the tablets so you can multiple tablets that you can use in different Base views oh site views To set up your view [00:24:37](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m37s) And there's an option to Add Layouts These are basically the Joomla layout you set them up through the gooey and then you can reference them in the Usual way The point being that the gooey gives you access to all of these Items that typically are Normally called [00:25:04](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m04s) Furthermore we are the options to add libraries those are the Global URL Stand of support stuff for Bootstrap 4 UI kit a number of libraries what if you have a lot of a framework that you like for JavaScript You can find that for that views for who loads it in And it's reference and you don't need to worry about it It's just an example of how it looks like where if you got the URL [00:25:36](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m36s) URL The type Yes. If you drags of the libraries is it the always gets latest No probably not depends on what URL you can provide here so I think in this case is get UI-kit 3.0.0 beta blah blah blah blah for that version Of Your created components So once you bring out the new component new version Your could Check if there's new version UI-Kit [00:26:12](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m12s) Put it in here and generator your component again. Does it reference or does it really save are just lost. No what's answered here just ends up as a piece of code in loading the data but it said we interface to ensure that it gets on all the pages that is reference try to gooey Depending on so this is on cloudflare CDN So it gets it from there so it will just be a reference in the code to load it from there but there's nothing Calling you back to actually set it up locally you just change the URL here and then [00:26:52](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m52s) Tweak it Whatever you where you would want to Now we had a very basic Table Field that's one table But Yeah that's At least not our typically my components work Because we have Want to enroll and relations in decompose on normalizing in your data [00:27:18](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m18s) So you would want to be able to Combine that In a view And that's why the Dynamic get Comes in The dynamic get has two basic tabs. The one that says Filter. It says tweak. I hope it's visible and here you can see where it says access level ID in A dot access so that the [00:27:50](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m50s) so it actually knows about the access level Of the user And since we have a access level in the in that table Or for that element It will ensure that it'll only show So in the gooey you can Restrict access to stuff you can Have where feel things where you can say Ok I Only want the published ones [00:28:22](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m22s) You can Sort it you can even set Global thats you can use in your code while Globals is not the best practice but hey Here you can do a lot of Things in Extending your data filtering it you can add this is where you Add search For it by Here addressing the search Elements from the post [00:28:56](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) And let me make sure that you filter on that so it is very powerful This August translated into Basic database language so typically it's MySQL queries And all the aspects obviously is How to Create relationships because having one table Probably he refers to other tables And that's why I this Is called a joint. I don't think [00:29:31](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m31s) But Now you see your OK series single as B joint a series equal Yeah you find your joining queries between your tables So for that view You got 1 combined table That's also all the information To be displayed Which is kind of very Powerful. So indirectly I have joints to the gooey [00:29:58](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m58s) No define dynamically you can add. Can you multiple joints. Yes you can add as many as you want here. So there's no actual limitation to it this will just really translate 1 to 1 in MySQL stuff Yes this is a repeatable field you can an add in as many as you want them as complex as you want. I can see but you can make any kind of joints. Yes Left joint right joint in a joint out the joint So in just that combination we being able to [00:30:44](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m44s) Joint tables Add the filtering That's an awful lot you can already do At database level What you can't do a database level you can do at the PHP level where I sort the Get list items you could do additional stuff there So options are Forcefully Limitless Custom code Not to be [00:31:16](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m16s) confusive be spoke code There is some options to have What is called custom code in the code snippets that you are defining and The Custom code Could be it's basic in the Micros So it's a research and replaced thing you define Snippets by Adding this in an axle piece of Code it will fetch in that larger piece of code so that you don't need to [00:31:52](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m52s) Recode your get view ID Every time You can also pass values to that Snippet of code basically it's going down the function So that's just a centralised your code have Functions At the gooey level Then Ok this should have been the bespoke code and not the custom code Because that's [00:32:22](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m22s) To me that's The Unicorn thing of this Component builder and this is what got me Interested in it There's a lot of options in there but For whatever reason I always end up wanting to change something that can't be changed Directly in the gooey [00:32:44](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m44s) and That's why I this Computer component builder excels I think Because it will allow you to Add code or change code anywhere In your compiled component The only limitation is that you have to Add some Structure on that are commenting on that so that it can be found so that's insert place like this and in with that anything in between there Will be inserted [00:33:17](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m17s) The beauty of it if you do that The Builder tool will extract these pieces of code And the next time around you build it it will re insert them So you will Be able to change stuff at any location be it and PHP or HTML And Have it be imported So that would for example mean if you now have a 3.x components [00:33:47](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m47s) Which has a shortened file layout structure etc. etc. If In a few months time There is a version that can build for Joomla 4.0 Your changes will be put In the relevant files in all the locations I won't need worry about it It will just build With your cross and changes that with Joomla 4 [00:34:15](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m15s) for those Familiar Joomla 4 has a slightly Was it works with Joomla 3 The directory structure and file structure That's not the best practice the best practices Baffles or Shuffle around a little bit Anybody wants to know just ask George He'll be happy to tell you about it There is a I've listed the number a number of stuff so you can say insert this or replace a piece of it [00:34:51](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m51s) existing code And So when it so you see what happens when it gets Added back in the get again And add some tags so that it can do its homework and actually knows which piece of soft phrase change that what Location So this was really what got me enthusiastic about this tool because this is not something I've seen Before [00:35:18](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m18s) And it'll allow for Roundtrip development created it in gooey Modify to your extent in you can already modify lot in the component builder itself If not you can change it anywhere else And it will be sucked in again And then if you want to add a new Database table in new few extra columns Joomla component builder will take care of that it will create a associated update script for the MySQL databases It will do everything [00:35:57](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m57s) Obviously some stuff needs to be compiled and this is A bit what you can see when it gets compiled So You select your component In this case I've got component builder, sermon distributor, question and answers, demo and demo advanced select one of them and hit the compile button and that's it Once it's done it make some assumptions assumptions about the time you saved It's assumptions but yeah so much time you have at least [00:36:35](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m35s) get the sense that you actually save time because you didn't have to create the Directory structure Nothing like that Once you compile you can Click on this one to install it immediately or you download it or you Reference what ever that code is. And if you have it somewhere else Ryan you can use this URL or path depending on where it is Now you could if you have one development site is easy to run component builder there [00:37:17](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m17s) And because every package can be exported An imported in an other site Without problems There is a option to if you have a commercial component to have it encrypted and secured by a key So that it only can be installed if you have that key Watching like this in Waterberg Yeah Started with some misc stuff you'll find some example for example in there that in the tutorials which I thought really a nice one that adds deals with [00:38:05](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m05s) Drag and drop uploading with all kinds of Filtering on content type security looking if it's PDF Filesize resizing images There's a very complex example there on how to use that with ACL so that only certain group People can do that Yes very Interested Another thing that Probably Rene also would like to see is that there is a sorry I would say I know you but I know most of the people in the room so [00:38:48](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m48s) So familiar Collaborative workflow If you work on so you can work on the Sing Installation But then you deal with the normal Joomla Problems of locking up your article And then your article is locked and somebody else cannot work with it What does actually [00:39:12](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m12s) you can't do stuff simultaneously There's actually a workflow setup while you can do We've multiple developers work on their local insulation Where the changes get merge Using git So you can have a collaborative workflow on that So the mapped component gets Versions in your own git stuff There's also community components that used the same workflow or similar workflow [00:39:48](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m48s) As a similar way of working we have The Upstream repository So you forked that in your local Github you Clone it to your local development and environment You make changes to for simple question and answers component You set up your upstream And than you Push it and make a pull request and then Pull request may not be accept it And then you can download the new question and answer component again but that works ok you can also setup locally [00:40:29](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m29s) Now for the giveaways So until today are actually until the start of this presentation VDM That's the company for of Llewellyn Sold the mapped component Packages So The question-and-answer modules would cost you 94 dollars The Sermon distributor [00:40:57](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m57s) would cost you 46 dollars And The big thing The component builder so the thing that We are actually talking about which bills itself would such a half 800 dollars Totalling over a thousand dollars which is a lot of Money I have in the last months talking to Llewellyn and he he talking to his team It was a big change in his attitude and giving back [00:41:28](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m28s) So anybody that here If you use this link Take time to take pictures I'll step aside So you can fetch time I meant this presentation this one Why you can Hit on me later if you need it All that dates you can get these three packages If you open that page now you will see that you can access these and you Can get the keys the only thing To be eligible for the keys is that Llewellyn asked you stared share or preferably fork [00:42:22](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m22s) preferably fork The respective components If you have a public email address you we should get send the key Automatically so public email address in get that publicly accessible If not You can claim Your key on this page So You can get The sermon distributor or the question and answers and the Joomla component builder itself [00:42:49](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m49s) Watch watch fork or stared it And you got notified if you have a public email address in get That is very easy in terms of You got to the components you can import the package is here So it has an Import JCB packages that you can They were list No need to search for them you can also see that you can export packages And then you got something Like this [00:43:27](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m27s) here you add the key that you got distributed And this is what shows when you Progress so I got component build that pay a lot that it's installed and here it shows the All the extensions I've got a little privilege in getting these upfront So And so I have keys but don't ask me for keys I will not give them There's a perfectly simple way to get them Just stare fork and share [00:44:01](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m01s) And you got your own key and with that I want to say huge thanks and shout out to Llewellyn van der Merwe who is somewhere in Africa And sure to look this back Any questions of this It's a lot to take a knife and try I actually don't know [00:44:29](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m29s) I know he has employees But I actually don't know how big his company is the Picture of the office building is huge office building but I don't think he owns it all. This is a huge thing I guess you didn't click this together in one afternoon at least he didn't no absolute not he work very hard the last days. It isa real good package. why didn't we heard of it before I don't know I have you have heard or came across it before and that's actually how I urged it my son to use it I actually heard of it years back but to me it's a bit like Joomla itself I heard about it but only when I saw that it started to be multilingual and that access control in the core I got interested [00:45:20](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m20s) And the thing that got me interested in here is the fact that I can do modification in any location of my Component I have no limitations on that and I can still do aroundtrip development By giving back obviously Llewellyn hope someone's Everybody to contribute as so that we He can extend this even further And I've already started to talk with my friend from the JoomDD To see if there's maybe that's Common Ground because I also very much like their idea about having model driven Development Don't know how to reach it yet but since it's now going to be open source two ways the option exist [00:46:05](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m05s) And that's really exciting to me. Yeah you could use it but you couldn't change it and It was totally free And you could use it for free but you could you couldn't have the mapped component and so the one that builds itself and change that And you wouldn't have the Example components example components so that you could look how does he do this how does he Filter how does he do this And starting Yeah but starting today you have two example components that Will really help you on the libs that I struggled in finding things out [00:46:59](https://www.youtube.com/watch?v=S9heClCWJrg&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m59s) And you have a Joomla component builder where I hope that the community will take it up and Ok So i've been signal that it's Janz Thank you Janz If there's any more questions just Ask me when I'm moving around diff --git a/066-The-new-fields-Area-to-make-things-easier.md b/066-The-new-fields-Area-to-make-things-easier.md index 32bd4d4..d3eda19 100644 --- a/066-The-new-fields-Area-to-make-things-easier.md +++ b/066-The-new-fields-Area-to-make-things-easier.md @@ -1 +1 @@ -I would like to explain it all more to you About all the changes we've made To the field area The field area is really the foundation of most Of your component As it is what actually causes many of the behaviour and Concepts Which you might have in your views Are all based on the field So the fuel area was a difficult place to change And it is still in progress So office video The interface most probably won't change much Just little tweaks here and there But the backend of how we deal with the data when I certainly going to Continue improving that Just give you a quick recap of how it used to look If we go to an older Install Of JCB in So that's open a fuel here Fifi open the Elias here We would see that it has this XML field definition area As in the past it was very easy to leave out Maybe I come in Anything by accident change Something and then it breaks So That was a little bit Yeah we had lot of Freedom and as developers I'm sure there's didn't feel Anyway to be a problem I mean Whatever you selected we build the XML for you and you could just adapt Hi it as you please Yet Since we are trying to make they should be more stable and obviously eventually Much more user friendly This new feature was suggested From Inside of the team And we decided to add it So what What did we do we basically removed This XML definition And we replaced it With a subform we've moved the database values to its own tabs We also move move the field information to its own tab And so We we we had a lot of more Structure and tools to the page And I'm very sure you gonna be very Happy to see the things we've done so let's show you that Soas of version 2.7.5 Which is the stable release of the strange You'll see that if we open that same Elias which we did just now You see it looks like this now So you have a subform here Basically having those values Unisa for me out And you have now A lot of new information here It also got the database in its own tab And then the type info is still available and you can still come and You know review The reality is the new option Still gives you the The ability to select Are there on ad of those Fields which Are not already on the page where you could still say ok I want to add signs here and we still load the description The field on the page and the default value Which you can then change Except like here when it tells you that it must be fixed We have not yet Blocked this field from being changed Or being removed Oh it's mandatory so there's still a level of Caution required you could still break it Although no you can't really break it whatever is mandatory If you actually do leave it out I'm compiling The component We will detect that it's mandatory And if you obviously didn't add a value It will fall back to its default value So that's how it currently behaves But I wouldn't Rather I wouldn't develop That way best practice is to put in the value And make sure that is correct So that's the new Field area We've put a lot of work into this And there has been some Hiccups and Bugs which we find out The predominantly all those we know about The new we also added this new option it's not yet Yeah we haven't fully Release some of the features but there is this option who's gonna sort of Separate If use the custom Field currently It adds the pH be here In in the Rosewood Is a little tedious if you wanna change this To give truck of the open braces And all that in this way is a little challenging So what we did And I can show you look Pic of that it will be in Invasion 2.7 .6 So you watching this video after those releases you possibly Ready have it So the new let me show you click on new this is now the new implementation for the custom Fields And also for custom user So you click on it It actually takes the PHP An answer to it Arnold text error Tinarie here you can easily follow and adapt The get options method PHP values And that's Quite More convenient I suppose Then using one line at a time So if we look at the user You got two Fields than one folder Get exclude method and one for the gate group method And so they also Immediately available to you The other advantage with this implementation Is We have this new Extra properties Option which Has been available and Jason be for some time now But many of you may not know that it exists So there is this what we call list class If you wanna add a class like a CSS class Value To this field when it appears in the list area That is the Let me show you This area this is the list area while any of their Views we see a list of items and you want this value Specific value To have a Specific CSS class value because maybe you wanna Style it Somewhat different Then you have this option To a use basically all you do As you just say List class And you add there My Class But whatever you wanna call it And Then It will add that the class To the To the field In the list area which is Quite stunning And there is also the escape Option which If your Skype A value All the values are escaped by Default So if you don't want a value not to be escaped Because you gonna maybe do some Do you maybe have values in it which if it's escaped gets stripped Like a span tag and stuff like that You could say files here And then the specific fields That what I say escaped I mean in the list area again This area When there is a list value Then this is being escaped at the moment And if you don't want that done Then you add this false escaped The other option which is also available here is the display option We'll still add some more documentation to this But basically it's about when the field gets displayed In a config You know your it's component Has a Pace here Got this options area right and you can actually add Fields to that option area And when a field is added to the option area It it has implementation structures you could have it show in the menu you could have it showing there is Places to make it Tauriel About this specifically But just to show show you quickly that that is also actually available here And then Least sorry last but not least validate Not all Fields have the property To validate the value But here is the validation rules And you can Basically Add a validation to this field If that property is not available in the field type which you have selected Mel If it is we would still just you at The to the top properties here at the top And it actually says that So if the if you have a validation set Has a few property this extra property will not be needed Because you can just use that one Ok so that's just a quick demonstration really Of the new field area and We trust that it will Be as easy and as comfortable as we hoped It would be I'm not the strange world Will not frustrate you but actually be great Because of the reason that for example One of the Sort of unforeseen Outcomes Is if you have a field like this which already has all it's values And you thinking on changing it And use a while let me just check I will How will text look You can change it and it really adds all your text that is here with its default And if you say now I wanna go back You can actually just click back And Don't be hold your old values Are again added to the page The values that were there originally And that is even true if you were to remove a a specific Property Then wanna add it back It actually adds the Original value back Which was What we intended because By accident You might remove it and wanna just put it back and it should be easy as that You could obviously still go to Type info to see What what could be the The actual values Default values And adaptive Shows like you don't have access to the default values Just that we 10 Recover your Current save the value for you And then whenever you add another field which isn't already here This drop down list only shows the fields That are not already on the page So did you won't end up adding fields Our properties see you know second time And yes so now it's become much more easier I suppose To build fields Based on its Properties As before You really had to Navigate Through Some of the complexities Of dealing with an XML Set of values Which maybe some of you don't even know exactly what's going on here And those of you that do I mean It's it's not like you're losing any advantage with the new implementation You still targeting that value with any value want And it's still as easy as clicking A Plus and selecting a value and adding it And so I I do hope that all of you will be as excited about this change As we are How annoying that We are now at the point where Making JCB easy-to-use is also a priority K well thanks for watching \ No newline at end of file +I would like to explain it all more to you About all the changes we've made To the field area [00:00:08](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m08s) The field area is really the foundation of most Of your component As it is what actually causes many of the behaviour and Concepts Which you might have in your views Are all based on the field So the field area was a difficult place to change And it is still in progress So of this video The interface most probably won't change much [00:00:38](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m38s) Just little tweaks here and there But the backend of how we deal with the data we're certainly going to Continue improving that Just give you a quick recap of how it used to look If we go to an older Install Of JCB in So that's open a field here if we open the Elias here We would see that it has this XML field definition area [00:01:07](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m07s) As in the past it was very easy to leave out Maybe leave out Anything by accident change Something and then it breaks So That was a little bit Yeah we had lot of Freedom and as developers I'm sure there's didn't feel Anyway to be a problem I mean Whatever you selected we build the XML for you and you could just adapt [00:01:33](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m33s) it as you please Yet Since we are trying to make JCB more stable and obviously eventually Much more user friendly This new feature was suggested From Inside of the team And we decided to add it So what What did we do we basically removed [00:01:58](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m58s) This XML definition And we have replaced it With a subform we've moved the database values to its own tabs We also moved the field information to its own tab And so We add a lot of more Structure and tools to the page And I'm very sure you gonna be very Happy to see the things we've done so let's show you that So as of version 2.7.5 [00:02:28](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m28s) Which is the stable release of the Strange You'll see that if we open that same Elias which we did just now You see it looks like this now So you have a subform here Basically having those values in a subform layout And you have now a lot of new information here It also got the database in its own tab And then the type info is still available and you can still come and [00:02:58](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m58s) You know review The reality is the new option Still gives you the The ability to select other on add of those fields which Are not already on the page so you could still say ok I want to add size here and we still load the description of The field on the page and the default value Which you can then change Except like here when it tells you that it must be text We have not yet [00:03:31](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m31s) Blocked this field from being changed Or being removed though it's mandatory so there's still a level of Caution required , you could still break it Although no you can't really break it whatever is mandatory If you actually do leave it out on compiling The component We will detect that it's mandatory And if you obviously didn't add a value It will fall back to its default value [00:03:59](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m59s) So that's how it currently behaves But I wouldn't Rather I wouldn't develop That way best practice is to put in the value And make sure that is correct So that's the new Field area We've put a lot of work into this And there has been some Hiccups and [00:04:23](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m23s) Bugs which we have ironed out The predominantly all those we know about The new we also added this new option it's not yet Yeah we haven't fully Release some of the features but there is this option who's gonna sort of Separate If use the custom Field currently It adds the PHP here In the rows which [00:04:50](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m50s) Is a little tedious if you wanna change this To keep track of the open braces And all that in this way is little challenging So what we did And I can show you a little Peek of that it will be in In version 2.7.6 So you watching this video after those releases you possibly already have it [00:05:13](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) So the new let me show you click on new this is now the new implementation for the custom Fields And also for custom user So you click on it It actually takes the PHP And adds it to it's own little text area to now here you can easily follow and adapt The get options methods PHP values And that's [00:05:40](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m40s) Quite More convenient I suppose Then using one line at a time So we look at the user You got two fields then one folder Get exclude method and one for the Get group method And so they also Immediately available to you The other advantage with this implementation Is [00:06:05](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m05s) We have this new Extra properties Option which Has been available in JCB for some time now But many of you may not know that it exists So there is this what we call list class If you wanna add a class like a CSS class Value To this field when it appears in the list area That is the [00:06:29](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m29s) Let me show you This area this is the list area while any of the Views we see a list of items and you want this value Specific value To have a Specific CSS class value because maybe you wanna Style it Somewhat different Then you have this option To a use basically all you do [00:06:53](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) As you just say List class And you add there My Class But whatever you wanna call it And Then It will add that the class To the [00:07:15](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m15s) To the field In the list area which is Quite stunning There is also the escape Option which If you escape A value All the values are escaped by Default So if you want a value not to be escaped Because you gonna maybe [00:07:38](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m38s) have values in it which if it's escaped gets stripped Like a span tag and stuff like that You could say files here And then the specific fields That what I say escaped I mean in the list area again This area When there is a list value Then this is a being escaped at the moment And if you don't want that done Then you add this false escaped [00:08:06](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) The other option which is also available here is the display option We'll still add some more documentation to this But basically it's about when the field gets displayed In a config You know your it's component Has a let me see here Got this options area right and you can actually add Fields to that option area And when a field is added to the option area It it has implementation structures you could have it show in the menu you could have it show in various [00:08:43](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m43s) Places. I'll make a Tutorial About this specifically But just to show you quickly that that is also actually available here And then last but not least validate Not all Fields have the property To validate the value But here is the validation rules And you can [00:09:06](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s) Basically Add a validation to this field If that property is not available in the field type which you have selected now If it is we would suggest you add it the properties here at the top And it actually says that if you have a validation set as a field property this extra property will not be needed Because you can just use that one [00:09:33](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) Ok so that's just a quick demonstration really Of the new field area and We trust that it will Be as easy and as comfortable as we hoped It would be that the Strange would Will not frustrate you but actually be great Because of the reason that for example One of the Sort of unforeseen [00:10:00](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m00s) Outcomes Is if you have a field like this which already has all it's values And you thinking on changing it And you say, let me just check How will text look You can change it and it really adds all your text value here with its defaults And if you say no I wanna go back You can actually just click back And lo and behold your old values [00:10:25](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m25s) Are again added to the page The values that were there originally And that is even true if you were to remove a specific Property Then wanna add it back It actually adds the Original value back Which was What we intended because By accident [00:10:48](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m48s) You might remove it and wanna just put it back and it should be as easy as that You could obviously still go to Type info to see What what could be the The actual values Default values And adapt them So it's not like you don't have access to the default values it's just that we want to [00:11:10](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m10s) Recover your Current saved value for you And then whenever you add another field which isn't already here This drop down list only shows the fields That are not already on the page So you won't end up adding fields properties the second time And yes so now it's become much more easier I suppose To build fields Based on it's Properties [00:11:39](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m39s) As before You really had to Navigate Through Some of the complexities Of dealing with an XML Set of values Which maybe some of you don't even know exactly what's going on here And those of you that do I mean It's it's not like you're losing any advantage with the new implementation [00:12:02](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) You still targeting that value with any value want And it's still as easy as clicking a plus and selecting a value and adding it And so I I do hope that all of you will be as excited about this change As we are . We are now at the point where Making JCB easy-to-use is also a priority K well thanks for watching diff --git a/067-Adding-Language-String-to-your-Component-and-get-the-Language-Placeholder-for-dynamic-use.md b/067-Adding-Language-String-to-your-Component-and-get-the-Language-Placeholder-for-dynamic-use.md index 854a574..82f5972 100644 --- a/067-Adding-Language-String-to-your-Component-and-get-the-Language-Placeholder-for-dynamic-use.md +++ b/067-Adding-Language-String-to-your-Component-and-get-the-Language-Placeholder-for-dynamic-use.md @@ -1 +1 @@ -This is a quicker Sort of tip on how to add a language string To your component Without a language string Being immediately Added to the J text Object function Which translates it of course So let me demonstrate So normal language dream you use this J text And you'd Add your string in there And then JCP when it compiles It Actually Apps that stream to your language file And then when your component runs that string is translated Where we goes it has a Placeholder in its place And you can then have multiple places where the string is used So that's Already there and works well the new feature Is Mostly used when you are dealing with a clause And you working with him Array In the class And I You want to have class method or rather Fields That is an array of Strengths but you can't of course you sis In the array of a class Value so That is one place but there are many places Where you could see this in action So what you would wanna do is you want the place I would be generated You want the String to be added to the language file But you only want a placeholder as a string to be added to your Script Because you're gonna later added to a date text Later in the script only added to the jade text Option to translate this place holder Answer offer knew we would run into such a case well I have fun anyway so The way weave You know address this It was a new Basically a new name Just text Like that Food This party looks exactly the same as the J text So Tomo seems like this is a class but it's not really it's just Something that the JCP compiler will pick up And it'll convert this let me show you how it will look when it's When it's converted it And you'll see why it makes sense you see I've got this extra field Properties And it's got these Keys And I want to use the key to get the string So if we go a little lower in the script You see I'm here I'm looping through that Hooray And The value description I'm only here passing it to the J text To translated So that means I wanna do the this translating later And I actually all I want in this array above here is actually the placeholder string So let me show you that in the code how it actually comes out Send a code here you see the extra fuel properties and you see it's simply a Place is just a string It actually took away the bracket here Yeah if you look at the way it was So I'm going to paste in the The one from the code Just said you can C When it's done So you can see This is what we add it in in JCB And this is what I did In compilation It added the placeholder string Which we can then use Down here In our J text To translate it to get the Specific translated string So that's a way to get the placeholder and to get obviously the string into your language file That's just the tip I know that It's not very obvious So I hope you come in handy those if you want to add language strings Today seabe But you don't want to have it immediately be Part of the J text object Call you want to just have the actual placeholder available 4U store Namagale This is the way you can do that Thanks for watching enjoy \ No newline at end of file +This is a quick [00:00:03](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m03s) Sort of tip on how to add a language string To your component Without a language string Being immediately Added to the J text Object function Which translates it of course So let me demonstrate So normal language string you use this J text And you'd [00:00:32](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) Add your string in there And then JCB when it compiles It Actually adds that string to your language file And then when your component runs that string is translated because it has a Placeholder in its place And you can then have multiple places where the string is used So that's Already there and works well the new feature [00:00:59](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m59s) Is Mostly used when you are dealing with a class And you working with a Array In the class And If You want to have class method or rather Fields That is an array of Strings but you can't of course use this [00:01:20](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m20s) In the array of a class Value so That is one place but there are many places Where you could see this in action So what you would wanna do is you want the placeholder to be generated You want the String to be added to the language file But you only want a placeholder as a string to be added to your Script Because only later in the script you're going to add it [00:01:52](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m52s) to the Jtext Option to translate this place holder And so often you we would run into such a case well I have in anyway so The way we've addressed this Is with a new Basically a new name Just text Like that so [00:02:16](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m16s) This part looks exactly the same as the J text So this almost seems like this is a class but it's not really it's just Something that the JCB compiler will pick up And it'll convert this let me show you how it will look when it has converted it And you'll see why it makes sense you see I've got this extra field Properties And it's got these Keys And I want to use the key to get the string So if we go a little lower in the script [00:02:49](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m49s) You see I'm here I'm looping through that array And The value description I'm only here passing it to the J text To translate it So that means I wanna do the this translating later And I actually all I want in this array above here is actually the placeholder string So let me show you that in the code how it actually comes out [00:03:16](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m16s) So in the code here you see the extra field properties and you see it's simply a a string It actually took away the bracket here if you look at the way it was So I'm going to paste in the The one from the code Just so that you can see What it's done So here you can see [00:03:40](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m40s) This is what we added in JCB And this is what it did In compilation It added the placeholder string Which we can then use Down here In our Jtext To translate it to get the Specific translated string So that's a way to get the placeholder and to get obviously the string into your language file [00:04:09](https://www.youtube.com/watch?v=_mXlbAO79J8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m09s) That's just a little tip I know that It's not very obvious So I hope it will come in handy to those of you who want to add language strings To JCB But you don't want to have it immediately be Part of the Jtext object Call you want to just have the actual placeholder available for use dynamically This is the way you can do that Thanks for watching enjoy diff --git a/068-Library-Manager-Anticipated-Functionality.md b/068-Library-Manager-Anticipated-Functionality.md index 915f1f9..3eaed2e 100644 --- a/068-Library-Manager-Anticipated-Functionality.md +++ b/068-Library-Manager-Anticipated-Functionality.md @@ -1 +1 @@ -I would like to talk about the expected or anticipated New Library featured it's being added I'm still in the development phase of this I've been working on the UI Which really is just how I anticipate it should function It's not yet set in stone Because I have not yet started Adapting the compiler to make use of the This new feature But it is anticipated to actually eventually Become More fixed and Steady So I wanna basically illustrate 2 things What is it We have this Bootstrap library Set up now This Bootstrap library the specific name here Is linked Too many many Snippets And so it it can never change even I've made it that even if you try to change it Can you click save You know it will actually revert back to the correct name That's only with regards to libraries that already become part Of the Joomla Component Boulder Community Snippets libraries So Everytime We have new libraries contributed To the community Then That library will is its name Will become fixed So It cannot be changed A little way of protecting the system from Uno collapsing on itself Because if people could just change these things in their own JCB Then It could end up making so many confused Results Anyone What they still can change is the way that the library is actually Add it Components I currently I said it up that it basically links to this to your house And it has this always had But that means On every page where Bootstrap 4 is being used It was always had These Files Now we might later see when you Miller for is released that there are some local gym Miller for libraries we would rather use like you you have for jQuery at this stage If you wanna use jQuery on a page you wouldn't do this kind of inclusion YouTube ID rather use the internal jumilla API to get those libraries on the page And for that I added this custom script option Adult two places where in in in in every view there are two types of functions used To add The Specific library to the page The one function is this prepare document function And the other one is set document And the one function uses the document Directly Variable naming And then add script because it actually adds document to the document variable The other one grubs up on a global document variable And it's really based on The fun which class it is inheriting and so forth So they are basically there for two methods Being used to adding the custom or the library to any page And so when you Use this custom script option You would Target These two features or three functions or methods Cross method Which will then adequately be Vailable For every A page that makes use of this library The other one is a conditional option Never conditional option is the better option really Because this one Would actually adapt The code On the basis of the the implementation Review So here you would select the files that you have Include and you would say whether it include or exclude You obviously if you select exclude It means I always included Unless these behaviours that you gonna set up we here Is actually you know Yeah if it if it is Successful A valid Now those of you who know the conditional concept within fields This I just taken that same cond concept And I'm now just applying it on adding Or not adding a file So it's really very much the same to you still have this isolate with train option And the reality is you can now There are no conflict Fields yet you need to first go here and create a conflict Field No config field is really an existing Field that you've already created Before coming here so I haven't saved This as a condition so I'm just gonna put You say that And then I'm gonna go here to edit And you'll see The config library if I click on it here I basically can select Any field out of my A whole list of fuel so I've already made one just for house illustration Bootstrap 4 Radio And That's really the field I wanted to be in the library tab So this again is very much similar to the component Config options area Set now we are selecting fields for the library which will it affect be added to the components Global Options area Ok so let's save and close here Now we'll see in this drop down at Hatfield comes up here If we select it That feels have two options yes or no So if this library and that Library File we wanna include it When add Bootstrap button is set to Yes So here is a selection option Now so that's the conditional way of doing So basically have 4 We will at this stage with i3 24 ways of Actually adding the the fields onto the page The reason why this condition or 1 Is not being shipped This way the moment Because I'm not shipping these fields And The whole idea of You know creating a field on all of those who In all the systems of those who used JCB Ice I'm still pondering whether I should write a script To do that So it's that's really the issue if If we shipped this as the The standard way of including the Bootstrap libraries Then I will need to create a sad Bootstrap version for field On every system And then link it in here with correct ID And So I haven't I haven't actually done that Like I said We are now looking at how can we do this We wanna make this dynamic Because now let's say someone Has a specific File The day so let me just save this David specific file Which If if someone is using Bootstrap and they wanna add a specific extra feature and I need more More JavaScript on the page You know they could create that file Click here By going to add new files I know let's say it's a local file they could click here They can collect Any file of just gonna make it Any file And just like with a component in clude When you add custom files to your component You have a tame feature really here except you can also use you or else So it's the same custom adding of files or folders So now you want to have this Bootstrap Mini GS In the media Boot Strap Bootstrap 4 there we go You wanted in that folder J s That's really where you want to put this file And you don't want the file itself to be updated I'm that far maybe wanna keep And you want to have it available to the library Now you click save and close So now if we look here we'll see now there is a file called Bootstrap mini dot dress But you don't want to always be included You wanted to be included only if there is a specific Switch Tripped On on this Use of this file The idea is now that you would go to the conflict library And you create a new field And Let's say that this new field is Let's say I'm just gonna use a giraffe one Add more And Obviously it should be more related to Bootstrap but just for explanation Then you would say that specific field Is this cases This one Should When ad Morissette yes Then it should be Added Now That is worse far as I've come to Sort of Think about Implementing These kind of features Dynamically She previously I wrote all this hard code it right into the compiler And based on its own automated Observation of the You Know You Like It version 2 If it sounds specific class is a dynamically added files on didn't add files Now I'm thinking that If you wanna be so Customised and dynamic then you won't use the conditional option you'll rather use the custom script option You still have these two buttons That you can then use The global Values of You can still get those values In the scripture And Act upon it in the loading the libraries with custom script me now I I did some Prep on that kind of a protea in Urine food table It's actually Says here This food table style So You need to now Action line up a field value With food table style And then it will dynamically add the specific CSS classes To the Come to the table to the page For both this prepared document And for Set document So you have At always then you have at conditions Or custom script Let me just say another thing about the condition option The condition of shin I'm pondering Weather this condition option should have a global value And also a page value See if it have a page value Then you can override the global value with the page value So it's almost like if we detect That let's say boots that before Is being used in a specific View And that view has a menu Then dynamically will add to that menu The function of these buttons As well as having it added up into the global options of the component itself Solal B Global options And the page will fall back on to the global options Unless someone with manually override that in the because when when is that usually the case If they have another library or another component That already loads the files And they wanna excluded from the page because it's already there And that's why I'm thinking about You know having it on the page as well as globally And if you feel well I don't want to use it to really decide whether these You know Libraries Should Ever Be on the page well then in that case had always And then these files will Including this one Will always be added to the page And we will take care of the script The code to achieve that And now I was also thinking if we Wanna have some files only be added always then Then it is the files that you do not actually You know If you want Free sample if you want These two files to be always added Then within conditions you will only create a condition For the files you want to have a condition for So that the files that is not being targeted by conditions Will automatically always be at it Anyway That is at this stage some of the thoughts I have I'm thinking I'm gonna Say that if any of you wanna give more ideas Then grab out your screen recorder Open this page And talk through and explain some things In a little Pretoria land Post it on YouTube as a response to this tutorial Or go to our get out discussion area You know we are busy Weather Discussion here On GitHub Easter 90 2 Bootstrap or Universe or UI kit Version 3 or Bootstrap option It's in this issue that this long discussion is going on And where this whole library idea is actually Forming and Expanding your see already typed a little response yet I wanna post With this tutorial that I'm making as a URL So Really what I would like to say is I'm busy Trying to Answer this new functionality And This is the way I've gone about doing it at this stage And I I know that these Libraries that are already in our a component Bootstrap UI kit and food table I'm gonna end up Adding enough information for these libraries So did they all just work out of the box That's gonna be my responsibility to To put all the necessary Code and scripting and everything in place So that this option will just work All them And just when someone wants to expand on them Will they need to do so But it is obviously a once off situation Once I've implemented this new feature and set these functions and Properties in place And people make it that patience to it I cannot update it again And so having enough input I think about all possible angles And to approach this in a way that really makes it dynamic and really doesn't overcomplicate things Is really what I'm trying to achieve although that seems difficult Anyway This is just a heads up tutorial Looking at how to Use the new libraries area And obviously if you want a specific functionality in Bootstrap 4 You cannot now create a new Bootstrap 4 library With new files you need to expand on the existing one And that's the whole point We wanna make it that the existing library can be adapted and changed An improved At this stage that adaptation in a was improvements will only be relevant to the one who's doing it And so that might be something we were gonna think about We gonna And you you should talk about would we want everybody to share their adaptations Or will we just set the stage with your regional at the patient and then whatever changes they make is up to them Anyway this is a Again a tutorial I just made In the outset of this new functionality Looking and asking please give me feedback And let me know what you think Thank you \ No newline at end of file +I would like to talk about the expected or anticipated New Library feature that's being added to JCB I'm still in the development phase of this I've been working on the UI Which really is just how I anticipate it should function It's not yet set in stone Because I have not yet started Adapting the compiler to make use of the This new feature But it is anticipated to actually eventually Become [00:00:34](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) More fixed and Steady So I wanna basically illustrate two things one is We have this Bootstrap library Set up now This Bootstrap library the specific name here Is linked Too many many Snippets And so it it can never change even [00:00:53](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m53s) I've made it that even if you try to change it Can you click save You know it will actually revert back to the correct name That's only with regards to libraries that already become part Of the Joomla Component Boulder Community Snippets libraries So Everytime We have new libraries contributed To the community Then [00:01:19](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m19s) That library's name Will become fixed So It cannot be changed And that a way of protecting the system from collapsing on itself Because if people could just change these things in their own JCB Then It could end up making so many confused Results Anyone What they still can change is the way that the library is actually [00:01:46](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) Added to Components I currently I said it up that it basically links to this two URLs And it has this always add But that means On every page where Bootstrap 4 is being used It will always add These Files Now we might later see when Joomla 4 is released that there are some local Joomla 4 [00:02:12](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m12s) libraries we would rather use like you have for jQuery at this stage If you wanna use jQuery on a page you wouldn't do this kind of inclusion You would rather use the internal Joomla API to get those libraries on the page And for that I added this custom script option there are two places where in every view there are two types of functions used To add The Specific library to the page The one function is this prepare document function And the other one is set document [00:02:48](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m48s) And the one function uses the document Directly Variable naming And then add script because it actually adds document to the document variable The other one grubs upon a global document variable And it's really based on Which class it is inheriting and so forth So they are basically there for two methods Being used to adding the custom or the library to any page And so when you [00:03:19](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m19s) Use this custom script option You would Target These two functions or methods Class methods Which will then adequately be available For every A page that makes use of this library The other one is a conditional option [00:03:39](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m39s) the conditional option is the better option really Because this one Would actually adapt The code On the basis of the the implementation per view So here you would select the files that you have and say whether it include or exclude You obviously if you select exclude It means it will always include it Unless these behaviours that you gonna set over here [00:04:08](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m08s) Is actually you know . . valid Now those of you who know the conditional concept within fields This I just taken that same conditional concept And I'm now just applying it on adding Or not adding a file So it's really very much the same so you still have this isolate or chain option And the reality is you can now [00:04:36](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m36s) There are no config Fields yet you need to first go here and create a config Field Now config field is really an existing Field that you've already created Before coming here so I haven't saved This as a condition so I'm just gonna save that And then I'm gonna go here to edit And you'll see [00:05:02](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) The config library if I click on it here I basically can select Any field out of my A whole list of fields so I've already made one just for our illustration Bootstrap 4 Radio And That's really the field I wanted to be in the library tab So this again is very much similar to the component Config options area except now we are selecting fields for the library which will then in effect be added to the components [00:05:34](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m34s) Global Options area Ok so let's save and close here Now we'll see in this drop down that that field comes up here If we selected That fields have two options yes or no So if this library and that Library File we wanna include it When add Bootstrap button is set to [00:05:57](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) Yes So here is a selection option Now so that's the conditional way of doing So basically at this stage we will have 3 to 4 ways of Actually adding the the fields onto the page The reason why this conditional one Is not being shipped This way the moment [00:06:18](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m18s) Because I'm not shipping these fields And The whole idea of You know creating a field on all of those who In all the systems of those who used JCB I'm still pondering whether I should write a script To do that So it's that's really the issue if If we shipped this as the The standard way of including the Bootstrap libraries [00:06:43](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m43s) Then I will need to create this add Bootstrap version 4 field On every system And then link it in here with correct IDs ans stuff And So I haven't I haven't actually done that Like I said We are now looking at how can we do this We wanna make this dynamic Because now let's say someone Has a specific [00:07:05](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m05s) File The day so let me just save this that specific file Which If if someone is using Bootstrap and they wanna add a specific extra feature and I need more More JavaScript on the page You know they could create that file Click here By going to add new files I know let's say it's a local file they could click here [00:07:31](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m31s) And they can collect Any file of just gonna make it Any file And just like with a component include When you add custom files to your component You have that same feature really here except you can also use URLs So it's the same custom adding of files or folders So now you want to have this Bootstrap Min.js In the media [00:07:58](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m58s) Boot Strap Bootstrap 4 there we go You wanted in that folder js That's really where you want to put this file And you don't want the file itself to be updated that filename you wanna keep And you want to have it available to the library So now you click save and close [00:08:23](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m23s) So now if we look here we'll see now there is a file called Bootstrap min.js But you don't want to always be included You wanted to be included only if there is a specific Switch Tripped On on this Use of this file The idea is now that you would go to the config library And you create a new field And [00:08:51](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m51s) Let's say that this new field is Let's say I'm just gonna use a Add more And Obviously it should be more related to Bootstrap but just for explanation Then you would say that specific field which it Is this cases It's this one Should When add more is set yes [00:09:15](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m15s) Then it should be Added Now That is as far as I've come to Sort of Think about Implementing These kind of features Dynamically You see previously I wrote all this hard coded right into the compiler [00:09:33](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) And based on its own automated Observation of the you know UIkit version 2 If it founds specific classes it dynamically added files or didn't add files Now I'm thinking that If you wanna be so Customised and dynamic then you won't use the conditional option you'll rather use the custom script option You still have these two buttons That you can then use The global [00:10:02](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m02s) Values of You can still get those values In the scripture And act upon it and load in the libraries with custom scripting now I I did some Prep on that kind of approached here in FooTable It's actually Says here This FooTable Style So [00:10:25](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m25s) You need to now Actually line up a field value With FooTable Style And then it will dynamically add the specific CSS classes To the to the table to the page For both this prepared document And for Set document So you have [00:10:46](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m46s) Add always then you have add conditions Or custom script Let me just say another thing about the condition option The condition option I'm pondering Whether this condition option should have a global value And also a page value You see if it have a page value Then you can overwrite the global value with the page value So it's almost like if we detect [00:11:13](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m13s) That let's say bootstrap 4 Is being used in a specific View And that view has a menu Then dynamically will add to that menu The function of these buttons As well as having it added up into the global options of the component itself So it'll be Global options And the page will fall back on to the global options Unless someone with manually overwrite that in the because when when is that usually the case If they have another library or another component [00:11:47](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m47s) That already loads the files and they wanna excluded from the page because it's already there And that's why I'm thinking about You know having it on the page as well as globally And if you feel well I don't want to use it to really decide whether these You know Libraries Should Ever Be on the page well then in that case add always And then these files will Including this one Will always be added to the page [00:12:15](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m15s) And we will take care of the script The code to achieve that And now I was also thinking if we Wanna have some files only be added always then Then it is the files that you do not actually You know If you want For example if you want These two files to be always added Then within conditions you will only create a condition [00:12:43](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m43s) For the files you want to have a condition for So that the files that is not being targeted by conditions Will automatically always be added Anyway That is at this stage some of the thoughts I have I'm thinking I'm gonna Say that if any of you wanna give more ideas Then grab out your screen recorder Open this page [00:13:09](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m09s) And talk through and explain some things In a little tutorial Post it on YouTube as a response to this tutorial Or go to our GitHub discussion area You know we are busy with this Discussion here On GitHub it's issue 92 [00:13:29](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) Bootstrap or UIkit Version 3 or Bootstrap option It's in this issue that this long discussion is going on And where this whole library idea is actually Forming and Expanding you'll see already typed a little response here what I wanna post With this tutorial that I'm making as a URL So Really what I would like to say is I'm busy [00:13:57](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m57s) Trying to Answer this new functionality And This is the way I've gone about doing it at this stage And I I know that these Libraries that are already in our a component Bootstrap UI kit and fooTable I'm gonna end up Adding enough information for these libraries So did they all just work out of the box [00:14:22](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m22s) That's gonna be my responsibility to To put all the necessary Code and scripting and everything in place So that this option will just work All of them And just when someone wants to expand on them Will they need to do so But it is obviously a once off situation Once I've implemented this new feature and set these functions and Properties in place [00:14:48](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m48s) And people make adaptations to it I cannot update it again And so having enough input to think about all possible angles And to approach this in a way that really makes it dynamic and really doesn't overcomplicate things Is really what I'm trying to achieve although that seems difficult Anyway This is just a heads up tutorial Looking at how to Use the new libraries area And obviously if you want a specific functionality in Bootstrap 4 [00:15:21](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m21s) You cannot now create a new Bootstrap 4 library With new files you need to expand on the existing one And that's the whole point We wanna make it that the existing library can be adapted and changed An improved At this stage that adaptation in those improvements will only be relevant to the one who's doing it And so that might be something we were gonna think about We gonna you should talk about would we want everybody to share their adaptations Or will we just set the stage with your regional adaptation and then whatever changes they make is up to them [00:16:04](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m04s) Anyway this is a Again a tutorial I just made In the outset of this new functionality Looking in asking please give me feedback And let me know what you think Thank you diff --git a/069-Join-Fields-in-the-admin-list-view-with-field-relations.md b/069-Join-Fields-in-the-admin-list-view-with-field-relations.md index 2697303..a2d338b 100644 --- a/069-Join-Fields-in-the-admin-list-view-with-field-relations.md +++ b/069-Join-Fields-in-the-admin-list-view-with-field-relations.md @@ -1 +1 @@ -Well I'm happy to announce that we have added a very Long awaited feature To JCB You need to upgrade to Version 2.8 To actually get this feature This feature though Does effect How Jason be built the admin View List View So that means Basically These areas Where U Got list of items I'm sorry if you got custom scripting in your component In these areas The Nuke when you install or upgrade to version 2 You would experience that your custom scripting doesn't get at it Anyway you know Correctly We're still at it it will still be added to the document But you have to go and move and into the correct place and an commented and You know do the re Placement of the code At this diamonds to Notify JCB to update the placement So that's Just a heads up because they're list views are Improved actually The way it's being built The this extra Sort of Changes to the code snippets changes the fingerprints and all that So another that what the new features all about is actually Taking specific values like maybe this value And that that you And to combine them into one value into one column And yet have the option of still being able to filter with those values Now we forgot this component SA minister buter And I am planning To take the preachers List View You see that it now shows the name and a short description or whatever description you've had it I want to have it also show If there is an email address So if this email address is filled in Then it should show the email address Or If it doesn't find an email address but it finds a Web address it should show the web address Photos are other one or the other And it must connected next to the male name And and I think we'll use that as our demonstration of this feature Ok so now let's go back to component Builder And then we would go to The admin views And If you Or not if you haven't done it yet there won't be an icon showing up any work here But once you've done it there will actually be one I'll show you that I will go to the preachers at - View So just go to the the one you want to change And then under the settings area Sorry not the settings area List the fields area You see that there is now A new area called admin Fields relations And here at the bottom You see if field relations So that's the new area that's the new feature You could either click here Or You click here None of them will achieve the same Taking you to the Same place So I'm the click on this one it's ok And then You basically in the admin Fields relations Builder If you could click here on adding a Atkins fields are we gonna set for your money used in them And we gonna join that up with the email And with the whip euro I'll see that there is this area Colin The error column actually Can Target three places Before modelling the value after modelling the value And the view So If you know I'm what a model is that means the area where you still working Just with a code Where is interview You must think of your ready have a HTML trunk That represents that field So if I could show you that more Directly in the code In first looking here at the folder structure ucc I'm in admin Strater components Then summon distributor Then here's the views and here's the models So if we go to the model of the preacher Plural one because we going to the list View You'll see That it has Items Now At the moment there is basically nothing being modelled Modelled usually would imply If it is a Jason object And it needs to be taken from Jason to an array Or if it's an encrypted value and a needs to be decrypted Those kind of things Oh whether you wanna work with the value before that happens or after that has happened Ok so then if you want a you work with the actual Item Where it's still just an integer or a string and really that's all that is Then you target the model If you wanna talk at The View Which in this case if we go to preachers And then the body You see that Basically Everything from here Up to here Is representing The ID Everything from Year of the year Is a presenting the name And so if you wanna target this trunk Because it still gets generated Course Then you would target The View Because then they see we will still build this whole block for you Basically this block And you can move this block around and join it with the other block for the other feel As you like So that we could be that you didn't have two links Or that Yes All kinds of interesting things can happen my best Advice is not write out take it for a spin Make some changes compile it install it See what's changed go to the areas Which being I love you Or the model and see the code that was generated based on your selection Are we gonna Make multiple changes and show you what will happen so save you some other time and then understand What's happening And so this code Do it The first area I'm gonna target is the model area Then it has a joint type which is either a concatenation with With a glue option the glue option is basically what do you want to be placed Between the values You could say no I want them to be completely crank up against each other like that And usually it'll still had a little space it'll still had a little space in And You can say no I want I want a little Arrow between them Like that But it's basically a value you want to place between these two values Ok so I'm gonna just leave it as a comma for now And then save and close And then also save and close the view And now you'll see That there is a new icon here We can click and directly go edit the relation So That is the new icon added Now if we go to the compiler We will be able to compile this and see it in action Soccer They just gonna compile 7 distributor Install it and now First thing is let's open 7 distributor and let's go to the preachers table and see See how it looks in the interface They here we see It basically adding Both of them is adding the email as well as the URL And because it's exceeding a specific length it is escaping it and we have this all Pop-up come up here It so there's that comma we added as a compact in Asian Between the values So that is really what we expected Let's go back and make some changes Well let me let me first show you the code that was built So we were tired at a given model so basically it just Add this As a glue To view these values together Concatenating them Yes So that was the model now Like I said this specific view doesn't have Really any modelling it does to the values So even if I were to say it select after It won't necessarily change anything Ok so Let's make another change But instead of using the default glue option Let's say Ok we wanna do a code option Then you'll see the JCB cranks out sort of ok 2 Give you the Freedom to actually write code We are using the ID is Of the fields In in braces Curly braces because Well Many reasons I'm not gonna Waste your time More or less Boils down to the fact that it's difficult to know exactly what the field names gonna be at this point For every kind of type of field that is there 2 working with the it just saves us a lot of Effort But since it's difficult to know which field is which ID we had this little comment 2 sorry give you a heads up ok so this value is basically the website this one here is basically the him Email And I would suggest if you are sure of what is what To just take the comment out because otherwise it'll be added to the code So that is just What I would suggest so this stage we know That what this is saying is basically what we saw In the code it is almost exactly the same Except that it is using numbers here so now we can do some of the PHP So we can say something like this So we basically checking If this is a business empty Then we use that which is the email otherwise Before back onto their You know the URL I never urls empty it just means that there will be an empty string So maybe that's not that ideal idea So let's make it a little bit more advanced So now it's saying if there is an email use the email otherwise check is there a URL No Is there is Sherlyn at it if not then at nothing And it just stays without the comma and everything So there we go Got a little Adaptation there So just make sure that this Convention is kept So the Curly braces with the ID and then the closing curly brace This will then be updated with the actual name of the field and so you can do full HTML Sorry PHP coding in this area And it will be implemented that means you could also pass the value to a function which then Passes it back to the value And this is in the model And this is before modelling and after modelling That's Her Good thing that happened every time you change anything here It's going to update the code Because Sometimes it is expected that these two Values might look different at this stage it doesn't but it is a JavaScript it fires on Changing of any of these fields And so I have to type all that over now To the Best Idea is you wanna make changes here First copy the value in the year And then you can make changes And see No what What happens And Then as you decided what you want You can just paste it back in Ok so there we have it If it doesn't behave exactly right just change it a few times We will Will still tweak the JavaScript here to make sure that it's You know working exactly 100 Percent So this is sort of Beta phase but it works the The same functions as it should It's just that the I'm still ironing out some JavaScript here Another thing You can only Target The name list field Once You cannot add it a second time like this And say ok you're here we gonna do it again But now Using maybe some other values To Tulsa targeted In some way You cannot do that only one of them will get implemented the other one will be dropped It's a limitation I know but believe me This feature as it is now is already really stunning And able to achieve quiet Impressive results Ok so here we have it we've adapted it it will only show an email or a Padres If there is actually wants it And that There is None set it won't show any That's the expected result so let's save this and see it In action So we will compile it Uninstall So there we have it Pictures showing up with an email address and that's it Let's Create one Without an email address So we created one With no email address if you see There's none here let's add a web address this close again show you Now there is nothing not even a comma But as you see this now is a link their whole thing is a link And That might not be exactly what you Actually want Ok let's say Let's add a web address And then save and close Zahir Because I wet the dress was a little long You created a a pop-up Now all that can be changed But let me just Do something else The shoes is shorter address Save and close And now there you have it That looks more acceptable And so it the textnow whether there's an email or a web address and if there's none it shows none So that was now with this new combine Feature So let's say let's do something even more interesting So again we go and open that area clicking this icon As well for the shortcut And now instead of targeting the model We gonna target The View And this is where it really gets interesting Because now this little place holder called field = 9th 101 Is basically a truck of code as I explained Initially in the beginning Where we are saying Ok Instead of Targeting the actual value database value You are now targeting the produced code which JCB builds The html block For that specific field So We can now also I would also encourage removing the comment this is the common that shows you that that is the name That's the email And that's the web address So I would also encourage you to want to see in it or just remove it we might at a later stage Take the comment and added underneath the box soda Clearly is nowhere In the way But it is for you to just sort of know that this song Is for the email and this is for the website Address ok so again I want to add a Lil Bit Dynamic Script here But I need to keep in mind that I'm actually in HTML So if I wanted to PHP here I actually need to Do the correct PHP tags And all the rest of it Ok And that means you can actually Target the item value You can remove this and work with the actual item value But this is all placeholder will produce the whole Block of code which if it's going to be a dynamic link Or something like that It'll produce all of that for you I'm sorry Peter If it's an A custom field which links to a to another View Then all of that can still be produced in this So the dynamic placeholder here But you can remove this all of this and you can Yeah have a Echo out anything Sweet you just have to code of course I think Best to demonstrate is first used in concatenation option And which would just put a break between the values And then save and close And compile install So we refresh this area And now we see that This value is a link but the other two It's actually just text And that's exactly What we wanted to achieve Going into the code We open the body And you'll see The JCB added the brakes There is a break There's a break And there's the trunk of code that Jason be built So It really build all of this It's still built a link to the preacher And then It's still built this As well So if this was going to be a link to another View It will produce that code Checking again the permissions and everything Which is really what makes This area is implementation quite exciting Because it still takes care of the hard work of producing The actual code needed to display the value If you pick up any behaviours in this new feature that sort of unexpected Then please give us a heads up I'll get up open an issue And we will try and address it as quick as we can Beginning thank you for watching This is the new feature of Combining Open view values In a Very easy way It could have been done previously bass with some custom scripting But this sort of helps you and I'm sure Makes it easy for you to just select the field you want to Target of course that means You first need to add the fields that you are ready going to show in the list View And then select the future wanna join to it That's sort of I expected you understood maybe that but I realise I must mention that separate So that means if we go into the preacher Fields area Hi you'll see That We actually just got two Fields the name As shown in list And the description shown in list So here we don't make any changes we don't say that the email and then Website Must also show in the list View Impact Only the fields that I'm not showing in the list View Show show in the relationship view as joint options So that suits a heads up What is exciting though as you can Actually Do a I'm a filter And a Yeah you can do a filter or a search On these Fields that I'm not going to be placed but you know you gonna later select them as relationships And then the end up creating JCB will in upgrading the filter And make it searchable at even if it's a link 2 To another page you can click this to be a link And then it will generate the link Which is I think amazing knowing that it's gonna say that all the permissions in place And everything else Ok well maybe I should Demonstrate that Just quickly So here in the sermons area We see that we have a Preacher table and we gotta name table So That means we can actually We have these two links this one will open the preacher As You know Same as opening it from the preacher this too and then this one's gonna open the sermon So This is going to be easy because now We can decide Ok we got so many rows here let's Combine the preacher With the name row And yet we want to retain this link As it is working now and we wanna retain the option to actually filter by The preacher So let's show you how easy it is to do that Turbo go to the sermons list View For admin viewing and then Also again to the fields and click on great at the fields relations in this app oate before we We do that I first need to remove The preacher From the list so we first gonna go to the We we selected the fields That needs to be linked To the List the admin list View And the one we want to remove Is the preacher value So it's this one Sermon preacher we gonna say no Don't add it and when you do that is gonna wipe out all the links that usually Should not be selected if it's not a listview But since we still wanted to be a link And we still wanted to be a filter We gonna leave those checked And then click save and close So now Getting back to this page And going to Fields will see that The the preacher now Is No longer going to show him the list View But it's still Going to be A filter in a link And if you compile now it won't show up at all You still need to now go and select the relations area Akon new And then select name Here You would now Need to select The Sermon preacher And then View And then Well we could I this a We wanna do this ourselves Or We could Use Google Which in this case I'm just gonna use a space To send empty space like that And save and close And then we compile Install And then refresh the cement page we see that now They are Two links here The one is to open the Actual Sermon and the other one is opening the He's going to open the preacher So if we click on it it still behaves as before the preacher gets opened Be closed again And we back here and we still have the preacher filter Here at the bottom of our page As we had it before And so This is really Great We can also then open here And All is working as expected Nice as easy as it was To combine these two values into one column While still retaining the actual links and everything or surrounding this value having a Dynamically get the name Because obviously in the table it's taught the idea only And now showing it here it means it's actually room up that in the database so let me show you that So we open the servants Model and we scroll down We'll see here in the the list query It's still Maps the preacher table in And Builds the connection on the ID in the preacher And still select The preacher name Then going to the view of that Sermons We see if we scroll down Here It has Produced this trunk Of code For the for the preachers name And this chunk of code For the Sermon name So it still does all the Producing of the HTML code and older promotional checking weather Does this user actually have The edit permission 2 To change the value Of the specific preacher So yes and yet it's showing the preacher name As the linking up in the database was done So it's quite exciting I really Hope that you would find it as useful as I am already doing And like I said if you discover anything not to work as expected Please do contact me and on get up opening issue And we will Take it from there \ No newline at end of file +Well I'm happy to announce that we have added a very Long awaited feature To JCB You need to upgrade to [00:00:12](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) Version 2.8 To actually get this feature This feature though Does effect How JCB builds the Admin View List View So that means Basically These areas Where you got list of items [00:00:33](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) So if you got custom scripting in your component In these areas The New when you install or upgrade to version 2 You would experience that your custom scripting doesn't get added you know Correctly We'll still add it will still be added to the document But you have to go and move it into the correct place and an commented and You know do the [00:01:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m01s) replacement of the code Add those diamonds to Notify JCB to update the placement So that's Just a heads up because the list views are Improved actually The way it's being built The this extra Sort of Changes to the code snippets changes the fingerprints and all that [00:01:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m27s) So enough that what the new features is all about is actually Taking specific values like maybe this value And that value And to combine them into one value into one column And yet have the option of still being able to filter with those values Now we forgot this component Sermon Distributor And I am planning To take the preachers List View [00:01:59](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m59s) You'll see that it now shows the name and a short description or whatever description you've added I want to have it also show If there is an email address So if this email address is filled in Then it should show the email address Or If it doesn't find an email address but it finds a Web address it should show the web address so it should show other one or the other And it must connected next to the name [00:02:31](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m31s) And and I think we'll use that as our demonstration of this feature Ok so now let's go back to component Builder And then we would go to The admin views And If you Or not if you haven't done it yet there won't be an icon showing up anywhere here But once you've done it there will actually be one I'll show you that So we will go to the preachers admin View So just go to the the one you want to change [00:03:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m01s) And then under the settings area Sorry not the settings area It's the fields area You'll see that there is now A new area called admin Fields relations and here at the bottom You'll see a field relations So that's the new area that's the new feature You could either click here [00:03:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m27s) Or You click here both of them will achieve the same Taking you to the Same place So I'm the click on this one it's ok And then You basically in the admin Fields relations Builder so you could click here on adding a Admin fields we gonna set we gonna use the name [00:03:50](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) And we gonna join that up with the email And with the web URL Now will see that there is this area Column The area column actually Can Target three places Before modelling the value after modelling the value And the view So [00:04:12](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m12s) If you know I'm what a model is that means the area where you still working Just with a code Where as in the view You must think of you already have a HTML trunk That represents that field So if I could show you that more Directly in the code In first looking here at the folder structure you see I am in administrator components [00:04:39](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m39s) Then sermon distributor Then here's the views and here's the models So if we go to the model of the preacher Plural one because we going to the list View You'll see That it has Items Now At the moment there is basically nothing being modelled Modelled usually would imply [00:05:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m01s) If it is a json object And it needs to be taken from json to an array Or if it's a encrypted value in a needs to be decrypted Those kind of things Oh whether you wanna work with the value before that happens or after that has happened Ok so then if you want a you work with the actual Item Where it's still just an integer or a string and really that's all that is Then you'd target the model If you wanna target the view [00:05:37](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) Which in this case if we go to preachers And then the body You see that Basically Everything from here Up to here Is representing The ID Everything from here up to here [00:05:58](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m58s) Is a presenting the name And so if you wanna target this chunk Because it still gets generated of course Then you would target the view Because then JCB will still build this whole block for you Basically this block And you can move this block around and join it with the other block for the other field As you like So that we could be that you didn't have two links [00:06:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m27s) Or that Yes All kinds of interesting things can happen my best Advice is you know try it out take it for a spin Make some changes compile it install it See what's changed go to the areas Which being either the view Or the model and see the code that was generated based on your selection Now we gonna [00:06:52](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m52s) Make multiple changes and show you what will happen so save you some other time and then understand What's happening And so let's go Do it The first area I'm gonna target is the model area Then it has a joint type which is either a concatenation with With a glue option the glue option is basically what do you want to be placed Between the values You could say no I want them to be completely crank up against each other like that And usually it'll still add a little space it'll still add a little space in [00:07:30](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m30s) And You can say no I want I want a little Arrow between them Like that But it's basically a value you want to place between these two values Ok so I'm gonna just leave it as a comma for now And then save and close And then also save and close the view And now you'll see That there is a new icon here We can click and directly go edit the relation [00:08:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s) So That is the new icon added Now if we go to the compiler We will be able to compile this and see it in action So I'm not gonna Do that just gonna compile sermon distributor Install it and now First thing is let's open sermon distributor and let's go to the preachers table and See how it looks in the interface So here we see [00:08:30](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) It basically adding Both of them adding the email as well as the URL And because it's exceeding a specific length it is escaping it and we have this little Pop-up come up here It so there's that comma we added as a concatenation Between the values So that is really what we expected Let's go back and make some changes Well let me let me first show you the code that was built [00:09:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m01s) So we were targeting the model so basically it just Add this As a glue To glue these values together Concatenating them Yes So that was the model now Like I said this specific view doesn't have Really any modeling it does to the values So even if I would to say it select after It won't necessarily change anything [00:09:32](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m32s) Ok so Let's make another change Let's instead of using the default glue option Let's say Ok we wanna do a code option Then you'll see the JCB cranks out sort of ok to Give you the Freedom to actually write code We are using the IDs Of the fields [00:09:58](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m58s) In in braces Curly braces because Well Many reasons I'm not gonna Waste your time More or less Boils down to the fact that it's difficult to know exactly what the field names gonna be at this point For every kind of type of field that is there So working with the ID just saves us a lot of Effort [00:10:22](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s) But since it's difficult to know which field is which ID we had this little comment to sort of give you a heads up ok so this value is basically the website this one here is basically the Email And I would suggest if you are sure of what is what To just take the comment out because otherwise it'll be added to the code So that is just What I would suggest so this stage we know That what this is saying is basically what we saw In the code it is almost exactly the same Except that it is using numbers here so now we can do some little PHP [00:11:00](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m00s) So we can say something like this So we basically checking If this is not empty Then we use that which is the email otherwise we fall back onto the You know the URL and when the URL is empty it just means that there will be an empty string So maybe that's not that ideal either So let's make it a little bit more advance So now it's saying if there is an email use the email otherwise check is there a URL [00:11:32](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) No If there is sure then add it if not then add nothing And it just stays without the comma and everything So there we go Got a little Adaptation there So just make sure that this Convention is kept So the Curly braces with the ID and then the closing curly brace This will then be updated with the actual name of the field and so you can do full HTML Sorry PHP coding in this area [00:12:02](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) And it will be implemented that means you could also pass the value to a function which then Passes it back to the value And this is in the model And this is before modelling and after modelling oo That's a Good thing that happened every time you change anything here It's going to update the code Because Sometimes it is expected that these two Values might look different at this stage it doesn't but it is a JavaScript that fires on [00:12:37](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m37s) Changing of any of these fields And so I have to type all that over now So the Best Idea is you wanna make changes here First copy the value in here And then you can make changes And see you know what what happens And Then as you decided what you want You can just paste it back in [00:13:04](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m04s) Ok so there we have it If it doesn't behave exactly right just change it a few times We will Will still tweak the JavaScript here to make sure that it's You know working exactly 100 Percent So this is sort of Beta phase sort of but it works the The same functions as it should It's just that the I'm still ironing out some JavaScript here Another thing [00:13:31](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m31s) You can only Target The name list field Once You cannot add it a second time like this And say ok you're here we gonna do it again But now Using maybe some other values To also target it In some way [00:13:52](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m52s) You cannot do that only one of them will get implemented the other one will be dropped It's a limitation I know but believe me This feature as it is now is already really stunning And able to achieve quite Impressive results Ok so here we have it we've adapted it it will only show an email or a web address If there is actually one set And that There is None set it won't show any That's the expected result so let's save this and see it In action [00:14:31](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m31s) So we will compile it and install So there we have it The preacher showing up with an email address and that's it Let's Create one Without an email address So we created one With no email address if you see There's none here let's add a web address let's just close again show you Now there is nothing not even a comma [00:15:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m01s) But as you see this now is a link the whole thing is a link And That might not be exactly what you Actually want Ok let's Let's add a web address And then save and close and so here Because your web address was a little long It created a a pop-up [00:15:26](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m26s) Now all that can be changed But let me just Do something else Let's use a shorter address Save and close And now there you have it That looks more acceptable And so it detects now whether there's an email or a web address and if there's none it shows none So that was now with this new combine Feature [00:15:53](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m53s) So let's, let's do something even more interesting So again we go and open that area clicking this icon This is sort of a shortcut And now instead of targeting the model We gonna target The View And this is where it really gets interesting Because now this little place holder called field=199 Is basically a chunk of code as I explained Initially in the beginning Where we are saying [00:16:30](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m30s) Ok Instead of Targeting the actual value database value You are now targeting the produced code which JCB builds The html block For that specific field So We can now also I would also encourage you removing the comment this is the comment that shows you that that is the name That's the email And that's the web address [00:16:57](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m57s) So I would also encourage you to once you seen it or just remove it we might at a later stage Take the comment and added underneath the box so that it Clearly is nowhere In the way But it is for you to just sort of know that this chunk Is for the email and this is for the website Address ok so again I want to add a little bit Dynamic Script here But I need to keep in mind that I'm actually in HTML [00:17:31](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m31s) So if I wanted to add PHP here I actually need to Do the correct PHP tags And all the rest of it Ok And that means you can actually Target the item value You can remove this and work with the actual item value But this little placeholder will produce the whole [00:18:03](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s) Block of code which if it's going to be a dynamic link Or something like that It'll produce all of that for you So if it's a If it's an A custom field which links to a to another View Then all of that can still be produced in this Sort of dynamic placeholder here But you can remove this all of this and you can Yeah have it [00:18:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m27s) Echo out anything So which you just have to code of course I think Best to demonstrate is first used in concatenation option And which would just put a break between the values And then save and close And compile install So we refresh this area And now we see that This value is a link but the other two [00:19:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m01s) It's actually just text And that's exactly What we wanted to achieve Going into the code We open the body And you'll see The JCB added the brakes There is a break There's a break And there's the chunk of code that JCB build [00:19:22](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) So It really build all of this It's still built a link to the preacher And then It's still built this As well So if this was going to be a link to another View It will produce that code Checking again the permissions and everything Which is really what makes [00:19:43](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m43s) This areas implementation quite exciting Because it still takes care of the hard work of producing The actual code needed to display the value If you pick up any behaviours in this new feature that sort of unexpected Then please give us a heads up on Github open an issue And we will try and address it as quick as we can Again thank you for watching This is the new feature of Combining admin view values [00:20:19](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m19s) In a Very easy way It could have been done previously with some custom scripting But this sort of helps you and I'm sure Makes it easy for you to just select the field you want to Target of course that means You first need to add the fields that you are ready going to show in the list View And then select the field you wanna join to it That's sort of I expected you understood maybe that but I realize I must mention that separate [00:20:53](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) So that means if we go into the preacher Fields area you'll see That We actually just got two Fields the name As shown in list And the description shown in list So here we don't make any changes we don't say that the email and then Website Must also show in the list View In fact [00:21:17](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m17s) Only the fields that I'm not showing in the list View Show show in the relationship view as joint options So that's just a heads up What is exciting though as you can Actually Do a a filter And a Yeah you can do a filter or a search On these Fields that are not going to be placed but you know you gonna later select them as relationships [00:21:47](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m47s) And then the end up creating JCB will in upgrading the filter And make it searchable at even if it's a link to To another page you can click this to be a link And then it will generate the link Which is I think amazing knowing that it's gonna set that all the permissions in place And everything else Ok well maybe I should Demonstrate that Just quickly [00:22:15](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m15s) So here in the sermons area We see that we have a Preacher table and we gotta name table So That means we can actually We have these two links this one will open the preacher As We know Same as opening it from the preacher list view and then this one's gonna open the sermon So This is going to be easy because now [00:22:45](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) We can decide Ok we got so many rows here let's Combine the preacher With the name row And yet we wanna retain this link As it is working now and we wanna retain the option to actually filter by The preacher So let's show you how easy it is to do that So we'll go to the sermons list View or admin viewing and then Also again to the fields and click on create fields relations in this ad o wait before we We do that [00:23:20](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m20s) I first need to remove The preacher From the list so we first gonna go to the Where we selected the fields That needs to be linked To the List the admin list View And the one we want to remove Is the preacher value So it's this one [00:23:42](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m42s) Sermon preacher we gonna say no Don't add it and when you do that is gonna wipe out all the links that usually Should not be selected if it's not a listview But since we still wanted to be a link And we still wanted to be a filter We gonna leave those checked And then click save and close So now Getting back to this page And going to Fields we'll see that [00:24:10](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m10s) The the preacher now Is No longer going to show the list View But it's still Going to be A filter in a link And if you compile now it won't show up at all You still need to now go and select the relations area click on new And then select name [00:24:33](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m33s) Here You would now Need to select The sermon preacher And then View And then Well we could either say We wanna do this ourselves Or [00:24:50](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m50s) We could Use glue Which in this case I'm just gonna use a space just an empty space like that And save and close And then we compile Install And then refresh the sermon page we see that now They are [00:25:21](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m21s) Two links here The one is to open the Actual Sermon and the other one is opening the It's going to open the preacher So if we click on it it still behaves as before the preacher gets opened we closed again And we back here and we still have the preacher filter Here at the bottom of our page As we had it before [00:25:48](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m48s) And so This is really Great We can also then open here And All is working as expected Now as easy as it was To combine these two values into one column While still retaining the actual links and everything surrounding this value having a Dynamically get the name [00:26:16](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m16s) Because obviously in the table it's taught the ID only And now showing it here it means it's actually remapped it in the database so let me show you that So we open the sermons Model and we scroll down We'll see here in the the list query It's still Maps the preacher table in And Builds the connection on the ID in the preacher And still selects [00:26:49](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m49s) The preacher name Then going to the view of that Sermons We see if you scroll down Here It has Produced this chunk Of code For the for the preachers name And this chunk of code [00:27:14](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m14s) For the Sermon name So it still does all the Producing of the HTML code and all the permissional checking whether Does this user actually have The edit permission to To change this value Of the specific preacher [00:27:37](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m37s) So yes and yet it's showing the preacher name As the linking up in the database was done So it's quite exciting I really Hope that you would find it as useful as I am already doing And like I said if you discover anything not to work as expected Please do contact me and on GitHub open up a issue And we will Take it from there. Thanks for watching. diff --git a/070-How-to-change-the-License-Template-in-JCB.md b/070-How-to-change-the-License-Template-in-JCB.md index 9e7da82..1dfdc07 100644 --- a/070-How-to-change-the-License-Template-in-JCB.md +++ b/070-How-to-change-the-License-Template-in-JCB.md @@ -1 +1 @@ -I would like to talk to you about changing the licence template For your component This would be expected that you've made at least 40% chain Do any of the demo components Yes so Let's say you've changed this component Quite considerably Then there is this place called Licensing template Now it actually tells you there what you should do Select a file That should be used for licence or files Found in Administrative component Component Builder Compiler La files What I should add to the note is actually the txt files So that means you could put any txt file in there And then selected here as a licence template Now let me show you how that works Ok first of all It must be done When the Joomla component Builders ready installed on your website to hear I have a website by MT So in Administrators Component Wrapistry talk Finance Bodybuilder There is a folder called compiler And in it there is 123 4 txt files 5 txt files And going back to the component There is 12345 files I see it's also using the HTML That one will obviously not come out right Ok So These ones with the txts the one that you would Select Any one of those To be the template that you are going to use Now if you use one of the existing templates and just change it then with the next update Your changes will be overwritten So you wanna do it in a way that sort of Preserved your changes And the way you do that is you actually go Back to that area And then you select Or let's say were you selected default one And maybe you don't like this So you want to take that out Micro And maybe you don't want to really support Or show that you used a CB so Take that out I really don't mind Wags I'm so much so supportive open-source that I don't I don't mind you changing Anything here And anything else in fact anything there And anything there This I would want you to leave Basically Because you could set this in the 3DS placeholders are being replaced By the settings of your component So that means you could still tweak worse But do it in the component But leave a licence somehow Copyright notice So that people know how to use your program But Having said all that You do realise that the lot of the code between all the components a JCB built are more or less the same It's just loom Ames here in there I am that's really the only thing you probably Riding Just keep that in mind You're not copy writing the Everyday line really your copywriting the changes because Though The idea of how built is already been copyrighted either by your myself or buy Faster JCB yes that's right so just keep that in the back of your head Your copywriting the changes you've made And that would you done And maybe when someone uses your component they won't think about it that way and I don't I don't mind and I nothing Anyone word because we are open source community But If you do change your program to a proprietary software You might have 2 Yeah you know you need to look at What would be the implication because I think There's a possibility that some areas Cannot be made proprietary be Because of the Open Source licence already being on JCB And on Everything that it's Stan Ok so that's just I'm not sure I'm not a lawyer I don't know how all that works out But I want to give Billy people so much freedom and I'm not really gonna take people up Someone else May there is actually places that Might feel obligated to do so I wanna be busy with code Writing programs Ok So this is how you change the template More or less you could leave things in the one that think that's the most let's see You can check between them You see like this the way to know what is all the place holders that are available Is really to go to the Let's see how her Compiler I think it's that in fusion is 1 So You should look at the in fusion Now like There is a company name is sea there's a creation date There's the boat day there's two all the all the e-mail website copyright licence version Actual version Component names for short description description Image type access so they are Really Most of these aesthetic A content placeholder could be used of his is some of them won't make sense like custom how The Script Means it's got at the custom out the script in that lines It's not gonna come out right So these Place holders are really from where The pont in is being updated in the file Ok so you'll see That it is the same This is a new method we are using to put it in the hashes these these hash is here So Basically the creation date Is this one here And it's getting it from the infusion which is found in helpers compiler So you can check out these and use any of those as you like The point being It's best to leave this in And at least now tell people who who who did you do did it so someone Can be blamed anyway And There we go now If you just save now It'll still work the default and it will be updated But the problem is the sooner we released a new update for JCB and you install that update Is actually gonna over right this So what we would suggest the saying save And then give it Yeah your name I'm just gonna say Q Default queue Save Now we have a new file And we can actually go back to JCP We can just refresh the component area And now we'll see that there it is The new Template Now if I save And compile this component It will actually Use the new template now let me first see that I have it installed yes I do let me show you that So in the code we go down to sermon distributor we just open any of its files And that's how it's current template looks like Ok so there is the current template All the way down to their Now let's compile and see Apple update every file cross Spectrum So we just gonna say 7 days to Beauty and compile Ok and then this installer Now let's go check out our template And now if we scroll up we see up it's got the new The new Tempered is being used no longer the old one It's the same file I just it just refreshed it In the background Ok so That's old works Easy To change the licence and that's really means you can make it a small or is bigger C like Any shape and size Just keep in mind that you need to escape it and an Escape it Because otherwise it will mess up the code Ok well that is how you change the licence template Now So Make a wise decisions and how you deal with this area I don't wanna say too much more and put You no restraints up because really I know that The initial Desire here Was really to give everybody as much freedom as they need Thank you \ No newline at end of file +I would like to talk to you about changing the licence template [00:00:05](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m05s) For your component This would be expected that you've made at least 40% change To any of the demo components Yes so Let's say you've changed this component Quite considerably Then there is this place called Licensing template Now it actually tells you there what you should do [00:00:34](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) Select a file That should be used for license all files Found in Administrator component Component Builder Compiler Now the files What I should add to the note is actually the txt files So that means you could put any txt file in there And then selected here as a license template [00:00:57](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m57s) Now let me show you how that works Ok first of all It must be done When the Joomla component Builder's ready installed on your website. So here I have a website Joomla Mount So in Administrators Component or administrator components component builder There is a folder called compiler [00:01:21](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m21s) And in it there is 123 4 txt files 5 txt files And going back to the component There is 12345 files I see it's also using the HTML That one will obviously not come out right Ok So These ones with the .txt's the one that you would [00:01:46](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) Select Any one of those To be the template that you are going to use Now if you use one of the existing templates and just change it then with the next update Your changes will be overwritten So you wanna do it in a way that sort of Preserved your changes And the way you do that is you actually go Back to that area And then you select [00:02:13](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m13s) Or let's say were you selected default one And maybe you don't like this So you want to take that out like that And maybe you don't want to really support Or show that you used JCB so Take that out I really don't mind in fact I'm so much so supportive open-source that [00:02:36](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m36s) I don't I don't mind you changing Anything here And anything else in fact anything there And anything there This I would want you to leave Basically Because you could set this in the you know these placeholders are being replaced By the settings of your component [00:02:58](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m58s) So that means you could still tweak this But do it in the component But leave a license somehow Copyright notice So that people know how to use your program But Having said all that You do realize that the lot of the code between all the components at JCB built are more or less the same It's just little names here and there and that's really the only thing you copy writing [00:03:26](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m26s) Just keep that in mind You're not copy writing the Every little line really your copy writing the changes because The The idea of how built is already been copyrighted either by Joomla itself or by sorry JCB yes that's right so just keep that in the back of your head Your copy writing the changes you've made And that would you done And maybe when someone uses your component they won't think about it that way and I don't I don't mind and I nothing [00:04:00](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m00s) Anyone would because we are open source community But If you do change your program to a proprietary software You might have to Yeah you know you need to look at What would be the implication because I think There's a possibility that some areas Cannot be made proprietary be Because of the Open Source license already being on JCB [00:04:28](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m28s) And on Everything that it's done Ok so that's just I'm not sure I'm not a lawyer I don't know how all that works out But I want to give many people so much freedom and I'm not really gonna check people up Someone else may there is actually places that Might feel obligated to do so I wanna be busy with code Writing programs [00:04:58](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m58s) Ok So this is how you change the template More or less you could leave things in the one that think that's the most let's see You can check between them You see like this the way to know what is all the place holders that are available Is really to go to the Let's see helper Compiler I think it's that infusion is 1 So [00:05:29](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m29s) You should look at the infusion Now like There is a company name you see there's a creation date There's the built date there's author, author e-mail website copyright license version Actual version Component names for short description description Image type access so they are Really Most of these aesthetic A content placeholders could be used obviously some of them won't make sense like custom helper [00:06:01](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m01s) Script that Means it's got add the custom helper script in that lines It's not gonna come out right So these Place holders are really from where The content is being updated in the file Ok so you'll see That it is the same This is a new method we are using to put it in the hashes these these hashes here So Basically the creation date Is this one here [00:06:31](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m31s) And it's getting it from the infusion which is found in helpers compiler So you can check out these and use any of those as you like The point being It's best to leave this in And at least tell people who who who you do did it so someone Can be blamed anyway And There we go now If you just save now It'll still work the default template will be updated [00:07:03](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m03s) But the problem is the sooner we released a new update for JCB and you install that update Is actually gonna over right this So what we would suggest the saying save as And then give it your name I'm just gonna say q Default q Save Now we have a new file And we can actually go back to JCB [00:07:32](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m32s) And we can just refresh the component area And now we'll see that there it is The new Template Now if I save And compile this component It will actually Use the new template now let me first see do I have it installed yes I do let me show you that So in the code we go down to sermon distributor we just open any of its files And that's how it's current template looks like [00:08:03](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m03s) Ok so there is the current template All the way down to there Now let's compile and see It'll update every file across the Spectrum So we just gonna say sermon distributor and compile Ok and then this install it Now let's go check out our template And now if we scroll up we see up it's got the new [00:08:36](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m36s) The new Template is being used no longer the old one It's the same file I just it just refreshed it In the background Ok so That how it works Easy To change the license and that's really means you can make it a small or is big as you like Any shape and size Just keep in mind that you need to escape it and unescape it [00:09:02](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m02s) Because otherwise it will mess up the code Ok well that is how you change the license template Now So Make a wise decisions and how you deal with this area I don't wanna say too much more and put You know restraints up because really I know that The initial Desire here Was really to give everybody as much freedom as they need [00:09:35](https://www.youtube.com/watch?v=AveBf6YZzmo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m35s) Thank you for watching. diff --git a/071-Reuse-Custom-Code.md b/071-Reuse-Custom-Code.md index 6706d14..b2b9139 100644 --- a/071-Reuse-Custom-Code.md +++ b/071-Reuse-Custom-Code.md @@ -1 +1 @@ -Would like to Show you how to Use code across JCB Never inherit in kind of way By taking the advantages of a few features that Jay-Z has Features that knows may not know is there or maybe they do but they not seen it's advantage And then recently there actually came up a question On the Forum Hi Alex things are skiing About You know your husband views but Generic code that runs in Multiple admin views and then some of it runs only in specific admin views And how I could how I could speed up the maintenance of this kind of thing So his first question is is the helper at mint class the best way to put this code and then is there a way Keep the direct admin forms functions I wrote separate from these specific ones Ok I'm sure some of your might even be listening here and I'll understand exactly what we trying to do Answer I'm not even sure if I'm exactly going to answer this you know So I'm gonna quit it pull up a Docker image of Joomla I have a doc file there just quickly gonna pull it up And then we gonna go and use it Ok Ok so I've got it of running I think it's default is user Ok so where in here I'm gonna go to extensions and install And Basically at the web tab The JD Kud Then tie her recipe Here we have Description can look at that And install Sort of getting the JCB install from GitHub Ok we're done Go to Mokopane and builder when was there Then We could Grab a demo component If you don't know how to get access to these components just follow this link and Follow their tutorials X gonna get the JCP package And then the key that You will send it will add here Mary Force an update Toe is good So get all your Fields updated Ok now Continue And within moments we have JCB Installed on JCB Now we can start looking at the examples That's really what I wanted to get to Because the question is being answered by the demo data Already So In JCB there we already doing a lot of this multi Inheritance structure kind of relationships And So the best way to sort of demonstrate this is to actually look at a CV itself K almost there Hey I got JCP Here Now if we go to custom code We'll see there's a hole that a customer code And Many of them is this hash Automation Now we wanna look at this JCB manual option For example let's look at the good view ID Which is a custom code Basically that is his name This is how you use it And Here We are having a view Called admin View That is using it So if we click on that He's going to open for us the admin View And when we get here we'll see there is the the code now This actually is the I'm using this specific get view ID All across my components is just It's also being used in JCB But it's it's powerful So I'm using it everywhere So that's one way To use A a specific snippet Would you add here use the JCB manual Give the function and name You could pass values to the function like this And Please read the explanation here To how that is done And then today You can then add up the value structure for example if If this value here needs to change from instance to instance you can pass it by The new one Which that will be R20 And then you can just actually replace this here with 3 Then Park 093 again like that And then you just remember to pass At least one value To update This value Where are we using it That's one way to use the reuse the scripting Now the other way Which is the one that actually gets used in the helper class It's like here I got one called get file path To get file path is also a function Which I am using a cross my components It is by just also being included in JCB But many of my components is using get file path And basically It is a little function That I can pass a few parameters to ne can consistently give me back a path of where I want to place or get far Piles from Now in the PHP helper there is a function And the component itself That's me here There is a function called Helper classes for both admin insight So anything you put in here will be not only added to the admin helper class but also to the site Helper class sort of a way to Avoid doing it twice And As you can see There is one to just put it in the admin So you could just take care and just target the admin helper Or you could just talk at the site class helper But in this case most of this code I wanted to speak everywhere And if we were to Go down to the very bottom suppose Your Is the Get file Path So it is forming part of a whole bunch of code that I'm adding to the helper class of this component And which I'm also using another components so I don't read Do you need to redo this code anytime soon unless in in sorry I don't need to come and open there Component when I want to change this code I can just change the code Right there In the Place that it's in the custom area So that means if we close out here And we go back to the customer code You can see that the function is being used in component builder and in what field there bitch be helper both Sweat added And If you need improving the code you can always at the bottom see in which areas is being used So that is the option for multiple reuse of custom scripting So you could put it anywhere you like in JCB either in the component helper class or in the component View You know PHP areas And by doing so it gets really used it gets placed into that code on compile a And that's really the answer I suppose ^ the customer code area I realise it could be confusing because we are mixing it with the idea customer code which the These are This hash Automation Is basically where you Edited your code in the ID like I did here And the JCP is keeping track of it And it's saying ok this is for the admin views tampered before body php file And on the on this starting hash Value We are doing an insert of this code and you cannot maintain the code here But it's only for one file one location one place Then there's the JCB manual and the JCB manual Is the implementation order mutated in implementation Of using custom code snippets this clip it All across in customer code areas So that means I'm using the same word custom code Four different implementation And That might have been a mistake because You could Miss it's possible differences But there is most certainly a difference this doesn't target a file but a actual area Somewhere in that JCB compilation So Yeah I hope that helps Let me know \ No newline at end of file +Would like to Show you how to Use code across JCB In a very inherent kind of way By taking the advantages of a few features that JCB has Features that most may not know is there or maybe they do but they not seen it's advantage And then recently there actually came up a question On the Forum By Alex Tings asking [00:00:33](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) About You know he ask admin views but Generic code that runs in Multiple admin views and then some of it runs only in specific admin views And how I could how I could speed up the maintenance of this kind of thing So his first question is is the helper admin class the best way to put this code and then is there a way Keep the direct admin forms functions I wrote separate from these specific ones Ok I'm sure some of your might even be listening here and I'll understand exactly what we trying to do And I'm not even sure if I'm exactly going to answer this you know [00:01:12](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m12s) So I'm gonna quickly pull up a docker image of Joomla I have a docker file there just quickly gonna pull it up And then we gonna go and use it Ok Ok so I've got it up running I think it's default is user Ok so where in here I'm gonna go to extensions and install And Basically add the web tab The JED [00:01:46](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) JED Then type JCB and here we have Description can look at that And install Sort of getting the JCB install from GitHub Ok we're done Go Joomla component builder we're almost there Then [00:02:22](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m22s) We could Grab a demo component If you don't know how to get access to these components just follow this link and Follow the tutorials So I'm just gonna get the JCB package And then the key that You were send you will add here Maybe force and update is always good sort of get all your Fields updated [00:02:52](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m52s) OK now Continue And within moments we have JCB Installed on JCB Now we can start looking at the examples That's really what I wanted to get to Because the question is being answered by the demo data Already So [00:03:12](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m12s) In JCB there we already doing a lot of this multi Inheritance structure kind of relationships And So the best way to sort of demonstrate this is to actually look at JCB itself OK we're almost there OK we got JCB Here Now if we go to custom code We'll see there's a whole lot of custom code And [00:03:40](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m40s) Many of them is this hash Automation Now we wanna look at this JCB manual option For example let's look at the getviewID Which is a custom code Basically that is its name This is how you use it And Here We are having a view [00:04:01](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m01s) Called admin View That is using it So if we click on that Is going to open for us the admin View And when we get here we'll see there is the the code now This actually is the I'm using this specific get view ID All across my components is just It's also being used in JCB But it's it's powerful So I'm using it everywhere [00:04:31](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) So that's one way To use A a specific snippet Which you add here use the JCB manual Give the function and name You could pass values to the function like this And Please read the explanation here To how that is done And the end of the day [00:04:55](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m55s) You can then adapted the value structure for example if If this value here needs to change from instance to instance you can pass it by This value one Which that will be arg0 And then you can just actually replace this here with 3 Then arg0 and 3 again like that And then you just remember to pass At least one value [00:05:27](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m27s) To update This value Where ever you using it That's one way to use the reuse the scripting Now the other way Which is the one that actually gets used in the helper class It's like here I got one called get file path To get file path is also a function Which I am using across my components It is just also being included in JCB [00:05:55](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m55s) But many of my components is using get file path And basically It is a little function That I can pass a few parameters to and can consistently give me back a path of where I want to place or get files from Now in the PHP helper there is a function And the component itself That's me here There is a function called [00:06:20](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m20s) Helper classes for both admin and site So anything you put in here will be not only added to the admin helper class but also to the site Helper class sort of a way to Avoid doing it twice And As you can see There is one to just put it in the admin So you could just take care and just target the admin helper Or you could just target the site class helper But in this case most of this code I wanted to be everywhere [00:06:52](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m52s) And if we were to Go down to the very bottom suppose here Is the Get file Path So it is forming part of a whole bunch of code that I'm adding to the helper class of this component And which I'm also using another components so I don't need to redo this code anytime soon unless in in sorry I don't need to come and open the [00:07:20](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m20s) Component when I want to change this code I can just change the code Right there In the Place that it's in the custom area So that means if we close out here And we go back to the custom code You can see that the function is being used in component builder and in what field there PHP helper both It's where it's added And [00:07:45](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m45s) If you'll need improving the code you can always at the bottom see in which areas is being used So that is the option for multiple reuse of custom scripting So you could put it anywhere you like in JCB either in the component helper class or in the component View You know PHP areas And by doing so it gets reused it gets placed into that code on compilation And that's really the answer I suppose To the power of the customer code area I realize it could be confusing because we are mixing it with the IDE custom code which These are [00:08:28](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m28s) This hash Automation Is basically where you Edited your code in the IDE like I did here And the JCB is keeping track of it And it's saying ok this is for the admin views template default body php file And on the on this starting hash Value We are doing an insert of this code and you cannot maintain the code here But it's only for one file one location one place [00:08:57](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) Then there's the JCB manual and the JCB manual Is the implementation or the mutated implementation Of using custom code snippets this snippet All across in custom code areas So that means I'm using the same word custom code For different implementation And That might have been a mistake because You could miss it's possible differences [00:09:25](https://www.youtube.com/watch?v=8Yl4lAAAWMQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m25s) But there is most certainly a difference this doesn't target a file but a actual area Somewhere in that JCB compilation So Yeah I hope that helps Let me know.