011 Component Scripts

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