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

HOW TO ADD CUSTOM BUTTONS IN JCB TO YOUR COMPONENT ADMIN AREA

Hi, I want to demonstrate to you 00:00:03 how to add a button to your components admin list area or in the edit area of the view. I possibly have touched on this in previous tutorials but I thought let's make one tutorial that deals with that. I have a blank install of JCB here, I've got this demo component installed 00:00:33 or mapped. I've been installed it into this website.

Joomla Demo Dashboard - Look

If I go to looks, it just looks as it should and we can create an item. See video - the Give it some details. Now we click save and close, and we have an item. You will see there's a whole bunch of buttons and if you go into the test, there's also a bunch of buttons. 00:01:19 All of them are usually there, those are the default buttons. So what do you want to do if you want to create buttons in these areas without custom coding, you can of course do it with custom coding, but there is a JCB way to do it in JCB. Let's go back to our admin views. And then we open the admin view called look. And you'll see there's custom buttons area, I click on that 00:02:02 We say yes we want to add custom button.

Controller Method - List View Controller Method

You would see that it opens control methods, and also list view controller methods. 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 list view and edit view. [00:02:32](https://wwSo lw.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m32s) The list view has its own controller and model. 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 going to explain much about the PHP being placed in these blocks, because that should be something you know how to do. If you don't you need to learn, you need to study to work with Joomla API. 00:03:02

Custom Button

• Icon - Joomla Standard Icomoon Fonds

So you do a custom button, you'd click on adding a button. Here's your icon you can select any of the icons these are the default Joomla icons that they use also called Icon, Icomoon or something. So you can use that.

• Name of the Button

Then the name of the button, what you want to call it? I'm just going to call it test for now.

• Target Controller Method - Controller Method Name

Then the name of the controller method. So I'm going to call that 00:03:39 getTested.

• Target - Set The Target View Type

We'll decide is this going to be an edit view, a single view target, a list view or both where must this button show up. So I'm going to do list.

• Type - For List Target

If it's a list view, 00:04:02 then we could decide whether this is only a function. Now when it is a selection, it means that you need to select some items. Then click the button for it to submit those ids of the selected items. If it is a only a function you don't need to select anything. When you click the button, function it will be triggered, 00:04:30 which doesn't require you to give it any information. So it's going to do something, And you need to be able to code that. I'm just going to use the default. The default is very much like selection but it behave differently. 00:04:57 I think the best way to do this is select one of the options, compile the component and go look at the code.

PHP (Controller Method)

I'll show you where the code ends up. Then you can decide what you want to do. I'm going to save this as a selection in a list view and save. At this stage if we do not add values to these blocks for some reason it will scream at us. We would just add two 00:05:31 fore slashes//. Which satisfies it's requirement of having information. I'm going to add a little method here that simply going to redirect us to the dashboard. I'm going to call it getTested. That is simply a controller method. It must be public. 00:05:58 Here we simply checking whether it was submitted from the current website and then we just going to redirect to the components dashboard. We not going to need a method now, because we just redirecting. I will show you that in a minute. Let me just do this for now. Let's save and close. Let's go compile this component, we will just select 00:06:29 the demo component, compile it, then re-install it to see the changes. We going to go to the component, then to looks and now we will see there is a new button called test. If we click it, it's simply redirect us to the dashboard. So that's all it does just redirects us, and you can then redirect to anything. So that's just a first way of implementing a button in the list view. 00:07:05

More Options

Now let us go back to to editing that the functionality there for the showing you some more Options So just open this again Go to custom buttons Now maybe just add another button We call it single And we again call it something like a And The controller method And will leave this to default and then 00:07:50 Save So now in the controller method we said we gonna have a function called get done and So here will just put a Public function So this time we will actually get the model and then Do something with it in the model we can also get the Item values Since the moment you click this button you're inside of the item and it automatically submit the Form So we can actually grab those items values obviously it could be different values 00:08:36 from what's in the database just keep that in mind because You could change the values then click that button and it will actually submit these new changed values And yet those values have not been saved To the database And so if you want those values to actually now be in the database you'll need to actually Put it there And That's again I'm not gonna demonstrate how to do that but the model has a save method And you should actually just Do the necessary sanitation and then 00:09:12 Trigger the save message The save method and it should store the data So for our purposes I'm just gonna grab the data and Not go through all that I'm just gonna do a little you know verification maybe and And then return back either an error or or success so First we going get the values So now that we have the data we can check Whether the values that we want to use is actually There and available so let's say we wanna make sure that this is already a saved Item 00:09:51 Then we at least check whether the ID is more than 0 We need to have a name and Then we can check for that And so we can do some checking within the controller Before we trigger the model And you know run the function we intend Then we triggered the model we decide what we wanna call a method in the model so I just chose Something random and then we can just create that method in the model area And then do whatever we wanna do So we 00:10:32 Start doing some Logic in the model Set out of above method however Controller Now we busy with the model area Now Do keep in mind that If the model is unsuccessful you wanna do something It's a data set But the model is not being successful You wanna do something 00:10:55 And if you data isn't said we also wanna do something So those are the areas where in which can we can add some messages that we wanna give back to the user Tell them what's happening And so In the model we basically just gonna perform our task and when they we have achieved our goal we give back True whether we have failed we give back false and then that would Trigger on messages in the controller So this is just Giving a basic overview of setting up some model controller connected with a button So I'm gonna add some of this code in here you are welcome to pause the movie and then drop down whatever 00:11:37 You'd like to reuse but the reality is You should actually be able to do this without my help And therefore if you don't know what I'm doing here then please go Google a little more Go find out some more tutorials elsewhere How to create model And controller relationships In Joomla Using it's API The other reality is you can obviously open this model and controller Of the specific View 00:12:11 In your IDE and in there you can see whether you know how the code is actually added In what is happening in how is it done And you can educate yourself That way as well Ok I'm just gonna add to code in then Ok so here I've just added some code that you can also reuse And this basically if the work has been done will let the user know it's done If work wasn't done we also let him know If we couldn't even detect The required values then we just throw a major error and 00:12:51 Just quit out So That is really The The controller I didn't populate much of the model because you should design your own logic but I do return true so to Give this first message Then we'll go to the IDE change it to Falls again to demonstrate You know the response And just play around with the code in the IDE 00:13:17 To give you a sort of a feel of how to approach it from that Direction ok so we gonna just save this Then go and compile that again Backup Just compile it And then Install the new compiled version And open the component Go to Looks So we can see how our test button still here if we click it still takes us to the dashboard 00:14:01 Now let's open the test Now we have a new button here Worked If you click it now it'll basically give us The work was done because our method returns true Now let me open the IDE Ok looking at our Controller We see that Down here Somewhere 00:14:32 This is the front end I should go to the back end Ok there it is Controller First we gonna open the list one which is the plural Version And here we see get tested was added And there is a little method Then if we go to the Edit singular one 00:15:00 Then getdone here is our method And all our functions And JCB has Added The Script to the translation text so everything here looks fine If you now go to the model And we open The the look model We'll see that 00:15:22 It has a new method added here somewhere Scroll down till we see it Sorry it was way up here I scrolled to Fast And so I missed it So just here after get table Here it added our little method So now Add this to false And save 00:15:47 Go back to Joomla And then click our Button again And now it says work was not done Because the method returned false So if we Change that to True again And save then it should work Now let's test out another one Let's also make this 00:16:16 you know Not execute Save this so we can get this error Go back to Joomla Click a button And now it even kicks us out of the item And it says a major error has occurred The reason why it kicked us Completely out of the item didn't check it in Which is actually not ideal but 00:16:39 You could fix that By looking at some of the other Controllers And seeing what they do When they want to kick you out You know educate yourself by Looking at some of how Joomla implements Some of these features Now Ok so 00:17:02 We Basically got what we expected we are going to change this back safe Go back to the view Open that you again Click our button And now we get all is done and good Ok so That is a quick demonstration of adding a list button As well as adding a button inside of the edit View 00:17:29 Like I said you could Actually add one button both as a list and inside If you were to go to That specific Button let's demonstrate that quickly And we can open it and Then instead of saying list here we say both and we click Save Now 00:17:58 We'll obviously have to Add This method Get tested Also to the Single View like that And then Save And then 00:18:22 Close out of this Compile But they keep on clicking that Backup So used to doing that And won't work now because I haven't set up to correct paths Ok Install it Now let's first go look at the code now to help you see where the button is being added I mean I shown you the controller I showed you 00:18:56 the model But if you go to the view and you open look and you open this view HTML. PHP And you open you go to add toolbar You'll see that here It actually Has added a custom Button Get done and get tested To the view 00:19:22 And It is Basically that is the method That is gonna be called By this specific button so it's gonna look in In the look controller And get This method That's really how it works It also adds a switch a permissional switch 00:19:47 To the button if this specific user doesn't have the right to do the work Button Then it won't show the button And it will also If you carry those permission structures through to your controller It'll stop it even from being executed You know Manually via URL But this that kind of security and implementation you'll need to know how to do that 00:20:14 Look at Joomla way of implementing it because you need to in the controller check whether this user has the permission And so you need to know how to check that permission as well ok so That's your showing you how the button gets added into the view And where that code is and you can go look at it Now I'm going back to to Joomla And basically opening our component And we go to Looks we still have our tested here But now if we open the edit we will see have a got tested here as well And if we click it 00:20:53 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