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

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

Amigo 2019-07-22 09:57:26 +02:00
parent 2aab8fce8b
commit 731a2449ab
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,16 +57,26 @@ Some of this code is going to be added in here, (It will be beneficial to study
[00:13:08](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m08s) [00:13:08](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m08s)
Then the IDE is changed to false again to demonstrate the response. Play around with the code in the IDE to get the feel of how to approach it from that direction. Save this(See video), then go and compile it and install the new compiled version. Open the component. Go to 'Looks'. The test button is still here, if it gets clicked, it still returns us to the dashboard. [00:14:01](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m01s) Let's open the test. Here is a new button 'Worked'. If it gets clicked, it will indicate that the work was done, because the method returns 'true'. Open the IDE. Look at the controller in the back end. [00:14:32](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m32s) First, open the list one(looks.php) which is the plural version. It may be seen that 'getTested' has been added, and there the little method may be seen. Then go to the edit singular one(look.php), and getdone.[00:15:00](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) Here is the method, and all the functions. JCB has added the script to the translation text. Everything here(See video) looks fine. Go to the model, open the 'Look' model, it may be seen that it has a new method added.[00:15:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m22s) So just after 'getTable', is the little method added. So add this to 'false', and save. [00:15:47](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m47s) Go back to Joomla and then click that 'Work' button again and it says work was not done, because the method returned false. So if that is changed to 'true' again, and saved then it should work. <<<<<< Then the IDE is changed to false again to demonstrate the response. Play around with the code in the IDE to get the feel of how to approach it from that direction. Save this(See video), then go and compile it and install the new compiled version. Open the component. Go to 'Looks'. The test button is still here, if it gets clicked, it still returns us to the dashboard. [00:14:01](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m01s) Let's open the test. Here is a new button 'Worked'. If it gets clicked, it will indicate that the work was done, because the method returns 'true'. Open the IDE. Look at the controller in the back end. [00:14:32](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m32s) First, open the list one(looks.php) which is the plural version. It may be seen that 'getTested' has been added, and there the little method may be seen. Then go to the edit singular one(look.php), and getdone.[00:15:00](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) Here is the method, and all the functions. JCB has added the script to the translation text. Everything here(See video) looks fine. Go to the model, open the 'Look' model, it may be seen that it has a new method added.[00:15:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m22s) So just after 'getTable', is the little method added. So add this to 'false', and save. [00:15:47](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m47s) Go back to Joomla and then click that 'Work' button again and it says work was not done, because the method returned false. So if that is changed to 'true' again, and saved then it should work.
### Demonstration Adding A Button Inside Of Edit View ### Demonstration Adding A Button Inside Of Edit View
Now let's test out another one. Let's also make this [00:16:16](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m16s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m39s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) [00:16:10](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m10s)
Now let's test out another one. Make this to not execute, save this(see video), so we can get this 'error'. Go back to Joomla and click the 'Worked' button. Now it even kicks us out of the item and indicates that a major error has occurred. The reason is that, it did not check it in, which is not ideal, but that need to be fixed by looking at some of the other controllers and see what is happening when this problem occurs. This is what has been expected. Change this back, and save. Go back to the view. Open that view again. Click the 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.
### Demonstrate Button - Both List and Inside ### 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m58s) We'll have to add this method getTested, also to the single view like that, then save. [00:18:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m22s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m56s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) 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. [00:17:29](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s)
As mentioned before one button could be added , both as a 'list' and a 'inside'. It can be demonstrated when going to that specific button. . Open it and then instead of saying 'list in Target', say both. Click save. [00:17:58](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m58s) It is important to add this method 'getTested', also to the single view like that, then save. [00:18:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m22s) Close out of editing the Admin view, compile and install it. First go and look at the code to see where the button has been added, If 'Look' is opened in the 'View', an 'view.html.php' is opened, and you go to 'Add Toolbar'. It can be seen that it has added a custom button 'getDone' and 'getTested' to the view. [00:19:22](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) It is the 'getDone' method that is going to be called by this specific button. It is going to look in the 'Look' controller and get this 'getTested' method. <<<<<<<
### Adds A Permissional Switch ### Adds A Permissional Switch
It also adds a permissional switch [00:19:47](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m47s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m14s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) 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. [00:19:43](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m43s)
It also adds a permissional switch 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m14s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) 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.