007 Admin Views

ADMIN VIEWS

In this tutorial we are looking at admin views, the next step of developing your component. First we started with field types and how to set up and improve on them. Then we learned to use those field types to build basic common fields. Now we are going to take those fields and add them to admin views. 00:00:34

Naming Convention

Admin views, like I explained in our initial General Planning tutorial, forms the basis of your component's database structure. Admin views is where your database structure is being developed. 00:00:56 All admin views have their own table. They have a single name, a list record or a plural name. Then there is a system name. The reason why there are three is that when you want to reuse a specific admin view in another component with the same name, but adapting it to that component, you would then have two of the same names showing up in your selection list when you add it to the component. 00:01:21 It might then be difficult to discern which is which, hence you can add the name of that specific component as part of differentiating between the same names. 00:01:47 That means you can have admin views with the same names, but with different implementations. That is how you can do different version control concepts on components, using the same admin view, making a few changes inside of it, and then saving it. 00:02:03 You can open the name, type free version, and save as copy. You can then change some of the fields that are linked. You can change some of the linked views, your CSS, or whatever other things you have done regarding this admin view. 00:02:25 Now go to the free version of that component and link that specific view instead of the other.

Creating an Admin View

Click new to create an admin view. 00:02:54 I'm going to open preacher, because it's the one we are using as our illustration. You'd see that there should be a name for a single record. That is where you would edit these records. (In this case, it is preacher.) Below it is a list of records that are preachers. 00:03:14 There is a short description and a normal description, depending on what you would like to say. There is a type; 'read/write' and 'readonly' which changes the component's editing view. If you say 'readonly,' the fields wouldn't be editable. 00:03:36 The 'Modified By' field cannot be edited because it's done automatically, and when it was modified, it updates every time you click save. 00:04:02 If you leave it on 'read/write,' you will be able to edit it.

View Icons

There is a place for an icon. (If you hoover over the icon it gives you the dimensions that is needed.) When you look at the dashboard, those icons there are the ones selected. 00:04:24 The icon has two options: 'Add Icon' and 'Icon.' If you hoover over 'Icon,' you should see the images if they are set in your images folder. 00:04:46 If you open this, it goes to your image folder where you select the icon. If you are going to add a field called category that is of the category type, then you should add a category icon. 00:05:14 Since the system will then automatically know that there has to be a category setup, and will look for a category icon to use for that category. If you select a category field that is a general category for the whole component, which isn't directly linked to this view, it will take the first view (the system, when processing, will see which view is first, which would usually be the first one you've created) and use the icon in that view. To be on the safe side, if you are using one category for them all, set the same icon on them all. 00:05:37 If you are going to use a category which is primarily focused on the preachers, and you are going to put preachers in a category, you need to add a category icon for categories. 00:06:02

Permission Implementation

The permission switch is related to accessing and updating of data. Here we have admin views edit, admin views edit state, admin views edit own, admin views create, admin views delete, admin views access, and admin views edit version. 00:06:24 If you are in the managing group and the particular edit is set to allowed, you can edit it. If you are a guest and it is set to deny, no matter where you are in the front or back of the site, (even if you have a direct link,) you won't be able to edit this information. 00:06:49 It does has view access so that somebody who might be not allowed to edit, can still view the content in the back end in the list view. 00:07:08 It will show in the list view, and they can see that it is there. You might want to display the record and leave a custom admin link to the data. 00:07:32

Here is an example of a component that does that. There is a button underneath the company name. The record is being displayed, but if the profile is set to being locked and I was to click on this, it will tell me that I do not have the permission to edit it. 00:07:53 But if I click on the icon below the company name, it loads the information that I am looking for. 00:08:12 Sometimes you want to use a custom or to do something that is not an editing view; or you would like to see the record, but not edit it. 00:08:36

Opening the permission tab, you would see that there are view.edit, view.edit.own, view.edit.state, etc. All of these had been created. 00:09:00 Setting the first one (core.edit), you would see that there are two options: core.edit and view.edit. The core.edit means that you want to do a global switch. 00:09:27 Let me explain that by going to Component Builders' options. In all components in Joomla there is a list of options ('create,' 'edit,' 'delete,' etc,) which, if you select, becomes applicable to everything in this component because it's a global setting.00:09:56 Hence, everything that doesn't have a view name behind it. For example, 'Admin Views Batch Use' is a view name and is only related to this view, but this is only Use Batch which is global. 00:10:18 I can allow the latter to do a batch function, but not the admin view. You could also select 'inheritance' which means that batch functions are allowed in both cases. 00:10:39 The reason why you can do it in two places is that you have a global switch to stop them from doing it. You can also locally tweak the view, determining whether they are able to edit some of these features or not. 00:11:08

