From 407c024e865120f1c4c288de8d17e1f9956bd4a5 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 20 Jun 2019 16:03:23 +0200 Subject: [PATCH] Updated 034 How to add Custom Buttons in JCB to your component Admin Area (markdown) --- ...to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md b/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md index f557339..b1e310b 100644 --- a/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md +++ b/034-How-to-add-Custom-Buttons-in-JCB-to-your-component-Admin-Area.md @@ -38,5 +38,5 @@ If it's a list view, [00:04:02](https://www.youtube.com/watch?v=VyBxWpJWb40&list 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) ### 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m50s) 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](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 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m51s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m32s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m55s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m37s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m11s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m51s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m01s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m32s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m22s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m47s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m16s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m39s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m02s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m58s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m22s) 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](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 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) 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](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 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m14s) 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](https://www.youtube.com/watch?v=VyBxWpJWb40&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) 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