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

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

00:00:00

How to add a button to the Components Admin List area or in the Edit area of the view. Possibly this had been touched on in previous tutorials but this tutorial will specifically deals with it. Here is a blank install of JCB, and this demo component had been installed or mapped. It had been installed into this website.

Joomla Demo Dashboard - Look

00:00:38

If 'Looks' is opened; it seems that everything is as it should, so an item can be created . (See video) (In Description; 'Give it some details'). Click save and close, and we have an item. There is a whole bunch of buttons and if you go into the test, there is also a bunch of buttons. 00:01:19 All of them are usually there, those are the default buttons. The aim is to create buttons in these areas without custom coding, of course it could be done with custom coding, but there is a way to do it in JCB. Go back to the Admin Views and open the Admin View called 'Look'. When the Custom Buttons area may be seen, click on that, and say 'yes' to 'Add Custom Button'.

PHP Controller Method - List View Controller Method

00:02:05

You would see that it opens PHP (Controller Methods), and also PHP List View (Controller Methods). It is necessary to understand the MVC, the controller, the model, again the controller and the model. Each view has two controllers and two models. Because it has a List view and Edit view. 00:02:32 The List view has its own controller and model. The Edit view has his own controller and model, so depending on where the button is placed. It will affect which model and which controller is needed. Assuming that you are familiar with Joomla API, not much will be explained about the PHP being placed in these blocks

Custom Button

00:03:07

At the Custom Button option, click on 'add'. At 'Icon-Joomla Standard Icomoom Fonts' any of the default Joomla icons may be selected and be used. Then the 'Name' of the button, call it test for now. Then the name of the Controller method may be called 'getTested'.00:03:39
To set the Target View Type: Decide whether this going to be an edit view, a single view target, a list view or both, where this button should show up. In this instance, 'list' is selected. If it is a List view, then it could be decided whether this is only a function.00:04:02 Now when it is a selection, it means that it is necessary to select some items. Then click the button for it to submit those IDs of the selected items. If it is only a function it is not necessary to select anything. If the button is clicked, a function will be triggered, which does not require that any information should be given to it.00:04:30 Whatever the result, you need to be able to code that. The 'Default' will be used. The default is very much like selection but it behave differently. 00:04:57 The best way to do this is to 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 editing that functionality there, by showing you some more options. Go to custom buttons. Add another button. Target - we call it single. Name - we call it worked. The controller method - getDone, and we will leave Type to default and then 00:07:50 save. In the controller method we set we going to have a function called getDone. Here(PHP controller method) we will put a public function. This time we will 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. We can grab those items values, 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. If you want those values to be in the database, you'll need to put it there. I'm not going to demonstrate how to do that, but the model has a save method, and you should do the necessary sanitation, and 00:09:12 trigger the save method, and it should store the data. I'm just going to grab the data. I'm just going to do a little verification maybe, and then return back either an error or a success.

Checking Within Controller Before Trigger The Model

First we going get the values. We have the data, we can check whether the values that we want to use is there and available. We want to 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. We can do some checking within the controller before we trigger the model, and run the function we intend. Then we triggered the model, we decide what we want to call a method in the model. I chose something random and then we can create that method in the model area. And then do whatever we want to do.

Logic In The Model Methods

So we 00:10:32 start doing some logic in the model. We have set up of above controller method. Now we are busy within the model area. Do keep in mind that if the model is unsuccessful, you want to do something, if the data is set, but the model is not being successful, you want to do something, 00:10:55 and if your data isn't set, we also want to do something. Those are the areas in which we can add some messages that we want to give back to the user, to tell them what's happening. In the model, we are going to perform our task, and when we have achieved our goal, we give back true, whether we have failed, we give back false, and then that would trigger our messages in the controller. This is just giving a basic overview of setting up some model controller connected with a button.

Adding Code

I'm going to add some of this code in here, you are welcome to pause the tutorial 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. 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 open this model and controller of the specific view 00:12:11 in your IDE and in there you can see how the code is added, and what is happening, and how is it done. You can educate yourself that way as well. I'm going to add the code in. I've just added some code that you can also reuse and this basically, if the work has been done, we 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 quit out. That is really 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.

Demonstration of Adding A List Button

Then we'll go to the IDE change it to false again to demonstrate the response. And play around with the code in the IDE 00:13:17 to give you a feel of how to approach it from that direction. We going to save this, then go and compile it. Then install the new compiled version. Open the component. Go to Looks. We can see how our test button is still here, if we click it, it still takes us to the dashboard. 00:14:01 Let's open the test. We have a new button here Worked. If you click it now, it'll give us the work was done, because our method returns true. Let me open the IDE. Looking at our controller in the back end. 00:14:32 First we going to open the list one(looks.php) which is the plural version. We see getTested was added, and there is our little method. If we go to the edit singular one(look.php), 00:15:00 and getdone. Here is our method, and all our functions. And JCB has added the script to the translation text. Everything here looks fine. If we go to the model, we open the look model, we'll see that 00:15:22 it has a new method added. So just after getTable, here it is added our little method. So I will 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.

Demonstration Adding A Button Inside Of Edit View

Now let's test out another one. Let's also make this 00:16:16 not execute, save this(see video), so we can get this error. Go back to Joomla click worked button. Now it even kicks us out of the item. It says a major error has occurred. The reason why it's kicked us completely out of the item, it didn't check it in which is not ideal, but 00:16:39 you could fix that by looking at some of the other controladding a button inside of the edit viewlers, and seeing what they do when they want to kick you out. Educate yourself by looking at some of how Joomla implements some of these features. [00:17:02](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlEROk so LQgpMRE&t=00h17m02s) We got what we expected. We are going to change this back, save. Go back to the view. Open that view again. Click our button. All is done and good. That is a quick demonstration of adding a list button, as well as adding a button inside of the edit view. 00:17:29

Demonstrate Button - Both List and Inside

Like I said you could add one button, both as a list and inside, if you were to go to that specific button. Let's demonstrate that quickly. We can open it and then instead of saying list in Target, we say both. We click save. 00:17:58 We'll have to add this method getTested, also to the single view like that, then save. 00:18:22 Close out of editing the admin view, compile. Install it. First we will go look at the code. To help you see where the button is being added, I showed 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 view.html.php, and you go to add toolbar. You'll see that it has added a custom button getDone and getTested to the view. 00:19:22 It is getDone method that is going to be called by this specific button. It's going to look in the look controller. And get this(getTested) method. That's really how it works.

Adds A Permissional Switch

It also adds a permissional switch 00:19:47 to the button. If this specific user doesn't have the right to do the worked button, then it won't show the button. If you carry those permission structures through to your controller, it'll stop it even from being executed, manually via URL. But that kind of security and implementation you'll need to know how to do that. 00:20:14 Look at Joomla's way of implementing it. Because you need to in the controller check whether this user has the permission. You need to know how to check that permission as well. That's just showing you how the button gets added into the view, and where that code is, and you can go look at it. I'm going back to Joomla, and open our component. We go to looks, we still have our tested here. If we open the edit, we will see we have got tested here as well, and if we click it, 00:20:53 it will take us to the dashboard and perform the same function as it would have if we click there(The Test). That is showing you that you can add one button to both the list view as well the edit view of the back end admin area. I hope this will be useful.