To return to the way to set that up; if you don't want to have a separate control for this view in relation to whether it can edit, change, or view it, etc, use core, which would mean that you'd have only one switch that, if you set it to deny, will automatically deny it for any view that is using core. (Core can also be seen as global.) 00:11:31 When you set it as view.edit the system will generate a specific list of items especially for that view. 00:11:55 (See video.) 00:12:14 When I set up this list in a Component Builder, I selected view edit, and of the two options, 'In relation to each record,' and 'In relation to the whole view,' I selected both so that it will implement it for both in single record and for your global settings. 00:12:34

If you know how Joomla's provisional structure works, this would make better sense to you. If you are using a Joomla website, go to articles, open options, and look at their permissions. 00:12:58 You'd see that there are only 'Create,' 'Edit,' 'Delete,' 'Edit state,' 'Edit own,' and the accessing of the control in these big global settings. We are adding more control than these defaults can give. 00:13:17 This is how it works. In article manager you have one view. That view is 'Articles.' 'Categories is another view, but it is another component; it's not the content component. Admin features is another implementation, not a new database. 00:13:38 The point is that you only have two views here, so when they look at options, they know that if they tweak this permission, it will be implemented for all the views related to articles.

With Component Builder you are able to build components far bigger then the content managing article manager. 00:14:06 Because of that we felt that your permissions must extend so that you can target a specific view and not just all of them at once. So if you want to target a specific view, you will select 'view.edit.' 00:14:27 The 'view' prefix must be in your selection; if you select 'core,' you won't specifically target this view if it's changed in the global settings which would be the ones without a view name in front. 00:14:45 These are the global settings: global export, global batch, global version, edit version, global create, delete, edit, edit state. 00:14:59 'Edit State' changes it from publish to unpublish. 'Edit Own' means that though you might not have edit rights you can have edit own rights, so that whatever you create you can edit again. 'Created by' and 'created date' are fields. You can edit the 'created by' field or you can edit the 'create date' field. You'd see that this targets the default fields. 00:15:33

There is a way to target custom fields; fields that were developed outside of the default fields. That isn't done here where your default fields and your default features with regards to permissions are controlled. Set up these permissions first. Make sure that you set up all of those that you want to implement. 00:16:01 The most general options are listed here. This list might grow with time; because we've moved the control of a single field out of this structure, we've made it more scale-able. 00:16:22 This permission implementation is only targeting default fields, or fields that the system had already put in for you; default concepts like accessing a specific view, deleting or creating an item in the view, editing the created field or a 'created by' field, and changing the state edit own. 00:16:44

These are the custom default features. 00:17:05 If you do not understand this I would suggest you make an effort to study Joomla's own implementation of the permission structure. Once you understand the way Joomla handles this permission structure, you would find it easier to set up these permissions per view.00:17:24 In the code you'd see that it had set up your globals. (Highlights the global. See video.) By global I mean that if you click on options, in any of the components, you'd find the global settings. The permissions here are those I've highlighted in the code. 00:17:47 These have links to the specific views; they all have related switches. 00:18:09 Each view has its own section. This causes Joomla to add, in an item, a permission tab with switches to control the permission for that individual item. 00:18:32

One of the features that makes Component Builder far more advanced than other component builders is the ability to add permission structures to your component right inside of component builder through this permission switch. 00:19:02

Tabs

The tab structure. We call these tabs. (See video.) 00:19:27

• Publishing and Permissions: Example of What Tabs Can Be

'Publishing' and 'Permissions' are tabs that are built automatically for all back end admin views. 00:19:43 All admin views have 'Permissions' (only if set) and 'Publishing.' In 'Publishing' we bundle the fields that are built dynamically, without you having to set them. 00:20:09 All the fields that you do not need to set are always placed in 'Publishing.'

• Example: Preacher

In 'Preacher' I set up two tabs: one called 'Details' and one called 'Sermons.' 00:20:32 So there are two tabs in 'Preacher' which means that if you were to open the 'Preacher' back end view the first one would be called settings and the second one will be called sermons.

• Fields Linking

Now when you create fields 00:20:53 you would see that there is a column here called tab, and you then will select the number. Now the tabs are number from one to whatever. We don't start at zero although that might have made more sense for programmers we started with one. So first tab, second tab, and because we are using 00:21:15 a place different from the tabs. We don't use the names. So you need to remember that this is tab one, this is tab two. So when you set up a field you need to tell us in which tab you want to place that field. So that is what this tab number here is all about. 00:21:35 Now you might say but where is tab two's information because they are sermons right. Well because of the fact that sermons is an actually a table on its own. If we go out here we will see that there is a admin view called sermon, and it has its own back end view, 00:22:02 and it has its own structure. So how can I get the sermons that is only related to this preacher to be showing in the second tab called sermons? Well we created a thing called linked views.

• Fields Linked Views

