joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 82 Pull Requests Projects 4 Wiki Activity
Page: 007 Admin Views
Pages
001 Hello World with Joomla Component Builder 002 Intro to JCB 003 Installation of JCB 004 General Planning 005 Field Types 006 Basic Fields 007 Admin Views 008 Advanced Fields 009 Adding Admin Views to a Component 010 Component Settings 011 Component Scripts 012 Component FTP and more 013 dynamicGet 014 Adding dynamicGet to a Site View 015 Adding Templates and Layouts to a Site View 016 Template Setup 017 Layout Setup 018 Custom Admin Views 019 Adding Site Views to a Component 020 Adding Custom Admin Views to a Component 021 Tweaking MySQL Demo Data 022 Global Settings of Component Builder 023 Adding a custom time field 024 How to integrate the Create User Helper Method in your Components 025 How to use email helper in your components 026 How to setup a store message method along side the email helper class 027 How to ensure that a field is not escaped when added to list views 028 How to change exported values and setup custom import options 029 How to overwrite the custom fields 030 How to filter a list field based on association with another field 031 Automatic import of custom code during compilation in JCB 032 JCB manual custom code implementation 033 Export Import of fully mapped components 034 How to add Custom Buttons in JCB to your component Admin Area 035 Translation Mananger in JCB explained 036 Setting Site View Permission 037 Auto create SQL updates for Componets in JCB 038 Setup Site Edit View in JCB 039 Automated backup system in JCB 040 Adding Helper Structures to any JCB component 041 Upgrade to JCB v2.5.8 and using the new Admin View and Admin Fields 042 How to setup tabs after upgrade to v2.5.8 in JCB 043 Major Release of JCB v2.6.0 044 Hello World Component with Joomla Component Builder Creator Extended 045 Adding your own rule validation to a field in JCB 046 General overview of how community snippets work 047 Tutorial on forking JCB snippets so you can share your snippets with the rest of the Community 048 Tutorial on making a pull request at Joomla Component Builder Snippets 049 The New Library Manager Area 050 Easy Translation via excel 051 Dynamic Router Implementation Explained 052 Automated database updates in Joomla during development of a component 053 Quick Subform Demonstration 054 VDM Package Import Option 055 Dynamic File and Folder Inclusion concept 056 How to use the file field type to upload a file in JCB 057 Drag and Drop Upload functionality in JCB 058 The Quick Hello Word with JCB 059 Adding none database fields to an admin view 060 The custom dashboard option in JCB 061 Add or Remove Prefix to Component Name in Joomla Menu 062 Add your own JCB packages to the JCB Communty Directory 063 Proposed Collaborative Workflow in JCB 064 How to install jcb packages 065 JAB18 Using Joomla Component Builder 066 The new fields Area to make things easier 067 Adding Language String to your Component and get the Language Placeholder for dynamic use 068 Library Manager Anticipated Functionality 069 Join Fields in the admin list view with field relations 070 How to change the License Template in JCB 071 Reuse Custom Code 072 Setup Local Development Environment with Bitnami 073 JCB Fields Type Extended 074 How to add Joomla Custom Fields 075 Expand Custom Field Type Beyond The Default 076 A Quick Demonstration to Load a List of Items in a Site View 077 Run Expansion Explained 078 How to Add a Form to a Site View 079 Update the Site Form Field via URL Parameter 080 How to Add More Helper Methods to Your Components Helper Class 081 Easy Validation Rules for Fields in JCB 082 New Placeholders Feature 083 Manage a Components Global Config Option Field in Relation With Menu Params 084 Default Database Values can be set per Field Type Beta Testing Component Settings Develop a Joomla Component Guide to use the Component Builder Developing with Joomla Component Builder Home PHP Settings TIPS: Custom Code Using the JCB Demo Component While Building Your Local Development System
51 007 Admin Views
Amigo edited this page 2019-08-15 17:39:44 +02:00
Table of Contents

ADMIN VIEWS

00:00:00 (Click on these time links to see Youtube video)

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.

Naming Convention

00:00:35

Admin views, like I explained in our initial General Planning tutorial, forms the basis of your component's database structure. Admin views are 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 a 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

00:02:49

Click 'new' to create an admin view. 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 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

