diff --git a/020-Adding-Custom-Admin-Views-to-a-Component.md b/020-Adding-Custom-Admin-Views-to-a-Component.md index 747a7d7..47b64d1 100644 --- a/020-Adding-Custom-Admin-Views-to-a-Component.md +++ b/020-Adding-Custom-Admin-Views-to-a-Component.md @@ -1 +1,40 @@ -Hi Now we'll look at adding custom admin view to a component We'll make use of cost-benefit projection As our component And then we Go to settings And then we'll go to custom admin views And we'll see oh let's just [00:00:20](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m20s) Close that open again Now will see you there has to custom admin views added Now It has more switches than the site view because of its implementation being more dynamic You can choose an icon Because in the backend You possibly want to have an icon when your on that page on the right [00:00:45](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m45s) of the page Then you can decide where this should show in the main menu Selective if you should show in the main menu the main menu Is a menu that drops down out of Joomla's menu item list Right And then the dashboard Which is that Dashboard we go to every time when we start with a component that All the icons are showing up Then the submenu is the one on the on the left [00:01:14](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m14s) Which you see when you are in a view So these are all placements where you can possibly add This Custom View Now if you remember The company Results we didn't add to Any of the Views individually we added to items so that's why all of these are set to no [00:01:41](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m41s) And That means we are targeting an item In a view And so all we need to do a select the view which we are targeting Which is company And we say ok It has metadata yes or no And it has access yes or no And That's basically it [00:02:02](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m02s) To ensure that Targets the correct view is simply by selecting company here If I close this for a moment And then open that component Show you what is happened with the settings So here we have that component open If I was to open Companies over here You see that has a button here for company result [00:02:27](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m27s) Now If you remember when we set up this custom admin View We we ensured that We are targeting an item ID And by selecting company we are saying we are targeting this company's item ID And that is what makes it work And then we said we want to see a chart I'm so if we look at these this little charts what shows up in [00:02:55](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m55s) The icon itself We click on it We see the custom view shows up and that icon shows up next to it And all works well We also see that there is a combined results Button showing up here in the toolbar And that is because combined results Which selected we want cogs To be the icon And we set [00:03:25](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m25s) List of records is set to yes And has metadata And has access and also company And so These selections before Is only really necessary when you select main menu and submenu Because then you want to say before what Item you want this Menu to be created Now we selected dashboard list of Records [00:03:55](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) And because of that It places that in here And you need to select the records that you want to look at And then you can click on the combined results And they'll grab those IDs and Since we are modelling a data in the controller and the model It gives back to the view these results Through the custom implementation we've done So Just a quick refresher [00:04:25](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m25s) If we go to component Builder And custom admin views and we open company results We see that in the custom button We added the PHP We also added the button We explain to To component builder what we what kind of buttons we want So we set we are targeting a single item you see those Edit company go to company now those buttons [00:04:55](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m55s) are Actually related to Going inside of the view And Then if you come out of this We saw that even and combined results We also added buttons But again those buttons Vcard companies gotocompanies corresponds to this controller And if we go to the view itself [00:05:27](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m27s) And we'll see that that's not responding to this button but actually To the buttons inside called companies and edit Those that's the buttons you were building in the custom View Where is the buttons we are looking at in here Is related to opening the custom view itself So That is just a quick Refresher Same goes with the combined results The combined results is the button that you are setting up here [00:06:02](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) Where is the other buttons are once you have combined them And you've click combined results You see that it adds two buttons dashboard and companies and those two buttons was set up in the view it Self So that you can know and sort of Understand what Area controls what set of buttons This area controls the buttons before opening the view where is in the view the buttons your setting up there is for when you have opened the view Ok so that is setting up a custom admin View [00:06:38](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m38s) To your component And some of the switches obviously again If anything is unclear or you not exactly sure You can obviously come on and do anything So simply go change it to what you would think should work and compile a component and go look in the code And see what has been done and look and the Joomla if the face See what is being displayed And play around with it until you get that what you expected [00:07:10](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m10s) Just a quick heads up this ordering before is only compulsory when Actually selecting add to main menu or add sub menu And if you use those It means That If If you go to your component You have the icons area and here in the top you have your your Your [00:07:34](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m34s) Main menu items And once you've opened A Then you're here on the right you have sub menu So this is main menu this is dash list Now dash list is that one which goes to the top Of the Of the components Toolbar and then submenu is the one here on the side [00:07:58](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m58s) So if if this Custom admin view is simply needs to be placed in the submenu and its lives on its own it's not related to any other Dataset Then you can use the submenu method if you only wanna Featured in the main menu these are all the features that you could set Where is the dashboard List record Feature Helps you to sort of Link it to a specific set [00:08:25](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m25s) Of Data data structures like Like this one does So you can select these ids and when when you click On this combined results the ids of the selected items gets passed to the controller And if I go back to that quickly Show you that how we use it Combined results Custom button [00:08:54](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m54s) You basically see that Go to companies Is not in here So we see we're using the main get called companies data get list query So let's go look at that data query I think that's we will find The use of the implementation of those ids So we see we are basically reaching into the Input array Array sorry object here We getting CID [00:09:35](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m35s) Selected ids And we saying It can be SMD And Then we are exploding it and We are making sure it is intervals And we placing it in ids And so this actually gets the value From the post Object [00:09:59](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m59s) And Places that into ids and here we do some validation To ensure that the person who's trying to access the data has actualy the right To do it And once we past that We basically use those ids to to get The data so in in the filter [00:10:20](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m20s) We use ids And check whether All the IDs Are in a ID and that in the code Basically if you look at the code It's on the models combine results We see that it uses our checking method here Later down here It checks the IDs [00:10:45](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m45s) Puts it array check if it's in array then implodes it And checks whether it is You know only gets those IDs That's how we we filtered the dataset With the results of the selection And So That's just a little bit looking into the backend On how to make use of those [00:11:07](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m07s) Features and again as you can see it's some custom scripting we added to the dynamic get method To take those ids and to use them In the way we intend now you you can ignore them But here is the way that I implemented it If you wanna drop that down pause the video And copy some of this area here Think would be the only part that will be Useful to your purpose And then you can use the IDs in your code [00:11:39](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m39s) As you please And know that this PHP as you saw In the code It runs before the get methods So it basically is a filtering option as you see there So then this query starts Then that code be wrote Is entered in here and then the rest of the code which is build by component Builder Is being done and you can use a filter option with whatever you [00:12:07](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m07s) Collected up here Ok so that's Looking into adding custom admin views to component Builder And just showing you again the tremendous Leverage and Design choices you can make In ensuring that your component is dynamic And Get sort of breaks out of the mould So that you can achieve [00:12:32](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m32s) Nice Complex components Write inside component Builder Thank you for watching +# ADDING CUSTOM ADMIN VIEWS TO A COMPONENT + +* **Example Component Not Sermon Distributor** + +Now we'll look at adding custom admin view to a component. We'll make use of cost-benefit projection as our component. + +**Settings - Custom Admin View** + +And then we go to settings. And then we'll go to custom admin views. [00:00:20](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m20s) We will see there is two custom admin views added. + +**Multiple Switches Due To Being Dynamic** + +It has more switches than the site view, because of its implementation being more dynamic. You can choose an icon, because in the back end you possibly want to have an icon when you are on the right [00:00:45](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m45s) of the page. Then you can decide where this should show in the main menu. Select if you should show in the main menu. + +**Icon - Main Menu - Dashboard - Submenu** + +The main menu is a menu that drops down out of Joomla's menu item list. Then the dashboard is that dashboard we go to every time when we start with a component where all the icons are showing up. Then the submenu is the one on the left, [00:01:14](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m14s) which you will see when you are in a view. So these are all placements where you can possibly add this custom view. + +**Targeting Item(some switches are no)** + +Now if you remember, the company results we didn't add to any of the views individually. We add it to items. That's why all of these are set to no. [00:01:41](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m41s) That means we are targeting an item in a view. + +**Select Target View** + +All we need to do a select the view which we are targeting, which is company. And we say, it has metadata yes or no, and it has access yes or no. That's basically [00:02:02](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m02s) to ensure that it targets the correct view, is simply by selecting company here. + +**Showing Within The Component** + +If I close this for a moment, then open that component. I will show you what happened with the settings. So here we have that component open. If I was to open companies, you will see that it has a button for company result. [00:02:27](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m27s) Now if you remember when we set up custom admin view, we ensured that we are targeting an item id. By selecting company, we are saying we are targeting this companiess item id, and that is what makes it work. And then we set we want to see a chart. If we look at these this little charts what shows up in [00:02:55](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m55s) the icon itself. We click on it. We see the custom view shows up and that icon shows up next to it, and all works well. We also see that there is a combined results button showing up in the toolbar. And that is because combined results which selected we want cogs to be the icon. We set [00:03:25](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m25s) list of records to yes, and has metadata, and has access, and also company. + +**Order Before Selection** + +And so these selections before, is only really necessary when you select main menu and submenu. Because then you want to say before what item you want this menu to be created. We selected dashboard list of records. [00:03:55](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) And because of that it places that in combined results. And you need to select the records that you want to look at and then you can click on the combined results. They'll grab those ids and since we are modelling, data in the controller and the model, it gives back to the view these results through the custom implementation we've done. Just a quick refresher. [00:04:25](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m25s) + +**How Buttons are Implemented** + +If we go to component builder, and custom admin views, we open company results. We see that in the custom buttons, we added the php. We also added the button. We explain to component builder what kind of buttons we want. We set we are targeting a single item, you see editCompany gotoCompany, those buttons [00:04:55](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m55s) are actually related to going inside of the view. Then if you come out of this(Editing the Custom Admin Views), we see that even in combined results, we also added buttons. + +??? +But again those buttons Vcard companies gotocompanies corresponds to this controller. And if we go to the view itself, [00:05:27](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m27s) And we'll see that that's not responding to this button but actually To the buttons inside called companies and edit Those that's the buttons you were building in the custom View Where is the buttons we are looking at in here Is related to opening the custom view itself So That is just a quick Refresher Same goes with the combined results The combined results is the button that you are setting up here [00:06:02](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) Where is the other buttons are once you have combined them And you've click combined results You see that it adds two buttons dashboard and companies and those two buttons was set up in the view it Self So that you can know and sort of Understand what Area controls what set of buttons This area controls the buttons before opening the view where is in the view the buttons your setting up there is for when you have opened the view Ok so that is setting up a custom admin View [00:06:38](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m38s) To your component And some of the switches obviously again If anything is unclear or you not exactly sure You can obviously come on and do anything So simply go change it to what you would think should work and compile a component and go look in the code And see what has been done and look and the Joomla if the face See what is being displayed And play around with it until you get that what you expected [00:07:10](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m10s) Just a quick heads up this ordering before is only compulsory when Actually selecting add to main menu or add sub menu And if you use those It means That If If you go to your component You have the icons area and here in the top you have your your Your [00:07:34](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m34s) Main menu items And once you've opened A Then you're here on the right you have sub menu So this is main menu this is dash list Now dash list is that one which goes to the top Of the Of the components Toolbar and then submenu is the one here on the side [00:07:58](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m58s) So if if this Custom admin view is simply needs to be placed in the submenu and its lives on its own it's not related to any other Dataset Then you can use the submenu method if you only wanna Featured in the main menu these are all the features that you could set Where is the dashboard List record Feature Helps you to sort of Link it to a specific set [00:08:25](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m25s) Of Data data structures like Like this one does So you can select these ids and when when you click On this combined results the ids of the selected items gets passed to the controller And if I go back to that quickly Show you that how we use it Combined results Custom button [00:08:54](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m54s) You basically see that Go to companies Is not in here So we see we're using the main get called companies data get list query So let's go look at that data query I think that's we will find The use of the implementation of those ids So we see we are basically reaching into the Input array Array sorry object here We getting CID [00:09:35](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m35s) Selected ids And we saying It can be SMD And Then we are exploding it and We are making sure it is intervals And we placing it in ids And so this actually gets the value From the post Object [00:09:59](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m59s) And Places that into ids and here we do some validation To ensure that the person who's trying to access the data has actualy the right To do it And once we past that We basically use those ids to to get The data so in in the filter [00:10:20](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m20s) We use ids And check whether All the IDs Are in a ID and that in the code Basically if you look at the code It's on the models combine results We see that it uses our checking method here Later down here It checks the IDs [00:10:45](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m45s) Puts it array check if it's in array then implodes it And checks whether it is You know only gets those IDs That's how we we filtered the dataset With the results of the selection And So That's just a little bit looking into the backend On how to make use of those [00:11:07](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m07s) Features and again as you can see it's some custom scripting we added to the dynamic get method To take those ids and to use them In the way we intend now you you can ignore them But here is the way that I implemented it If you wanna drop that down pause the video And copy some of this area here Think would be the only part that will be Useful to your purpose And then you can use the IDs in your code [00:11:39](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m39s) As you please And know that this PHP as you saw In the code It runs before the get methods So it basically is a filtering option as you see there So then this query starts Then that code be wrote Is entered in here and then the rest of the code which is build by component Builder Is being done and you can use a filter option with whatever you [00:12:07](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m07s) Collected up here Ok so that's Looking into adding custom admin views to component Builder And just showing you again the tremendous Leverage and Design choices you can make In ensuring that your component is dynamic And Get sort of breaks out of the mould So that you can achieve [00:12:32](https://www.youtube.com/watch?v=sPEkbuNXwds&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m32s) Nice Complex components Write inside component Builder Thank you for watching