Now linked views is the place where this is done. 00:22:25 So basically I selected sermon as the view, I said it should be placed in the second tab, and in child key, is preacher. So if I think about sermons which is the child, sermon is the child, preacher is the parent. So you would always think of the parent as this the view in whic Then you'd see publishing and permission. So that's how it would look.h you are the moment you are setting up the linked 00:22:49 view. So that if you are in preacher the parent is preacher, if you are in sermons, the parent is sermon. So depends on which view you are busy editing. And so here when we talk about the child key, this would be the database field name 00:23:10 that is to be looked at, and the parent field name, that should be found inside of preachers. So when we look at preachers you would let's go back to sermon. We got sermon open here and if I open this fields, Well I don't need to open it here in fact let me use another place. 00:23:38 It is easier to see.

Let's go to fields you will see that there is a field called name. There is a field called preacher. This is the field that we want 00:24:10 connected to with each other right. So to get the sermons that belongs to that preacher, we need to get the ID of this field. Now that is a custom field. And we said that we are going to look at custom fields only after explaining the admin views. So I'm going to go into detail now but I'm going to open that field none the less and I'm going to show you that its name is preacher. 00:24:35 And because that field will be connected to sermon it means that in the database the ID which is the key field is going to be saved in preacher. So that means the ID of the preacher is saved inside of the preacher column, in the database. 00:24:55 Now let me show you that in the database itself, so here in the database with sermon distributor and I'm opening sermons and you would see that we would scroll until we see preacher. And it has ID's in it and those are the IDs of the preacher's themselves. So if I was to go to preacher, it basically means that we are linking 00:25:24 to this ID here. So going back to our linked view concept, that means the child database table, in which the ID of this preacher must be found is in preacher. 00:25:43 The parent key would be this preachers ID and so by doing that, the linked view will only show the sermons that are related to this specific preacher. And that is how the linked views can be linked. If you didn't select these correctly, it won't load all of them 00:26:05 It won't work well. So there needs to be that tight relationship between the parent and the child view. So there is also a way to actually link from an array so let's say 00:26:23 the person is able to select more than one preacher, there is a way for you to also type that, but that would all be dealt with in advanced concepts. I could explain some of it here but let me show you that would be one of the syntax(>) to use 00:26:48 But like I said I think possibly I need to deal with this in advanced concepts because who will know to look for the answer in this video or tutorial. So we'll stay with the basics here. So the basic way of linking another view would be to select that view from this drop down. Then say in which tab it should display. Then 00:27:12 what is the child database table in which to look, what is the parents value to use to build a relationship. And then this add new button yes or no, is basically when you look at fields here, you see it has a 'new' button. 00:27:38 So you can in that switch (add new button) decide whether it should show it or not. I should tell you that if you say yes and you have in that view created the correct permissional of structure for whether somebody can create an item you can control the display of that 'new" button 00:28:02 with just setting the permission of that users specific group. So if that user isn't in a group that doesn't have permissions to create new items, for in this example, for preachers or for sermons, then that 'new' button will also not show up. So we have that permissional wrapped around that button's display methods. 00:28:26

That is the tabs just looking at the tabs. That's really what we were looking at and then explaining to you how to link other views to it and to other views so that you can have the data displayed inside of each other. 00:28:43 Basically this feature we have here so the fact that we are busy in preachers and we are able to display the fields that are being used. As you can imagine these fields are linked to preachers from this column here, so we are using a repeatable field structure 00:29:05 and we are able to connect the field names to this view.

Now let me show you how I did that. So I'm going to open the admin view which is the one we looking at. 00:29:32 I'm going to link views and you see that I have there a 'R' in the pointer and the word field so if you are trying to connect a view from the parent. And in the parent it is stored in 'addfields' that is the database 00:29:54 column name. So if we go to the database, go to Component Builder, admin views and we scroll, you would see there is addfields and if I open that you see that the way it stores it. It stores the ID, then it stores the list. 00:30:21 So there's a way in which your repeatable fields are stored by Joomla. and the value that I need to look up is in field. So in the repeatable field called addfields there is a field called 'field'. And it should look for the ID of the fields. So it need to look in addfields 00:30:51 in the field array for the IDs, that it needs to fetch, and the way you would mapped that in the connect a linked view is you would say that this is a capital 'R' for repeatable fields basically that is the convention to to tell the system it's a repeatable field we looking in 00:31:14 and inside of the repeatable field we must look in the field array for those ID's and they should mapped to the child's ID. So does that make sense I hope so. Because that's the way it's done. And if that wasn't a repeatable field but an array you would simply say array 00:31:34 and if the array is just the values themselves you would drop off any pointer to specific value. But if it's an associative array you would just add the name of the associative key that it needs to look in. 00:32:00 If it's just a normal array without association leave it like that so this would just tell the system it is a array and it needs to look inside of those values for these IDs. So that's sort of explains the linking of an admin view to another admin view. Now getting on with the setting up of fields. 00:32:28

