From 97787bd6d99bfc4937fbb6976b3627d5d39ffddd Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 6 Jun 2019 16:15:52 +0200 Subject: [PATCH] Updated 018 Custom Admin Views (markdown) --- 018-Custom-Admin-Views.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/018-Custom-Admin-Views.md b/018-Custom-Admin-Views.md index b029ef2..473a62a 100644 --- a/018-Custom-Admin-Views.md +++ b/018-Custom-Admin-Views.md @@ -1 +1,27 @@ -We need to have a quick look at custom admin views [00:00:04](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m04s) They do have some nice ways of doing things Very similar to sight views But some Aspects and adding it to component builder is different And so in the next video We will look at adding site views as well as component Custom admin Views To the component The reason I didn't speak much about the custom admin views is simply because Summon distributor is not [00:00:33](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) Using Custom admin views yet Where is I have another component here I can use as a example Called component Is called Cost-benefit projection It's a It's a tool that is used to show companies the cost benefits Of intervening on certain diseases and causes in the company Anyway [00:01:04](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m04s) In it we have what we call a company results And combined results Respectively used To display custom data In the back end of the component to the certain different people who has permission to view those data Now in the component itself If we clicked on companies You would see there is an icon underneath each of these [00:01:36](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s) Names of the Companies And there is a new button here the top called combine Results Now This button as well as those buttons Are dynamically added by component Builder And in the next tutorial I'll show you exactly how that is done What I want to show you here is Simply how a custom admin view will look So I'm gonna click on one of these, this is all dumb information so [00:02:07](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m07s) So you'll see me Let's open this one Now basically you have this big area where you could put a lot of HTML and PHP And you have some custom buttons that you can add on show you that And then So all of this in this white area is simply done in the custom View So if I was to click around I've got a menu here at the side All of this is done inside of the custom Area [00:02:44](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m44s) Of the component Which is now the Custom admin View And That is basically how it will look It has Different Value sets And you can from here add an edit button Since we've linked it to a specific client Or company or one item in that list [00:03:10](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) We can actually click on edit From here we go right into the company's data And edit it And What is nice if we were to click close here You actually take us back to that Exact result page And you can then go and look at The implementation What you've done [00:03:35](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m35s) Is it that is just simply showing you how a custom admin view could look Let's go back to the company's list or we could go back to dashboard now look at component Builder And we looked at this company results we open that one And here is all PHP and HTML On my page Doing all the work And of course As you might expect I'm loading in a lot of templates here [00:04:05](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m05s) So I'm loading in templates Directly From here And Then I have a custom button area Where I can I can say yes I want to add custom buttons Then I click on Custom buttons here and you see I have Icons I can select Call it [00:04:25](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m25s) The name of the button And a controller method Which I would like to use to actually make the button work so in this one I'm saying go to company This one is edit company And here I should say Is this gonna What kind of Target are we think looking at Is this a A single a list or both [00:04:52](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m52s) And you said that respectively And Then you click save this only saves it to the form not to the database We should have made that done But this is the Joomla's way of implementing it And now you have to add In the PHP controller method Add scripting to respectively implement the buttons click Method [00:05:16](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m16s) You can also to the model So in the controller You can add script and then in the model Add scripting which is called from the controller if you want to separate your code a bit In the in the and if you're not gonna be adding Any script to the model Just add none with this two Spaces in front otherwise it might scream at you that you did not add Script there And as you can see the go to companies is simply [00:05:47](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m47s) Take me back to the company's View Where as the Edit company Implements the Joomla's convention of opening an item to edit it By the correct channels so this is just Joomla knowledge At work here And we are checking a token and all that So do Component Builders sets of all the tokens and everything So you [00:06:13](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m13s) The snippet you can reuse for your purposes if you want And obviously we have an area for custom scripting and as you can expect There's a lot of custom scripting Going on In in that View And it has its respective places again if you wanna know where what's happening at some snippet here Compiler components search for that snippet and you'll see where this comes up If you're not certain by the naming conventions we have used And that is really how you setup a admin custom admin View [00:06:51](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m51s) To look at the other one Let's close out here That is the combined results View Now the combined results is this one up here if you click it now I will tell you this in we need to have some item selected And then you select the items and click There again And it will do a combined resolve Taking both companies And Adding it's data together [00:07:16](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m16s) And giving you a nice layout structure Of it's data sets Ok That is really the combined concept If we go back To the implementation of it It looks very similar as the other Again just a lot of HTML PHP here And then Also some custom button is again just going back to companies [00:07:41](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m41s) And it's really just same implementation V card companies go back single And then some custom scripting And that's how I set up both of those custom views quite simply Adding that the data here And then making use of the templates as well as layout implementation in both of these So you can set up layouts and templates and Only use them and site views But you can also use them in admin views Now [00:08:11](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m11s) In our next tutorial We look at how to add site views and admin views to your component Since there are some differences And you need to be aware of them +# CUSTOM ADMIN VIEWS + +We need to have a quick look at custom admin views. They do have some nice ways of doing things very similar to site views. Some aspects and adding it to component builder is different. In the next video we will look at adding site views as well as component custom admin views to the component. The reason I didn't speak much about the custom admin views is simply because sermon distributor is not [00:00:33](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) using custom admin views yet. + +**Example View From Other Component** + +I have another component I can use as a example called: Cost Benefit Projection. It's a tool that is used to show companies the cost benefits of intervening on certain diseases and causes in the company. [00:01:04](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m04s) In it we have what we call company results, and combined results, respectively used to display custom data in the back end of the component to certain different people who has permission to view those data. In the component itself, if we click on companies, you would see there is an icon underneath each of these [00:01:36](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s) names of the companies. There is a new button in the top called combine results. These buttons are dynamically added by component builder. In the next tutorial I'll show you exactly how that is done. + +**Component Builder Custom Admin View From Above** + +What I want to show you here is simply how a custom admin view will look. I'm going to click on one, this is all dumb information, [00:02:07](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m07s) let's open ClientM. You have this big area where you could put a lot of html and php. You have some custom buttons that you can add. I will show you that. All of this in the white area is simply done in the custom view. If I was to click around I've got a menu here at the side. All of this is done inside of the custom area [00:02:44](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m44s) of the component. Which is now the custom admin view. That is how it will look. It has different value sets, and you can from here add an edit button. Since we've linked it to a specific client or company or one item in that list, [00:03:10](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) we can click on edit. From here we go right into the companies data and edit it. What is nice if we were to click close here, it take us back to that exact result page. You can then go and look at the implementation what you've done. [00:03:35](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m35s) That is just simply showing you how a custom admin view could look. Let's go back to the companies list or we could go back to dashboard. Look at component builder, we looked at company results and we open it. Here is all php and html on my page doing all the work. As you might expect I'm loading [00:04:05](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m05s) templates directly from here. + +**Add Custom Button Sample** + +Then I have a custom button area where I can say yes. I want to add custom buttons. Then I click on custom buttons(add). You will see I have 'icons' that I can select, and [00:04:25](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m25s) the 'name' of the button, and 'controller method' which I would like to use, to make the button work. In this one(target controller method) I'm saying 'gotocompanies'. This one is 'editcompany'. Here I should say what kind of target are we looking at? Is this a single, a list, or both? [00:04:52](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m52s) You can set that respectively, and then you click save. It only saves it to the form, and not to the database. We should have made that done, but this is the Joomla's way of implementing it. + +**Adding Script For The Controller Methods** + +Now you have to add in the php controller method, add scripting to respectively implement the buttons click method. [00:05:16](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m16s) You can also do that to the model. So in the controller you can add script, and then in the model add scripting which is called from the controller, if you want to separate your code a bit. If you're not going to be adding any script to the model, just add none with this two spaces// in front, otherwise it might scream at you that you did not add script there. As you can see the 'gotocompanies' is simply [00:05:47](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m47s) take you back to the companies view. Where as the 'editcompany' implements the Joomla's convention of opening an item to edit it by the correct channels. This is just Joomla knowledge at work here. And we are checking a token and all that. Component Builders sets of all the tokens and everything. [00:06:13](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m13s) This(see video) snippet you can reuse for your purposes if you want. + +**Area For Custom Scripting** + +We have an area for custom scripting and as you can expect. There's a lot of custom scripting going on in that view. It has its respective places, if you want to know where, what's happening at some snippet here, compile your components, search for that snippet, and you'll see where this comes up, if you're not certain by the naming conventions we have used. That is how you setup custom admin view. [00:06:51](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m51s) + +**Combining Multiple Data Example** + +To look at the other one, the combined results view. The combined results is this one up here, if you click it, It will tell you, we need to have some items selected. You select the items and click combined result again, and it will do a combined resolve taking both companies adding it's data together, [00:07:16](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m16s) and giving you a nice layout structure of it's data sets. That is the combined concept. If we go back to the implementation of it, it looks very similar as the other. Again just a lot of html and php here. Also some custom button, again just going back to companies. [00:07:41](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m41s) It's just same implementation, vcard companies, go back, single, and then some custom scripting. That's how I set up both of those custom views. Quite simply adding the data. Then making use of the templates as well as layout implementation in both of these. You can set up layouts and templates and use them in site views, you can also use them in admin views. [00:08:11](https://www.youtube.com/watch?v=gtdQ1lwB9ds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m11s) In our next tutorial we will look at how to add site views and admin views to your component since there are some differences and you need to be aware of them.