joomla/Component-Builder
joomla/Component-Builder
38
23
Fork 11
Code Issues 81 Pull Requests Projects 4 Wiki Activity

Updated 034 How to add Custom Buttons in JCB to your component Admin Area (markdown)

Amigo 2019-07-19 11:59:43 +02:00
parent 15c99e1f81
commit 3b332dcf14
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md

@ -20,16 +20,22 @@ You would see that it opens PHP (Controller Methods), and also PHP List View (Co
[00:03:07](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m07s) [00:03:07](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m07s)
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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m39s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m39s)
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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m30s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m57s) The best way to do this is to select one of the options, compile the component and go look at the code.<<<<<<<<< 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) 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 '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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m30s) 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. 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) ### 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m31s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m58s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m29s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m05s) [00:05:05](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m05s)
To demonstrate where the code ends up. Save this as a selection in a List view and save. At this stage if no values are added to these blocks it will not work. [00:05:31](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m31s) In order to satisfy its requirement to have information, two fore slashes is added. A little method, called 'getTested', is added to redirect us to the dashboard. That is a Controller Method. It must be public. [00:05:58](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m58s) It may be verified whether it was submitted from the current website and then it can be redirected to the components dashboard. A method is not necessary now, since it gets redirected. Save and close. Compile this component. Select the demo component, compile it, then re-install it to see the changes. [00:06:29](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m29s) Go to the Component, then to 'Looks' and a new button called 'test' may be seen. If it is clicked, it will redirect us to the dashboard. So its function is to redirect, and in this way anything can be redirected. That is the first way of implementing a button in the List view.
### More Options ### 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m50s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m36s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s) 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. [00:07:05](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m05s)
Now let us go back to editing that functionality there, by showing you some more options('Look'). Go to custom buttons. Add another button. Target - call it 'single'. Name - call it 'Work'. The Controller method - 'getDone', and leave Type to 'Default' and then save. [00:07:50](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m50s) In the Controller method there is a function called 'getDone'. In the(PHP controller method) a public function is placed. This time we will get the model and do something 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m36s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s) 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 ### Checking Within Controller Before Trigger The Model