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

Updated 008 Advanced Fields (markdown)

Amigo 2019-06-04 12:32:41 +02:00
parent 786f9bc960
commit 29ec3b6b59
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
008-Advanced-Fields.md

@ -1,28 +1,33 @@
# ADVANCED FIELDS
There are a few advanced field types and the one that is most advanced, is the one called custom field type. Sorting it by custom fields, you will see that we have quite a few custom fields in place. [00:00:32](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s)
There are a few advanced field types. The most advanced is one called custom field type. Sorting by custom fields, you will see that we have quite a few custom fields in place. [00:00:32](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s)
**Local File List Example**
**Setting Up A Folder**
Let us look at two of these. One is the local(file list), the other one is 'sermon'. But let us first look at the local(file list). You will see that the whole 'XML field definition' column is simply PHP. So I'm creating a view which is most basically taking information (if you know PHP), from the global settings of your component so there need to be a field with a name 'localfolder' in your global settings. We will look at how to set up global settings when we get to component. If it hasn't got a setting it falls back onto the image which is in the 'JPATH ROOT'. For your component this will be replaced with your component name. And it puts it into local folder. [00:01:36](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s)
Let us look at two of these. One is the local file list, the other one is 'sermon'. We'll look at the local first. You will see that the whole 'XML field definition' column is PHP. I'm creating a view that is taking information from the global settings of your component so that there need to be a field with a name 'localfolder' in your global settings. When we get to component we'll look at setting up global settings. If it doesn't have a setting it falls back onto the image which is in the 'JPATH ROOT'. For your component this will be replaced with your component name. It places it into local folder. [00:01:36](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s)
Then I just start the options array, which you going to return. The first thing I add to it is select 'Please add files'. If there isn't files it will say 'Please add files' to, and it will give the local folder name. If there is files we are going to update those at 'JFolder'. So first we bring in the file system classes from Joomla, then we check whether that folder exists. If it doesn't exist we create it just in the field type. Now once it's created and if it exists it obviously skips this(see video)it doesn't go in there and it just starts by grabbing all the files from that folder and place it into files and then starts up an array [00:02:40](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m40s) where it loops the files and put it into options. By doing that we are adding the file name($file) and the file name($file) to our options array. Then returning the options array. So you can add your own custom PHP scripting when you extend a list field. We are extending list field. So it is just going to be a drop down list of all the files in that specific folder. Either images or the folder that it was set globally in local folder. So this is just setting up a folder.
Now I start the options array, which you are going to return. Select 'Please add files'. If there aren't files it will say 'Please add files' too, and give the local folder name. If there are files, we are going to update them at 'JFolder'. First we bring in the file system classes from Joomla, then we check whether that folder exists. If it doesn't exist we create it in the field type. Once it's created and it exists, it doesn't go in there; it grabs all the files from the folder and place it into files and starts up an array where it loops the files and places it into options. [00:02:40](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m40s) By doing that we are adding the file names to our options array. Returning the options array. You can add your own custom PHP scripting when you extend a list field. We are extending a list field. It is going to be a drop down list of all the files in that specific folder; either images or the folder that was set globally in local folder.
Now there is a field type called 'file list'. The reason why I didn't use file list is because file list has a static directory to where [00:03:44](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) you need to add the files, so that you can view them. We want it to be able to rename the folder for the files, for the media, to anything and then have it update itself automatically. That is why we then created a custom field where we extended the list type, and let me just refreshed this to get that detail back. So we chose a custom field and then we just extend the list type, and we don't want it to add 'new button' because it won't work, it will just break. We are allowing them to select multiple. Now since we are using multiple we need to go back and make sure that we are storing it as a 'JSON'. So the 'JSON' is when you have 'multiple' or 'arrays', or any kind of arrays in a value, that needs to be stored as a 'JSON'. [00:04:48](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m48s) The component builder itself will check if the multiple selection is true, it will automatically store it in a 'JSON' object even if you forget to select 'JSON'. There are things in place to ensure that the system behaves as expected.
There is a field type called 'file list'. I didn't use file list because file list has a static directory to where you need to add the files to view them. [00:03:44](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) We want it to rename the folder for the files, for the media, etc. then have it update itself automatically. So we created a custom field where we extended the list type. We chose a custom field, and then extended the list type. (We don't want it to add 'new button' because it won't work.) We are allowing them to select multiple. Since we are using multiple, we need to make sure that we are storing it as a 'JSON'. That is when you have 'multiple' or 'arrays', or any kind of arrays in a value that needs to be stored as a 'JSON'. [00:04:48](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m48s) The component builder itself will check if the multiple selection is true and automatically store it in a 'JSON' object even if you forgot to select 'JSON'.
**How to Create a Sermon Preacher Custom Field**
How to create a sermon preacher custom field. Basically it's a preacher custom field. It is going to show a list of preachers. But is going to display the preachers that are set up in the preacher list view. So let's open that 'Sermon Preacher'. The convention [00:05:52](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m52s) is that you should call the type: preachers, that is the list view name. But you have to call the name you should use the same as the editing name which is preacher without the 's'. If you go back to your admin views you would use this name as the name of the field, but you have to use that name as the type. Because now you are creating a custom type, and the logic behind it, it is going to show a list of preachers but you have to select just one preacher. You can use any label you like, whatever is descriptive enough for your user to understand. There is a place for adding a description. Then in 'XLM field definition' we set multiple to false.They should only be able to select one preacher at a time. At 'Default 0' are all basically left to their default values and [00:06:56](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m56s) 'extending list', is the most common custom field that we have. If you want to receive a list of custom fields that is available, you can go up here to 'extend' and see that list, radio and check boxes are available. I think I should update that to also say users. User is also a user option to extend users. If you want to see what is available then look at that name 'Jformfield' and go to component builder. Go to the back end of component builder, that would be: 'administrator', 'components', 'component builder'. Then go to compiler, that's a folder, then go to Joomla 3, which is the current version we are targeting.
It is a preacher custom field. It will show a list of preachers, but will display the preachers that are set up in the preacher list view. Open that 'Sermon Preacher.' [00:05:52](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m52s) The convention is that you should call the type, preachers, that is the list view name. You should use the same as the editing name which is preacher without the 's'. If you go back to your admin views you would use this name as the name of the field, but you have to use that name as the type because you are now creating a custom type. The logic behind it is that while it shows a list of preachers, you might have selected just one preacher.
You can use any label you like, whatever is descriptive enough for your user to understand. There is a place for adding a description. In 'XLM field definition' we set multiple to false. They should be able to only select one preacher at a time. At 'Default 0' all are left to their default values. [00:06:56](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m56s)
**Jform in Component Builder**
Then search for that Jform. [00:08:00](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s) The ones that are available to extend is 'user', 'Jform field', JForm field user, Jform field radio, Jform field list, Jform field checkboxes. This also means if there is a form field you want to extend that doesn't exist already in our advanced seminar, we will show you how to add your own form fields here. There is basically two places you will need to change. I wish I could tell you now one of them would be to add the field and update it accordingly. And the other one would be to add it in a few places in the code. And also in a Json file called settings there. Those are some of the things we will deal with in advanced adaptation of component builder [00:09:04](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m04s) We will still set up that series very soon it's not finished yet though.
'Extending list' is the most common custom field that we have. If you want to receive a list of custom fields that is available, you can go up here to 'extend' and see the list, radio, and check boxes that are available. User is also a user option to extend users. If you want to see what is available, look at that name 'Jformfield' and go to component builder. Go to the back end of component builder. (See video.) Go to compiler, then to Joomla 3, which is the current version we are targeting. Search for that Jform. [00:08:00](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s) Those available to extend are user, Jform field, JForm field user, Jform field radio, Jform field list, and Jform field checkboxes. This means that if there is a form field you want to extend that doesn't exist in our advanced seminar, you will be shown how to add your own form fields here. There would be two places you need to change. One of them would be adding the field and update it accordingl; the other one would be adding it in the code at some places and in a Json file called settings there. These are some of the things we will deal with in the advanced adaptation of component builder. [00:09:04](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m04s)
**Extending List in Custom Field**
Getting back to extending a list field, you simply add list. Then there's also a few conventions. One of them being that if you are going to be targeting, for example, 'Preachers'. You will be using the preacher table as the table that is being targeted. The question to ask is: Where is the data going to be found? That is the table that needs to be added. In which component is it going to be found? That is what's need to be added by component. Now the reason why we have this 'component' here, because it's a placeholder which component builder will replace with the components code name [00:10:08](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m08s) once it's built. It's a feature we added because some times we want to rename components. If you had statically added the actual component name there, and in every field go and update that name, and in every view go and update that name. Every where you actually statically added the components name, you will need to update it.
Getting back to extending a list field: you simply add list. There are a few conventions. One of them is that if you are going to be targeting 'Preachers' for example, you will be using the preacher table as the table being targeted. The question to ask is where the data going to be found. This table needs to be added. (See video.) The reason why we have this 'component' here is because it's a placeholder which component builder will replace with the component's code name once it's built. [00:10:08](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m08s) We added this feature because sometimes we want to rename components. If you had statically added the actual component name there, you have to update that name in every field and view.
To explain what the system is doing, go to components, open 'Sermon Distributor,' take the name in code, like that 'sermondistributor', copy, and you'll see that it is a lowercase 'c.' If it had been an uppercase l it would mean that you'd have to place the component's name with an uppercase as well. [00:11:12](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m12s) The system is replacing these place holders with the actual component name on the fly. Using the placeholders saves you time in the long run from making changes everywhere if you make a change to a component's name. Which is quite normal to do. Often you start with the component and think of calling it something and later realize that the name is been used in the Joomla repository, and you need to choose another name. To do that is going to affect the whole component, so we added this placeholder structure which should make the data easier.
To explain to you exactly what the system is doing, I can go to components, open 'Sermon Distributor'. Take the name in code, like that 'sermondistributor', copy, and see that it's lowercase 'c' ,if it was a uppercase like that 'C', it mean that you have to place the component [00:11:12](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m12s) name as well with an uppercase. So we would just do a lowercase 's'. That is actually what the system is doing. It actually is just replacing these place holders with the actual component name on the fly. Using the placeholders saves you time in the long run. From making changes everywhere, if you make a change to a component's name. Which is quite normal to do very often you start with the component and you think of calling it something and later realized that name is actually been used in the Joomla repository, and you need to choose another name. To do that is going to affect the whole component and so we added this placeholder structure which should make the data easier.
Anywhere in all the custom coding that you're adding and you need to use the components name, [00:12:16](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m16s) you can simply use this ### tag format of replacement. In some areas you would need to use brackets like that [[[. But most of the time it will work either way. The best measure to ensure is to try it with a # first and if you go into the code and you see it didn't replace it, then you know it's the angle brackets[[[ that needs to be used anyway. In this case we are using these ### sign characters. The view again, that is this single variable of the view. If we were to close, and go to the view(admin) which would be then preacher, all lowercase, is what you would be adding here. Make sure that it's always lowercase. [00:13:20](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m20s)