009 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 Obviously the component itself has so much things that you can do I'm gonna try and Deal with it 00:00:28 Little at a time So I'm first gonna just look at adding The Admin views to a component Ok so 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 So to connect admin views to your component and you need to go to settings and open this button here Usually when you start it will look like this So very straight forward You have a drop down here And you make a selection 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 So I'm gonna type in the name here sermon Now these icons here I spoken about them previously They are the icons from Joomla Which is called I think I let me just look Standard Icomoon font Ok so it's this This font here Now 00:02:02 If you select a an icon here It'll show you that little icon but only during the selection face So That is the icon That is gonna be used For the view Here in the right See this icon there As we click through 00:02:24 Component Builder It updates that icon Ok so this icon Is what is being set here Now you can select the icons to Reflect to the admin view of your choice Now we have a bunch of switches here and I'll look at them one at a time Now admin menu Is basically this menu 00:02:49 So the question is do you want that View to show up next to your main View I'll be the first Tick box So we would say yes Then Do you want to have an add record Icon For this view Now the add record icon if you go to the dashboard 00:03:10 Is this This icon here Basically a shortcut to creating an admin View From the dashboard So Will say yes Then A dashboard list of records icon So maybe you don't want this icon just a Add new Then you can tick that as no 00:03:35 But again here we would like yes Then a submenu Now the submenu if you've opened Your View that has a submenu here that can collapse away Now this submenu You can add this view To the sub menu or not Then auto check-in 00:03:59 Is a Little tweak that I've added to to my Joomla components and I'm possibly gonna Make a pull request to add it to Joomla itself What auto check-in does Is it Adds a feature to your component Since you see I have clients that complaint That some people will open an item And then in the browser click back instead of clicking clothes And 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 So we created an auto check-in Now auto check-in checks Whether this item has been checked out longer than a set period and ever it has been it checks it in automatically know that set period Is Something that the administrative sets in the global settings of the component I'll show you that later Just that you know 00:04:57 You can add auto check-in to a view By either saying yes or no here Then keeping history of a Backend view Now the history component I must tell you is maybe one of them most exciting things that I could integrate You see what it does is 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 to Let's just look at just a moment 00:05:33 To a Preacher And I would open up this acapella music You'd see that it has that version button here at the top No if I was gonna make a change here let's say I typed in Info@vdm And I set Some text here And I clicked save And then I clicked on version You see that it's now locked a new version 00:06:13 And there are the old ones And I could click on one of the old ones and click Well First let me say I could take the one I'm on currently And I get say keep That would sort of lock it in because You can also set how long How long 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 And Now We would see wow The details are Back Again That is the feature of history now history component is actually a Joomla extension Which You're able as a application to the 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 So if we were to go to sermon distributor And check our wait this is the 00:07:42 Frontend let's go to the backend And we check out it's sql table so we'll click on that You'd see that all of them have asset_ids Now That is Really not as easy as it is Once you've got the asset_id Then in your model When you basically save Sorry not in the model 00:08:17 I think it is in table When you start your table you should set up observers The check The specific Item to add history options to to that Asset_id So this is this is part of the whole Part of the script that is being add this 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 Will go into more detail in the advanced courses I suppose But just let you know I create an import export method And even in the import and export of data actually Primarily in importing of data You need to again 00:09:12 Do a quite advanced trick to ensure that the history of that I can will still be tracked and these kind of features I just added dynamically to your component because of that switch No that's not the only code the code that really throws people out I suppose Is this script code and this is if Script that is used When the component installs So if you look at this This is the uninstall area in the script code Which runs when you uninstall the component and it's looking in many places it's looking in content-type it's Looking in the content 00:09:48 Tag map Is looking in the ucm base 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 So we added the feature that if you uninstall 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 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 so for example Inside of the let me see the contents type 00:10:57 We we need to add this information And we have to do it for every view which you've selected either tags or History We'll look at the tags in the category concept Just a little bit Later Just to get a heads up and I realize this is not the place for it But let me just say we will look at that OK so let me continue Ok content types as you see we are adding it for the 00:11:27 Sermons we adding it for the series's we're adding it for the statistics and for the help documents And that is when we install their component we are needs to add You 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 So all this is generated by component Builder And then when you do an update now here is the issue 00:12:00 When you do an update and you're adding a new Field to I view This update will make sure that that specific field also will get tracked So what it first does Is 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 So that is the update method The update method also takes care of the little lot of discrepancies Because as you develop your extension now These two faces to development The one fase when you're busy building it and no one else in the world that has it That's very easy face 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 there can't just uninstall and install 00:13:13 That's that's ridiculous No component builder has a way for you to actually address that Well obviously because I have to deal with it and I don't wanna have my clients complain So I added a feature which will look at it inside of component Builders component area and I'll 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 Backend 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 Ok so that is just giving you a quick glimpse into the code Of A little switch Sorry a Little switch called Keep history So this weeks does all that for you for this specific View Then Depending on whether you gonna use this views information on the front end as your main base for your 00:14:23 For your page you might wanna add Metadata The metadata is I know isn't that Useful anymore but you know what Although Google and others are maybe ignoring it It still plays a role to making a page Very search engine optimised Component Builder If 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 So I would suggest that you add Metadata when you are gonna 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 but 00:15:26 You need the area in the backend to get the data right Ok then this access switch Might throw you out This simply adds The following feature If you open an article in the open publish It says here access Public super registered Which is relating to your user Let me just close this 00:15:52 you user access levels And as you know user access levels can target multiple groups into one user access level And so this again is only a feature that will really be Extremely useful when you look at your front end of your component and the backend you can also make use of it Of course 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 a certain area in the front of sorry set an item not to be accessible to the front Ok then do you want to add to import export function again this is a 00:16:38 Extended area which component builder dynamically just adds so 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 So 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 but the problem is because it's decrypting yet When you imported it doesn't know that it should encrypted so there is a little discrepancy with the advance Storing methods so as long as you are having a data backend database table that at Actually doesn't require these advance storing methods it's just your normal defaults like me explain before then Import export method will then works seemingly Without any problems I'm so 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 Ok that is the switch here and obviously if you don't like the feature just click no Then here is a feature which I think I'm most excited about And that is Every backend view Has of course and edit area right if you've selected that Read write option then the edit area you can change the values of that backend listview right So The admin create site View Means that the system Is gonna dynamically build 00:18:42 The front Area Which you can access To edit the data at the front of the website Now Yahoo this is the hurray whatever that's excellent tool So it takes exactly this if I was to use this and as an example It takes This editing area and place it on the front Of your website Now obviously 00:19:13 You are controlling in the permissional structures who has access to edit this who access to edit this The status was access to edit specific fields We looked at adding the fields to your admin views and you could tick Whether this field should have permissional structure Now 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 in the correct group 00:19:44 They wont be able to access this then if they have access but they don't have the right to for example update Maybe the modified date or The status is then in the front there also will not be able to do that so 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 and that all of that just possible by saying yes But Realize this The fact that it creates the 00:20:19 The 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 is 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 in fact I can show you that now 00:20:54 I have a component which I'm using that feature quite a lot And it's called Costbenefitprojection this is the backend So 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 of the the website 00:21:28 and I open that component And I click on View You see that there is company There is intervention and there is scaling factors they Are basically being extended here So what the component build does is as is it adds this view It also adds the module for it And I'm also adds the controller for it So basically 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 a I have here an area called cpanel now let me show you this component briefly Ok so this is just some dummy data that I Placed in here none of them is real And so here You can open multiple items This is all stuff that I built in component in fact 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 and now this is the backend 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