Fields

Now since we've already created the fields beforehand you will usually start out this way. It will look like that and the fields that you have created you would scroll down if it is a long list you just start with typing that fields name and it will sort of bringing it up to you. Then it ask you whether you 00:32:56 would like to show this field in the admin view. In the admin list view and that means if you've closed your editing area there is a list of names here and if you want that specific field to show up in this list then you would select 'show'. 00:33:18 If you have selected 'show' you could tell us in which order you want this. Must it be the first one, second one, and we thought well you shouldn't do more than a 100, it will look ridiculous. So you can say I want this one to show up first.

Now the title and alias concept in Joomla is quite interesting 00:33:41 It's actually needed especially if you want to do history control or integration with Joomla's infrastructure when it comes to their history and tagging systems. You need to add a title and an alias to all your views 00:33:59 especially if it is a view that is going to be used in the front. So in this case since we are going to use preachers in the front to display list of preachers, we most certainly going to add a title, and we are going to use the name as the title. Then again back to the back end. Do we want to have this 'sortable', do we want this thing to be clickable there, so you can click on it, and it sorts the table alphabetically 00:34:30 on the basis of this column. So if you want to have it 'sortable' then do you want to have this field be searchable. Do you want someone to type into this box? We take 'warehouse' for example, type it in there and search. Do you want it to 00:34:51 show only that specific field. So if you want them to be able to search for it you, say yes. Then the filter option is a tricky one. You don't want to set name to filtering because then it will show a list of all the names that already is being shown in the table. You only want to use filter on things that are like a radio box or a 00:35:19 other view or you know fields that actually are not all being displayed one after the other in the table. So for our example I added, let's go to sermon distributor and preacher. I added no extra fields there, but at sermons I added preacher. So there's a list of all the preachers here so I could sift and say ok I don't want to see this preachers sermons and then it shows up only those, so that is the filters and the way that you set up the filter is simply by clicking yes or no here and it will set up that filter for you. Then this link if you are setting up a custom field and you want to be able to 00:36:12 in the display of the list have it clickable so I can click here and actually go to that preacher. And then click close and then I'm back in the sermons list view. I could also click on series and it will take me to the series, and I can edit the series immediately. And click close and take me back to the list view. So if you want that feature for the specific item then you need to tick yes here. Now usually we used the name as you see here to be the clickable title, if you select your title here and you click link then your actually telling us that this field item here is actually what we should use as the clickable option to open that actual sermon. So here we'll have that actual sermon opening up and all it's related fields. 00:37:16

So that is the way for us to know which field should be used as the clickable field if you have a title. Now this concept is something that you might need to play with and since it's so easy to change it you can just click a button here to compile your component, install it, look at its behavior, change it a little, compile it, install it. Look at its behavior by doing that you would get a good understanding of what happens if you change these switches here. Now we said that we wanted the preachers name and stuff on the settings and our tab for settings as the first tab.

Field Alignment in Admin View

Now we going to look at the back end setup in o****f where you want to have this fields display. There are these different placing options left in tab, right in tab, full width in tab, above tab, underneath tabs, left of tabs, right of tabs, and then 00:38:20 there is the order in which it should go. That means if we look at this again this is left in tab(left side of the screen), this is right in tab(right side of the screen), I think I have another view that goes beyond some of those parameters.

Fields Alignment Order

Let me go to this one and we do question. So that is right of tab, not in tab, you see there is an option it says; right in tab, left in tab, and then it says left of tabs, and right of tabs. That means that you can put it out side of the tab area. So even if I was to click here it will remain displayed right there on the side and that is to put it right of tab. There's also a left of tab area over here. 00:39:31 Then a above tab is this one here, that's above the tabs. So it also shows all the time and and then there's underneath tab. We basically added the option of placing data. I will just show you. At the right in tab, left in tab and then right of tab and left of tab and above tab and beneath tab which is 1, 2, 3, 4, 5, 6, positions in the back end of your template. And the places are being set simply by these alignment assignments here (select the field alignment inside the tabview) and you select these(from a list) and then once you've selected them let's say you've selected this one above tab and you selected 1 then this is the order in which you wanted to display. First this one, 00:40:35 then that one, left in tab. This is first, right in tab, this one is first, and then that one, and full width, it is a description. Now full width will always display under the left and right of in tab. So you need to select your left and right and then only your full width. Full width is always the last thing to show up in a tab, and then here is the switch to add permissions to a specific values. So if I was to say you know what, I want the control, which group can edit the name field, you simply need to click this yes, and that would add this field into the permissional structure dynamically. That is how you control the permissions of fields.

Fields Title - Alias

