011 Component Scripts

Hi So we just looked at Settings Of your component 00:00:05 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 you know Interface to add custom Scripting to your component in a global way So obviously you can have custom scripting per per Admin Sorry per admin backend view 00:00:28 But you can also do that within the global scope with Regards to many certain values The the one thing that is Nice to have here is You can add Create user helper method To the component Now the user helper method is simply code If you do not know how to write php this method will be of no use to you at all 00:00:54 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 Implemented This feature And it's called The cost-benefit projection tool Now if you click on companies You can actually Click new 00:01:19 And then It has an area for you to create a company And ideally 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 00:01:49 And also the needed information of course Then you will Once you click save Close or save The system will actually create a user for you An automatically email the user details to that user And that is because of that specific helper class that I Added So Ticking helper class 00:02:14 Now obviously 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 if we open up company You have an area called Post safe OK it's this one here Is the postsaveHook 00:02:38 Remember When we'd 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 view for company And if I go to PHP You would see that I have some Ajax there And then I have Area Which is the post safe method 00:03:03 I need a post safe method I'm basically checking something some values And then when I realized that this user does not exist let me just check here company Here it is If the user does not exist Basically I'm doing a check here Then I'm using the helper No wait that is not the feature There it is Create user 00:03:41 So again I've spoken about this placeholder Convention before I here you are using the brackets Convention not the Hash one So three brackets that must be uppercase component And then I get 3 brackets and helper and this will be replaced with the components code Name Ok so That is what that does and then it basically Gets the helper class Create user So in the helper class of this component 00:04:13 If I close this down Can I go to the helper And I open The helper class you see that is the name So it is the components name And then it's called helper And in helper class there is a Feature called Create user there it is 00:04:39 So basically it gets an array in it And that array has some values Which will be using Like password 1password 2 And it will set the password so I'm not gonna explain this code basically just showed you where the function is So the function was added to the components helper class and in that script I'm simply 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 is random 00:05:28 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 Array ready get a model now the model I Got from there get model again we are using a component builder Custom method which gets the specific model from the system And then basically fires the register Method upon this dataset And then Updates 00:06:11 The parameters for the system Regarding this new user Sends 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 there we have the ID If we have the ID 00:06:41 If you don't have the ID will send a message To the user And if we have the ID will basically store it into that database To connect That item To that user Automatically and then click save Now That is Custom scripting 00:06:59 So this little switch Is this adding that Method to your helper class That's all it does Where as this switch adds the Uikit library to your media folder As well as integrates it Dynamically Wherever Are you use 00:07:19 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 backend views entire backend So if You wanna add CSS that would target the whole back end and then you do it there This is a place for you to add your own custom scripting to the helper class the admin helper class 00:07:47 so as you can see I have a whole custom Scripting here for Sermon distributor For the admin Area And as well As an event Now I spoke about this event concept briefly before But what we want to achieve with the event is basically on every page 00:08:09 If you look at This sermon distributor Back end part of it It has a file which is the in Main file Which Joomla calls first calls 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 function So it always Triggers 00:08:40 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 and Scroll to the top Then you would see that I have It was the top I was just in the wrong file It says here 00:09:08 Load Dropbox Ajax Now This again it's just another function right so I wrote that function So you can basically add whatever functions you want to run globally Every time a page opens Now that is a 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 00:09:35 Here we are loading 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 script was taken and placed inside of the global event The trigger This trigger is set by Component builder itself you don't need to write that 00:10:03 It will insert this trigger itself just because you clicked yes You need to then just Add the script that must run inside of the global event Wich 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 00:10:29 I added that function here So I basically just used That name And called it "self" because we inside of that class right so that's how you call Static class Method And a past the same information because In my method I'm adding JavaScript to the dorm right So to the document object so I want that document and then I said add script declaration 00:10:59 And simply that means on every page of this component in the back end it adds this little script which then calls By Ajax Which I explained previously And it starts checking the Dropbox listing automatically So that's 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 in other components and that's why I added this event switch Ok This event switch here Ok and then this same goes for the site area 00:11:37 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 end 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 helpers site class 00:12:09 And the Helper admin 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 trigger is that same script Now you might say well if everybody Triggers The Script Then it's gonna be running multiple times Well 00:12:32 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 set 00:12:56 For the Sermon distributor you can set how often you want Dropbox links to be updated Every day every 2 days And so this Script If it checks 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 the user himself don't Even notice a delay in his page so the page opens as fast as it always do and then fire that Ajax call to the server Which starts 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 all that And I'm not gonna try and explain that to you now I'm just saying that this is all possible inside of component builder Simply through these custom areas you can also add a SQL dump 00:13:50 Instead of adding it to the actual views you can export all the views and add them 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 SQL 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 you is dummy 00:14:23 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 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 00:14:53 Add another custom view wish I could have done custom admin view I wanted it simply 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 on typing Ok so here we go Basically I created a 00:15:26 Method called get usage data it's a public function Public method And inside it I added my script And obviously inside of this script 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 usage statistics and a header we made Table 00:16:01 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 that convention of Open bracket ? PHP and Echo and then closing it again there so basically 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 00:16:46 By 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 to a Global the result of that Get will be added to this And without the Get Name so that the convention 00:17:15 The convention is you could've called that 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 the this So 00:17:37 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 set to Set that as that one is set And then this one is Visit check This one is set companies and set countries 00:18:03 So you can see I could add a lot of PHP in here And all these PHP together Basically gets the data That we want on the page And when I get the data I placed it In what is seen as the item Ok Oh you know what let me see set statistics return this statistics Ok so I'm returning a field here or a a method value 00:18:43 And this method value is being populated in this sub functions And in one of them It is adding Over here The name items as a a Pointer So it becomes an object Well it is an object in fact I Think I set it is an object up here there we go And 00:19:09 There I look through the companies and as I look through them I'm busy totalling and adding and going on I guess so I'm not going 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 set 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 00:19:45 And this area here Now I could have made this much simpler right so maybe not look that intense to you but this could have been a simple Class in 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 is if you see is not compulsory so you can set is Not needed and then in here you could just do HTML so if you just wanna give information To the user about who made the component maybe or some would like to run a rss feed here 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 you reach in has the convention 00:20:34 Of dropping the get and then using that front area usage data To place information in which you can parse 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 realize 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 Developed 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 00:21:27 And maybe their FTP server concepts. Thanks for watching