009 Adding Admin Views to a Component

ADDING ADMIN VIEWS TO A COMPONENT

Hi we've looked at setting up admin views. We've looked at creating fields for admin views. We've looked at setting up field types and how to use field types to create fields. Now we would like to look at setting the admin views to the component. The component itself has so much things that you can do. I'm going to try and deal with it 00:00:28 little at a time. So I'm first going to look at adding the admin views to a component. We'll go to components, and will go to sermon distributor, and you would go to settings. Here you'd see admin views. 00:00:59

Sermon Component Setting as Example

To connect admin views to your component you need to go to settings and open this button here. Usually when you start it, it will look like this(see video). So very straight forward you have a dropdown here(select an option) and you make a selection. And then click next. And you do the next one. And if you have a lot of admin views like I do here you would type in the name of the admin view. 00:01:33 And there you have it.

Adding Views Setting Icons

So I'm going to type in the name here sermon. Now these icons here I spoken about them previously. They are the icons from Joomla which is called Joomla Standard Icomoon Fonts. 00:02:02 If you select a an icon here(Joomla), it will show you that little icon(1) but only during the selection face. That is the icon that is going to be used for the view here in the right. See this icon there(top right) as we click through 00:02:24 component builder it updates that icon.

Settings Switch Admin Menu

This icon is what is being set here. You can select the icons to reflect to the admin view of your choice. We have a bunch of switches here and we'll look at them one at a time. Admin menu is this menu. 00:02:49 So the question is do you want that view to show up next to your main view. That will be the first tick box. We would say yes.

Settings Switch Dashboard Items

Then do you want to have an add record icon for this view? The add record icon, if you go to the dashboard, 00:03:10 it is this icon here(Add Admin View). It is a shortcut to creating an admin view from the dashboard. So we will say yes, then a dashboard list of records icon. So maybe you don't want this(Admin View) icon, just add admin view, then you can tick that(Dashboard(add record)) as no. 00:03:35 But again here(Dashboard(list of records)) we would like yes.

Settings Switch Submenu

Then a submenu. The submenu if you've opened your view that has a submenu here that can collapse away. This submenu you can add this view to the submenu or not.

Settings Switch Auto Check-in

Then auto check-in 00:03:59 is a little tweak that I've added to to my Joomla components and I'm possibly going to make a pull request to add it to Joomla itself. What auto check-in does, it adds a feature to your component. Since I have clients that complaint that some people will open an item and then in the browser click back, instead of clicking close. That will keep the item locked out 00:04:28 to that individual and so others cannot access it on less they have admin rights to check it back in. We created an auto check-in. Auto check-in checks whether this item has been checked out longer than a set period and ever it has been it checks it automatically. That set period is something that the administrator sets in the global settings of the component. I'll show you that later. 00:04:57 You can add auto check-in to a view by either saying yes or no here.

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 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 [email protected] 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 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 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 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

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 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 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 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 we need to add this(selected area) information. We have to do it for every view which you've selected, either tags or history.

Update Method

We'll look at the tags in the category concept just a little bit later. Content types, as you see we are adding it for the [00:11:27(https://www.youtube.com/watch?v=39vY66X7GGU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s) sermons, we adding it for the series's, we're adding it for the statistics and for the help documents. That is when we install their component, we are needs to be added. You are not seeing the whole picture. Let me scroll a bit look at that string that needs to be written and added to the database of these specific areas to create that integration where it will track the object change and just do it automatically. All this is generated by component builder. When you do an update, here is the issue, 00:12:00 when you do an update and you're adding a new field to a view. This update will make sure that specific field also will get tracked. What it first does it gets the data. It tries to see whether it already exists. If it exists it means it's here it just updates it. If it's been for some reason removed, it then inserts it. 00:12:29 That is the update method.

The update method also takes care of the little lot of discrepancies because as you develop your extension. There are two phases of development. The one phase is, when you're busy building it and no one else in the world has it. That's a very easy phase in fact then you don't really use this nice feature. You just uninstall it and reinstall it every time until you happy with what you see. But then once you put it out in the public you can't just step up your database structure without the needed scripting for others to do a easy upgrade. Because they already got data in the database they can't just uninstall and install. 00:13:13 Component builder has a way for you to actually address that. Well obviously because I have to deal with it and I don't want to have my clients complain. I added a feature which will look at inside of component builders component area. I will explain it in detail but just that you know, this part of the update feature, you making use of, you're a specific integration, to keep track of your back end view changes to items is in place already written by component builders telling you here on which line it was done, 00:13:55 if you have that switch trip. That is just giving you a quick glimpse into the code of a little switch called keep history. This little switch does all that for you for this specific view.

Settings Switch MetaData

Then depending on whether you going to use this views information on the front end as your main base for your 00:14:23 page. You might want to add Metadata. The metadata isn't that useful anymore, although google and others are maybe ignoring it. It still plays a role to making a page very search engine optimized. Component builder if you do your homework and you do things right 00:14:51 in relationship to implementation of your metadata, you'd see that it actually adds tremendous good features to do your front end of your site. I would suggest that you add Metadata when you are going to use a specific area to the front and when we start looking at us setting up the site views you'll see this coming up again and the necessity of using it. Obviously you'll be remodeling the data because you can get relationship from many databases. 00:15:26 You need the area in the back end to get the data.

Settings Switch Access

Then this access switch might throw you out. This simply adds the following feature. If you open an article, and open publishing, it says here(dropdown) access public, super, registered. Which is relating to your user 00:15:52 access levels. As you know user access levels can target multiple groups into one user access level. This again is only a feature that will be extremely useful when you look at your front end of your component. In the back end you can also make use of it. You can change the access of a specific item but since we also have such a intense permissional switches. I hardly ever make use of it but it's there and I mostly use it for front end. When I want to set an item not to be accessible to the front.

Settings Switch Export/Import

Then when you do want to add to import/export function. This is a 00:16:38 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 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 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

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 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 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 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 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 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 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 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

???

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 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 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 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 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 Thanks for watching