That is how you add fields to a view and those are all the different switches. You can only have one title per view and only have one 00:41:39 alias per view. You should not have more than one selected. In any case I think the system will ignore the others but just to be safe set the others to no. And then those that are actually the title to yes, and the one that's actually the alias, to yes. And so we will be able to be sure to use the correct field values. And then when you set any of these to show, you should set the order of their display here, and there is the filter. The filter then is added dynamically by simply clicking a yes here. If we go to sermons as an example, and we click on their fields they have many more fields which will help to illustrate some of these things. And you'd see that we have sermon series and we have it set up as a filter. Filter is the second last column. 00:42:43 Sermons series, let's see we set that to yes, so that means we can sort this sermons by series that is how you set the filters for the back end. Remember this is primarily for the back end. Although some of that information will relate to the front eventually, especially this permissional switch will be able to access it from the front if you need to. But this is simply to add the fields to the actual view in the back end. If you have any questions about this please give me a heads up if you feel like I haven't done a good enough job explaining this, then let me know and I'll redo this video. So that's adding fields to the admin views.

Conditions

There are much more things to explain here and I think the only thing I'll still cover in this tutorial is the actual conditions this is an amazing feature 00:43:47 which goes beyond Joomla's control on the show on attribute per field. Remember we looked at the show on attribute and the show on attribute can control which fields to show when you are clicking on other fields. For example here we have a field called add JavaScript. If I click yes it opens this area Java Script where I can add custom scripting. Now that behavior is being controlled by this condition structure.

Conditions using Sermons example

The condition structure for sermons are the following; if you can see there is a few already being set. So what we will do, we will first decide which field are we targeting. Which field do we want to show or hide. That is the behavior. Do you want to show a field or hide a field? Now most of the 00:44:51 time we'll use show. Show means it will be hidden unless these criteria's are met. Show is the one I use the most and I think most will use that mostly. Here is the list of all the fields in your system. You might say, why don't you just show the fields that I've selected as part of this view and unfortunately that feature isn't in place yet. So you need to remember which fields you selected in the fields area. And for our purposes it is these fields and you need to remember their names. Then when you go to the conditions, when you type a field like name, you need to know it is this one. That is how you would link to them. I've build on option, files is a field and I wanted to show. Now this isolate and chain function is a concept which I believe would 00:45:55 be best explained when you think about that not only one field must be used to show the other one but more than one field. So in this case Dropbox auto note in sermons should not only show when fields source is Dropbox, but also when built option is automatic. So that both of these should be true before it shows the Dropbox note. And so you would select the field you want to control, obviously you can control more than one at a time, but the logic behind this might not always work so you need to try it, test it, if it doesn't work come and tweak this until you you find it working in behaving the way you expect.

So most of the times 00:46:59 you would only link one field to one validation. But as soon as you have multiple fields, you would use the chain option. So it's either isolate like this one. The build option of files should show when file source is Dropbox. Then it's isolated, it isn't connected to any of the other settings here. As soon as you click chain, it means any other field that has this row, this is a row, that has this field selected as well will be chained together. So that it must be both being validated as true before. It actually will show the field. So let's look at it. It says file source and you can select any of these if you know that this file source is a list. Then you can look at list and see the list options. This is only for text, and it says that, only 4 text_field, only 4 text_field, 00:48:03 only 4 text_fields, only 4 text_fields. This is only for list and radio and check boxes and dynamic lists. This is only for list radio and check boxes, this is only for list radio, and check boxes. Then you can say 'is' or 'is not' So if it 'is' Dropbox, then it should show, if it 'is not' Dropbox then it should show. That is the the logic behind it. Now here this one(any selection) is when you're dealing with a dynamic list. Unfortunately with dynamic list it's quite difficult to set these values since they are dynamic. And so the best way to deal with a dynamic, would possibly be to leave this blank. So that means that if any of the values are selected show this item. We will still look at dynamic list or custom fields 00:49:07 and we will explain to you how to set up those custom fields. That is basically what that option is for. Most of the time we are using this 'Is' and when you select that specific field, let me show you if I select file source. If the field that you've selected is a text field, the system will show you that by saying keywords or length. So you can say I want if he has put in a length of '2' characters then show. Then you take keywords away. So then that is how you can use the text field. Now you would change this to 00:50:11 'Active', that is active and that it has a length of '2'. That's how that would mean if you know that what you've selected is a list, it will show you the list but it show you all the values and then you can remove the values that you don't want to use. And the only value that's really important is that 2 the other is just for you. So you could just leave 2. That will be the same as that we are just showing you. In fact what I do is I explode the string at the pipe and I only use the first value to develop the JavaScript. In fact the Java Script that is being written. We are in the sermons view, let me show you that, so we would go to component builder, admin, components, sermon distributor, modules, 00:51:15 forms, and then you'd see there are two, there's a XML which is the fields and then there is a js which is actually the Java Script. So we open that and here's all the JavaScript that component builder would build.

