diff --git a/011-Component-Scripts.md b/011-Component-Scripts.md
new file mode 100644
index 0000000..c52ca10
--- /dev/null
+++ b/011-Component-Scripts.md
@@ -0,0 +1 @@
+Hi So we just looked at Settings Of your component And now next we be looking at the scripts tab Here is an area where you most probably Add a lot of custom scripting So this area is focused on giving you Area app you know Interface to add custom Scripting to your component in a global way So obviously you can have custom scripting per Admin Sorry for admin backend View But you can also do that within the global scope with Regards to many Values The the one thing that is Nice to have your ears You can add Create user helper method To the component Another user album method is simply code If you do not know how to write their speed in this method will be of no use to you at all But if you do Then this this method will come in very handy Let me illustrate that to you If you click this yes I have a component in which I've already Implement This feature And it's called The cost-benefit projection tool Now if you click on companies You can actually Click new And then It has an area for you to create a company And I dealer you would connect that company to a user in the system But if you don't add that company to a user Because a user can have multiple companies So that's why If you click on this tab You could select the user But if you haven't selected a user and you've entered an email address and a name Then And also the needed information of course Then I you will Once you click save Close Shave The system will actually create a user for you An automatically email the user details to that And that is because of that specific helper class that I Added So Ticking helper class Now we see it doesn't do it On its own You need to write the code for it So let me show you where I did it In the controller You have an area Open up company You have an area called Post safe K just one here Is the posts April Remember I'm looking at the admin views We could target this area in fact that's exactly what I did So let me show you So I'm in the admin do you for company Unify go to PHP You would see that I have some Ajax there And then I have Area Which is the post safe method I need a post safe method I'm basically checking something some values And then when I realised that this user does not exist Uranus If the user does not exist Basically I'm doing a check here Then I'm using the helper Anyway trust not There it is Create user So again I've spoken about this placeholder Convention before I hear you are using the brackets Convention not the Hash one So three brackets that must be uppercase component And then I get 3 pack your son help her and this will be replaced with the components code Name Ok so That is what that does and then it basically It's the helper class Create user So in the helper class of this component Close this down Can I go to the Alpha Open The helper class you see that is the name Search the components name And then it's called helper And in helper class there is a Feature called Create user So basically it gets an array in it Another Rei has some values Which will be using Like password 1password 2 And we'll set the password so I'm not gonna explain this code basically just showed you where the phone Function is the function that was added to the components helper class and in that I'm super calling that function after having build the the user So I said the erase name and the email is that obviously the function if there is no password Set it will set a random password and again use another method Which also is part of the helper class we explored it with all helper classes as random Random method we can get a random string so That is creating a user and then it sets up the password and then it gets the Erase ready get a model now the model I Got from their get model again we are using a component folder Custom method which gets the specific model from the system And then basically fires the register Method Pontus dataset And then Updates The parameters for the system Regarding this new user Sense in the email And then returns the ID because obviously we were looking Foreign ID That's actually what we want We want to I want to get the Yeah we have the ID If we have the ID If you don't have the idea will send a message To the user And if we have the ID will basically story into that database To connect That item To that user Automatically and then click save Now That is Custom scripting So they're still switch Is this adding that That message to your helper class That's all it does Where is this which adds the uikit library to your media Boulder As well as integrated Dynamically Wherever Are you use The uikit class names So you won't need to write that any in any custom way Automatically adds it The same goes with food table This CSS is global CSS for all the back in views Dial back in So You wanna add CSS that would target the hold back and then you You do it there This is a place for you to add your own custom scripting to the helper class the app and helper class Jazz ucansi I have a whole custom Scripting here Sermon distributor For the admin Area And as well As an event No I spoke about this event concept briefly But what we want to achieve with the event is basically on every page If you look at This sermon distributor Back in part of it It has a file which is the in Main file Wychwood Which July calls first World sermon distributor And in that file It basically triggers that Global admin event And the global admin event is nothing else than a function inside of your helpers Albert function So always Triggers If you add that switch And then it passes at the document object Ok so the document object is being built up here So I'm just passing it over to the global event so we don't need to really clear it there So if I was to open the helper class Which we have here Scroll to the top Then you would see that I have It was the top I was just in the wrong file It's easier Load Dropbox Ajax Now This again it's just another function right so I wrote that funky So you can basically add whatever functions you want to run globally Every time a page open Now that's what I say way to run it like a Chronicle job On the front and the back end of the component If you have things that you want to be done chronically This feature is really targeted at doing that So Here we are loading the Dilla The Drop Box Ajax So if we go back to the component You see that I am Just adding That script first I just ticked Global admin event yes And I added that script that's all they added And that's group was taken and placed inside of the global event The the trigger This trigger is set by Component builder itself you don't need to write that It will insert this trigger itself If you just pick what you clicked yes You need to then just Add the script that must run inside of the global event Wish I decided to be another function And then this function Which I want to run I added To the admin View You see here at the admin helper class I added that function here So I basically just used That name And called itself because we inside of that class right so that's why you call Static class Method And a past the same information because In my method I'm adding JavaScript to the dorm right So do the document object so I want that document and then I said add script declaration And simply that means on every page of this component in the backing it adds this little script which then calls Bye-bye Ajax Which I explained previously And it starts checking the Dropbox listing automatically So that's just an automatic feature I wanted to add to my component And this is way that I did it And then I felt that I wanna add it that you can do this and other components and that's why I added this event switch Ok This evening Ok and then this same goes for the site area I also added that same class You might ask why I have different helper classes for the front and the back Well it's about Pretty belt security I suppose and permissions There are things that I wanted to in the back in which I'm not asking that much questions Where on the front I might be more Protective I would suppose And So for that reason and implementation also is often different in the front then in the back so that's why we have to Different files help this site class Under Helper app in class And you can add custom scripting as you can see I added that same script to the front And I also add it A site Event Which also triggers that same script Now you might say well if everybody Triggers The Script Then it's gonna be running multiple times Well That's exactly part of what I did I actually added A feature In the Ajax call That logs weather it's already Active And if it's Active it just ignores that call So Basically it has a controller over Whether it should run or not Meaning that if it needs to run Because it even has a timer you see you can sit For the Sermon distributor reconsider orphan you want robots links to be updated Every day every 2 days And so this Script If it's X4 United wants to update and it's not time it just dies Doesn't do anything so it's very light since it's Ajax you don't use herself don't Even notice a delay in his page so the page opens as fast as you always do and then why is that Ajax call to the server Which start this whole process on the server So that's primarily what this is all about obviously you need to know programming and you need to know how to secure And I'm not gonna try and explain that to you now I'm just saying that this is all possum Simply through these custom areas you can also add 6 Instead of adding it to the actual views you can export all the views and add them I'm here and it will be actually added to the same file And so don't do it twice but this is another area to add A sequel dump file And Then We have this nice feature called dashboard methods You see Let me show you what I've done with it Again just that you know all this data that I'm showing use dummy Not related Just me testing it So I wanted to add this Usage statistics to the component so you could see Which country has done what When in what area So So I needed to take a lot of different database tables and calculate used by My certain ways in and I wanted to have that on the dashboard The dashboard really had always icons and so I didn't want it Add another custom view wish I could have done custom map I wanted it simple right there at the moment of the page load And so we added that feature Component builder and we called it We call that dashboard methods Now let me go to one where I actually implementing it so I could Spend more time in explaining unless I'm typing Ok so here we go Basically I created a Method called get usage data it's a public function Public method And inside it I added my script And honestly inside of this group I'm calling other methods which I made it made protected so the script that Must be called from The dashboard tab I'll show you that at the moment You said that up here So here is the tab and it's HTML so we called the tab Sadistic Sunday hello we made Table And here is the HTML Ok which we are using and in the HTML You see that I have PHP and the way we do that is with with that convention Open bracket We should my PHP and Echo and then closing it again they're so basic I'm checking whether the usage data is there Now how do I know that I should target usage this usage data and then items Well this is a convention this area there And the way that that Convention works Is Buy that one there So usage data Relates to Usage data So the moment you add to word get This word get in front of a function it will be Added 28 Global the result of that gear will be added to this And without the gate Name so that the convention The convention is you could've called that Get get down Get the man on the moon Then this would be Man on the Moon This and obviously all lowercase Man on the Moon So That will be dropped And this is gonna be used Lowercase as diverse So That's the convention I know it might not be that obvious but it works So your other functions If they are protected Shouldn't have the word get in it At the moment it's said to Set that up on set And then this one is Visit check This one is set companies Set countries So you can see I could add a lot of PHP in here And all these PHP together Basically gets the data That won't want on the page And when I get the date I placed it In what is seen as the item Ok Oh you know what Ok so I'm returning a field here or a method value And this method value is being populated in this sub functions And in one of them It is adding Are we here The name items as a Pointer So she becomes an object What is an object Think I said it is object up here And Then I look through the companies and as I look through them I'm busy totalling and adding and going on I guess so Explain the code itself But basically this is getting returned And because he's an object If I look here I'm able to Target items as an object And then if it's exist And if it's said I start looping through items and certain places I'm using totals and Different values so that is just adding some of that data to the page And this area here No I could have made this much simpler right so maybe not look that intend to you but this could have been us Class a fact you could have let this out completely and just put a Comment so you could have done this Because it's gonna scream at you for you know this isn't she does compulsory do can sit Not needed and then in here you could just do HTML so if you just wanna give them for me To the user about who made the component maybe your cell A-10 new RSS feed you could have done it right here Ok I'm just showing you that you can reach into PHP here and that the PHP that Let your reach in has the convention Of dropping the gate and then using that front area usage data To place information in which you can pass in your HTML here that you would do and any other component View Ok so that is just quickly looking at the script area of a component I realise there's so much more to say but I really can't Elaborate too much on this it since it requires skill in in PHP It's something that I think will only become very useful if you are a developer as Develop a few components And can then see how you can easily add custom scripting to his component through this Methods ok well next up will look at the ReadMe And maybe their FTP server concepts
\ No newline at end of file
diff --git a/012-Component-FTP-and-more.md b/012-Component-FTP-and-more.md
new file mode 100644
index 0000000..4575dc4
--- /dev/null
+++ b/012-Component-FTP-and-more.md
@@ -0,0 +1 @@
+Next in the component view we are gonna add the ReadMe script to a component The reaper script is commonly used as the components Homepage sort of so if you were to go to get out for That's open we're on the demo components page Get up and you'll see that it has this nice image here and it Details and some layout This one is done with the ReadMe file so it's with this file here we can open That had a look at the Roar And here you can see the It's basically the same text this we looking at previously So inside of component Builder you can add this ReadMe and repeat text and This is basically placeholders Now I know that that is part of the markup for a header so You need to Know no better Mark Sorry not more Cup knockout Do you know what is placeholders and what is not That is why I added The Script so you can sort of get an idea of everything that are placeholders And the space holders are Automatically updated from the details that are in these Fields here so So you can see The the actual placeholders Names it's nice so if you change the version here You are updated there Automatically So that is just read me file Video a place for you to give a lot of information to those who are using Your Application Maybe you can add some links to it or you could Some links to help menus ribbon instructions on installing it Error anything else that you'd like to share through the ReadMe file I would ask if it's if it's not too much for you you know for you to leave this area this commenting More people using component builder the more in valve with an accumulator Others getting Restraining set Help us to sustain this project So That and it will certainly be helpful Compulsory If you want to And then if you wanna know more about market mark Down Then you can open this link here And it shows you the Set of a cheat sheet of everything that you can do Ok so that is looking at the ReadMe area Is admin View area And the site View area Should be seen as a place where you can create new admin Have used you realise that if you create a new admin view it's not necessarily linked to this You need to still link it in hearing settings there happened you This is more a place to create admin user Or to edit existing at the news that are linked to this component Same goes with the side views so it's simply a way for you to to gain access to editing Views that already linked to this application easily And then the third one 4 actually 24 You want to look at is the FTP server that has basically been added to Give you a hand in moving this application this component Do your server and also add the feature of that automated updating that is inside So the update server Is actually a Gmail icon set And if you open a component So I'll open Salmon distributor France And we look at the XML file of this component Component builder obviously built this whole file for you But at the very bottom You see that there is a App updates server That is being added Now this is not add it if you Have not Set the service was set to know It will not be adding an update server if you add this Then you can set the link To where the update server is Uno gonna be hosted And it will automatically take that link An added into your XML file like And Bat file itself Component Builder Can also build that file for you The way does it Is that This obviously Suit look like that host = hostname And port = port Enter enter And Auction bracket type = FTP binary FTP binary You're usually is 15 That is the the default value FTP binary Where is that would usually be 21 and that would usually be 5th Steam then add username and ID and a password Now this FTP details should actually login directly To this folder that you have a beer this updates folder Ok So that basically all component does is it logged into your server move this file in there And this information is what will make it possible for him to do that Same goes with the sale server the sails server usually Would be Very much the same concept You're Simply be adding the same kind of string here except usually the The update server and the sails server is not the same place The update server let's the user know that there is an update where is the sales service actually wear this component Zip file will be stored on your server so you have something like whmcs Or Another Component through which you are selling your extensions are you can Use the folder in on your server which it's looking for the files You can use that folder in a great an FTP Account to that folder and then sent that beat In this field here And then Component Builder on the moment that you could compile It has a An option here it says add backup folder and save it sales server Yes and if you compile it now It will move The zip file to yourself server as well as creating a backup now the backup and the gift for Folder is actually set up in your components Global options so we We haven't really spoken much about the global options let us open now here We saw in this area here That it says that this field is encrypted now in component builder if you go to Global Settings it says Encryption settings in in here You would add a your own key I wish it will improve once you've added this key You shouldn't change it because it will obviously not be able to decrypt Because it's used to encrypt and as well to decrypt The data so if you well that just means everything that's been improved it is now needs to To be redone which in this case is is gonna be these these login Information is FTP login information That's this is the basic encryption bits we spoke of on talk about storing types you got basic and clips This is the basic encryption way Basically having such a All day basically Then you have files here folder paths These two words for the passport compile a folder and customer for their II would leave them So now they do buggy I haven't fully managed to achieve them being Flexible remove them at this stage is difficult Phone number of reasons for now I would suggest you just leave them blank But here you would add a backup folder And this obviously should be related to the root of your server So As well as a git folder And get Fallout with me where component builder create a folder with all the compound Files without zipping them And then you can go to that father and create a kit Create a git repository there And from that folder you can push to get up Or any other git server Respectively So basically it's able to create a folder from which you can do get up or any other kind of Repository work Which are separate from your backup folder and also separate from the temple for that in which Compounds the component so you can move it out of your Joomla install basically And that's what these for the price of 4 So when you do in the compiling of the component it does that get repository it won't delete If the Dot get files we folder it will just replace all the data files in it Basically first remove the old ones then add the new ones and get obviously we'll see that Only the files that is been changed it will notice and those who you need to do a recruitment To get it into your repository obviously if you don't get it then possibly this this There's some great courses as well about get on lynda.com as well as you do So you can just go look at those ok so that's a backup folder And the sales over the same goes here this FTP Today in chills superheater direct folder in which these are zip files should be stored Unfortunately component builder cannot Storing and subfolders at this point so the FTP details he will just log into that FTP And in that vary for the which year is which she has the access to put the file there So no subfolders or Other folders the FTP details should be going directly to the folder now In the component builder I was thinking just for your own Peace of mind if you look in component builder so AB in the backend components component builder and then Help is there is a file called compiler if you open that file You would see that we have a function year built me and here's all the place holders But you can use in the book me file and will be replaced with the relative information And then there is a function here called move file to FTP server This move file to FTP server calls another function called Where is it get FTP now get FTP is this function here And basically it takes the signature checks whether we are ready made such a connection before And then loads that object But here basically I'm using this parse string function Deposit the string into the variables so all the Variables in that string is converted to erase all variables respectively And that then is used to actually make use of To malazi own client FTP class so if you wanna know where that is you can NetBeans you take control spacebar and it shows you it's in libraries you were like lions DB PHP that's where the file is you click there open at 12 Basically using built-in FTP client and we passing the host the party of Username password and making a connection and then we sending that off To do this move file which then basically takes the file com To the server So that's just We own piece of Being licked It's All handled right here Follow it's Relations Server as well Sales server The other thing that I know is quite in Important Is this update server Is an XML file And this XML file Basically build Virgins And download link So Like I explained to you in a previous video There is this reality that while you are developing Your users Scuze me wouldn't need Any Change Updates when The moment you put your Immediately uni YouTube Consider When you make it change How will you use To have changed And the biggest changes you can Is adding new For adding me Fields To the component And so that makes it a little hard Remind explain previously With the history compare We've done scripting to That prob But You also need to think about So we created this Virgin Which Gives you the ability To actually add sequels Scripting Which needs to be executed Now the way for you to think about this If you have a new version that's a 1 Point Then and now you know that there needs to be a table alteration Obviously you need to know see if MySQL commands To do that I'm not gonna teach you that you just Need to put that MySQL command in here according to the gym like conventions which me The table name must have that hash underscore underscore in front of it and do my wall Begin the prefix so you might just simply what do a mice Sequel script here but if you are making a change and the new releases 1.2.9 And 1.0 Didn't have that Specific field of view Then you must realise that You're updating this one and The update must be placed Diversion we Needs So if you make it change don't put it here Because it won't Update correctly You need to put the update Urgent And then over here You would put the link To the respective Downloads Ok so Mike here we had Virgin 2 point 9 And then we had virgin 0 And We are at the 1 Point Using GitHub as my Platform of the You could use any URL And these your owls is what will be used In your updates Server So the update server If I was to open that for us Link You see that it has this You are out here for And as we move on it 3 And so it's getting these DSD Details It is getting them From This version State area And so the last version in this List 2 Must be the same Is the one that you That is So that it will know ok now we are at the current version And it Ok so that is Basically All the concepts that would be The necessary code To cover Regarding the Component Area We've looked at We will again look at site views and Well as your custom And we will possibly Going to mod It's about this Briefly spoke about Butter Most bought that Steel Component Area And all it's nice Features Obviously it all stacks upon Bonnie Tyler from Fields than the app Views And if you have come this far Set your component Added some You are now ready to Start building Siberia Which You wouldn't be able to To really do effective It is really nice First to the And then Thank you for watching
\ No newline at end of file
diff --git a/013-dynamicGet.md b/013-dynamicGet.md
new file mode 100644
index 0000000..f6c63df
--- /dev/null
+++ b/013-dynamicGet.md
@@ -0,0 +1 @@
+Hi We still working with Summon distributor So I'm gonna use this preacher Which is a Get diary have set up here Are use that Ministration So you can see that I have This Back end View selected So It Intellect nothing This is usually how it will look When you start So YouTube Select This Depending on which Area of the Back into wanna get the data from Youth select Backend View Which is the Best way to do it I would say Then there is the Joomla Database Auction Which basically gives you the access to draw data from any other component installed that no Website So you select your Miller Database You can select any Database That Is actually at that stage On your Database Installed And that means you can reach out to other components Through this dynamic I'm gonna not do that In fact that's also an area which I haven't tested so well I You possibly might try to implement that And ran into some bugs At this stage I can't make any apologies for that since Really thing you should do is instead using Back end View Now My favourite why is the other option there Well it's because that's a future we certainly want in the application right And so I'm busy working in that direction And busy Programming so did that feature will work without any But for the most part if you don't do very complex Mapping If you just do a simple Direct database fetch like that Are you be able to use this it won't give you an issue What it really is about these other Linked Joint database structures That really would make it complex So And that my Cause problems I'm not 100% sure Obviously it did work But I haven't tested it well enough as well as I have tested the other part and that is this back in There is also the custom option Where you can just dump the whole Option of Using component builder to sort of write your Your your BHP for you And here you can add custom PHP It with The method stayed up for you So this is a custom get option where you write the code Basically by hand Where is this option Write the code for you So You select the back in view that you want to use Get that back and view Will be the the view that you could next to your component right So you need to type that you name in here and then select That package And it will load All the field names As a dot i d in a data asset ID a dog named Ali is an icon and So these are all the fields inside of this view An overloaded it will put this as Asset ID Now again I would suggest you don't change that What you can do is you can take Out Arrow You feel ok I don't need that Road Then you can Remove a row Like that And you can say I don't need the Arrow I don't need these Waited there Basically that's all the data you might want And then you will know That this would be the variable name Of the data on When do When these get is used So that's the The basic part of setting up again I need to mention that you have get types as well now the gate types have 4 of them There is the get item Which will get one item so that means from this feature table You will get one item Then you got the gate list query Where to get Multiple Items Ok so depending on how many items you want to get from the database you would select either get item or get list Did you got cast get custom And then you got Get customs that Floral And The difference between these two Is the get item Is what you will use only once per Purview So if you are building a custom at The View You will select a main get Either of a get item or either of a get list But you can add multiple custom get item Or trust and get items So You can see these as Other Methods that you're adding to the page but it's not the main method CF main methods which are these a get item and get list where we Which by the way is the exact naming of the methods that will be used And then you get got this custom get custom and get customs Which is really Is the same as these two it's just that they are not Main There will only be another method in the A model Which will bring data to the view So you can add as many custom Get custom and get customs Methods To your view as you like but you could only add one get item and you pay only That one guid list query Usually the way we were The sign on this That we would Say what is the main objective of The View What is the main dataset that we want to use in the view And that is what we will use the gate list query and get item for Respective Save the main purpose of The View It's a show preachers and a list of preachers I would use the guid list query as domain Selection here Now you see that you have when you do a list query you have the option of adding fake Nation So Basically that would mean whether the data should only return a certain number Mel July has a global number there Which you set in the system administrative area Hundred w Global settings I'm sure you that So you go to system Then Global configuration And then you see there is a default list them it Just one here And That is what will be used as the amount That limits the data being returned to the page Total owner return at this stage 20 item If I said that Big Nation to yes And if I said it to know it will load all the data So yes would just load some of it And no will load all of the data so depends on what you wanna do if you wanna do an Ajax Well you wanna be sure that all the data is being loaded every time and you rather use JavaScript Set up Nation for yourself for your for your view Then that is why you would use No switch most of the time you're just say yes And July world Sorry component builder will automatically add the pic Nation code to the page Also numatic the ad Tech Nation Go to the model And at the bottom of the page it will show a Want to see big Nation out possibly depending on The temperature using And the styles that on the page Bootstrap is not on the page that I want to 3 my possibly not look right and you need to meet you will need to add styling to it Component Build It doesn't No what style is on your page so they cannot make provision for all of that But it actually can load the but Nation itself And it doesn't Do that Ok Now hear you have data and You can join this data to other database tables And how you getting here like with the main source You're able to select Joint Views From a table A view Table which is basically the views of the component Or just any database table And to one of the database tables are often Connect to this category Z because Jim component the holder Integrates It's application If you add a category field To any View It dynamically set up a category for your component And integrates the category concept into your component so it writes all that code for you and basically the way July stone Applications like Article manager does it says using the same convention So you know I'll do my article manager is bringing categories into the articles Then that is the way your component is gonna do it as well And Here You can also lick categories You can say so The switch is off Deal with Mummy come and look More detail like this area And then you can model the date up there Model I mean decide what you want to return you don't want to return everything for But the one I want to look at first is actually this joint view Table will come back to the DB The joint view Table let you again select from any of the other views that is Part of your component And again you can select whether Richard return a single row Or a List of rose Now when you say single row it means it's gonna literally join it To this other data set that you have as your main data or your main source It will just be another Item in the array And so that's why you can't use the name Name For example here It needs to have that TUT series underscore in front of it So that it doesn't clash with the other day they said that possibly also has a value called name So then here if you say list if you selected You just select Anything you Series You see that it will get it will populate this area with all the fields that ask that is in that View Then this as Button here Basically You can't use the same Alphabetic number Why's in the hole In the whole query So No get function can only use a once and then be once and then see once D So You need to make sure that the That these are set up that you can Would make provision up to z z How many tables you can I have Only in this area So Basically you would First decide whether this row Type what type of return it will be If you said it to multiple you see that these names automatically update Because now The way that the get method will Work Is it will create a new Method Which will get this data An added into your item list Via this relationship so I'm adding the on field Is the Dot a series that's where the ID is for the series And the joint field I'm using the CID which is that one So that means in the main Database That is the a database There must be a field called series And it has the ID of the series I need corresponds to the ID in this list And if I wanted to return a multiple it means that The main database which is in that Kaizer sermon Can be linked to multiple serieses But in the system we are working with here That is not possible you can only Connect a sermon 21 series So that means it's only a single return Then it will immediately add this Series on the score in front of everything Do in Surat doesn't clash with your a table That's What It's basically doing Again you can remove the fields you don't want but Please do not edit The string It possibly would make it break I wanted to be possible that you can change this name to anything you like And we are gonna try and do that eventually but for now it's still doesn't really like you doing that And it it in fact you can be changing it all still I write it this way in the code that's That's part of why I'm saying you shouldn't change it now because it will break something but because it will be ignored and you might be Spect something else Then what it is actually doing So it still is gonna use this The implementation even if you change it But it will drop the fields you don't selected you say I don't want these That Then it won't get those Fields and you will only have this data returned And Begin here you can have equal Not equal Equal or not And Do we also have the in function That means This joint value Sorry If this on field Is an array Then you can use the end function To meet make sure that it Actually looks weather the ideas in this That's the in function And again Remember when we started out I told you that you need to be willing to get your hands dirty Now This code If we go to the compound and it's self I'll show you where it writes this code So Let me scroll down to the bottom here And let's see we're looking into sermon Picture ID Now we'll still get to why it says preacher ID When we look at the photos and the where Must go to the club No you can actually see I'm gonna refresh this page and then go to the code Ok so since this get is used in the front Of the component we will go to the front end and not to the admin area So we go to the front end Of 7 distributor And then we are Looking at the model right there get it Dynamic gate is used in the model to get the And we are looking at sermons You just make sure that Yes it's sermons Getting a list query and it's using big Nation Getting all this So Looking at sermons Sermons on the Under the preacher I researcher be this model Also you the way that I know all that But just that I could get you the code You can see Domain Method Which actually has this dot ID Domain Data set value method It is It is written here Siri can see it as it ID name ideas link types or description If you look at that You are it says the same thing Icon preacher series category ID So this is where it writes it And it shows you where in the papaya lyrics Number Then it sets up the Second 1 Series CC And Then You can also see it says series Equals CID So series There is series Equals The sea This table series ID And then it also tells you what it wants from see it once the name and the ugliest and then it wants a series Changes at the series Since this is in the select Query this is one There And So that a Rey And Transposase to disarray That is the way that you make use of Joomla Database PPI So it has a thing called quad name Which you can pass to erase And the first array being the actual Name of the Value which in this case is name and alias And the second array What you wanted to be once the query is for So that links this into the the query One-by-one See all the rows even the category 1 is linked in here And then It doesn't check whether there's an ID And if it exists it takes whether it's a string It was a string it answer quote And if it isn't if it's a number It just answer directly That is where Where is done And URI basic return false if there is no ID And so will look at this area in a moment this is done To the filtering Underwear Ok So I just wanted to show how it adds this Preacher as well as series To the query Look at the back Open up here You see that series And preacher And statistics but sisters sticks You see we select Multiple statistics Because for one 17 There can be multiple downloads right So there's multiple statistics Oh sorry not multiple downloads multiple files And per file there will be a a a number So if we look at how we does that It is first does the query and hearing get item It actually Adds a new function Called Get ID sermon statistics and with a With a random Key To ensure that it doesn't conflict with any other method We had to add this random key And it puts it into this variable and that something that you need to Come and look at And Possibly when we look at the the site Layout area as well as the tablets I'll be talking about this transition here again And the fact that you need to know That is in this variable And I'm trying inside of your layout and your side Use these things I'm trying to give you the correct name But it is not Water type correctly Possibly you need to come check this if it doesn't just work Begin all explain that when we get there Listen to No We're adding the sticks into this variable through a method which is also on the page and we passing the ID Of of the sermon So if you look at the car there you are This exactly what you're saying here We saying Ok gets a district multiple Went to the left Can you can select any of these And then Use the main table table sort a ID Must be equal to is sermon And then this is the only values I want to return From the east sermon So the Easter - is this value here Gay Samsung 8 ID must equal is sermon And then if you look at the code It basically if we go to this function we should be just here Thanks that ID And Places that next to his sermon Wizard into its place Basically also here's the two arrays what it What it is in the bass and what it And Ajax weather in execute checks whether it's got any erase or any values And then returns that is an object List And that the gets placed inside of this Space and sign here Now you would see this area here Is actually custom scripting So if we go back to the dilemma get you see that there is a custom script area If you click on that You see that there is Different switches You can select Get list query Or before getting the items After getting the item If you select after getting the items And you place any code there Then data gets dumped right after The initial items with Received It will it will add that Code in there and then only week The item So that is why you can model the data Right there in the dynamic get You gonna write the code For the data After it's been get And you can check If I remove this Cody Ritzy IT tells you that there is an array of items Where all values are And then I'm just saying I want to be sure that those items are set and that they are there Before I start doing your 4 it's on then And so get here I'm using Some double You know the street bracket component helper functions The Strain is there So you can dump some nice PHP Even before getting the item you can add some filters or get list query Before the if you if this is model list If this is item You see that Then there's a different set of Switch is available And so it Adjusts to To the type of Query type Ok Coming back to this area Let's again look at the database table option Basically you see I selected category and it's a single row that Sue turned I called it be You wanted left and I said hey Cat ID must be equal to be ID Which is the ID of the category The only one The title And the Elias So that is Are we set that up I need a title in the Elias And it returns that for us Then It links it in there and that's part of what you saw here You looked at the query Basically the sex section Now let's look at the filters You see where I'm a filter And where ordering and setting of Globals Number setting of Globals Easy we have a value in this query That you possibly want to use in a custom query which isn't even Setup yet but you want you know I'm gonna need this value in the model Then you can through this Global Action Gear You can set a global Again here you should maybe taste it There is an option of using this and State When is the different type of Set types You can set the value to state or you can set the value to this And Yeah you need to know Wiki so So let's I wanna do the name Obviously and this case is not gonna work ideal Because you got more than one name So you see this Global function only functions well When your house is returning a single Item so when you only do get I did not get list query But you do get Item Then this make sense and then you can give it a name And Due to the global Scope of the method The models are there Which you can enter actually access through other Model Methods Which are custom Methods Ok so that is setting the global The filtering You have a a list of possible filtering So Depending on what you wanna do You might select ID or user or access level or group or category Tags date Some of these are not really well formulated yet like date doesn't work that well yet But can't recruiters user group access level user and I need as well You know this function value of variable works well as with Array Array value repeatable value another All those already work very well And you can already use them and Implement them Now the only way for you to really Know exactly how it works you need to know little PHP and then you need to Violet and go look in the code what it has done and where it's placed what And that Is Why I showed you that this is all set in the model Ok So currently We are saying we wanted to 8 to do a request Get input your by ID So this is the The gate area that I added The code it says State the key Here SI unit we said it is a function bearable So it doesn't a change or adapt this at all And then says it must be equal to preacher So what we are doing a system component that doesn't know where the this variable is gonna be a string or integer That's why we have this function which first checks whether it's a string And then checks whether it's a number And related and built-up the query respectively You might feel that is too much and Possibly right But that is the only way I am And 3 more developers involved My possibly improve this Then you see there get Early Access Now we have a bunch of values that fire every time in a custom Dynamic get And it is the these values An orphan x you you might need these dull use So instead of you Having to do custom scripting to get these values on the page We had his values dynamically every time So the user ID the group The authorised group the access level The app and then the input values Which by other URL post He's on the page And it tells you that it's been initiated This is true so that if you have custom Methods Like this one Preacher It takes Weathered it's been set And if it has been said it doesn't say that again it can just use it But if it hasn't been set it sets it and also get in Sesotho So DC meat Necessary variables Global variables Can then be used inside of the coaches like the global variable we spoke of earlier Ok so Out of that Global variable We are Actually accessing This levels I'm sorry it's just one here Which basically has the gate use offer get authorised you levels Of the specific user That is now Uno accessed Model or the view that this model belongs to And if he is in these access levels So you remember that public is another access level And so if the user is inside any is a public it will this will validate true in the query Ok so We said that up simply by adding access level In A access So you must check in the Main Source table For a 6 a access And whether this user is in that So that means you don't need to add a state to you because The code is done for you Ok That's That is some of the filters Venda wear Is so you can add any table p Equals to a certain value Value could be another table Rugby field We could even be a global variable like we said we could set up So you can also be an idea user ID now you use the ideas already On the table so it could be Just user ID And or it could be like we've done it this case just an integer which is 1 So we wanna make sure that all the Sermons returned Is published And if you haven't I'm probably so many shouldn't even Return it all Ok so That's what we doing with that I am Dad is setting up a get list query With passion Through this Ordering method we just saying use the a ordering Anna send now you can order all the items Just as many as you like Be sure that the table that you Audrey You could even use a name right So could be a name As an ordering Table key Then it comes to it a descending listening Then it would be added to the query Ok That is also added ordering To the data set From Your Dynamic get method I'm so here with the joint view tables you can do very nice Dependency Calls From other tables in the backend And bring the data together into one items array That's basically what Dynamic get is for That you saw We have A The normal what I call main source on the table On the 3 in the model And then we have this other one called get preacher So That is another Dynamic get function which way Looked at Scored this one Get preacher Open it We see it so it's It's a custom Get custom And we gave it a cluster name called get preacher It's relationships So it is basically having No Relationship there Neither here so it's It's not linking to other tables It's simply getting the preachers details Right there Simple as that But it has a filter which is basically using the same entity And I access levels as the filters It's also using a where I suppose yes published and it doesn't need ordering Because it's just one picture but I know the less added the ordering I could actually delete this And it doesn't have any globally settings issue that is baguette preacher and so from the This settings here I don't think there's custom scripting nope prob this settings here Opponent builder right right solders code You see that we have this function everywhere called you like it cold and And then we using a global method a static method get you Do I get calm it's a method write build if you know you like it if you don't know it go to get UI kit It's a It's a JavaScript Library CSS JavaScript library which really makes modelling of your views very nice And it has components that you can use So like her tooltip and modal All these kind of models but Gordian is another component And we don't load all of it's components every time so what we've done is we've Written in PHP a method that looks at Fields that are text area fields And normal text Fields no mostly ok it's not Not looking at every field is only looking at the exterior Fields and editor Fields so in in this Component we know that this description field is a Editor field and so we are sending it to this method then you can go look at this Method Method In your helper class so there Because they use the method so So it has the classes that already has been identified which is what this Initial this component area sorry Field name field value model field null value is actually holding it Holding any component names that already has been identified this gets Fast also here with the content then we check in the car and whether there is a class UI UK on the score and if it's not false we we start looping to check what What what are all the components that are in there and here is the list of the components that are available So on the fly we are determining whether these components should be loaded just by Looking at the content that was placed in the description field and then we added back to the Array so it updates this eventually you have an array of All those items and in the view we go to the view Which in this case is gonna be preacher We open the view dot HTML We get to a place which basically everything is gonna be happening so These are of the components that go in component builder compiled that Ocation it looks inside of the content of your site view as well as your custom admin View Anita dentify that these components must be loaded for you and you like it and so it plays Places it here dynamically but since you could've added some components inside of the script that Restore in the description area it now has this get you I could component which piece base Ridgebacks back into the model and in the model gets this Variables value through a method which is here at the bottom of the page there Get UI kit component basically through this method it is reaching in Into getting that array and once it has that array we basically check whether it is set Whether it is an array and it it is under a we we said it To The Raid at is already on this page then over here we loop through that array And we load in those components CSS and JavaScript as required You always can be sure that the UI kits needed components will be loaded on the A user adding some of that components to its description as style Because the way you like it works as you just like Bootstrap you just Add the class name To the specific div or tag html tag and then it you know Activates the needed scripting a rounded which is a nice library but it's Quite heavy and you don't want it on the page everytime I know you could have done this through JavaScript You know it is fact they have a way for you to do this through the JavaScript but to me I fell Let me do the work in the html so I'll believe the load on the on the server And that the browser already has much more Leverage Freedom so that's why we This feature this is maybe Beyond the scope of the kid the dynamic But since we ran into the right spot you can mention it here ok so it is all Also placed in the query that is developed by the name again that's by Park you wear Fits so once you've got your Dynamic get set up you now add these don't have Gets to either side views or to admin custom admin use so these Dynamic gets his what What gets did they die for you and this where you model the data that you want to work with and you can then Use them inside fuse in custom at The Mews now next up we will look at adding
\ No newline at end of file
diff --git a/014-Adding-dynamicGet-to-a-Site-View.md b/014-Adding-dynamicGet-to-a-Site-View.md
new file mode 100644
index 0000000..8534e0e
--- /dev/null
+++ b/014-Adding-dynamicGet-to-a-Site-View.md
@@ -0,0 +1 @@
+Hi now did we have to learn him and get him Place let's attitude Side view and look at the initial implementation who go to side view And then click on new but since we already have That you created we just gonna open it or preacher You see the deer on the right-hand of 3 Fields that you can Populate with your Dynamic get methods the first one is where you would add All the custom Dynamic gets and there you can add multiple custom done in me gets The second one is where you add your main Dynamic get as we explained in that Tutorial you can add 1 Main get method per View a site view since it's gonna be billed in the model Either as a get item or a get items it is all depending on them Main gate weather it's gonna be a list or just an An individual item Yet you can include Dynamic Gates Custom Dynamic get as many as you like You also have this data available in your view So these two first fields are used to load The Dynamic get to love you The third one Is used to display the possible way that you might want to implement The code of a specific Dynamic get option You see that This one only displays Possible main Gates this one only this place customer gets Where is this is this place both The custom and the main kind of Gates Now If you select a Hey ya My girl let's go to One of these Main Gets Sermon This one here You see that it shows us A list Print out of the possible ways that you might Use the result set Obviously each of these are properly you can copy by clicking in it and then clicking on I do right click And Copy or you could click on ctrl V Pokemon The Sorry ctrl C in command C How to copy respectively the accounting Sometimes you might only one of use part of it and not the echo statement included Then you can pick from the area where you want to copy and then before letting go Click on control C or command centre Mac 2 Ensure you only graph that section of the text Once you let it go it will select the whole block and then Obviously if you copy it you will copy everything As you can see We then use that This code in our default View To to display the data In a PHP Fashion You can also get the the customer get here let me show you that one picture Like you see it says that that Values gonna be in this preacher And if we look here at the top that is what we check for checking for here Make sure that you have a Preacher And then this block Basically deals with displaying the data related to that Information This one here Checks whether the main items are on the on the page and now the main items as you can see Is sermons preacher ID get list So if I go down to that 732 I get List You see that again it shows me that the values are in items And it's in array So I can look through it and target the the object values And that's what's being done here We first checking whether it's On the page the values Then If we see that it is here We use make use of templates Do Do display the various Layouts And I will explain in an equatorial how to use templates in layouts inside Of your site View But this is just quickly showing you how to connect A dynamic gait Structure Methods to your view And then how to make use of the data that are being passed through to the view So this data structures here on the right in grade Is basically the the data structure that you can expect From each one of these so if I was to take number sermons As the deer Method that I want to see Then it shows me that That's possibly the way that it will be packed into the data set So it'll be found in this number sermons is how Now that could change Depending on your customer Limitation In your components custom clothing areas you might move this data from that Position to something else But the reality is this at least gives you how it would have looked without you You know I'm leaving the The normal Pass So this is just Proposing the dataset structure Which ideally would be that you would take this value here And Maybe do do this in the code Do a bar down And then exit And then Basically do a build and go look at this view to see exactly the structure If if you are finding that this the structure that we've shown isn't working exactly as a Often this helps us To sort a map the array and see where What value is found same goes with any of the other You can just grab that area That you want to take him to Put it in the Vaal Dam Do a bolt go look at this page In the in the front of your site And you can see exactly the structure of this The subject here Whether it's an array and array with objects or what Is placed inside of this value set through the dynamic get method Now I just want to quickly Pick up the Way that these methods are actually becoming available in your view My going to the code And you looking at Some of the implementations that we've done Ok As you can see we've gone to the front of the site Salmon distributor Models And we've opened The preacher model Use the printer model And As you scroll down you see that there's a get list query This get list query gets sermon as the a Table And then Series a Stacey table preacher is the D Categories is the Sorry CDP Is the B table And then it looks for a value An ID And then Set it equal to preacher And in sure that it The prison has access level 2 the item That's published And then returns it So that is the Get List query in the model Have you go back to our The face you see that we have Cement pizza ID get list as the main And I've opened that Dynamic get here Honey where is it Uranus And you can see that Sermon that is a the main the main table Then if you open here you see that series a sitter see they only looking for those values Preacher said is d only those values Sadistic E But it's a list Multiple These that are single are part of the list we re where is the multiple of it will have its own object sorry it's Method Look at that booty And then We see in the DB table That we have category a single SB Only does values So going back to the code This is the get list query in the get item After we have received the items We look through them And then in this function here get Sermon statistics and then a A generated string Randomly generated string to ensure No conflicting with other methods on the page Puts the values in I ID sermons statistics e So that's where the values of place And then basically we have a custom Method here like be shown in the dynamic gate you can add custom methods And then returns the items to the page And in the page You have a A file That is called View Dot PHP Sorry dude HTML dot.dot PHP If you open this way File you see that there is a get items Method being used to place the items in items And so At the moment we are actually interview at this stage And that means you can access This set of values Inside of that Class field And so if we go back to our Component Builder You would see if we were to select That message There there is the items Corresponding to our code And so we know that the ID in the acid ID in all these are in there if you scroll down You see that there is it sermons is too sticky see it there So that means In the array there is a P value Which has another set of array values in it So you can target these data sets Buy Cars Responding Waiting Values So that is just looking at the main gate Now if we were to look at The other custom get That is been added We'll see that here's preacher Witches and price them get No custom method That is been added And It also has it said of Values and it's database structure and member we said that we wanted to be Link to the preachers ID So get checked for the ID And then Set it to ID And returns the result Same goes with the number of downloads It's also custom method That said To this view because of the custom get that was added And here is the number sermons And we go back to our view dot HTML dot php file We see that those values are respectively being added To preacher Number downloads and number sermons And you can actually use these values in the view by by targeting with this number Sermons Now the view itself is As you should know inside of Two template folder Under the fuse preacher And this Main View as we call it all the default view is where that code that we on the page that we looking at right Being placed All these others are the templates that are extending the site View And they possibly are extended through layouts that are all available in the layouts folder So We are we are now just looking at adding The custom get methods to the page in our next to tauriel Locate depth about adding templates to your Custom Camp Site View And making use of these data sets So That is how you link them your first create the customer get then you come here you link these So these are the linking Fields and these are just so that you can see the code snippets on making use of these fields Respectively And That is custom Gets added to side view Thank you for watching
\ No newline at end of file
diff --git a/015-Adding-Templates-and-Layouts-to-a-Site-View.md b/015-Adding-Templates-and-Layouts-to-a-Site-View.md
new file mode 100644
index 0000000..6fbaa5e
--- /dev/null
+++ b/015-Adding-Templates-and-Layouts-to-a-Site-View.md
@@ -0,0 +1 @@
+Hi Now that we've added a dynamic get 2 A side view And we have looked at how to access the data sets Through the Examples snippet We need to understand How layouts and templates Link into site views Is it good to know What is the site doing the code And what is the templates What is the layout In the code itself And how This to mulalo distance Well If we go to our example Phone and Sermon Review te And then View And preacher Template Tmpl You see that there is a Default File Mac PHP And there is a default on the score Retail Box Feature panel Richest Mall the PSP files A list of them Now those are all pamphlets The reason why we call them templates It's because of the method by which they are included into the default File Default file is the main file And That's what we call the site View So everything inside of this file Is actually build In the side view so let's open the site View So all this code here in before View From here to there Is added To that default File So you see it says default View And the way it adds to templates It's with this snippet or that says this load Template Preacher panel And you can get these nuts At the bottom of the Site View So if you were to scroll down You first with see the layout Snippets and then after them that template snippet And scroll down to the one you have Maid Looking at these names And then here Is a Preacher grid List Table Panel box Small So That is the snippet that you will use You might sometimes Change the way Boss please stay in the PHP instead of going out HTML So by the way that is what is happening up here If you look at the code From time to time I go out of the BHP I go into the PSP with that tag And I go out of the PHP with that Then I go in again may go out again And then I stay out that I'm Basically in HTML So here is Your HTML And Then Ok this part here is obviously Uikit Class and the implementation And then I go back into PHP And I go out again and ears HTML again So that is a way that you can work with H2O with PHP Interview I'm sorry forgot look at this in the code And be open that default file I see that exactly what is placed there So basically End with PHP there Then we go into PHP again And here is the same text that we just looked at in that Editor So that takes gets placed here and then it through these Snippets it includes the template so basically I'm using a global setting here And I'm checking now this Global setting is set in the components Global settings And I'm checking what type of this play has been set And then on the basis of that I either show this template That one All but one Template view you have access to the same Global Fields or Class Fields and public class methods As you have in the default View So in the default view we have access to this preacher but the same is true of Pamphlet design templates that I've just opened And you see I'm using the same this params Here This preacher website so I am using the same Global Class Fields values in Zone how you wanna pull it And that that is true of your templates So if we go back to our Interface the way that component bargain knows that it needs to add this template to To this site View Is simply because of this code snippet Cheap places code snippet in there and ill go look in the template List Tampered with this name Enable simply add it To that site View now when I'm in AD I mean Added to this Template with the In the right folder So You can you can by doing that At your Templates to the site View And will look at setting up templates we also look at setting up Layouts layouts work a little different Let me see do I have a layout here in this site View It seems I'm mostly using templates you can use templates and layouts in the site View I have just used Templates mostly it seems And that means that possibly the layouts I've used in the templates View But if I wanted to add a template sorry a layout to this view Without doing it inside a template which doesn't matter it's just a way of bundling yours Scripts in a more concise manner so that he doesn't be overwhelming When you look at the code but that you have it Broken up in pieces The layout structure is mostly used When you are dealing with a part of the display area That is used Cross Other Display areas So if I usually used the layout structure The moment I'm using a piece of code In more than one View Or in more than one template The reality is you could You could use Templates inside of pamphlets You cannot use templates inside of layout But you can use templates in soap Amplats And you can use layouts inside of layouts But you cannot use templates in layouts I know but these are all conventions that are set forth because of the way to Miller implements the structure These are not limitations because of component Builder This is just how to analyse it it will allow you to add pamphlets 2 The default Side view But It will not Allow you to add Cite a templates to a layout if you just scream at you And why Well the biggest The easiest way to put this Templates Have access to the global values All the class values Where is layouts done You need to pass lay out the value that you wanna give it Now that's important Point because if you look at these Snippets You see that we're just passing it this item But you can even pass it just this Or you could pass it A specific value You have your custom classes And you can pass it that specific value From your custom Class It all depends and when you setup the layout You have an area just like this what do you select The The Dynamic get that you were using in the layout Now that is not gonna add that I never get to your side view What is a model It just helps you to see the Snippets And it helps us to set up The snip it for you So if you've selected the wrong Code here In your layout we'll talk about that again when I get to layout It will actually just changed the way it looks here But you can always be override it you can copy this Snip it like that Put it in your code where you wanna use it And then you can just change that Area that Is passing the information to the layout because the layout has As it got access to the to this And so you need to pass it through it The values that you want to use in it It will still look at how how exactly that is done and possibly Spineless again but just script Basically renders a layout And this is also how component builder knows it should add a layout to the component layout folder And Eduze it looks for a layout with that name in your layouts list So you need to have these layouts set up before hand Before you can include them In 2 other Views and Tablets And do note that the layout concept and implementation Together with the template is the same in the custom admin View It works exactly the same And just by adding the snippet to the default View Component Golden Arrows it leads to add that layout to the component and knows at least Add that layer template to that site View Ok so that is adding Site views Sorry templates and layouts to a site View And Looking at the code seeing ok so Component builder builds these site views because We look at the default View They are actually Loaded here you see Creaturebox and there is Beauty box This preacher panel There's a panel There is Brits Mall And there is pretty small and there is Table grid list and there's Table Bread and So that is how you can Add your code into Smaller chunks And next up will look at setting up a template And Making use of this implementation Understanding the difference So That is adding
\ No newline at end of file
diff --git a/016-Template-Setup.md b/016-Template-Setup.md
new file mode 100644
index 0000000..48e5c68
--- /dev/null
+++ b/016-Template-Setup.md
@@ -0,0 +1 @@
+In a previous tutorial where's your dad setting up Of Templates and Layout to a site View Now inside of the side view we see that we are loading preacher panel Pictures small Betamox Song Let's go look at how to create those templates I'll go to templates And here they are already created You can click on new to start with a new tablet You could also copy an old one By selecting The temperature Chicken mash And then there is a copy feature here And process And it'll copy it for you Ok so Yeah I have Peter panel open Improve panel it's the same concept it's an HTML area so if I wanna use PHP and Into the PHP And then I can go out again And I can also add this text placeholders Which helps us to insure The text itself Is translatable You can just do your normal English text like that sermon count Sermon total downloads And Important Bola what these things to the language file for you And You don't need to be concerned though at this stage only does Your British English language file And If you need to add more languages You need to look up the documentation of adding languages to a third-party extension And To that same implementation K so here we see that you can add layouts To this template by using any of the Snippets I saw this tablet to this Wealth course to this tempted And you can add other templates to it So you can use templates inside of templates And you could have use layouts as well so more or less the same behaviour as and site for you You also have your snippet box here Which you can make use of adding Script quickly To your page Like that would Fresh We see that that script that I just looked at here In the preacher panel If we go to the code feature and all Is exactly the same script that you seeing here Ok now There are a few Sorry point here missy One of them is a side note is that in your details tab In the template area You're at the bottom You can add JavaScript With your normal script tags So you can just add your JavaScript in there And It will work And be loaded into the page Through the snow snippet That's That's a nice Thing to know As wellness You are still have access as I said before Do all the global This field values Like to see there You can access those What is Lea And that is basically how to set up a template Is the same kind of conventions as setting up a site View Except that this is not the main view it is a tablet used Somewhere in a name and you through Adding this code snippet With Joomla class get Pamphlet Method And Then Basically this Load template Is the method That is being used with that name And then it adds it Do your component site you as well as Ask the code to it So that is a template next up let's look at a layout And really get excited there
\ No newline at end of file
diff --git a/017-Layout-Setup.md b/017-Layout-Setup.md
new file mode 100644
index 0000000..351d961
--- /dev/null
+++ b/017-Layout-Setup.md
@@ -0,0 +1 @@
+Ok we gonna look at setting up layouts now And we'll setting up layouts you have Some nice ways to reuse code across multiple Surf templates for or site views What are the things that I found is that I would like to know which tablet or Not Not really which tampered rather which side view Is actually calling the layout So that all the bases of that I could use Global settings That are related that specific site View So what I've done is I've just in the dynamic get I've added little string Since it's Dynamic at Target only a specific site View So if I was to open Sermon preacher ID Which is primarily gonna be used in Preacher side view If I look at the custom script You see that I added a view key called preacher And by doing that I know ok since this Dynamic get Is only used in the preacher of you That when the layout is called and I'm in my component I'm only passing The item So not the whole list of items but just one item To the layout That helps me to know ok this this specific item is calling from preacher And I can on that Basis You know do certain implementation To ensure that the layout displays in the way I expected So that's just a little heads up on making your layouts even more Dynamic Then going to the template We will open Your The layout Sorry the template that calls the layout so we wanna see that initial setup I'm one of the templates that really Illustrates this very well Is this sermon list So I'm gonna open 7 list Can someone list you see that I'm looping through the items And then I am I think so Some parameters to the item Object One of them is the Proms the other is there I'm taking the description And making sure that it's you notice Cape and no longer than 19 karat 90 characters And then I'm adding that back to the description with Out And I'm done adding that item To the layout Study class renda Layout help J layout helper Render Website list item As the layout name Sorry sermon List item Ok and that basically is gonna populate The Script window List items That is gonna be placed in an unordered list on the Sermon list page Ok so now let's go look at this specific layout Layout helper Sermon list item So In layouts Look for sermon List item there Rio I didn't summon list item You see that I'm using that Global The item that is being passed is placed inside of displayed data I'm so now display data is basically The item object That's inside price Place the parameters in it so I can use different Get method With the specific Global Field name Who said in the components Global settings And since I'm Targeting a specific layout Sorry View I'm using the Vue key Adding it to the string and shaking what is the value for this specific view in the global of the component And On the basis of this I'm actually able to make this view very dynamic And can use it through multiple layouts Based on that View key Now I know if others want to use the layout in their components extending this one it possibly You might work that well But since we are using it for our own component And really far only implementation I don't think that's too big a deal And At the same Token unable to check Simply what is the view key is it preacher series of category in on a basis of that I asked if Questions that have different in Menlyn implementation of of certain Values like series name preacher name And there is another Convention that I think is very worthwhile mentioning here And that is the convention of actually In the template We go back here And we go to custom scripting There is the S View placeholder Su placeholder Will be replaced With the actual views name Necessary using a template here So you see this is a template But this sermon list That one I'm adding that template To multiple site Muse So I'm not just adding it to one side view I'm adding it to multiple site views But since I want this template again to be Dynamic so wherever I add it I I want it to dynamically Add That side views name here And then is as you can see I'm actually asking The global parameters For that site view sermon list style So That means Is grits gonna add For example preacher there or it's gonna add series there or is gonna add category there it's only the Category sermons the style or it's a and let me show you that in the car So now I have category open I've got preacher open as well as series And you can see That I'm adding sermon grade sermon list sermon table to the mall SIM Android sermon list surman table Simon Britz sermon lemon table But if I was to open Summer list in series You see that that name Strange 2 Series If I was gonna open Sermon list in preacher You see it was changed Preacher If I open it in category You see that it actually added category And that means that our Little Place holder Was dynamically updated by component folder on the build And then It behaves as you expect now That you would know How how is it how where is it getting these values If we If we go to the component in the backend And We open it's config File Double scroll down We get you an area called preacher custom config Which is again this is a tub And taps name is preacher I need a time We have these value preacher display Witcher Box can't raise Peter list style And we scroll down we see pictures sermon count Peter email Peter website Temperature sermon display And preach a sermon list display No I would take that sermon Lister spray And then search for it Frosty The file save make it Cap sensitive Reseda that has 6 matches So that means there is 6 places Actually 3 Because one of Each other 6 are in the comments What is category What is series And one is Preacher So those are the different the three different views Let make use of that Siri list style Now the Siri list style Is there an being implemented On the basis of That Dynamic updating of the string here And so it's simply getting the style Then doing a switch statement and setting it accordingly And that is Another nice To have tool To again make a template More Dynamic so you can build a time flirt And you can reuse it in multiple side views Simply with this place holders Which is called site you should have mentioned that hinder templates Explanation But since we only came across it now I mentioning it here Going back to the layouts Your layout Concept is more or less the same as tablets It has a layout area and would you put your script and you can see We using that Placing You can see that if you select certain Dynamic gets wee-wee take the Liberty of showing you that we are starting with this play data But this this Snippets hair Might not correspond what you're doing because you can really pass anything to a layout And we are just assuming that if you are using that then Ima get you possibly passing it in this This way that way So you can't just copy paste this necessarily But at least you can know when you look at a specific Dynamic get here What are the values in it And you know how you can sort of try figure out Which wants to use you This again will be only really Something you need to use If or can use if you are actually aware of our PHP and Everything will Do the implementations here And if you do not if you're not that familiar You don't need loads I mean you can you can build your whole front and writing your side view It might be a long laying free scrap but it still work All the only reason we added layouts and templates is simply for our for Empangeni ANZ And if it's still confusing to you you can even if you skip this whole area For the meantime Beginning layout you have the same concept of adding custom scripting Which will be placed in the head of the file And remember that your Global data store in a data being passed is in Display data And then here again you have your pets HTML area But you can jump into PHP and Check the sum values and then on the basis of that to your certain implementations And That is really setting up a layout Just another note you can actually use a layout in a layout And you can pass it values Has any value you like I realised that this year is maybe not that appropriate So you need to keep a heads up that This doesn't exist on the layout page You need to use the Display data as the global Where's the main Object from which to start your your Your imitation Ok that is layouts thank you for watching
\ No newline at end of file
diff --git a/018-Custom-Admin-Views.md b/018-Custom-Admin-Views.md
new file mode 100644
index 0000000..0910c5a
--- /dev/null
+++ b/018-Custom-Admin-Views.md
@@ -0,0 +1 @@
+I need to have a quick look at custom admin views They do have some nice ways of doing things Very similar to sight views But some Aspects and adding a two component builder is different And so in the next video We will look at adding site fuses well as component Custom admin Views To the component The reason I didn't speak much about the custom admin user simply because Summon distributor is not Using Custom admin views yet Where is I have another component here I can use as a example Called component It's cold Waited Sia Cost-benefit projection It's a It's a tool that is used to show companies the cost benefits Of intervening on certain diseases and causes in the company Anyway In it we have what we call a company results And combined results Respectively used To display custom data In the back in of the component 2 to the 7 different The people who has permissions to view those data Now in the component itself If we clicked on companies You see there is an icon on the knees each of these Names of the Companies And there is a new button here the top called combine Results Now This button as well as those buttons Are dynamically added by component Builder And in the next week tomorrow I'll show you exactly how that is done What I want to show you here Simply how a custom admin view will look So I'm gonna click on one of these these out this is all dumb information so So you'll see me Let's open this one Now basically you have this big area where you could put a lot of HTML and PHP And you have some custom buttons that you can add on show you that And then So all of this in this white area is simply done in the custom View So if I was to click around I've got a menu here at the side All of this is done inside of the custom Area Of the component Which is the other Custom admin View And That is basically how it will look Different Value sets And you can from here and an edit button Since we've linked it to a specific client Our company or one item in that list We can actually click on edit From here we are riding to the company's data And edit it And What is nice if we were to click close the year You actually take us back to that Exact result page And you can then go and look at The implementation What you've done Is it that is just simply showing you how a custom at nephew could look Let's go back to the company's list or we could go back to dashboard Download component Builder And we looked at discomfort company results we open at 1 And here is older PHP and HTML On my page Doing all the work Adolf course As you might expect I'm loading in a lot of templates here So I'm loading in templates Directly From here And Then I have a custom button area Where I can I can say yes I want to add custom buttons Then I click on Custom buttons here and you see I have Icons I can select Cornet The name of the button And a controller method Which I would like to use to actually make the button work so in this one I'm saying go to company This one is edit company And So I should say Is is this gonna What What kind of Target are we think looking at Is this a A single a list or both And you said that respectively And Then you click save this only saves it to the form not to the database We should have made that done But this is the tumor last way up in committing it And now you have to add In the PHP controller method Add scripting 2 respectively implement the buttons click Method You can also do the model So in the controller You can add script and then in the model Add scripting which is called from the controller if you want to separate your code a bit In the in the and if you're not gonna be adding Any script to the model Just add 9 Movies to Spaces in front of a wise it might scream at you that you Script there And as you can see the go to companies as simply Taking me back to the company's View Where is the Edit company Implements the German horse convention of opening an item to edit it By the correct channels so this is just At work here And we are checking a token and all that So do Miller Bodybuilders sets of all the tokens and everything So you The snippet you can reuse for your purposes if you want And obviously we have an area for Preston scripting and as you can expect There's a lot of practice custom scripting Going on In in that View And it has its respective places again if you wanna know where what's happening at some snippet here Compiler components search for that snippet and you'll see where this comes up If you not certain by the naming conventions refused And that is really how you setup a Hey admin custom admin View To look at the other one Let's close out here That is the combined results View Now the combined results is this one up here if you click it now I will tell you this we need to have some item selector And then you select the items and click There again And it will do a combined resolve Taking both companies And Adding it's data together And giving you a nice layout structure Of office that assets Ok That is really the combined concept If we go back To the limitation of it It looks very similar is the other Again just a lot of HTML PHP here And then Also some Preston button is again just going back to companies And it's really just same implementation B card companies go back single And then some custom scripting And that's how I set up both of those custom views What simply Adding that the data here And then making use of the templates as well as layout implementation in both of these So you can set up layouts and templates and Only use them and side views But you can also use them in at the views Now In our next tutorial We look at how to add side views and admin views to your component Since there are some differences And you need to be aware of them
\ No newline at end of file
diff --git a/019-Adding-Site-Views-to-a-Component.md b/019-Adding-Site-Views-to-a-Component.md
new file mode 100644
index 0000000..850cdd0
--- /dev/null
+++ b/019-Adding-Site-Views-to-a-Component.md
@@ -0,0 +1 @@
+Hi Now let's look at adding admin views and side views to component Builders component And looking at all the different switches and the nice features that we have there So first login here They may have component builder open on the component burger And then we will go to Finance And we will open Some industry Tributo And then go to settings And then settings you see there is a place for admin views we're ready illustrated adding the admin views Then there's custom admin views and there are side views I do wanna look at those now so I'll just click on add custom admin View There isn't any added to this component because Sorry 7 distributor does not have Customer reviews But I'll illustrate it in another component for you Land site views It has quite a few You might sometimes open it and see That some of the buttons are not selected Although you know you selected it previously and saved You know now doesn't show This is a glitch and In the July Zone JavaScript for whatever That is causing this and so the only way I have found to solve it as yet is to send Open Like for now you see the app and do the same So if you close it and open it again It has it all selected This is a heads up keep a look out for this because if you make changes and save it with those Your build will Not include those values Since it will be stored is now And Yeah you might get unexpected results So voice make sure that your old pics are Place that just a heads up Something I can change the state Laughing Repeatable fields Ok so if we go to side view And we just Closer again Open it again You see everything is selected You see that it has 123 Four options here Obviously here you select the side views Just add as many as you like Then add menu means that this side view will be added to the admin you Aspect of Joomla Erase you go to create menu And then you go to admin you Item Then there is a select Type and when you click on select type then there is this list Articles and whatever I do say yes there you'll create a XML file Which allows Similar to notice that your component needs to be in the list And the XML file will look at in the moment But that's just do know that's what this Switch here admin you does Add metadata means that Page Is gonna actually make use of the Net the metadata That is being passed to it Usually that means that in your model you've set up your data So that there is a Metadata in the items array or in the Yeah in the item array or in diverse array Either Bye-bye The global setting or Why are the actual item So this is meta implementation You even if you said yes yeah And you did not Set up the data in the in the model Correctly it won't work and the way for you to look at that is obviously clicky is here try it The best setting up the data the model then compile and go look in the view Data SIM Albert php file to see how it grabs the metadata because it will still add The Script that is needed to load the metadata into the You the document But if it doesn't Grab it correctly Then you'd see that as well Ok then Whether you can only have one default View So don't like more than one too yes What to do if your view effectively is is that sometimes when You make a change and the system doesn't know where you wanna go It actually throws you back to the default View Now that before view could I maybe your sites default view being home page Or it can be if your in this component it could be for example on this one it's preachers So Let's say some of these views you you said that they don't let us use her Public user don't have access for example 2 sermon then if they try to access that The system will throw them back to the default view and give him a message saying you don't have access Answer that's what the default View Primarily used for at the moment But I can see it being coming even more useful as we continue to improve in component Builder Then add access It's basically making sure that a Sydney user has the specific access rights You see in a in an item you can set the access rights As well as the view rights So it's multiple implementations Different department Asians one has access groups the other one is just groups And so you can tweak whether you want access on this specific View to be monitored And If you take that N Component building will ensure that the access Table is there Ok So that is adding a side view 2 Do your component Obviously after having created the side view Then this is how you can add it to check it See how it works Ok now next up we gonna look at Custom admin views being added Thank you for watching
\ No newline at end of file
diff --git a/020-Adding-Custom-Admin-Views-to-a-Component.md b/020-Adding-Custom-Admin-Views-to-a-Component.md
new file mode 100644
index 0000000..447b61d
--- /dev/null
+++ b/020-Adding-Custom-Admin-Views-to-a-Component.md
@@ -0,0 +1 @@
+Hi Now we'll look at adding custom attribute to a component You make use of cost-benefit projection As our component And then Go to settings And then we'll go to custom admin views And we'll see Close that The game I will see you there has to custom admin views at it Now It is more switches than the site view because of its implementation being more than I make You can choose an icon Because in the backend You possibly I want to have an icon when your on that page The right Page Then you can decide with this should show in the main menu Negative you should show in the main menu the main menu Is a menu that drops down out of Zuma last menu item list Right And then the dashboard Which is that Dashboard we go to every time when we start with a component that All the icons are shown up Then the submenu is the one on the on the left Which you see when you are in a view So these are all placements where you can possibly have This Custom View Now if you remember The company Results we didn't add 2 Any of the Views individually we added 2 items so that's why all of these are set to know And That means we are at with targeting an item In a view Answer all we need to do a select the view which we are dieting Which is company And we say ok Does metadata yes or no And it has access yes or no And That's basically it To ensure that Targets the correct view is simply by selecting company here If I close this from Ormonde And then open that component So you what is happened with the settings Do you have a component open If I was to open Companies You see that has a button here 4 company result Now If you remember when we set up this custom admin View We we ensure that We are targeting an item ID And by selecting company we are saying we are talking to this company's item ID And that is what makes it work And then we said we want to see a chart I'm so if we look at these this little charts The icon itself We take on it We see the custom view shows up and that icon shows up next to it And all works well We also see that there is a combined results Button showing up here in the toolbar And that is because combined results Which selected we want carts To be the icon And we said List of records is set to yes And has metadata Hyundai success and also company And so D selections before Is only really necessary when you select main menu and submenu Because anyone to say before what Item you want this Menu to be created Now we selected dashboard list of Records And because of that Places that in here And you need to select the records that you want to look at And then you can complete on the combined results I'll grab those ID and Since we are modelling a data in the controller and the model It gives back to the view these results Through the custom implementation be done So Just a quick refresher If we go to component Builder And customer reviews Open company results We see that in the custom button We added the PHP You also added the button Explain two Two component builder what we what kind of buttons we want So we said we are struggling a single item is see those Edit company go to company logos does buttons R Actually related to Going inside of the And Then if you come out of this We saw that even and combined results We also added buttons But again those buttons the card companies go to companies Which corresponds to this controller And if we go to the view itself And we see that that's not responding to this button but actually To the buttons inside called companies and edit Those that's the buttons you were building in the custom View Where is the buttons we are looking at in here Is related to opening the custom view itself So That is too quick Refresher Same goes with the combined results Combined results is the button that you are setting up here Where is the other buttons are once you have combined them And you've take combined results You see that it adds two buttons dashboard and companies and those two buttons with setup in the view it Self So that you can know and sort of Understand what Area controls what set of buttons This area controls the buttons before open Bring the view where is interview the buttons your setting up there is 4 when you have opened the view Ok so that is setting up a custom admin View Do your component And some of the switches obviously again If anything is unclear or you not exactly sure You can all this Lee come on on and do anything So simply go change it to what you would think should work and compile a component and go look in the car And see what has been done and look and the Uno car Interface See what is being displayed And play around with it until you get that what you expected Just a quick heads up this Or ordering before is only compulsory when Actually selecting at main menu or at sub menu And if you're even use those It means That If If you got your component You have the icons area and here in the top you have your your Your Main menu items And once you've opened A When you're here on the right you have set menu So this is main menu this is dash list Robust list is that one which goes to the top Of the Of the components Toolbar Submenu is the one here on the So if if this Custom admin view is simply needs to be placed in the submenu in his lips on it's own it's not related to any Dataset Then you can use the submenu method if you only 18 Featured in the main menu these are all the features Where is the dashboard List record Feature Helps you to sort of Link to a specific set Of Data data structures like Like this one does So you can select these ideas and when when you click On this combined results the ideas of the selected items guess get passed 2 to the controller And if I go back to do that Show you that how we use it Combined results Custom button You basically see that Go to companies Is not in here So we see while using the main get called company's data get list query So let's go look at that data query I think that's we will find The use of the implementation of those ideas So we see we are basically reaching into the Input error Erase object here We getting CID Selected ideas And we saying It can be a CMD And Then we are exploding it and We are making sure that intervals And we placing it in our teas And so this actually gets the value From the post Object And Places that into ideas and here we do some validation To ensure that the person who's trying to access 2 Day Diet To do it And once we faster We basically use those ideas 2 2 to get The data so in in the filter We use ID is And check weather All the ID is Are in a ID and that in the code Basically if you look at the code So on the models combine results We see that it uses our checking method here Later You're down here It takes the ID is Spitz in array check service in array then implodes it And text where the roots You know only gets those ID That's how we we filtered the dataset With the results After selection And So That's just a little bit looking into the back end On how to make use of those Features and again as you can see it's some custom scripting we added to the dynamic get method To take those ideas and to use them In the way we intend Are you you can ignore them But here is the way that I implemented it If you wanna drop that down pause the video A copy of this area here Think would be the only part at Useful to your purpose And then you can use the ID is in your code As you please And know that this PHP as you saw In the code It runs before the get methods So it basically is a filtering option So then this query starts Then that code we wrote Is entered in here and then the rest of the code which Spell by component Builder Is being done and you can use a filter option with whatever you Collected up here Ok so that Looking into adding custom admin views to component Builder And just showing you again the tremendous Leverage and Design choices you can make In ensuring that your component is dynamic And Get sort of breaks out of the mould So that you can achieve Nice Complex components Write inside component Builder Thank you for watching
\ No newline at end of file
diff --git a/021-Tweaking-MySQL-Demo-Data.md b/021-Tweaking-MySQL-Demo-Data.md
new file mode 100644
index 0000000..64cf5c3
--- /dev/null
+++ b/021-Tweaking-MySQL-Demo-Data.md
@@ -0,0 +1 @@
+Hi You wanna look at MySQL tweaking In the component area It's open a component go to settings And then there is MySQL tweak What is this able to do is if you have multiple versions of a component And Barclay you have demo that relates to a certain version of it but and Implementation of Items And In another version you don't want those items included We have this MySQL tweak area Where you can actually First yield select that specific View That you Want to tweak And do note that you can only make use of this feature If you're actually using the This Area Where we actually add Database Connection between The View Dummy data And view itself So let me quickly show you what I mean So you're I have opened fuel types which is one of component Builders own views And I have a connected To my Database Through this MySQL I added yes I selected table And then I selected The field types In my Database And basically Just let it all be taken into the build file And Now Since you know that some of the versions that we distribute with component Builder Don't have all the field types in it And it's a limited To only a certain few field types So to show you how that was done I will go back to That tweaking Feature So here I have component builder open And if I go to settings And I go to District feature It's you that I have Added Values here Uncertain of thems like custom admin I said no don't Include non no Add MySQL to view Table if set in the view So if the if the interview if you have the MySQL select ID Are you come through this feature Control which items actual ID is Should be Included like in the admin review I'm only including these two ideas From my Database And so it's the ideas in the admin table admin view Table And I'm also saying that it's ID based You have the future of Just including all And then you have it based Saota A way to say what you want here You can also if you are using ID is between that's a 1 and 50 Then you can use this arrow Notation with an equals Open open bracket there Do you know data between 1 and like here 500 You want to add And You can actually Do it quite simply with one two three and then Comma Ok here I'm explaining it nicely it says 1234 or 124 And then you can put a comma and then 20 And then and then 40 to 90 so you can in the same comma Delimited list You can add this notation To show that we need to include 1 to 4 And is immediately after it Add 20 and we will Grab all that IBS and Impact in limonade any other ideas and only use the ones that you have Actually notated So here is another Good example Using 14 2399 So goes on in here We going from 597 to 604 82 - 680 4 And it's in the same comma delimited list And we saying is it based and we say include these So that is That is partly what I'm having why why this is hear what it can be used for So you not including dummy data or example data in your component build structure Then this area is really redundant and you don't need to even use it You can just ignore it system ignores it as if it doesn't exist If there isn't any Data selected Well that is some tweaking feature In component Builders component area That helps you Manage your Dummy data between Versions in In your applications
\ No newline at end of file
diff --git a/022-Global-Settings-of-Component-Builder.md b/022-Global-Settings-of-Component-Builder.md
new file mode 100644
index 0000000..1a09e22
--- /dev/null
+++ b/022-Global-Settings-of-Component-Builder.md
@@ -0,0 +1 @@
+Hi They would like to look At Component builders Options Or what we would call Global settings Night possibly through the Tutorials have From time to time touched on certain areas Now we would like to give them all Precise look at The options area of Builder It's accessible through the options button And if you have to Permissions you will see this button Open it Permissions By that I mean certain users may not see this button if they are in it A different group than that Global admin Straighter And You can change those promotional structure is as needed So you click on options All open The component builder configurations or global settings as it's often referred to Your options or settings And there are number of switches here that is worth knowing about These areas here you could add your own details if you would like to Ever displayed In the components front-end Then there is a switch here checking timer We build into component dollar the option to check in the items Every so often And here you can check If it has been locked out for 5 hours it brings it back in 12 hours 24 hours Every second day once a week or never So the check-in timer is set here And you can change it to whatever is best suited to your system Done in Egypt enable in virgin Version control Is what this area is all about You can disable it by simply saying no Or enable it by yes And then you can say how many Virgins should be kept of the item If 0 all all versions will be saved so 0 means Everything And so you can Limited To sort of prevent your system from Are being overloaded with data Then You have many fights as Feature Basically all the JSE that is being built In a component Builder Can be Changed to be minified So Why urine production You can export your components Without minifying with j s In the files and in the photos of the of the documents But the moment you feel that you've reached The place where medication is necessary and you want to use it Then you'd simply trip the switch here And that would mean if I the Joyous which is your JavaScript In the component While it's being Ok And then just some details my wife Being very involved Discussing Osisa Java Developer And Helping me look at some of the implementations As well as my own details And like I said you can add more contribute is here and they will show up And the dashboard underneath contrib Then the you Kit Uikit settings This is primarily for the bakkie that the moment being implemented in certain areas But this is only really need it most of the time and the front-end framework Of your proponent So I've added it to component builder simply soda There If I At some point decide to start adding I found in shop for the components that's being developed That's part of 40 possibly would design eventually is a front end Distributing Software That was built by component Builder So you could install this and Then run it from your Factory with a front end basically And that is still in planning We still looking at some of the security risk since so far we've been carrying people to use the Important offline and not online So we not even sure how this will work possibly we might end up with two core Components ok then the encryption settings component builder has a few places where it is Some of the data in the database And we are using a basic encryption which means we are using this key that you enter here Once you've entered this key I think because it ships without a key and that So it looks like that So once you've entered the key Please ensure that you don't change it Because Diski is what Locks the data and it's the only key that can unlock it So if you remove this key you cannot unlock it so you could remove it if you wanted to Prevent people from knowing the data in those fields But then you need to save it somewhere else because if you don't have it Then you can't retrieve the data And decrypt it Ok The next up his folder paths Before the pass There are two for the fans that you're ready can make use of the backup folder in the get folder path Please read related Notation here Where is the custom folder path in the compiler for the path I would suggested the states that you don't make any changes to them I added this fuse because I envisioned the possibility that we want to move these folders Out of our Web Area of developing Since these are part of the security Concerns we have That these files and his folders might be targeted But I haven't fully implemented this all cross the compiler infrastructure So currently it's best to leave that That folders the way they are by not adding any data in here Sorry I clicked on the back button there anyway Said by just leaving this field blank We ensure that The Next time we can look at the missions Not a permission of structure and component Builder Is not that intense But as you can see there are a lot of commission switches What's the latest Joomla release of Joomla 3.5 This promotional structure updating construct is made much easier In the past We had a problem Weird that I said of your permissions is so big That when you save it it just freezes up your browser and even the server doesn't wanna receive Now they have added Ajax per field Which makes this so much easier That means that currently Without clicking save and close You can make changes to the promotional structure and that him Immediately will be stored to the ladder base That's from version 3.5 jumilla Now How would that be a see we still have these areas that we also want to store So What what what I have fought might work Possibly my implementation isn't that accurate Bye You have your configurations only as a permission so I would say take a Certain group Give them that configuration only Access And then Log out Of this user login to a user that is in that group Then this permission or tab won't show No only see the settings And a witches are in these tabs right And so they can make changes to these and save them without any Browser latency world Overload Where is you can come in and you can just tweak the permissions when you are in the global or super administrate So you can come in here and you can tweak the permissions accordingly So as you so previously What I was hearing the manager area I could just changed Change this and it doesn't Ajax storing of the value in the database Which is really smart I am very grateful that there done that Search for the main reason that this this set of the Remissions Became so use That I did some places had to do server adjustments on some of my components To to ensure that the user could still save and change the permissions Now So you have your You're a global create delete edit edit State edit own Edit created by and edit created date And then you get The Earth View Commission structure So here is the admin view then the custom admin view the dynamic get And they all have their own Different areas that you can change permissions Four groups to be able to do this or that The same permission implementation Options and Structures Are available to all components built by component Builder As you strip the switches for the fields as well as For your Certain Views Let me just go out of this to show you Components Then first be look at Bonus Salmon distributor Yeah In the oven views You have you and This access control But this is not the only place of implementation So close If you go to the admin views And let's say we open Preacher You have the permission of structure year Edit Navy select view is gonna use the view name if you select core Look for back on the core edit And Delete Features corresponding Sorry if you use the word View View data Use in the permission of structure and edit Switch with this views name preacher dot edit Where is you use the word Core data that you would only see Edit or delete or create whatever Select And this in relation to its record means that it will be added To the record itself you can tweak the edit structure This is only the global setting or this is for both And so that is party how you control some of the commissioner switches we just looked at The other area is in field itself You have your a promotional structure Where you can say ok this specific field let's say the preacher name I wanna control that permission who can edit it Is what you would add Edit button Currently we are not yet implementing who can View Since we were having problems with Tremendous overload of Switch is being added to the promotional structure What is Zuma's now made the strange we might possibly add that in Then you can't even have a View who can view that That field Where is this is currently just who can edit Ok So this is the house you get a Fields promotional switch Now Let me give you this is an example Let's make that one for now Name Say that it must be permission Save and close Save and close Here I have some in this to be to open so open it's options Go to his permission or tab Then scroll down And I see first years the help documents And here's preacher And preacher has side access and an access to preach itself And batch create Dashboard add dashboard list delete edit Any created by educated date Edit own edit State edit version Export import submenu and then it starts with series So as you can see it doesn't show name here yet So what we'll do is now will go back to component builder go to compiler And we will select somin distributor And compile it Wanted completed I'll just click on the install button here To do a quick install No that's completed let's go back to the configuration and just refresh The page I'll just click on the refresh rate It Off Now if we scroll down again it we'll get here we said See it got a new field here called preacher edit name and how I can decide Can this group edit that name or is it denied or should it be inherited So the promotion or structure perfume can be added in this way I'm gonna go back and revert that Because I actually don't want I don't want that area to be monitored So go back Open preacher Back to the Fields Say no Close compiler Select similar compiling it Then installing it Going back refresh And we see that the fuel is gone So it's no longer being controlled by this permission Infrastructure And so that is how you can Tell which Group is able to access which fields And even a witch Views are accessible Through the permission of structures This is an amazing advantage of component builder in its ability to integrate the Permissions not only per View But also Per Field in a view And your normal control also related to a specific view and I'll only that it Also adds these permissions to every item So you could override an item And say ok this item I don't want that group to actually access this field And this is one of the advantages that component Builder Has above other Similar applications out there It's it's ability to implement some of the most advanced concepts that are currently access Bowling Ok so that's a quick look at the Global configuration options 4 component Builder Thank you for watching
\ No newline at end of file
diff --git a/023-Adding-a-custom-time-field.md b/023-Adding-a-custom-time-field.md
new file mode 100644
index 0000000..44e7930
--- /dev/null
+++ b/023-Adding-a-custom-time-field.md
@@ -0,0 +1 @@
+Hi Ok I would like to quickly demonstrate how to set up a time Beeld Now you know that In programing of his liat time must always be linked to a date Because time is stored as an integer And 4 If you only want A Field Way only 8 times said let's say 5:15 or something Then I would suggest to use a normal text field And you Create a regex Method This could be done via a I just close this This could be done via a Custom form Filter The way to setup a custom filter USA This component If you go to Marshalls and then dude see rules And in here you can create a rule And then you would use that as the filter name So you would Important Builder you create a file And you place it in your custom folder Any any name Put it in here So let me illustrate that let me Well I'm gonna illustrate that I'll just use one of these files to illustrate how to include it But you would basically create a Rule How to create to create a rule I think let me see if I can get you some documentation on that between I think the easiest would be to basically go to your Scroll up here O2 Your in component You're in Germany right So you go to libraries Jamala Then form Rules Can You can open any of these rules And you can look And what they've done And you would follow the same convention She basically extend J form rule You give it a new nickname Make sure it isn't one of these Take form rules And then We are ready component Builder Already when it when it constructs the The XML document That is used In your Construction of your form Computer modules Form If I open any of them that say this one The ready includes the rule path Andrew pass is This rule So if it if you if you using a a filter So how you would apply it is this you would simply add the word filter People's now in component builder is there is actually a way This But basically That would be the same name As That I suppose T e l Ruby the filter Ok And then in here you have your Test Basically test song Whether this is Acceptable And in here you could do regex and all kinds of nice Means to to validate whether the input field On the server side is actually acceptable So this is a server side Verification of the input And so you you you'd see in component builder if I'm just go there New And I would select text Just a normal text field You see that it has year Filter As well as validate No I think the rule gets placed here invalidate That's right Validate is where you place your room name so your custom rule name might be time Example And then that would ensure On the server side that only time was submitted Now The Next Step 2 Ensure that you The user only types in Letters Three numbers and a colon Instead of anything else I would be able to do some JavaScript here in the view footer You could add JavaScript here that targets This field Vampire adding a A class a unique class name here Or Going to the form where the field Free sample this is a field right Seduce firebug And you would select That field I'm in fire by Coetzee the ID So with JavaScript You can You can target the input of that ID And if that ID has input that is not what you would expect from time Then you could Hi there scream at the user shout or just Emptied the box with a dollar note under it But that would be a JavaScript implementation on top of your your text Field Now That is maybe a long explanation But that is how you do a a a field if only you want time If you want time and you don't mind that there is a date in volved I actually have Build a a a field like that already That I'm using You see because in In your AP table Fields you can't use the other calendar Field So I created a field That's sort of Allows me to store Do that let me let me show you There is a component I'm working on Stration component So if we go to events Open an event Then you would see that ok Yeah I can set dates But these dates If I click in the box You see it has it time Adjuster And I can select a date And adjust a time and click done And it updates the field With that selection If that is the kind of field That you're looking for then implementation is quite different I can I can do to show you that So I'll open it you can see it it the type is a text type So basically I've just added it added in Hunt It's just a normal text type you could pause the video And you can look at the the field XML Now since I'm using this field in a repeatable Field PHP editor JavaScript Is quite different right because you You have a working with a repeatable field that you can add as many Fields as you like But you want this date field to be active on everyone of those And you can't really Target A repeatable field Simply by adding some JavaScript in in in in in this area year Unless you know that feels ID and so instead of doing it in here I actually added to Javascript that is needed to make this field work Into the repeatable fields structure so let me close this and show you that Case I think it's just one event dates So one of those Values there is obviously the ID Of that date field I did I just showed you and so in scripts Again here I can maybe zoom in a little You can you can pause the video And looking sucked liat what I did there Basically in cluding Some Styles as well as some JavaScript And then I have a loop Which Loops 50 times Because I'm only allowing in developer tab repeatable field I'm only allowing 50 Fields to be added So I don't need to look at times And then In the loop I'm actually targeting through the dynamic PHP I'm targeting each of those fields At the moment there's a row at it I'm checking with it at Rhodes just if it does I'm still using the jQuery Date Time picker which is actually Brought to The Page by this The Script here And then it has some options which is 3 cable And that's it That's how I add That kind of date selecting Beaker method In a repeatable field Again I will hold it a bit there you could pause the video Shuttle that down if you want Scroll down again This is this is actually the end of the code Start Ok that's all that it takes To to add That guy yes another thing because I have multiple data Fields so if you open that again You see that Yeah I have a starting and ending date And here in cost adjustment I also have A Target date And so if you look at my my script You'd see that I have a field type array Which basically is used to Target Does different fields in there different my pop-ups ok So You would if you only targeting one field You wouldn't need this extra iterating Method Variable which I'm using here Instead of having to retype it for every field I just added her A loop In the PHP it's just code Ok that's I think that should do it About further documentation I I realised that that might be necessary And Honestly I just don't have time at the moment Because their component isn't earning me A great deal of income Besides the fact that I myself I'm using it and developing components and I have developed quite Got a lot of reading I I realised that that that might be a community project And something I would Actually encourage So Everywhere in component builder in in any of its list to use We have an help menu Already Which actually opens up A Website Which has a wiki Option Actually a redmine website Here is the URL you could see it And if if anyone wants to get involved in the community We help improve the documentation A listview as well as per function as you can see how Freddy down quite a bit and Documentation for every list View Explaining these buttons And Even So on so this help button here you could you could add your own Help by going to the help Annotation And here is the list of the ready set up help If you open one of these You would see that here is the URL that were using And Obviously As we develop this component further We would eventually add more help documentation ride in the component But it will in actual fact map to this This website Because that way or everybody can benefit from any improvements So the website URL For those of you Might wanna go there It's a project start VDM Again projects Joomla component Builder Wiki And yes you could Supposed to go there and from there navigate If you want to get involved in editing the The tutorial or the documentation And you say to me I would help you setup Documentation Give me a great a discount on accessing the tutorials We could strike a deal Because to me I I really I have a time Constrained Manto this point As a community project I hope you understand Thanks so much
\ No newline at end of file
diff --git a/024-How-to-integrate-the-Create-User-Helper-Method-in-your-Components.md b/024-How-to-integrate-the-Create-User-Helper-Method-in-your-Components.md
new file mode 100644
index 0000000..3ca6579
--- /dev/null
+++ b/024-How-to-integrate-the-Create-User-Helper-Method-in-your-Components.md
@@ -0,0 +1,2 @@
+Hi I would like to give you a quick tutorial on illustration on how to use Asian method In your component What is the user Creation function It is basically a part of code helper function actually The gets added to the helper class How does if you don't know where the helper classes that we could to show you To your Pasta tree Find basically your Gmail install Happiness traitor Now there is a helper class for the front end of every component as well as for the back end Looking in a backend We go to component Extra Database Helpers And it's basically that file there What is the helper Class to open it See that it's the abstract extra database helper Now that help with class gets included Into your component on every page so if you to open the main back in file with that one It's loaded by July 1st you'll see that it actually in A profile in every page So that means everything inside of that Class is available to you everywhere in your component When we cook when we actually then go back to the hour Interface Are we go to components Extra Database You see that there is a lips or actually stand for library and helpers and We have to switch Tech yes ad create user helper method Set to yes That is the The switch that you need to trap So that component build and knows that you actually want the help of class Create users Added to the helper class of your front and backend of your Aishwarya Rai I'm gonna close out here Back to the code And then Simple search 4 I want Goku uses That there is Create user See this is a public static function So you would basically call it Then colon colon Under the name of the function right Create user And you see that it said to new Now New has in it A few variables is basically an array So you can go through this class and you'd see that it has a password one or just password the password to The name Gmail And Create the user That's what this class does so it calls in the Joomla Component uses Schools in its registration And then it basically uses that model to create a user so that's what that switch does it have Fastest class to your component you can then use it in your component it doesn't Set everything else in place you still required to do as a developer to add to correct code And I'm using it View Court experts Option for someone to create a user now let me first demonstrate how it works Go to extra data base and click on experts Let's click on new There is a Expert Which you can select Users within a specific group I will also explain some of that more later There is this button create user Click on it it basically has a pop-up wearing you enter a user name Who's gonna say Testing 123 What is the username The password There we go So everything is testing And you guys click create it basically has this nice effect Busy creating at Setting it up sending out the email doing all of that for you And once it's done It lets you know who's it was created successfully The login details was emailed to the user And then it's here ready to select You can select testing 123 that you just created from the user list In the above field simply click on the blue user icon Click here Type in that testing Search And there is the user created 
+ You see that it basically used a very strange conversion here Basically converting the username away from the numbers now you can you can fix that By clicking edit And then changing it to 123 and say save the update Ronaldo My new application doesn't wanna allow you to use Wendy's We have this integrated user now that is connected to an expert And if you were to click there again You can still selected ok but once you select it once you can't create a new expert And select that user again So it's basically want profile connecting to one user To set up the next 4 So that's the feature I am using it for there is different ways that I have implemented this let me show you another one Obviously you realise I'm using a lot of JavaScript on this page I will show you some of that JavaScript but About yourself Ok let me just get out of here Example of be here I wrote this job tracking extension And let's say we want to create a new job order Can say whether it's a new client If it's an existing Simply selected from this list If it's new I click here I can enter all the details of the user and when I click save Create the user Stores the data in the user table not in the job or the table delete all these these So did the job on a table that never stores any user values And so that's another way that I have implemented so if we were to close this out And where to open a client The new one Beauty basically it's the same values And Everything is the same So that's another way that we integrated Integration Different ways to The way I have done it I've just listen to my clients expectation What I really would like to see and how they would like it to work And then simply Make It Happen that way My person I prefer the Ajax Way much more It's it's just seems to me So let me illustrate some of leopard show you some of the code that I used Ok so we back in The Experts View As I've done before I previously another tutorials explained how to make use of the 8 Ajax Within Component Builder Love you that like to understand what's going on let me give you a quick At the code level Within every component that makes use of Ajax A model and a controller is created Controlling is named Ajax Jason dot PHP and the module is name Find Ajax Ok let me open the model And also let me open The controller As you can see the controller basic fire is off The register tasks within the construct And then it adds the tasks Into a switch And tries to run the task basically Also an ink The model Get the module Ajax And then runs the method that basically corresponds to the task And so It runs Uses the Gmail as default Filtering If it's in the way that it gets values that are being posted And then value dates that does values actually are there Then send the values over to the model Now that's looking at it from a code side so if you look at the model Simply shows you Various Some of them are protected And some of them are public and those are usually the ones That I get calls from the controller once the Ajax gets the Verification level tennis Verified Toyota create user class Basically We first check Whether this user now this is custom script I am in this I wrote a custom component build it does not brightness Simply when you go back to the user interface You see that Scroll down here A user fields And then there's great user Just right here And that basically gets placed So that's the Ajax method I simply in that Ajax input I annotate the specific tasks The task name And specific variables And again did the method name Different method names from task names What should be validated whether it's a integer float or whatever And if there's no value What is the value by Default So this is where you set up there basically the controllers information And then hear your customised is write your script so basically Grade user gets data since from what view is it Invalidates with this Information Two actually The Experts area Then it Convert the data because it's a Jason said of datasets that I'm sending across X-ray So you can see I'm still here I'm using that Mobile helper Class and methods Your number of customers it's obviously that That is available in that class to go through it we just added in there as freebies and Always see the Need of them but I'm using them often And even if you have with Improvements on those efforts please make a pull request and we'll make those changes Then you over here Sure that we've got enough data on the right data We basically get that same method and we need to create user Get result And if it's not Bridge Resort we deal with it Morning Lee And if it is the correct result we create Add the user to the user group That's something that the user does not Does you grade user does not do So we Then have a user group setup And Basically in the component And we Set into the correct User Group This is a return message If it's an error Always hits Success So done here is the error message So if it's if it's successful this is what we do if it's unsuccessful this is what we do And so that's just a quick look I mean obviously we can pause this video and Look at her Done And then here is to get the user when the page loads initially The ID get the data Accident to some And send it off So This is the PHP side I'll be asleep We we do this create user and then there is a a Siderite So Script when page loads Would you get user with the user ID We get the user ID from the field And then it loads that data that you saw If you if you looked Basically shows you that is the data and loads And that data can be edited Except over here Cannot add numbers in the username but you can Goodwill updated I will say that is updated Obviously if there is a Mirror with the email already used or something it also give you an error This is all part of how we basically have setup JavaScript The Weeknd scroll down to I've just added to Javascript to the new file And here is get user the server side and there is the the function I have two functions usually one that sort of deals with Waiting and then eventually setting up the data into the The View And here's one making the call so this is how you call structure with usually look Index HP Question mark option = your components name And the task which Must go to the Ajax controller And then this is the task And you then here can stipulate what format you would like the result set returned them View What is the result set returned the role which in sometime sometimes is the case There is if you look here There is a roar Variable You can just set the rule variable to Then it will give you the results set Like that without Braces around them Or a call back You see when you make calls from JavaScript Did you slee Monsters call back to be added If you make calls from other JavaScript libraries who might just want the braces around it But if you want it raw which also is often the case Add the variable draw to the URL = true End up passing it back to you with this Arsenal heads up on Ajax function Format must a Jason Important Always use a token Have the token on the page this token is necessary To prevent cross site scripting of course I usually add the dog into the page Through the JavaScript PHP The place down here I just remembered remembered Every working in a backend The back in the admin area Capitec and it's gets added to the page dynamically Since we Basically passed the JavaScript Areas And we see token we actually know token is to be there and we had to tell him for you Where is the front and you must actually literally at the poker There was just too many Not to do the Automation in the front end Games to the variable name as well Do something of your choice Where is now it's just joking it's back in it's more secure You need to always add a token To the request Check whether token is there if it's not that it wouldn't make a request that all Ok so I was looking at another function there Ok so that's simply how we create a user And integrate the use of concept within this component I hope that was helpful I realise if you not that fluent in programming in JavaScript Orange on a date with jQuery As well as in PHP Is my not fully resolved your questions Like I said where the beginning of these tutorials I wasn't planning on making a component Very easy to use Component that is very powerful to use I'm leaving it up to you to decide how to implement This user integration The most powerful way of doing it At least we are adding the the class with which you can create the user And again even there you can go look at that class If you feel my implementation is too little Provement Can I shoot me a mail or you could For this component Builder on GitHub Pull down to yarn repository Make the changes push it back And Inside Of component builder where this class is constructed Obviously Within Compiler is files that the compiler Has View files and you need to do to a search Go to component Builder The helper Use the compiler And here is always files Research in here 4 Ocean Create user you could How to search for that I'm sure you're fine it In that area where you need to make the station and it changes because it's daytime It is not Can be edited like right Script to be added in the function where we had it Just go search those functions Thank you for watching That's how you create users and connect them to your components Much more to say but I'm afraid this will get way too long like most of my tutorials get to I want to keep it this this way and trying to make it shorter hope you enjoyed that
\ No newline at end of file
diff --git a/025-How-to-use-email-helper-in-your-components.md b/025-How-to-use-email-helper-in-your-components.md
new file mode 100644
index 0000000..3ba151e
--- /dev/null
+++ b/025-How-to-use-email-helper-in-your-components.md
@@ -0,0 +1 @@
+Hi I want to show you how to use the emailing helper class in your component Email helper class is a class that gets added to your components helper area And therefore available on every page And with which you can then send emails We could look at the helper Class by going to a component that has Included And then into helpers and The filename is usually the component name Email Opened it already here As you can see it's in just the basic abstract class That Thanks Jim Ellis emailer Which is this Gmail And it gets an instance of it And add to mail and then loads in Did the variables that's required Now We'll come back to this in a moment If you look at a component What you need to do first If you are gonna use this feature in any of your components That is open this Learning manager And then go to libraries and helpers And you'll see that there add email helpers been set to on Places the helper class in your component that's all it does It doesn't implemented anywhere else So At the moment that means that if you click yes here You need to still create fields That you are gonna load to your comp Fake area Now if you don't know about the config yet means you've skipped some tutorials But it's basically this area here Which gives you the option to the ability to add Configuration options to your components option area So if we click here I scroll down you'll see that there is Mail configuration and a whole lot of fields there Now these Fields correspond to the gym last default Fields if you didn't know So if you would like to create these Fields and you need some info on what there should be in what should be their names and Everything Then go look at the Joomla Global configuration XML And you'll see all the settings in that fire file For our purposes I'm simply gonna show you how the fields look like We also have the dkm Yeah implementation available And even those Fields you will need to look at the code to know what their names should be So there's a difference of course between name and label and description When we refer to named and that is the The value that will be used in the code Ok I'll show you what I mean I just close out here Go back to the code So for example that work mailer Actually means That the name of the field is called Maile The name of the field is called that and that So goes on So these are all the fears that needs to be said If if if your component If we go back to the component Close this Utilities options area so I'm gonna open that Wanted to open your see there is a mail configuration and a dkm area Dkim So let's open a mail You see that it has the mailer status So it's over set to off then no emails will go out Auto on If it said 2 on you can decide whether you want to override the global function Adiglobal Variables Other global variables are set in your Gmail as components Global area So you would go to Global configurations And then You'd go to System No sorry It's server And then there's this mail settings here Ok These are the main or the the global settings that will be used in the in any component that does Does not add These settings in their config So if you didn't create Those Fields and added it to your component but you text the the button to sort of add the helper Cars to your component Then That means that it will basically fall back to these settings in your Joomla default Area So Just that you know And these are the values that you need to override if you want your Component in two in some way to use other PHP mail or other send mail or Other What's the other one SMTP Values than that of the global you need to set it here And That is basically what this error can do So you use Global it falls back to the Joomla Global Otherwise you can override it on this level And send it out In a way that is What you would like Idk IM area Is there more advanced area which basically allows you to override Sorry not override to encrypt And secure email sent out from you do a centre Cape that it was really you that send it This is very helpful to sort of show your the people that receive these emails that it's not Sam and it's really comes from you it's more advanced I would encourage you to read up on it these are the values Usually would be required to be added private key a public key And obviously stop periods here If this is said to know obviously it will not be used if it said to yes please ensure to add the values Otherwise it still will not be used Ok So that's basically the values that you need to still create Component does not do this for you You need to do it I could possibly foresee that In the future we might add this If you take the helper class it adds these values for you But even then if you have done it manually We'll make sure that it doesn't add in twice So as long as These values obviously be the same Names we will know actually a Somehow identify that And then not Add them dynamically So to avoid clashes But for the meantime it's not automatically being at it and so you need to do that manually if you want it To be there if you don't like I've said before Before back to the gym allow Global So explain that you on the code level Basically it gets from the configuration The major function And then it checks whether it's global If it is global Then It Implements to Millers Values If it's not Global it implements your components values And That is basically what it will do Now you can read through the code But the most important area really is this area You know what is all the various Options that you have in the signature To send out Mail So it's able to really send out a lot of mail but Nonetheless You're also need to consider You know Your servers own limitations Since we obviously don't want you to spam people We do not Override those values when we are simply using the Joomla default Helper to Malawi an emailer And it is been extended from another class And so there are a lot of features and here And if you wanna know more about them Are you can read up on on obviously the J in mailer Class from Joomla Read through this code here and see how we implemented These are the dkm values that you would need And in your In your component To be able to use the dkim encryption But you could also read up on this and check out this function here There Anyway that it's implementing these features It obviously is adding it to the mailer and most of the work is done in the major So it's basically adding the data to the mailer and the mail and takes care of the rest Ok and so here it sends it off And if there is an error So let's say for some reason it didn't No work out well Then it shakes weather Your Component Helper class So your component has a helper class it's just this phone here Even has a storm message Variable A method So if we were to go check this You see that there is this storm message method In the helper class this is a custom method that I wrote now you can write it anywhere you like But this signature should be the same Ok so Yeah Is the same signature you'll see it So basically this area that And that is dynamically updated to your component Seduces your component name here and your component name there But this store message Is basically No You cannot change that but it takes to send email the recipient the subject the body to text only in the mode and it's That it's email So you can have different types so if you look at the the method The type can be anything We are obviously wanting to do different things on different types so if we send an SMS and we didn't Fail You wanna store the message if we did this or that So this this kind of feature Is it only used when something didn't work But also if it worked If it was sent It's gonna store it So it's a way to store the message So did you can Maybe let you use her go If they login They can see messages sent to them in this kind of stuff So this is what the store message does and as you see it's a huge cross them Method that I Road And it does different things for different You can update it in change it cause the video copy it down don't really matter This is you realise this is actually something you ride up yourself you just need to make sure that that part is the same The rest is up to you Now you deal with it ok so that is really implementing the learning manager email In your component Maybe I should show you where I implemented at least In one area Ok so I have this component called job tracking system open it up You'll see that it actually has that function Adding the helper email it's got it selected you see there at help On Then the view in which we are using the email method is the job or the view Basically we want to email the client I did job order When when it's created So let me show you how I can fermented it there So here is the job order And I would basically then Click on This area email now I can update that Do whatever email I like Testing At Something Just send it in to Nothing And Then once the email has been sent It actually let's me know See there in the it says email was sent successfully So That's basically what the email does it use this button it sends this Document To my Client And also if I want to send it to my store The people that does the job I could also do that here I'm not gonna explain to you The reality of taking this content adding it to the email and sending it That I would suspect you need to know and you need to learn or study to do that yourself I'm I'm simply explaining to you how to use the email helper class So we will go to the code and I'll show you how I do it and Mostly Maybe I'll give you some pointers but I won't go into detail About how that is done Ok so let's go to the to the code So here we are in the job order So first thing here is obviously some JavaScript So there's this send email function Get a set of values And then it basically gives it over to the scent Email server function which sends it as a JC object Sorry I Jason request to the server The scent Email is the Task And when I get a response that's when you get the notification Ok so that's Simply the JavaScript of it So now if we go to PHP Previous Tutorials me explain how to use the Ajax class I'm great just touched on it briefly You basically have your input here This is where you put set up your controller Let me show you that So you'll see in your controller There is this send email Class that's what basically was defined And this field here And you see that there is Basically three variables And they are Should be filtered in this way and they are fast over to these methods And you should be logged in user So if you look at the code again it basically this is the task down here it 2 years to ties Check for those values and then passes it over to the This method which is in the Model is a model So we go to models Ajax So here is the the model let's just scroll down to the send email So here is the send email this again Is a custom Script So if I was to go back here Close this You see there's the Indus Ajax method is a lot I mean look at that you can see it. Scroll down way down is a lot of other customers But this is another cross the method I've written Call send mail get the mail the HTML to type It it doesn't necessary Cleansing and whatever And then Eat Basically Aware Yeah We're calling the email helper We using the send method Passing the valuables and we Set the result in here And if the results is obviously true We will let the user know otherwise we give him the error You're so that That is the The short end of it I'm also using this email body to help me build the the email because I want to Make sure that it's got all the necessary HTML and stuff so you can Pause this video and typed it out if you like But this is the email body that I usually use and you can see you passing the HTML on the subject to it And it simply adds the the subject to the Email The necessary places as well as the body In the necessary place Right there So that it gets sent in a way that's more appropriate And then That's all happening right here Ok and that is what I'm passing in here So a custom method which gets the data from Victor Jacks And then sends it off So that's a quick tutorial on how to implement sending emails through your component Using the email helper class Obviously the email helper class Is Available on GitHub in in the component Builder And if you feel that our implementation lacks some professional Help then please do make a commit to Quest or send me an email And we'll gladly update an improved this class So I think we are followed All the necessary standard requirements to make it useful to everyone Ok thanks for watching Until next time
\ No newline at end of file
diff --git a/026-How-to-setup-a-store-message-method-along-side-the-email-helper-class.md b/026-How-to-setup-a-store-message-method-along-side-the-email-helper-class.md
new file mode 100644
index 0000000..6bbcc5d
--- /dev/null
+++ b/026-How-to-setup-a-store-message-method-along-side-the-email-helper-class.md
@@ -0,0 +1 @@
+Hi I've already done a tutorial how to use the email helper in your components And that it or I'll actually do touch upon The storing of messages Or emails for that matter Once it's been sent Now I would like to just look at that again For those of you that may just be wanting to know that So Obviously at this stage you should know That the email helper class Basically added to the helper folder Of your components backend So and it's usually called your components name and then email That's that's the email help class so to use it In the custom script you could use the three basic brackets Is that ok and then component like that And then just email And send And That is how you would basically construct Your Your script I show that as well in the tutorial We we going to more depth How to use the email helper But At the very bottom of this class in the sent Method There is a little snippet What is significant as it may seem Actually gives you a very great Affinity Because The result Of the email that was sent Is placed in sent email This result is passed to the method as well The first it looks in your helper class Which is usually a component name Helper That's the helper class And whether this method exists in the class And this method will not exist unless you Write it So The area where you would have to write this method Is in the component there is an area Called Admin helper Let's look at that Open a component We go to libraries and helpers Scroll down And we see there is Email helper And then underneath it help her at mint class And it's in this area that you need to add that method Now I realised I've chosen the wrong components is this component actually does not use that storage But there is another one that does let's open that one instead then So again we are in Helper admin class And we have a function called Star message and this is in the components There where you edit your component So this store message has what we call a signature Values that it is passing to the method And in the The Email helper class You see that it Also has A signature But wherever it gives this = with a value That means that that's the default value so if you do not add A value for this position there is one two three four 50 Then it will default 20 if we do not add this it will default to now So From there all the way to the end all of those values halves that basically than all No value So In reality you only need to add you know these values the first for But Those values are all used in this method So do you wanna understand exactly how these value should look look inside of the method Read through the method And you will see So Making a long story short We end up here at this Lil script Basically ask whether you created the method or not If you didn't it's simply skip said and returns the value of sent mail if it That you have created it It'll pass these variables that correspond to the signature And then inside her that method that is in your helper class That is now of this method You need to do the necessary checks and balances And discovering For example since you've got the email address You can Search Navigate bar In the user class It must equal Email Recipient = email And then returns to us the ID So That is basically how the get War works And Then when we have the user ID We can obviously make sure it's so The number and we said it to her message as user And we said it as the email and now we can store The message in whatever table or do whatever we wanna do Beyond The normal So even if you wanna do other things except Storing the message This is the method inside of which you can do it so store message Is the method inside which you can do some more custom scripting On top of your email integration Ok so that's just quickly giving a little bit more depth on that specific aspect Abusing The email class in your component Thank you for watching
\ No newline at end of file
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
new file mode 100644
index 0000000..49dbf78
--- /dev/null
+++ b/027-How-to-ensure-that-a-field-is-not-escaped-when-added-to-list-views.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..b20d134
--- /dev/null
+++ b/028-How-to-change-exported-values-and-setup-custom-import-options.md
@@ -0,0 +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
diff --git a/029-How-to-overwrite-the-custom-fields.md b/029-How-to-overwrite-the-custom-fields.md
new file mode 100644
index 0000000..9342dc9
--- /dev/null
+++ b/029-How-to-overwrite-the-custom-fields.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..f858902
--- /dev/null
+++ b/030-How-to-filter-a-list-field-based-on-association-with-another-field.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..f29d169
--- /dev/null
+++ b/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md
@@ -0,0 +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
diff --git a/032-JCB-manual-custom-code-implementation.md b/032-JCB-manual-custom-code-implementation.md
new file mode 100644
index 0000000..86c38e9
--- /dev/null
+++ b/032-JCB-manual-custom-code-implementation.md
@@ -0,0 +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
diff --git a/033-Export-Import-of-fully-mapped-components.md b/033-Export-Import-of-fully-mapped-components.md
new file mode 100644
index 0000000..e3a071c
--- /dev/null
+++ b/033-Export-Import-of-fully-mapped-components.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..da9e58b
--- /dev/null
+++ b/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md
@@ -0,0 +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
diff --git a/035-Translation-Mananger-in-JCB-explained.md b/035-Translation-Mananger-in-JCB-explained.md
new file mode 100644
index 0000000..b50bf9b
--- /dev/null
+++ b/035-Translation-Mananger-in-JCB-explained.md
@@ -0,0 +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
diff --git a/036-Setting-Site-View-Permission.md b/036-Setting-Site-View-Permission.md
new file mode 100644
index 0000000..cf3aee5
--- /dev/null
+++ b/036-Setting-Site-View-Permission.md
@@ -0,0 +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
diff --git a/037-Auto-create-SQL-updates-for-Componets-in-JCB.md b/037-Auto-create-SQL-updates-for-Componets-in-JCB.md
new file mode 100644
index 0000000..cd14b8d
--- /dev/null
+++ b/037-Auto-create-SQL-updates-for-Componets-in-JCB.md
@@ -0,0 +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
diff --git a/038-Setup-Site-Edit-View-in-JCB.md b/038-Setup-Site-Edit-View-in-JCB.md
new file mode 100644
index 0000000..fad3682
--- /dev/null
+++ b/038-Setup-Site-Edit-View-in-JCB.md
@@ -0,0 +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
diff --git a/039-Automated-backup-system-in-JCB.md b/039-Automated-backup-system-in-JCB.md
new file mode 100644
index 0000000..a085728
--- /dev/null
+++ b/039-Automated-backup-system-in-JCB.md
@@ -0,0 +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
diff --git a/040-Adding-Helper-Structures-to-any-JCB-component.md b/040-Adding-Helper-Structures-to-any-JCB-component.md
new file mode 100644
index 0000000..5389686
--- /dev/null
+++ b/040-Adding-Helper-Structures-to-any-JCB-component.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..e2145d5
--- /dev/null
+++ b/041-Upgrade-to-JCB-v2.5.8-and-using-the-new-Admin-View-and-Admin-Fields.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..4dd34be
--- /dev/null
+++ b/042-How-to-setup-taps-after-upgrade-to-v2.5.8-in-JCB.md
@@ -0,0 +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
diff --git a/043-Major-Release-of-JCB-v2.6.0.md b/043-Major-Release-of-JCB-v2.6.0.md
new file mode 100644
index 0000000..b25d866
--- /dev/null
+++ b/043-Major-Release-of-JCB-v2.6.0.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..ae3fff6
--- /dev/null
+++ b/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..cf40286
--- /dev/null
+++ b/045-Adding-your-own-rule-valadation-to-a-field-in-JCB.md
@@ -0,0 +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
diff --git a/046-General-overview-of-how-community-snippets-work.md b/046-General-overview-of-how-community-snippets-work.md
new file mode 100644
index 0000000..eec69f3
--- /dev/null
+++ b/046-General-overview-of-how-community-snippets-work.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..ff95fdc
--- /dev/null
+++ b/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Cummunity.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..a6d89e5
--- /dev/null
+++ b/048-Tutorial-on-making-a-pull-request-at-Joomla-Component-Builder-Snippets.md
@@ -0,0 +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
diff --git a/049-The-New-Library-Manager-Area.md b/049-The-New-Library-Manager-Area.md
new file mode 100644
index 0000000..a99b818
--- /dev/null
+++ b/049-The-New-Library-Manager-Area.md
@@ -0,0 +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
diff --git a/050-Easy-Translation-via-excel.md b/050-Easy-Translation-via-excel.md
new file mode 100644
index 0000000..d254232
--- /dev/null
+++ b/050-Easy-Translation-via-excel.md
@@ -0,0 +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
diff --git a/051-Dynamic-Router-Implementation-Explained.md b/051-Dynamic-Router-Implementation-Explained.md
new file mode 100644
index 0000000..f023ac0
--- /dev/null
+++ b/051-Dynamic-Router-Implementation-Explained.md
@@ -0,0 +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 side views Your side 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 side views Now the side 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 side 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 side 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
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
new file mode 100644
index 0000000..6ef6c74
--- /dev/null
+++ b/052-Automated-database-updates-in-Joomla-during-development-of-a-component.md
@@ -0,0 +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
diff --git a/053-Quick-Subform-Demonstration.md b/053-Quick-Subform-Demonstration.md
new file mode 100644
index 0000000..6facfd4
--- /dev/null
+++ b/053-Quick-Subform-Demonstration.md
@@ -0,0 +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
diff --git a/054-VDM-Package-Import-Option.md b/054-VDM-Package-Import-Option.md
new file mode 100644
index 0000000..90fc041
--- /dev/null
+++ b/054-VDM-Package-Import-Option.md
@@ -0,0 +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
diff --git a/055-Dynamic-File-and-Folder-Inclusion-concept.md b/055-Dynamic-File-and-Folder-Inclusion-concept.md
new file mode 100644
index 0000000..8f89c01
--- /dev/null
+++ b/055-Dynamic-File-and-Folder-Inclusion-concept.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..2e64c11
--- /dev/null
+++ b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md
@@ -0,0 +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
diff --git a/057-Drag-and-Drop-Upload-functionality-in-JCB.md b/057-Drag-and-Drop-Upload-functionality-in-JCB.md
new file mode 100644
index 0000000..c644b8f
--- /dev/null
+++ b/057-Drag-and-Drop-Upload-functionality-in-JCB.md
@@ -0,0 +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
diff --git a/058-The-Quick-Hello-Word-with-JCB.md b/058-The-Quick-Hello-Word-with-JCB.md
new file mode 100644
index 0000000..f79f026
--- /dev/null
+++ b/058-The-Quick-Hello-Word-with-JCB.md
@@ -0,0 +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
diff --git a/059-Adding-none-database-fields-to-an-admin-view.md b/059-Adding-none-database-fields-to-an-admin-view.md
new file mode 100644
index 0000000..f4e270c
--- /dev/null
+++ b/059-Adding-none-database-fields-to-an-admin-view.md
@@ -0,0 +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
diff --git a/060-The-custom-dashboard-option-in-JCB.md b/060-The-custom-dashboard-option-in-JCB.md
new file mode 100644
index 0000000..8e036d8
--- /dev/null
+++ b/060-The-custom-dashboard-option-in-JCB.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..927bc4b
--- /dev/null
+++ b/061-Add-or-Remove-Prefix-to-Component-Name-in-Joomla-Menu.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..74e1558
--- /dev/null
+++ b/062-Add-your-own-JCB-packages-to-the-JCB-Communty-Directory.md
@@ -0,0 +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
diff --git a/063-Proposed-Collaborative-Workflow-in-JCB.md b/063-Proposed-Collaborative-Workflow-in-JCB.md
new file mode 100644
index 0000000..67f3faa
--- /dev/null
+++ b/063-Proposed-Collaborative-Workflow-in-JCB.md
@@ -0,0 +1 @@
+I wanna talk to you about a collaborative workflow now JCB Like any other Joomla component Can function in a shared environmental easily Will you have one website or one system that is online And people can login And they can Edit documents Say that's a components Macon Click on a component And while they're working on that component No one else can Because it will in effect Lock the component out to them so if we open That list you again you see that it's checked out Answer this functionality Is available in JCB already So with it whether it's an admin view whether it's field If your login and someone else opens at our paychecks out the item and so people can work together Quite easily In a shared in Beira mint Weather have 1 JCB But multiple users More than that It's also has a very strong Promotional structure Which if you open the component Builder Permission of area you'll see that it has quite a long list I suppose longer than One might anticipate But it's huge List of permission And that means you can have different groups in your Joomla You know coops and they got into these But I have access and is allowed to work on only certain areas And So your possibilities Of setting up a development workflow with JCB In one Joomla website is endless And that was the whole idea behind here was to make JCB A place where you could have teams work together In Joomla Developing components So this is the The one that's worked from day one this hardest this approach And it is it is very powerful and I've already been told by quite a number of developers that they are using that they put teams working together On components and it is excellent So I'm happy to see that working But like we all know jcps maize most Zahra built environment is an offline environment Where you do development in your own local developing environment Where you maybe have a virtual machine running And you can do doctor appointments Or something like that when you run Joomla and You're safe within your own network And when you do that The collaborative concept of working together other developers Sort of doesn't come to its right And That's what I've been working on And the whole idea of the JCB packages was birthed out of this Meat The need to collaborate with others around a specific component So we've also started working on a area called service In which we now have actually Added This option For sftp which is Oh really smart So you know protocol And it's purely PHP so it it will function In Moving At the moment only moving zip files and things around But the idea would be in the long run That we could possibly create connections between different jcps Which could automatically synchronise things like almost like they're on the same Yeah system But ok Hi I did have a flat open on that On get up Connecting database with each other to sync development on a grid Project That was The issue that I opened up is your 233 And Then there was basically discussion between me And one of my coworkers And then Some other from the community Which ended up in Saying good this is a premium feature And although we have sort of put it on the back burner Like you see me say here I am still very much thinking about Taking this and making this reality I'm so proud of doing that Is taking a specific area of JCB And that area is the import of JCB packages And to improve this area so considerably that we basically The synchronisation will be nothing else but a JCB package traveling from one to the other And updating each other automatically and so To achieve that I started working on a feature Which now is cookies available in the latest version 2.7 Auto Wait where's it Development method right that's the one And what we called it is the default is the way that is always used where And then there's this expansion there's a tutorial about this Which really explains that you can select Specific Components That you've developed And then On the Frequency of this Cron job It will actually build and install This project automatically So that that is the first step of needing to Sort of make that connection between two projects possible No prob 6 I'm literally talking out different to my website right One being offline one being online and then This one that's online to serve like a hub And I'm everybody that's offline Would be pushing the changes to this online and pulling Again from it so that is the long Long-term I'm sorry then if you listening Did you realise where I'm heading I'm I'm trying to get to the point where I can have a theme of the will A parasol having their offline environments Doing development on the same project And as they feel they received a certain level of stability in the project and it's sitting area They can make Literally a pull request To the online environment where JCB is running And then others can review those changes and Made that component can come in as a clone And they can play around with it until they feel ja Das this is good enough And then it can be merged into the main branch somewhere So it's somehow putting get in a in a sort of an interface And Then obviously at some point I became So overwhelmed with the task That I started doing all these other little things that you now see coming about One of them being That I added a BBM package area which basically takes all the packages that we have Available online and put it right here easy to So get hold of it And So there are some free ones between them at the moment like this demo package here All of the packages that Are actually available won't get up The actual Joomla component of this package Will have the source code link Showing up so that you can actually go look if you If you let say use select Which one question and answers Then there's actually a source code Area we can go look on get up To this program and you can actually take it and install it on Joomla website to see it's functionality And to see it's features And if you then Yeah that's how you can evaluate the package easily Basically it means that this JCB back is produced as the source code that's really what a guest house do So now today The The current workflow Model Looks as follow First you need to realise there is the JCB mapped Two-piece there Mapaka component and then there is the Joomla component This is the one that is sort of the feels the views the code everything inside out JCB That can be moved The queen Jcps Being One On what website 100 other So you can actually extract a package And give it to someone and you can import it into his JCB And this is what this Is Where is the Joomla component is the produced package which Then when you compile that mapped component it produces a Joomla component and these are two Different things Although they are the same thing Now When I think about the workflow then This is affecting this But this cannot Effect This So you can Change here make changes to this package and it would uses a different Resolved In this package But if you make changes to this package it does not with me that they would make any difference to this back Package unless you make Use of what we have Call the customer code implementation We do editing Within the ID Then yes then making changes to this package will affect this one But that's all different story And Little bit Beyond what I want to explain here So when I think about a workflow then I would like to see that we make it changed to this package It gets validated by what we have here And then everybody Updates again this package to be the same as what we decided on Here now that may not make sense So the Piazza Melrose And demonstration to this I'm gonna use this question and answers Package as an example So if you were going to become A Collaborator on the question answers package Then you first need to go to the source code of it So on GitHub you would go and open the source code And you will work This source code Which would then Give you the option of making changes to this But not directly Manually But instead through JCP Now That means that you will then clone this repository that you are 4 Down to your local development environment And doing it as follow The first thing you didn't do Is you go back to your component where it's installed on your local developing environment And you open the options area So that you can set the Folder path For your gate Files You gonna have a place Where all you get files basically the component on the recipt Is going to be placed automatically for you So Yeah you would Ampath So I'm gonna place it in my Basically my User folder I'm going create a folder there call to Mama I have to do this manually And then inside of that I'm gonna add another folder called get So that's what I'm gonna do and I'm gonna save this And then I'm quickly gonna create this folders and So I'll show it to you in the command line Ok I need to first add the Company information here Can now save and close it Call another one too Tutus This is just the language make sure To put it to British at this stage that is The Best practice And oh yes not a thing I don't want to have any prefix at this stage And Yes Save and close Ok now we've got our good path setup Now I need to actually create this files In my local developing environment So I'll do that via Command line So first all Make Directory Then I'm gonna change to that directory Now In a director I'm gonna grade another Direct record kit And Change the activity as well So this is the directory where in my components are going to be placed Not the moment if we look inside of this directory there is really nothing showing But The first time I compile a component And I say to the compiler to add my Files to the git repository is going to create A father with all the So code inside it Automatically So you remember that I Cloned This repository on GitHub Joomla questions and answers Now If I do continue I need to get The JCB package for this Installed into my JCB Program The way this is done obviously we we go to the Jason B package area And we select The Questions and answers package And we Get the package Then we add the key And we At the moment there is not really any components On this in install so it's fine to leave this to yes I'm gonna also Force local update of anything And so we can just check again that it is the right package yes it's to correct the cage And the checksum You can read this Basically there is a checksum for the package and at the moment it seems that everything is fine you can make it final Shake off just clicking this link And make sure that this number is the same as the one seeing On the page here And yes it is So always good And then we click continue And there you have it we've got the component in our System This component now If I compile it for the first time Let's again just this for For your sake let me show you That there still is No File here whatsoever Ok Now I'm going to compile this component And I'm gonna say Add to repository folder Ok so this To the component been moved to your local repository folder now we already set the path for this So now you work If we have Say yes and then compile this We see that it's actually been done and it's all well And we now go back to that folder And we check again we see that now there is a folder with its exact name So if we changed into that folder Will see that it is at the moment Alice LA There's no good Information here so this Older is basically just a source code without Any good Connected To it So what we gonna do now At this point We are gonna connect your forked version That you have on GitHub To this folders here And that from now on If you make a change to the component It will be and you'll have to push the changes in this folder to the GitHub repository The way to make this the Get up Link the two to each other SA use the following commands Making sure that you're in the correct directory com - Questions and Dash and - answers - - July - 3 You can run the command r m The chef Capital r Asterix Now you know You might say why This week Compile it in now delete everything Well unfortunately That is the only way to do this Without difficulty you first need to get the information down from get up And Then you might ask why didn't we just do that first and that was because It seemed easier to just let JCB build folder for you And then You use the father And so I'm gonna just wipe out all the files if we checked there now Basically no file left Then we going to Start by Actually pulling The The files down from Qatar First is to say get in it Then to actually add the remote branch And to get the remote branches URL your type out get remote add origin Then go to GitHub Where you f***** the branch So and then here you get the your old is copying it here You can either use the htps or the SSH which in my case is what I prefer So your pasted in there and click So to save it If you now would check the the conflict information You see that this remote branch is being added Now the next thing to do is to pull down the master branch This is done with get Pull origin Master This will now get all the information from get out Which basically is the same as what you have Here behind my Command line screen So if we were now to gonna do LS Hello Will see that there There is actually The files all back as they should be but now we have get here as well And my My Command line shows us that we have a git repository and we are on the master branch Ok So that was to get As linked to this repository Now we can go and compile it again at the moment if we do get status It should say that everything is fine and clean And there is no difference between these two But The moment we now Do another compile Is going to change the files obviously So now if we do get Status We see that all these files were modified And we can check to see what is it that was modified by doing git diff And we'll see mostly ok it at it More lines The compiled version Was the 24th of April And now it's the 5th of May Ok scroll down Ok So nice most ok here is another one that changed Ok so there's some XML de changed Hi Jason we made a improvement To the Jason to string in JCB Search also updated those functions And we removed the broom it is Happy prefix To the name so that's been updated So you can look through the diff to see all the changes that has been made The reason why The XML file format is changed Is because we are using different XML compiler here And I can show you that and a moment That you might understand K hold on Here in the global options There is two ways to compile the XML in JCB It's really about While the reason why there are two ways it's because some servers don't support this one This simplexml Option It doesn't support it and mostly because it doesn't have all the PHP Models of things applications Activated So What we then have as a string manipulation option Which basically doesn't use the simplexml but does actually Story Place most of the time Building all these XML field string by string This one is How old days to be started And is most certainly Working very well so I like using it But It's not necessarily The best option It's faster Survey compare that it again now We will most probably see less changes to the XML Because I remember that back he's actually did Have Yeah it's a juice the string manipulation option 30 x is this exit this dude Rescue And then again How to go back in And let's see what changed now dates And yeah there's much less I don't see in XML changes Now Ok So Basically it's just a date That is changed And it's talking about the build date Now this is something we might need to look at Because the reason why it's changed is because we imported it Answer your your application things to build only started Today Wait no 24th of April Times flying that's all I realise that that is actually correct Ok So you we have All the changes is really primarily Just the built date And there's a little bit here there which JCP itself has improved So It's improved with this very bored here Determines that that it's external Value that's with adjacent string memo I said to We've done and improvement there Sabrina just actually flirting the JCB improvement Which is really the way it should be Ok So that means If you now we were going to make a pull request We most probably will say thank you because you basically just updating The JCB improvements to the component Ok so let's show you how that will work You would now make a commit We should look something like this Aroma always show you the the simple easy way to do it There are more precise Better maybe but Difficult difficult ways So hope there's a component with improvements made to JCB And we click that obviously you sign Your comment and Get Porsche So this point You have made a change to component fire your JCP Install And you're pushing it back To your fault version Of this components Joomla component which is on guitar Now that means That if you refresh this page now He'll say that it won't commit ahead Now I think at this point we need to discuss how many changes should you make before you make a pulley Request And if 5677 people make the same changes Regarding Implementing to mlazi vs improvements Who is the we accept in All those kind of things I suppose we'll still be ironed out as we go But at this point you could click make for your quest And it will automatically take Take the Components and show that it can remove then you clicked On that make people request And your comment should usually end up here in the In the title area We will for every package that we manage we'll arrange the add a pull request template With instructions And how to manage it from here further And at this point you're actually saying I've made changes to the JCB Program Package Whatever you wanna call it And these are the changes of made tested and please let me know If you Like what I've done N There will be discussions here and please do not be discouraged if it doesn't go You know quickly There there always be reasons for us to always go through things quite slowly and thoroughly I know in our own In-house developing team Things are going quite fast at this point because we have Sort of come to place of understanding each other's Perspective so it goes quickly But Working with strangers and people we don't know Is obviously going to be more difficult and slower Then you won't have the option of editing all these values like I do because I actually own this report Corsetry But you must probably will be able to Come up to here and actually put in The necessary information that will ask for And then click here create pull request So this point If I did that It will Great a pull request and The developers will be notified and will start communicating from here Now when this pull request with your changes have been Fully accepted And obviously you haven't made further changes To this component Then The next part of the Process needs to happen So If I can illustrate what has happened so far Your first fault The component when you imported that components JCB package Then you made changes in this case we didn't make changes but you could have added a new field or a new View The new compiled It Then in your local development You committed to changes to the get Positive so there's The year is also Linked And commit the changes to get Then you put the changes to the forked A virgin And then you matter pull request And now the next step And this is the place where the Jason package manager is going to really come into play Because now You want to contribute this changes not only To the actual Joomla component which already is well-being You know this this Pull request Is contributing it To this area of the component When this has been finalised The Next Step Is to also contribute it To the JCB map to component And this one is Crucial because then everybody who's Helping to the valet The map component Get this update Via JCB package manager And Ok so we're going to now demonstrate the next step Listen this point your permit is been accepted and merged into the Root The master branch Of the repository Then it should look like this it will say merged And if we were gonna look at this year It's is now up that the component with him prove Nathan Jason B Ok so Really That was The the point at which the next step must take place only once The changes you've made has been accepted In the car Joomla component Butter sauce Of the project Now The Next Step is to do that with Jason the package as well Now all very EMS JCB packages are kept In the day spa packages repository So the next thing you need to do is you need to fork this repository How many 4K suppository Few weeks ago Few days ago But you'll see that It's already 4 commit behind the master branch I can't really do anything Until I get in sync again With this master branch Making a commit now I messed things up and so First thing I'm going to do is make sure that this group this repository Is Insync With the master branch So obviously I needed to be this important needs to be cloned down to my local system Those of you that have quite a number of repositories and keeping them all and sync is a pain When is the shell script update forks Which is very useful Even if you're gonna run the Shell script itself Please sort of Pick up some the commands How to get this done The way this does the moment what it does is it runs I know gets all the repositories that you Your fault and then it also updates them So there are a number of SSH files that you should have a look at I'm I'm just gonna open this Update repositories Well I got the file open here I realise ok this is not gonna work Unless you are able to understand Bosch You must probably not gonna actually Builder follow this So Let me rather do the commands one of the time Inside of that Repo But at least you know that there is a package here And if you do know Get a Sorry I'm in bash Then this is most certainly something to try out It's working very well I'm using it quite a lot And it's give you all my fault repositories up to date and then sync With the master branch so that if I work with them That that it already is ready and I'm able to just you know Jump in and do it But it's not that hard to do it manually anyway So let's do that If you haven't cloned down the repository to your local developing a virement Then you need to do that first nothing of what I'm gonna show you now will work unless you've done that Doki doki mint Asians that get up has that helps with us quite a lot so if your windows For Mac or Linux Yeah you can actually go to this your house or just type in Google update my for creeper And do a search And then look for the one Which sort of Well this is a place you wanna end up at I'm a little gonna tell you that you must first configure Your report to actually see the remote upstream So click on that and do this first And then we'll come back to this one First we do is we gonna just check out In a report what is the remote branches And so we see that it only has this To remote branches And it's fetching food from those Now we want to add the remote branch Which is the upstream branch And we gonna use This one and At the original owner so this one is your name This one must be the original owners name And the original repositories name So those two Values you need to You know update The way to get them is go back to your Repo And just Click on this Value here This should take you to To that Original France And then you can just get it Bike opening This value here So then your type remote Add upstream Like it says there on guitar And you will Control shift We To paste in command line Or as if you you can also paste With the mouse And so there is the repository I have a little Change to my SSH which means I use BBM To her done Tiff I the server name That is something you must have you wouldn't need to do And you click enter Ok so now If we do that Remote branch will now see that there are two Remote branches Two branches Real remote And what is the origin in one of the upstream And that now is Time for The Next Step Which is the sink the fork So first what we will do It will fetch the upstream This will basically fetch the files That has changed From the upstream Which of the states we know Is there Main Master branch Then just to make sure that you are on the master branch We are going to Say Get Checkout Master To make sure you are on the master branch next We are going to Merge The upstream branch into your master branch This will look differently depending on what happened But It will give you a bunch of emotion and then This bronze is now basically The local branch is now in sync With master branch Upstream Master branch now To get this To also update your Branch on GitHub you just need to get Porsche And this will push the changes Back to get Now there are many things that can actually Go wrong or Sort of work out different In in Gate And so I'm not here to teach you how to use git Made you run into Some Grey areas or difficult issues You need to Google and Figure out how to get this done This is just Illustrating The Proposed workflow Of developing components in JCB while collaborating With the greater community Around a JCP package Does it you that watched The tutorial on how to contribute To the community Directory Half day spa packages The match of what I'm gonna be explaining further Is there any covered in that previous tutorial And So we are almost finished with the circle We started by forking the JCB sorry did you lie component And importing the j2ee package Then making changes to that And then compiled it And pushed those changes to the Joomla Repo And when those changes were accepted Into that Repo We now Went to the place where we found the JCP package which in vdms case Is the VDM package area Where if it was a community component then you would follow The explanation given to you in that previous tutorial I'm at this point what we going to do is we basically gonna export the day to be package Added to these packages that we have here And run our hash so if we look at this LS the LA We've got a Hash is a file here But if you want it now There there should be no changes to the repo And Just as we expected nothing changed So everything is up to date at the moment And so the only file we are going to change Is basically these three files here Because we are gonna update this package by exporting it from JCB With the changes we've made Now Since you've contributed those changes to this Question and answers Jamila A component Repulse repository Those who are gonna validate this Push switch we're about to make I'm gonna go back to that repository And make sure that you're not changing things other than we should contribute it there I'm fat But some point my Anticipation is to actually build a bot which would validate this for For us so that this stage it will still be live with manual so be slow Immensely will speed it up and the validation will happen faster and more efficient So you and JCB We now basically click on questions and answers And there is one little snag here which I realised I haven't actually resolved it And that is that you now need to actually have the same King for this package Set in the admin or rather in the component As the one that the developer uses And that can only be given to you by the original owner of this package Which in this case is myself So and where does that what is that mean it means that this export key Must be the same one Is the one that the package was compiled with originally Does you have imported this and you see it clear You can be 1% sure it is not the same key Because this is encrypted field You are basically just seeing the encrypted value Not the actual key The actual key was never exported An encrypted it always remains encrypted and that's why we have the encrypted Fields all around ACP Nope because we think is gonna make the database more secure necessarily That is because when we export and move data around That which is secret stay secret And only within that specific component developing environment of those She's unique So the way you get this is you need to communicate With that developer and actually ask him permission Whether you can extend on this package and then he needs to manually give you this key And so Says I can ask that From From for myself I'm gonna just add that clear to me sure that it is the same key With which it originally was compiled with Ok so now we've got those keys to be the same And it's sort of the way to tell everyone then you and that other developer Are an agreement That this in fact it possibly could happen That once your pull request To the JCP sorry to the July component Repo Has been merged and accepted Then that team needs to give you the key That's how I think will work I'm not home percent sure this gonna be cemented Always got it changed But you do realise that trust and collaboration goes hand in hand So they need to give you the key if it's not a JCP package that actually quiet sake That is a different story And yet the same sort of procedure will reply except the exchange of keys won't be necessary But now that you've got the key in place we basically click here And export the day sweet package So we now have this package Here in this folder And we now need to move it Into the repository Which is also Obviously the one we have now synchronised with our forked version Try video I'm gonna copy it Russia Cup That's got it From my temple folder in my Joomla website To this repository pasted in And is gonna ask if it's with Replace and we're gonna say yes Replace it And there we go with got the package updated Now And we go back to command line And we do Get Turf We'll see that That file is changed Now we also need to run this h This has file To update the And Now get Status P**** the does files have updated So You possibly I'm not sure what the bill Convention but I think Your pull request to the Joomla Repository of this component The idea of that could possibly be useful here It's just to sort of give a heads up and validate that you did First Contributed code To the actual Joomla component and it was accepted And now this is the change to the package Which also now needs to be looked at Turacos This is the pull request URL Hi I think we just gonna use that And I'll commit message And Use the same commit message Search it looks something like this Update the component with the improvements made in JCB and then be serious And then The repositories username or organisation name The repository name With this Hash one Since it's The pool request was number one Ok that would Do and then Will submit that And Now we push those changes to our Version of the repository Going back to get up then Of the precious been submitted Have a look at this commit You see it actually has a link And this link is to that issue on get up To be easy for us to trace where you have contributed it to the actual Joomla component And why it's all happened being the same comment message Now this stage you again would make a pull request To the master branch Where we will basically review The changes Again at this stage We don't have a pull request templates and everything in place But as soon as they do get to be placed there and please follow those instructions Will try to be as follows we can But obviously being a community is always up for discussion and we will Try and Do this The right way At the moment we can put the ref in the description and then just again the comment in the Title if it's a long comment then just put Maybe a summary here short one and put the wrong comment back in here Ok and then you basically created the pool Quest At this point discussion will begin Validating to see that you followed all the procedures And that this package is stable and ready to become part of the Actual Repo And then once accepted it will be merged into the master branch Become available to the rest of Community So that's At the moment Illustration of what I consider a collaborative workflow in JCB So we Where at Next Step And we had to move today CB Where They have now accepted and merged The Changes you made To the Joomla component And now the owner has given you the original key Because they trust The changes you've made And Uniform to JCB package repository Make sure we have it in sync if it's an old fork Then update the key with the key from the owner Then export to jsp package Added to the local mi4 with commit message and the reference As illustrated Then p**** changed to your fault report and make a pull request So here Is The Whistler This could Become nicely documented I suppose Someone can take that phone them to even Make some nice search art I maybe not the correct guy for the job And this might Expand and become maybe much more advanced I always could be made more simple But in a nutshell Test Below an hour We're at 47 Hermanus sort of This is the explanation of the collaborative Workflow with external Partners Around a JCB package Once this pull request git merge we are basically back After The dishes in sink And This is in sync And this will continue and I'll go on and on And obviously others will contribute to There there are some other complexities also In this process But that is sort of what I can see happening I know that when you Pull the changes from the previous package you know this Where is it You know the import the JC with package There is the option to import it as a clone Order import it with emerge Now the idea would be that you will only import and merge your JCB package With the global Repo As they accept This pull request And so that You would always stay in sync with what actually is currently the community version Of the package And you could import it it as a clone and make changes to the Clone and effect that will not a fake Take the Maimane Master Version But this all is a trial and error process which You would Sort of show use teach yourself how that works And so my idea is to do that within a blank install try it out Pulling some of the 3 virgins But play around with it Until you become confident And then you are able to also start contributing Do not only the community packages But also William packages to which you've got access And so help improve those components For everyone Well thanks for watching How to sit inside for And I'm sure there might be things that some of you would not able to follow And I would encourage you to just Google to have an Man do some tutorials and Then you I'm sure yours Manage
\ No newline at end of file
diff --git a/064-How-to-install-jcb-packages.md b/064-How-to-install-jcb-packages.md
new file mode 100644
index 0000000..f29713e
--- /dev/null
+++ b/064-How-to-install-jcb-packages.md
@@ -0,0 +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
diff --git a/065-JAB18-Using-Joomla-Component-Builder.md b/065-JAB18-Using-Joomla-Component-Builder.md
new file mode 100644
index 0000000..587a3ef
--- /dev/null
+++ b/065-JAB18-Using-Joomla-Component-Builder.md
@@ -0,0 +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
diff --git a/066-The-new-fields-Area-to-make-things-easier.md b/066-The-new-fields-Area-to-make-things-easier.md
new file mode 100644
index 0000000..32bd4d4
--- /dev/null
+++ b/066-The-new-fields-Area-to-make-things-easier.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..854a574
--- /dev/null
+++ b/067-Adding-Language-String-to-your-Component-and-get-the-Language-Placeholder-for-dynamic-use.md
@@ -0,0 +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
diff --git a/068-Library-Manager-Anticipated-Functionality.md b/068-Library-Manager-Anticipated-Functionality.md
new file mode 100644
index 0000000..915f1f9
--- /dev/null
+++ b/068-Library-Manager-Anticipated-Functionality.md
@@ -0,0 +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
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
new file mode 100644
index 0000000..2697303
--- /dev/null
+++ b/069-Join-Fields-in-the-admin-list-view-with-field-relations.md
@@ -0,0 +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
diff --git a/070-How-to-change-the-License-Template-in-JCB.md b/070-How-to-change-the-License-Template-in-JCB.md
new file mode 100644
index 0000000..9e7da82
--- /dev/null
+++ b/070-How-to-change-the-License-Template-in-JCB.md
@@ -0,0 +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
diff --git a/071-Reuse-Custom-Code.md b/071-Reuse-Custom-Code.md
new file mode 100644
index 0000000..6706d14
--- /dev/null
+++ b/071-Reuse-Custom-Code.md
@@ -0,0 +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