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

Updated 009 Adding Admin Views to a Component (markdown)

Amigo 2019-05-28 13:16:51 +02:00
parent 2e2a2616b7
commit 3bce177906
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
009-Adding-Admin-Views-to-a-Component.md

@ -28,9 +28,9 @@ Then auto check-in [00:03:59](https://www.youtube.com/watch?v=39vY66X7GGU&list=P
**Settings Switch Keep History** **Settings Switch Keep History**
Then keeping history of a backend view. The history component I must tell you is maybe one of them most exciting things that I could integrate. You will see what it does. It keeps track of every change you make in any article or any item in your application. So for example if I was to go [00:05:33](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m33s) to preacher and I would open up a Capella Music you'd see that it has that version button here at the top. If I was going to make a change here(Email), let's say I typed in Info@vdm.io and I set 'Some text here' and I clicked save. Then I click on version, you will see that it is now locked a new version. [00:06:13](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m13s) There are the old ones. I could click on one of the old ones. First let me say I could take the one I'm on currently and I can say keep. That would sort of lock it in because you can also set it how long amount of history should the system keep. The default is 10, 10 changes. so I can click on the previous version and say restore. And this will restore it and you see there. Email address is gone and this description is gone. If I want to go back to the one I have done I could just click there on version again, [00:06:52](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m52s) I then click there and also restore. We would the details are back again. That is the feature of history. History component is actually a Joomla extension which you're able as a component developer integrate into your own components. [00:07:14](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m14s) And it's not that easy in fact it's maybe very difficult. Then keeping history of a back end view. The history component I must tell you is maybe one of them most exciting things that I could integrate. You will see what it does. It keeps track of every change you make in any article or any item in your application. So for example if I was to go [00:05:33](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m33s) to preacher and I would open up a Capella Music you'd see that it has that version button here at the top. If I was going to make a change here(Email), let's say I typed in Info@vdm.io and I set 'Some text here' and I clicked save. Then I click on version, you will see that it is now locked a new version. [00:06:13](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m13s) There are the old ones. I could click on one of the old ones. First let me say I could take the one I'm on currently and I can say keep. That would sort of lock it in because you can also set it how long amount of history should the system keep. The default is 10, 10 changes. so I can click on the previous version and say restore. And this will restore it and you see there. Email address is gone and this description is gone. If I want to go back to the one I have done I could just click there on version again, [00:06:52](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m52s) I then click there and also restore. We would the details are back again. That is the feature of history. History component is actually a Joomla extension which you're able as a component developer integrate into your own components. [00:07:14](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m14s) And it's not that easy in fact it's maybe very difficult.
If I was to show you the amount of code let me do that, that you need to write. First of all you need to add an asset ID to all your backend view database tables. If we were to go to sermon distributor, and check out it's sql table, we'll click on that(installmysql), you'd see that all of them have asset_ids. That is not as easy as it is. Once you've got the asset_ids, then in table when you start your table you should set up observers. Which check the specific item to add history options to that asset_id. This(see video) is a part of the whole part of the script that is being add. This(see video) is being added on the right place. [00:08:45](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m45s) If I was to show you the amount of code let me do that, that you need to write. First of all you need to add an asset ID to all your back end view database tables. If we were to go to sermon distributor, and check out it's sql table, we'll click on that(installmysql), you'd see that all of them have asset_ids. That is not as easy as it is. Once you've got the asset_ids, then in table when you start your table you should set up observers. Which check the specific item to add history options to that asset_id. This(see video) is a part of the whole part of the script that is being add. This(see video) is being added on the right place. [00:08:45](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m45s)
As well as in the store method. There is another tweak which I might take too long to look at all of that. We will go into more detail in the advanced courses I suppose. Just to let you know, I create an import, export method. And even in the import and export of data, primarily in importing of data, you need to again [00:09:12](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s) do quite advanced trick to ensure that the history of that rewriteables will be tracked. These kind of features I just added dynamically to your component because of that switch. That's not the only code. The code that throws people out I suppose, is this script code. This is a script that is used when the component installs. If you look at this, this is the uninstall area in the script code which runs when you uninstall the component. It's looking in many places, it's looking in content-type, it's looking in the content [00:09:48](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m48s) tag map, it is looking in the ucm base, it is looking in the content types again, and per view. I mean this is not just once off per view these checks are done and we are removing any items that might remain there. Because when you uninstall a component What you don't realize Is it so integrated into the Joomla system that just removing it's on tables actually doesn't do the job. We added the feature that if you uninstall it, it actually cleans the Joomla system of that extension [00:10:22](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s) completely. Which is ideal because you won't want any traces left. You would like to uninstall something you want it gone. And so this uninstall method does exactly that. And then with the installing of this component, we get here which is the postflight install. We actually add many records to areas inside of Joomla. For example inside of the contents type, [00:10:57](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m57s) we need to add this(selected area) information. We have to do it for every view which you've selected, either tags or history. As well as in the store method. There is another tweak which I might take too long to look at all of that. We will go into more detail in the advanced courses I suppose. Just to let you know, I create an import, export method. And even in the import and export of data, primarily in importing of data, you need to again [00:09:12](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s) do quite advanced trick to ensure that the history of that rewriteables will be tracked. These kind of features I just added dynamically to your component because of that switch. That's not the only code. The code that throws people out I suppose, is this script code. This is a script that is used when the component installs. If you look at this, this is the uninstall area in the script code which runs when you uninstall the component. It's looking in many places, it's looking in content-type, it's looking in the content [00:09:48](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m48s) tag map, it is looking in the ucm base, it is looking in the content types again, and per view. I mean this is not just once off per view these checks are done and we are removing any items that might remain there. Because when you uninstall a component What you don't realize Is it so integrated into the Joomla system that just removing it's on tables actually doesn't do the job. We added the feature that if you uninstall it, it actually cleans the Joomla system of that extension [00:10:22](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s) completely. Which is ideal because you won't want any traces left. You would like to uninstall something you want it gone. And so this uninstall method does exactly that. And then with the installing of this component, we get here which is the postflight install. We actually add many records to areas inside of Joomla. For example inside of the contents type, [00:10:57](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m57s) we need to add this(selected area) information. We have to do it for every view which you've selected, either tags or history.
@ -50,12 +50,12 @@ Then this access switch might throw you out. This simply adds the following feat
**Settings Switch Export/Import** **Settings Switch Export/Import**
Then when you do want to add to import/export function. This is a [00:16:38](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m38s) extended area which component builder dynamically just adds. You don't need to do anything is to relation to scripting at this stage. You could just click yes or no to import/export feature at the top of the page of every view. Every view will have an import/export. At the moment it's a direct relationship import/export. What I mean by that is You need to follow. If you export this then you'd see the the way it should look to do import. [00:17:13](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m13s) And the import is really nice you can map the headers to their specific database tables. Obviously there's work needed especially when you're dealing with information that was encrypted. If you export it, it will decrypt it, if you have the permissions to access that item of course. The problem is because it's encrypting yet when you imported, it doesn't know that it should encrypted. There is a little discrepancy with the advance storing methods. As long as you are having a data back end database table that doesn't require these advance storing methods, it's just your normal defaults like I explain before. Then import/export method will then works seemingly without any problems. I'm still working on this area but it's already working well enough that I felt I could leave it in there. [00:18:07](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m07s) That is the switch here(Export/Import data) and if you don't like the feature just click no. Then when you do want to add to import/export function. This is a [00:16:38](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m38s) extended area which component builder dynamically just adds. You don't need to do anything is to relation to scripting at this stage. You could just click yes or no to import/export feature at the top of the page of every view. Every view will have an import/export. At the moment it's a direct relationship import/export. What I mean by that is You need to follow. If you export this then you'd see the the way it should look to do import. [00:17:13](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m13s) And the import is really nice you can map the headers to their specific database tables. Obviously there's work needed especially when you're dealing with information that was encrypted. If you export it, it will encrypt it, if you have the permissions to access that item of course. The problem is because it's encrypting yet when you imported, it doesn't know that it should encrypted. There is a little discrepancy with the advance storing methods. As long as you are having a data back end database table that doesn't require these advance storing methods, it's just your normal defaults like I explain before. Then import/export method will then works seemingly without any problems. I'm still working on this area but it's already working well enough that I felt I could leave it in there. [00:18:07](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m07s) That is the switch here(Export/Import data) and if you don't like the feature just click no.
**Settings Switch Edit - Create - Site Views** **Settings Switch Edit - Create - Site Views**
Then here is a feature which I think I'm most excited about. That is every back end view has of course and edit area. If you've selected that read write option then the edit area you can change the values of that back end listview. The admin create site view means that the system is going to dynamically build [00:18:42](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m42s) the front area which you can access to edit the data at the front of the website. That is an excellent tool. It takes exactly this(see video) if I was to use this and as an example. It takes this editing area and place it on the front of your website. [00:19:13](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m13s) You are controlling in the permissional structures who has access to edit this, who access to edit the status, who has access to edit specific fields. We looked at adding the fields to your admin views and you could click whether this field should have permissional structure. That means that if you have those things set up in the back in the global professional tab, then it will be implemented in the front if a certain user is in the correct group. [00:19:44](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m44s) They wont be able to access this then if they have access. They don't have the right to for example update maybe the modified date or the status then in the front. They also will not be able to do that. You have immense control over who can do what. But at the same time you have the ability to actually edit items on the front. I think that is excellent to be able to do that. That all of that just possible by saying yes. But realize this, the fact that it creates the [00:20:19](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m19s) view if I could says so and places it on the front, doesn't mean that there is a link somewhere to it. That is something you need to add to your site front custom site as you develop it. And this is partly a feature therefore which if you don't know PHP and if you're not that familiar with how to setup your links on the front of the component. You would possibly would find this difficult to implement. But I will show you what it builds. I can show you that now. [00:20:54](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m54s) I have a component which I'm using that feature quite a lot. It's called costbenefitprojection. This is the back end. If we look at the views, we have here called company and we have one called scaling factor and intervention. Now these are editing views as you can see. Those other list views, those are the editing views. If I go to the front of the website [00:21:28](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m28s) and I open that component. And I click on view, you will see that there is company, intervention and scaling factors. They are basically being extended here. What the component builder does, it adds this view, and the model for it. I also add the controller for it. It puts all the script in place so that all you need to do, is inside of, for example [00:22:00](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m00s) I have here an area called cpanel. Let me show you this component briefly. This is just some dummy data that I placed in here. None of them is real. Here you can open multiple items. This is all stuff that I built in component. None of this was built outside of component builder. It all was done in component builder. And you can click on edit advance profile. And it will open the editing area. [00:22:37](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m37s) Then here is a feature which I think I'm most excited about. That is every back end view has of course and edit area. If you've selected that read write option then the edit area you can change the values of that back end listview. The admin create site view means that the system is going to dynamically build [00:18:42](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m42s) the front area which you can access to edit the data at the front of the website. That is an excellent tool. It takes exactly this(see video) if I was to use this and as an example. It takes this editing area and place it on the front of your website. [00:19:13](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m13s) You are controlling in the permissional structures who has access to edit this, who access to edit the status, who has access to edit specific fields. We looked at adding the fields to your admin views and you could click whether this field should have permissional structure. That means that if you have those things set up in the back in the global professional tab, then it will be implemented in the front if a certain user is in the correct group. [00:19:44](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m44s) They wont be able to access this then if they have access. They don't have the right to for example update maybe the modified date or the status then in the front. They also will not be able to do that. You have immense control over who can do what. But at the same time you have the ability to actually edit items on the front. I think that is excellent to be able to do that. That all of that just possible by saying yes. But realize this, the fact that it creates the [00:20:19](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m19s) view if I could says so and places it on the front, doesn't mean that there is a link somewhere to it. That is something you need to add to your site front custom site as you develop it. And this is partly a feature therefore which if you don't know PHP and if you're not that familiar with how to setup your links on the front of the component. You would possibly would find this difficult to implement. But I will show you what it builds. I can show you that now. [00:20:54](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m54s) I have a component which I'm using that feature quite a lot. It's called costbenefitprojection. This is the back end. If we look at the views, we have here called company and we have one called scaling factor and intervention. Now these are editing views as you can see. Those other list views, those are the editing views. If I go to the front of the website [00:21:28](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m28s) and I open that component. And I click on view, you will see that there is company, intervention and scaling factors. They are basically being extended here. What the component builder does, it adds this view, and the model for it. I also add the controller for it. It puts all the script in place so that all you need to do, is inside of, for example [00:22:00](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m00s) I have here an area called cpanel. Let me show you this component briefly. This is just some dummy data that I placed in here. None of them is real. Here you can open multiple items. This is all stuff that I built in component. None of this was built outside of component builder. It all was done in component builder. And you can click on edit advance profile. And it will open the editing area. [00:22:37](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m37s) This is the front end editing area, as you can see there are all the tabs. Let me show you the back end. Here's the back end area. Its showing up the same information in the front. It only dumps the permission and publishing features. That is because of access permissions is done automatically [00:23:10](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m10s) Because that front-end user didn't have permissions to edit most of the things in here. You didn't have the right to edit any of these. Therefore it didn't need to see it and so the system just remove that tab, same goes with the permissions. If you didn't have the right to do scaling factors on interventions, you also have dumped that, it won't show it up in the front.
??? And so this is the back end of that same dummy company that I've set up. You can see that it [00:23:42](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m42s) moved it to the front. Not only did it make it possible to edit data, but also to create new companies. If you click on that(create company) you will see it opens up in the area for you to start fresh. You can create a company from scratch. In this specific example you will see that it cannot add a user. So what the system has done through some custom scripting that I've added, if you click save it adds his ID in here(user(member)-select a user). And he doesn't need to select that(user(member)-select a user). That's just a quick look at [00:24:19](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m19s) that specific button called edit create site view. It adds the whole code base to the front. And integrates it to the way that the front needs to be able to control the permissions.
As you can see this is the back end editing area of that. now let me show you sorry this is the front end Editing area And as you can see there are all the Tabs Now let me show you the backend Here's the backend area So it's basically a showing up the same information in the front Is only dumps the permission and Publishing features But that is because of access permissions is done automatically [00:23:10](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m10s) Because that front-end user didn't have permissions to edit things In most of the things in here in fact You didn't have the right to edit any of these Therefore it didn't need to see it and so the system just remove that tab same goes with the permissions And if you didn't have the right to do scaling factors on interventions You also have dumped that it won't show it up In the front And so this is the back end of that same dummy company That I've set up And you can see that it basically [00:23:42](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m42s) Moved it to the front Not only did it make it possible to edit data but also to create new companies So if you click on that You see it opens up in the area for you to start fresh so you can create a company from scratch Now In this specific example you see that it cannot actually add a user So what the system is done through some custom scripting that I've added If you click save it adds his ID in here And he doesn't need to select that Ok so that's just a quick look at [00:24:19](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m19s) That specific button Called edit create site view it adds the whole codebase to the front And integrates it to the Way that the front Needs to be able to control the permissions Then the order of of the items are Simply the way in which it will be displayed anywhere So if we think about the order For a moment here Of Example component builder [00:24:48](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m48s) The order of which these icons are laid out and even if you opened one of them The order in which this is done And also for the sub menu All of that is controlled with this order Number here Ok so That's a quick look at adding Admin views to your component I hope that is insightful enough for you to understand how to do that If you have any questions please you're welcome to send me a mail [00:25:22](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m22s) Thanks for watching Then the order of the items are simply the way in which it will be displayed anywhere. If we think about the order for a moment here of example component builder, [00:24:48](https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m48s) the order of which these icons are laid out and even if you opened one of them, the order in which this is done And also for the sub menu, all of that is controlled with this order number here. That's a quick look at adding admin views to your component. I hope that is insightful enough for you to understand how to do that. If you have any questions please you're welcome to send me a mail.