Now if we look at this let's go there it's only these are the conditions. So these are the conditions it's not even that long of a list, but to implement these conditions component builder builds this JavaScript so it starts up here and all of this JavaScript is the implementation of those things that we set there all the way down to there. So that means about 500 lines of JavaScript gets written by component builder just by these switches 00:52:19 that you set up here. Now I'm showing you where the script is being written so did once you've set up these switches you can come into this script and if you remember the field name that you are working with so for example let's look at it, build option is the field and files source. So let's look if we can find that here. There is source so it gets the value when the page is ready it checks the jform on this called source what is the value and it puts it in here and our first function obviously I'm using a random function name generator as you can see and it's start with V and the next one would be VW and so on and so on and 00:53:23

So that means you need to now how we implement this function hiding and showing of the source. You would search for the V function by just adding a bracket there and search ok so it's the first function. And I'm basically saying, is it set? if it's set, then I add a source constructor and if it's an array, is this an array? checking the value whether it's an array. If it's not an array I put it into a temporary array. There we push it into the temporal array. And if it is an array and it isn't set we just create a blank array. Then we do a validation here and again this you can go check. 00:54:27 So basically the function is that one(source_vvvvvvv_somefunc). So let's check that function and all that function does is it checks, is it 2? If it's 2, it returns true, if it's not 2 it returns false. So you see it's quite simple and the value whether true or false is returned to source. We put source into if it is true then we close that view. Sorry we get the closest class called control group. And we check, is this field required? If it's required and these are some home works that we do. Now if it's false then we hide it, and if it's required we do some house cleaning so that is simply a quick looking at the code which is being generated just by this one switch. 00:55:31 This is not the only code there is another place and that is in the view itself. We are looking at sermon then template and edit and then from around here we have JavaScript again. And again of a we have on keyup for source or on change, because the system doesn't know, is this a text field or is this a list field or what is it? So we have these two check function on it and also there is another place where source is going to be used for another functions. We just focusing on this one and so it gets the value and it runs that function which is in our JavaScript file. So here's the JavaScript file, there is the function. So it's reusing the same function. 00:56:35 The moment that there is a keyup or a change on that specific field. That is what I've done. Obviously other developers who are more advanced in JavaScript than I am, get's involved I could show them where in component builder the script is being generated and we can improve this dramatically. I am not that good at JavaScript and in fact I feel like most probably a little bit resource-intensive here but this is the best I could do so far and obviously if we can improve it and if you know how to improve this then you welcome to get involved on GitHub and start with a discussion on improving this infrastructure. I can tell you that this infrastructure is done in the compiler of course and I can show you exactly on which line this was developed. In fact all you need to do is when you compile your component just if we 00:57:39 go back to components. Here we're inside a component. All you need to do to know where that is being built it's just tick this to yes and then it will add in the comments it will add a line reference of where that specific script is being build.

Let's go back to the admin views. We're not really finished, so this is structure that you can use to actually manipulate the conditions upon which field should show or not show. and I really think we have done a very good implementation here. It gives you so much possibilities of structuring and chaining and working with fields in its relationships if you want to not use this and just use the on show then that is also going to work just as well in fact I think it will work better. The only problem with the on 00:58:43 show, is that it doesn't actually provide the ability to target as a text field like we have here. Where you can add a keyword and say OK if they types in 'his' for example, then immediately this other field will show up which is an excellent feature. I mean I don't think you can get that kind of intricacy with show on option and furthermore it cannot look at multiple other fields if they have certain values and if it evaluates true then only show the other field. Those kind of controls are not yet available in the show on implementation as far as I know, and yes I possibly would like to get involved on the get repo of Joomla and see if we can add these nice features. But for now we have add them to Component Builder. In component builder you can implement these(match options) and we are writing the JavaScript to manage this 00:59:47 for you. That is your conditions for fields.

Field Listing

We've looked at all of these(permissions, tabs, fields, conditions and linked views). The next one is basically the list of the fields that you have already selected and clicked save. It will show a list of all the fields that you've selected. Again any of those fields, if you want to update them, you could just click on the field name and it will take you to the field and you can update it.

Custom CSS View - List Footer

The next tab is a place for you to add custom CSS that is just related to this specific view. You can add CSS here, which is for the edit view or the single view and you can add CSS here, which is for the list view or the multiple views (plural). Then it will be placed in its prospective places. The same goes with the JavaScript, accept that you have four places to target instead of just one.

Custom Javascript View - List Footer

If you remember when we looked at the way that we are 01:00:51 building the JavaScript there is a file, a JavaScript file, which just has JavaScript for the view and then there is the footer area which is under the HTML and PHP at the end of the file there is a whole area which is just JavaScript at the footer of the file. And so we decided to add the option of adding JavaScript to the file or JavaScript to the footer. (The view file or the view footer or views file or views footer). So it just gives you the option of targeting. If you know list and this script can run as a function and I just wanted to be able to be on the page. Then you add it to the file and then if you want to use the function you can add it to the footer. That it's up to you.

