034 How to add Custom Buttons in JCB to your component Admin Area

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