00:04:16

There is a place for an icon. (If you hover over the icon it gives you the dimensions that are 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 hover 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

00:06:15

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 allow, 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 have 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 be 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 is 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 than 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 make 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

00:19:26

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.

Linked Views

00:20:53

When you create fields you'd see a column called tab in which you'd select a number, from one upward. Because we are using a different location than the tabs, we don't use the names. 00:21:15 When you set up a field, you need to tell in which tab you want to place that field. That is what the tab number is all about. 00:21:35 You might wonder where tab two's information is. 'Sermons' is actually a table on its own; there is an admin view called sermon, and it has its own back end view and structure. 00:22:02 We created a thing called 'Linked Views' to get the 'sermons' related to this 'preacher' to show in the second tab, 'sermons.' (See video.) 00:22:25 Selecting 'sermon' as the view, I set it to be placed in the second tab. The 'Parent Key' would be the view in which you are the moment that you are setting up the linked view. 00:22:49 It depends on the view you are editing. Hence, if you are in 'preacher' the parent is 'preacher;' if you are in 'sermons,' the parent is 'sermon.' So in this case, when we talk about the child key ('preachers') it would be the database field name that is to be looked at. 00:23:10 The parent field name ('id') would be found in 'preachers.' 00:23:38

If you go to fields you will see a field called 'Sermon: Preacher'. This is the field that we want to be connected. 00:24:10 To get the sermons belonging to that 'Preacher,' we need to get the ID of this field. 00:24:35 Opening this field you will find that its name is preacher. That field will be connected to 'sermon,' so it means that in the database the ID, which is the key field, is going to be saved in 'preacher.' That means the ID of the preacher is saved inside of the preacher column in the database. 00:24:55 You can see this in the database. Open 'sermondistributor_sermons' and find 'preacher.' It has ID's in it and those are the preachers' IDs. So we are linking the 'preachers' to these IDs here. 00:25:24

In the child database table, the ID of this preacher must be found. 00:25:43 The parent key would be this preacher's ID. Now the linked view will only show the sermons that are related to this specific preacher. That is how the linked views can be linked. If you didn't select these correctly, it won't work well. 00:26:05 There needs to be a close relationship between the parent and child view. 00:26:23

The basic way of linking another view would be to select that view from 'Sermons' dropdown; set in which tab it should display, what child database table in which to look, and which parent's value to use to build a relationship. 00:27:12 Then there is 'Add New Button' option of 'yes' or 'no.' 00:27:38 You can decide whether it should show or not. If you say 'yes' and you have, in that view, created the permissional structure for whether somebody can create an item or not, you can control the display of that button by setting the permission of that user's specific group. 00:28:02 If that user is in a group that does not have permission to create new items, then the 'new' button will not show up. 00:28:26 The feature that I have explained to you shows that we are busy in preachers and it is able to display the fields that are being used. The fields are linked to preachers from this column (see video), so we are using a repeatable field structure and we are able to connect the field names to this view. 00:29:05

Open the admin view. (See video.) 00:29:32 Go to 'Linked Views.' There is an 'R' in the pointer as well as the word 'field.' If you are trying to connect a view from the parent, (in the parents it is stored in 'addfields' which is the database column name) go to database and 'componentbuilder_admin views.' 00:29:54 You'd see 'addfields.' You'd see that there's a way in which your repeatable fields are stored by Joomla. 00:30:21 In the repeatable field called 'addfields,' there is a field called 'field.' It should look for the ID of the fields in addfields in the field array for the IDs that it needs to fetch. 00:30:51 To connect a linked view you should set this as a capital 'R' for repeatable fields. That is the convention telling the system that it is a repeatable field we looking at. 00:31:14 Inside of the repeatable field we must look in the field array for those IDs and they should map to the child's ID. If that wasn't a repeatable field but an array, you would simply say array. 00:31:34 If the array is the values themselves you would drop off any pointer to the specific value. If it's an associative array you would add the name of the associative key that it needs to look in; if it's a normal array without association, leave it like that. This is so that the system would know that it is an array and it needs to look inside of those values for these IDs. 00:32:00

Setting Up Fields

00:32:30

Since we already created the fields beforehand you will start out this way. (See video.) You would scroll down the fields that you created. (If it is a long list you can type the field's name and it will bring it up to you.) It asks whether you'd like to show the field in the admin list view. 00:32:56 That means that there is a list of names if you close your editing area; if you want that specific field to show up in this list you'd select 'show'. If you select 'show,' you can set in which order you want this. (See video.) 00:33:18

In Joomla the title and alias concept is quite interesting. 00:33:41 It's 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, especially if it is a view that is going to be used in the front. 00:33:59 In this case, since we are going to use preachers in the front to display a list of preachers, we are going to add a title, using the name as the title. Back to the back end. There you can set if you want this 'sortable' or 'clickable;' you can click on this, and it sorts the table alphabetically on the basis of this column. (See video.) 00:34:30 Do you want it to be searchable? Do you want someone to type into this box and show only a specific field? 00:34:51 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 are already being shown in the table. You only want to use the filter on things like a radio box, another view, or fields that aren't being displayed one after the other in the table. 00:35:19 I added no extra fields in sermondistrubutor, but at sermons I added preacher. There's a list of all the preachers here, through which you could sift a chose which to show here or not. The way that you set up the filter is by clicking yes or no here. If you are setting up a custom field and in the display of the list have it clickable, this link is used. 00:36:12 For example I can click here and go to that preacher. I click close and then I'm back in the sermons list view. I could click on series and it will take me to the series; I can edit the series immediately. I click close and I'm back in the list view. We usually use the name to be the clickable title. If you select your title here and click the link then you're saying that this field item here is what we should use as the clickable option to open that sermon. (See video.) 00:37:16 That is the way for us to know which field should be used as the clickable field if you have a title. Since it is so easy to change, you can study this concept. 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.

Field Alignment

00:37:54

We said that we wanted the preacher's name, etc, in the settings. Our tab for settings is the first tab. (See video.) We are looking at the back end setup where you want to have this field's display. There are different placing options and an order in which it should go. (See video.) 00:38:20

  • Field Alignment: Example

Let me go to this one, 'Add Question'. (That is right of the tab, not in the tab.) You see an option which says: right in the tab, left in the tab, and left of tabs, right of tabs, etc. That means that you can put it outside of the tab area. Even if I was to click here it will remain displayed right there on the side. That is to put it right of the tab. There's also left of tab area over here. 00:39:31 Above tab is this one here, above the tabs. It shows all the time. Then there's underneath the tab. We added the option of placing data. At the right in the tab, left in the tab, right of the tab, left of tab, above tab, and beneath tab which is six positions in the back end of your template. The places are being set by these alignment assignments here (select the field alignment inside the tab view) and you select these (from a list). This is the order in which you wanted them to display. 00:40:35 Full width will always display under the left and right of in tab. You need to select your left and right and then your full width. Full width is the last thing to show up in a tab. Here is the switch to add permissions to specific values. If I want to control the group that can edit the name field, simply click this 'yes', and this field would be added into the permissions structure dynamically.

Fields Title

00:41:39

You can only have one title per view and only have one alias per view. You shouldn't have more than one selected. The system will ignore the others anyhow, but just to be safe set the others to no. Be sure to use the correct field values. When you set any of these to show, you should set the order of their display here. (See video.) The filter is added dynamically by simply clicking a yes here. (See video.) If we go to sermons as an example, and we click on their fields, they have many fields which will help to illustrate some of these things. You'd see that we have sermon series and we have it set up as a filter. 00:42:43 So then that is how you can use the text field. This means we can sort these sermons by series.

Remember this is primarily for the back end. Although some of that information will relate to the front eventually, this permissions switch will be able to access it from the front if you need to.

Conditions

00:43:47

Conditions is an amazing feature which goes beyond Joomla's control on the show on attribute per field. Remember we looked at the show on attribute: it can control which fields to show when you are clicking on other fields. For example, we have a field called 'Add JavaScript.' If I click 'yes' it opens this area, JavaScript, where I can add custom scripting. This behavior is being controlled by the structure of the condition.

  • Conditions: Example

The condition structure for sermons is the following. (See video.) You'd see a few had already been set. We'll first decide which field we are targeting, which field we want to show or hide. 00:44:51 Most of the time we'll use the option 'show.' 'Show' means it will be hidden unless this criterion is met. Here is the list of all the fields in your system. (See video.) You need to remember which fields you selected in the area of the fields. For our purposes, these are the fields. Remember their names. When you go to the conditions and you type a field, you need to know which one it is. That is how you would link to them.

Isolate and Chain Function

00:45:55

This isolate and chain function is a concept which would be best explained when you think that more than one field must be used to show the other one. In this case, Dropbox Auto Note (in sermons) should not only show when the field's source is Dropbox but also when Built Option is automatic. Hence both of these should be true before it shows the Dropbox note. You would select the field you want to control. You can control more than one at a time, but the logic behind this might not always work so you need to try and test it. If it doesn't work, tweak it until you find it behaving the way you expect. Most of the times you would only link one field to one validation. 00:46:59 However, as soon as you have multiple fields, you would use the chain option. The build option of files should show when the file source is Dropbox and it's isolated, not connected to any of the other settings here. As soon as you click chain, it means any other row that has this field will be chained together. So both must have been validated as true before it will show the field. Here it says file source. You can select any of these if you know that this file source is a list, you can see the list options. (See video.) 00:48:03 You can say 'is' or 'is not.' If it 'is' Dropbox, then it should show; if it 'is not' Dropbox then it should show. That is the logic behind it.

This one is when you're dealing with a dynamic list. Unfortunately, with the dynamic list, it's quite difficult to set these values since they are dynamic. The best way to deal with a dynamic is to leave this blank. That means that if any of the values are selected, it will show this item. We will still look at the dynamic list or custom fields and explain how to set up those custom fields. 00:49:07 That is what that option is for. Most of the time we are using this 'is.' If you've selected a specific field and it's a text field, the system will show 'keywords' or 'length.' You would change this to 'Active' and that it has a length of '2'. (See video.) 00:50:11 If you had selected a list, it will show you the list and all the values. You can then remove the values that you don't want to use. (The only value that's important is the 2 there. See video.) I explode the string at the pipe and I use the first value to develop the JavaScript. We are in the sermons view; we would go to the component builder. (See video.) 00:51:15 You'd see that there is a series_xml, which is the field's, and a sermon_js which is the Java Script. We open that and find all the JavaScript that component builder will build. These are the conditions. (See video.) To implement these conditions component builder build this JavaScript. All of this JavaScript is the implementation of those things that we set there. (See video.) It means about five hundred lines of JavaScript gets written by Component Builder by these switches that you set up here. 00:52:19 I'm showing you where the script is being written so that once you've set up these switches you can come into this script. For example, the build option is the field and file source. It gets the value when the page is ready; it checks the jform on source_. It determines the value and places it in here. Our first function starts with V and the next one would be VW, etc. 00:53:23

You need to know how we implement this function: hiding and showing of the source. You would search for the V function by adding a bracket there and searching. (See video.) That's the first function. If it's set, I add a source constructor; if it's not an array, I place it in a temporary array. If it is an array and it isn't set we create a blank array. Then we do a validation. 00:54:27 The function would be source_vvvvvvv_somefunc. Let's check that function; all the function does is checking. For example, is this 2? If it is 2, it returns true; if it's not 2, it returns false. The value, whether true or false, returns to the source. We get the closest class called control group, and we check if the field is required. If it's false, we hide it, and if it's required, we do some house cleaning. 00:55:31

That was taking a quick looking at the code being generated by this one switch. It's not the only code. There is another place in the view itself. 00:44:51 We are looking at sermon, template, and edit. (See video.) Here we will find JavaScript again. The system doesn't know whether this is a text field or a list field. We have these two check function on it. (See video.)

There is another place where the source is going to be used for other functions. It gets the value and runs that function which is in our JavaScript file. Here's the JavaScript file, there is the function. (See video.) It's reusing the same function the moment that there is a keyup or a change on that specific field. 00:56:35

If you know how to improve this then you are welcome to get involved in GitHub and start a discussion on improving this infrastructure. This infrastructure is done in the compiler and I can show you on which line this was developed. For example, going back to components. 00:57:39 All you need to know is where that is being built. Just tick this to yes and in the comments, it will add a line reference of where that specific script is being built. (See video.)

Let's go back to the admin views. This is a structure that you can use to manipulate the conditions, determining which field should show or not. I think we have done a good implementation here. It gives you many possibilities of structuring, chaining, and working with fields in their relationships. If you don't want to use this and only use the on show, it's going to work just as well. The only problem with the on show is that it doesn't provide the ability to target a text field as we have here. 00:58:43 You can add a keyword and immediately the other field will show up. Furthermore, the on show option cannot look at multiple other fields if they have certain values; also, if it evaluates true, it only shows the other field. Those kinds of controls is not yet available in the show on implementation. I would like to get involved in the get repo of Joomla and see if we can add these nice features. For now, we added them to Component Builder. In component builder, you can implement these. We are writing the JavaScript to manage this for you. 00:59:47

Field Listing

00:59:59

We looked at permissions, tabs, fields, conditions, and linked views. The next one is the list of the fields that you have already selected and saved. If you want to update any of these fields, you could just click on the field name and it will take you to the field where you can update it.

Custom CSS View

01:00:18

The next tab is a place for you to add custom CSS that is related to your specific view. You can add CSS here, which is for the edit view or the single view; or you can add CSS here, which is for the list view or the multiple views (plural). (See video.) Now it will be placed in its prospective places. The same goes with the JavaScript, except that you'd have four places to target instead of one.

Custom Javascript View

01:00:50

When we looked at the way that we are building the JavaScript, you'd remember that there was a JavaScript file, which has JavaScript for the view. There is also the footer area which is under the HTML and PHP at the end of the file which is just JavaScript. We decided to add the option of adding JavaScript to the file or to the footer. It just gives you the option of targeting. If you know list this script can run as a function. You add it to the file and, if you want to use the function, you can add it to the footer.

Adding AJAX Via the Controller and Method Implementation

01:01:48

There is a PHP area where you have the option of adding JavaScript to your editing view primarily. Looking at editing views, the moment you click on 'Add JavaScript,' it opens a tab. The way that we want to implement AJAX is via the controller and method implementation. The component has a controller called ajax.json.php which has a model called ajax. So you have a controller and a model. The controller is like the gatekeeper. It does a few checks and balances to ensure that the data is correct and the token is right. If you had set this to validate whether he is a user or not, it also checks for a user ID. 01:02:59 If you set it that not to require him to be a user, it would drop off this validation.

There is a controller area and a model area. The model is a place where you can write a method which is queried from the controller. You can see in the controller that it gets the Ajax model, and then queries a method in that model called Dropbox. Here we are querying the Dropbox method; it's getting the view name. 01:04:03 I'm activating this method to run, and when it runs it triggers some global methods to run. On the return of that value, it triggers another local method. So you can see that this part of the code was custom-written. If we go back to our component you'd see that code there.

When you click on Ajax, you add the name thereby writing your method. (Make sure that it's set to public.) In the Ajax input you'd set the task name as checkDropboxlisting; the values as view and type; it should run a dropbox and update dropbox method, and the user check is on 'yes' for both so that only users can fire these back end methods. (See video.) 01:05:07 The filters are the same as with any field that you can select. If there is no value, you set the default to null. The task name that you'd be using in your JavaScript. 01:05:45 The method name is set here; it should correspond to the method that you set up in your PHP Ajax method. 01:06:07 This is the method in which you model the data, get the data, structure the data, and give it back to the Ajax call. You return the data inside of this method.

However, in your JavaScript, you will be using the task name to get to the system. 01:06:29

In sermondistributor, which is the component to which that view belongs, there is a place called 'Scripts.' I have added a feature called chronic global events. 01:07:23 Global events, or the way I am implementing it, is an event that should run every time a page in the system opens. The way I target it is by saying loadDropboxAjax; it is a global event and it needs to do that. (See video.) 01:07:50 The Dropbox Ajax is set up in the helper class. I have a helper class which is called loadDropboxAjax which gets the document object. 01:08:11 It takes the document object and adds a script declaration to it. Here is the JavaScript that it is adding. (See video.) There it is using checkDropboxListing as the task. So it's targeting the Ajax controller and asking for checkDropboxListing as the task. It's passing to it a token and a view name. 01:08:32 We would like to use that view ID later to log from which area this automated feature gets triggered. 01:08:52 There is jQuery which only fires after the page is loaded. At the moment it's just adding a 3 in there to trigger the method. 01:09:10 That is how this script ends up on the page. 01:09:32

This is where this PHP script is going to be used. (See video.) I added the Ajax controller concepts here, but the actual JavaScript that fires off all this is set to the global event which means that every time a back end area is opened in this component, it loads that JavaScript to the view. 01:10:00 JavaScript then executes an Ajax request which starts updating the Dropbox listing. Sermondistributor is able to link to media inside of a shared Dropbox folder. This whole method here that we looking at passes that Dropbox folder every so often to make sure that it's up to date. 01:10:28 That's what it's all about.

Get Items

01:10:41

If you know the Joomla API, you know that it has a 'getitem 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'; there's a 'getlistquery' in the 'jmodellist,' a 'safe method', a 'postsavehook method' in the controller and an 'allowedit method'. 01:11:10 There's a 'batchcopy method', a 'batchmove method', a 'script before delete method' and a 'script after delete'. These are all PHP places in which you can dump custom scripting.

Save Method

01:11:34

You need to know where the 'save method' is. Open 'sermon' and scroll down to 'get item'. You can add custom scripting to the 'get item method'. 01:12:06 There is 'save method.' If we go back and click on the 'save method' you'd see the PHP here that should run in the 'save method'. You have the $data. It's an array and is called $data. 01:12:27 It means that you're able to target that value. It gets placed into 'save method'. 01:12:47 Your custom value code will probably be placed in before '(parent::saved($data))'. If you do not know in which of those custom scripts the code will be set, type it. 01:13:06 It is loaded here. Save it, compile the component and then look at the code. You will see where it is showing up. You have all these values already in the script. (See video.) 01:13:37 It will add the string. When the component runs it will treat it as code. It is a comment but if it was code it will execute. It is the way to add custom scripting right into your component.

Post Save Hook

01:14:05

The 'postSaveHook' is in the controller, not in the model. Go to the controller 'sermon'. Scroll to the bottom and find 'postSaveHook'. It gives you the model and the valid data. You can perform extra features on it. 01:14:27 In all these things you should read the description. The PHP here should run in the 'postSavehook' Method; there is the $model, the data model, and the validated data. If you just read our note here, you can start coding for it.

MySQL Dumps Test Data

01:15:06

You can do two kinds of dumps. What is this used for mostly? Often, while I am busy developing, I'd set up a component, install it, then add dummy data to it to see if it works. 01:15:15 Every time I make a change and uninstall that component and install the new one, whatever change is 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. The only way I could save time was to re-install this component and the dummy data for sermons I would like to retain. 01:15:43 Open the tables where it will show a list of all the tables that are in the database at that moment. Scroll to sermon table. Click on it and it will load the table and what it should be called in the data set. 01:16:06 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 won't recommend doing this because you might not get what you expect. 01:16:29 Going with the values that he populates for you would probably be the best unless those values change and if you are making changes or adding new fields. You need to reset this by clicking on something else. Click on it again and it loads the new list of fields that are related to the table to the back end view table. 01:16:57 In that way you compile the component, while the component builder grabs the data from the database and build a dump file for you. (See video) 01:17:18 This might be a little bit complex but it saves time. Another way to do it would be to do a dump file itself. Go to your 'MySQL', open the specific fieldtypes, click on export, select SQL format, and click 'go'. 01:17:40 This will create a dump file of all the data in the table. You can paste that dump file in here. 01:18:17 Click 'export', 'quick', SQL, then 'Go'. Save it. Open CB componentbuilder_fieldtpye.sql. 01:18:41 Replace 'cb' with #_.' Click 'Replace All'. You won't use the table structure because it is already in Component Builder. You just use this area here. (See video.) 01:19:03 You would copy this area, cut, go tp MySQL and paste it there. Save. You now have the dump file. It will be added to your new install. 01:19:36 If a dump file is too big, you will see it after your clicked save; look at the end and see if it had cut it off somewhere. If it had, the dump file is too big for use. (See video.) 01:20:04

That was setting up an admin view. 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 include them in a future tutorial. 01:21:35