Custom PhP - Adding AJAX for Controller - Model

Then there is a PHP area and here you have the option of adding JavaScript to your editing view 01:01:55 primarily. If we look at editing views, the moment you click on add JavaScript, it opens a tab and now the way that we want to implement ajax is primarily via the controller and method implementation. So if I explain that to you the component has a controller called ajax.json.php, you can open that. Then it has a model we call it ajax. So you have a controller and you have a model. Now the controller is like the gatekeeper. He first does a few checks and balances to ensure that the data is correct that that the token is right that if you have set this to be 01:02:59 validating whether he is a user, then it also checks that there's a user ID. If you have set it that it doesn't require them to be a user it basically would drop off this validation. I will show you that in a moment so that you can follow me.

There is a controller area and then there is some model area. The model is basically a place where you can write a method which is queried from the controller. So you can see in the controller it basically gets the ajax model, and then it is querying a method in that model called Dropbox. Here we are querying the Dropbox method and it's getting the view name. I'm not 01:04:03 using this variable but it is here and I possibly will use it later if it becomes necessary so I'm basically just activating this method to run and when this method runs it triggers some global methods to run and on the return of that value it triggers another local method so again I'm not trying to teach you php here. All I want to show you is that this part of the code was custom written.

If we go back to our component you'd see that there is that code. So when you click on ajax you add that name basically writing a method make sure that it's set to public and your write your method in here and in the ajax input, you would say the task name is check dropbox listing. The values I want to pass it is view and 01:05:07 type. And both of them are integers and it needs to run the view, needs to run a dropbox method. And the type needs to run an update dropbox. And both of them should check whether it is a user. So only users can fire these back end methods and the you can see that you have control to tick that. The filters are the same as with any field that you can select. 01:05:45 And so integer here would be fine and if there's no value you set null. This task name is what you be using in your JavaScript.

So I first wanted to show you the PhP side and then the task name itself. Let's just make sure I do not miscommunicate here. The method name is set here and that should correspond 01:06:07 to the method that you set up in your php Ajax method. Which is possibly the method in which you model the data, get the data, structure the data, and give it back to the Ajax call. So you return the data inside of this method, but in your JavaScript you will be using the task name to 01:06:29 get to the system. So if we go to the JavaScript, close out, go JavaScript. It seems I used the JavaScript example which is going to get way ahead of us but since we started let me not leave you in mid air. So I have to close out here. 01:07:00

In sermon distributor which is the component to which that view belongs is a place called scripts and I have added a feature which is called chronic global 01:07:23 events. So I have added a feature to add global events. Now global events or the way I am implementing it, is simply an event that should run every time a page opens. Anytime any page in the system opens, I wanted it to run the global event. Now the way I target it is, I say load Dropbox Ajax 01:07:50 is a global event and it needs to do that. And the Dropbox Ajax is basically set up in the helper class. So I have a helper class which is called load Dropbox Ajax and it gets the document object. 01:08:11 It takes the document object it adds a script declaration to it and here is the JavaScript that it is adding. And you see, in that, it is using check Dropbox listing as the task. So it's targeting the ajax 01:08:32 controller and asking for check Dropbox listing as the task and it's passing to it a token and a view name. So possibly we would like to use that view ID later to log from which area this automated 01:08:52 feature mostly gets triggered. I'm not doing that as yet so this is just what the script will do. So there is jQuery which only fires of after the page is loaded. And at the moment it's just adding a dummy 3 in there to just trigger the method. 01:09:10

And so that is really how this script ends up on the page. I'm sorry that I used that as an example I realise it's a little bit ahead of ourselves, but nonetheless I want to not leave it at a loose end. So I am redoing it actually for you. 01:09:32 That is where this php script are going to be used. So since I need to add this somewhere I just selected a view to advantage it to this sermon view. And I added the ajax controller concepts here, but the actual JavaScript that fires off all this, is set to the global event and that means every time a back end area is opened in this component, 01:10:00 it loads that JavaScript to the view. And JavaScript executes a ajax request which starts updating the Dropbox listing. I'm not going explain all of that Dropbox listing to you now, it's a quite an advance concept but it's basically sermon distributor that is able to link to a media inside of a shared Dropbox folder. And this whole method here that we looking at 01:10:28 parses that Dropbox folder every so often to make sure that it's to date. That's what it's all about. So that is just looking at adding ajax.

Get Item - Items Joomla API Method

Here you can see that if you know the Joomla API, you know that it has a (getitem method) 01:10:45, it has a (getitems method) in the model. In the model there's a (getitem method) in the editing model. In the list model there is a (getitems method). Then there's a (getlistquery) in the (jmodellist). And there is a (safe method), there's a (postsavehook method) in the controller. There is (allowedit method).
01:11:10 There's a (batchcopy method). There's a (batchmove method). There's a (script before delete) method. There's a (script after delete). These are all PHP places in which you can dump custom scripting.

Save Method

If you want the save method, 01:11:32 you need to know where the save method is, so if I would open sermon here, scroll down to get item. So you can add custom scripting to the get item method. 01:12:06 There is save method and so if we go back here and we click on the save method, it says here, that should run PHP here, that should run in the save method. And then you have the data, it's a array and it's called 01:12:27 data. So If you look here it means you're able to target that value. It gets placed into save. And I am sure that your custom 01:12:47 value code will be placed in before the parent saved. But if you do not know in any of those custom scripts where that code will be set. What you can do is just type: it is 01:13:06 loaded here. Save it and compile the component and then go look at the code. And you will see where it is showing up. And then you can add and say I've got all these values already in the script, because all that component builder is going to do it's just going to dump, let's say, (it is loaded here) 01:13:37 That is how it will look. It'll just add the string. So when the component itself runs it will treated as code. This is a comment but I mean if it was code. It will just execute. So it is the way for you to add custom scripting right into your component almost anywhere. You are able to target through these switches.

Post Save Hook

The post save hook 01:14:05 is actually in the controller not in the model. So You go to the controller sermon. Scroll to the bottom and you see there is a (postsavehook). It basically gives you the model and it gives you the valid data and you can actually can perform extra features on it. 01:14:27 But in all these things you should just read the description. It says "PHP here that should run in the postSavehook Method and there is the (object)$model is the data model object and (array) validated data". So if you just read our little note here, then you can start coding for it. That is adding custom scripting to the view. 01:14:55 Basically the list view as well as each view and then the MySQL dump area which we looked at earlier.

MySQL Dumps Test Data(insert into table)

You can do two kinds of dumps. What is this used mostly for? Well what I found while I was busy developing that I would be busy setting up a component 01:15:15 and install it and then add dummy data to it to see if it works. And then every time I make a change and I uninstall that component and install the new one because whatever change it made to the database won't be added to the database via an update. You need to uninstall the component and install it again to get the database back to where you want it. And so the only way I could save myself 01:15:43 time, is to actually say listen I'm going to re-install this component and the dummy data for sermons. I would like to retain. So I would go to table and I open the tables. It will show me a list of all the tables that are in the database at that moment. And then I would scroll to sermon table. Click on it 01:16:06 and it will load the table and what it should be called in the data set. Here(Source Map) is some explanation if you want to do other tables. Let's say you want to have it mapped to multiple tables, then this(Source Map) is the explanation on how to do that. I would not recommend doing this because possibly you will not get 01:16:29 what you expect. And just going with the values that he populates for you, will possibly your best call, unless those values change and if you are making changes adding new fields. You must realize that you need to come and reset this by clicking on something else. And then clicking on it again and that it loads the new 01:16:57 list of fields that are related to this table to this back end view table. And that way when you compile the component then component builder will actually grab the data from the database and build a dump file for you.

Dump File Itself

Now that is one way of doing it. 01:17:18 It might be a little bit complex but it saved me tons of hours. The other way would be to just do a dump file itself. So you'd go to your MySQL, you would open the specific, let's use smaller field types. 01:17:40 Click on export and then you would select SQL format and click 'go'. And this will create a dump file of all the data in the table. And you can basically paste that dump file in here. 01:18:17 So you click 'export', click 'quick' then SQL and then 'Go'. And then save it. Then go to that file(cb componentbuilder_fieldtpye.sql) open it and having it open. 01:18:41 You just replace this string(cd) with (#_). Click 'Replace All'. And you will not use the table structure because that is already in component builder. You just use 01:19:03 this(selected in blue) area here. Basically you would copy this area(selected in blue) like that, cut, come here(MySQL) paste and click save. And that will mean that you have the dump file. And it will always be added 01:19:36 to your new install. If a dump file is way too big, you will see it by just after your clicked save, come and look at the end and see if it cut it off somewhere. So let's say it cut it off there, then I would know my dumb file is to big for use. 01:20:04 Let's just make sure, (componentbuilder.admin.view) (structure) For your dump file I used medium text. There it is 'sql'. I've used medium text. 01:20:39 So that means It's quite big you can really put a lot of text inside of it. If you want to know exactly how much, just Google it, and you will see I'm going to remove this because It's not related to sermons at all. 01:20:57 In fact I'm not even go to use the dump here, save and close.

That is basically setting up an admin view. I know I've run around and it seemed quite hectic and I possibly will redo this video at a certain stage. Try to be structured but I think it is informative enough. 01:21:20 If you have any questions please email me and I will try to communicate with you. If I see that a certain question comes up often enough I will add it to the Video possibly redoing this specific area. 01:21:35 Admin views is quite intense and we will possibly revisit many of the concepts that we have looked at today.