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

Updated 006 Basic Fields (markdown)

Amigo 2019-05-27 11:06:26 +02:00
parent 07066e35c2
commit bb6122983f
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
006-Basic-Fields.md

@ -46,13 +46,13 @@ Now those of you that work with Joomla will know that you can't currently add a
**List field and adding options, static** _Setting up a static list_
So that was looking at creating a text field type. Now we'll do a list field. We click on list and we see that it has an option array or string there. The options are set with a zero, a (...), the name, and a coma. [00:20:45](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m45s) That basically represents one item in the drop down. So if you see this drop down here then each of those items would basically be represented between the comas. [00:21:05](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m05s) The (...) makes a separation between the value being stored in the database and the value being shown to the person accessing the form. If that value is the same value (if you want to store in the database the same value as the one that is being displayed) then you simply drop off the (...) with the initial values like that. It will now say option one, option two and option three. [00:21:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) That is one permitted way to use it. [00:21:50](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m50s) You could also say that you want one option to be viewed as having not selected anything yet. So if you want to add another option you would type "select an option,." [00:22:15](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m15s) By adding a (...) without a value it is being treated as a null. So when the drop down is built, it will be as if nothing is selected. [00:22:57](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m57s) Now the other values would be selecting. You can use them as IDs or use a totally different value. It doesn't matter. Just know that it would possibly make everything lowercase if you put it on that side of the (...). [00:23:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m29s) You can fill in this information based on your requirements. So that's how you set up a list field.
So that was looking at creating a text field type. Now we'll do a list field. We click on list and we see that it has an option 'array' or 'string' there. The options are set with a zero, a pipe, the name, and a coma. [00:20:45](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m45s) That basically represents one item in the drop down. So if you see this drop down here then each of those items would basically be represented between the comas. [00:21:05](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m05s) The (...) makes a separation between the value being stored in the database and the value being shown to the person accessing the form. If that value is the same value (if you want to store in the database the same value as the one that is being displayed) then you simply drop off the pipe with the initial values like that. It will now say option one, option two and option three. [00:21:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) That is one permitted way to use it. [00:21:50](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m50s) You could also say that you want one option to be viewed as having not selected anything yet. So if you want to add another option you would type "select an option,." [00:22:15](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m15s) By adding a pipe without a value it is being treated as a null. So when the drop down is built, it will be as if nothing is selected. [00:22:57](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m57s) Now the other values would be selecting. You can use them as IDs or use a totally different value. It doesn't matter. Just know that it would possibly make everything lowercase if you put it on that side of the (...). [00:23:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m29s) You can fill in this information based on your requirements. So that's how you set up a list field.
I hope this shows you what is possible, but as you can see this list field isn't dynamic in the way that a custom field possibly can be. [00:23:55](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m55s) You see the list field here where you statically set a few values that is unchanging and which should be selected. But with the custom field type you can have other tables values populate the list for you. So as it's being created your list gets longer dynamically. We will still look at that and it is obviously available, but this is more static "set it once and use it over and over" whereas there is actually also a dynamic list option which I will illustrate later. [00:24:39](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s)
**Radio button example**
Let's look at a radio button which is very similar to creating a radio button. There is one point to make here however. If you create a radio button you'd see that there are only two values. You can add more than two to the list, but I always think of it this way: [00:25:04](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m04s) as soon as it becomes a list of values then use a list. A radio button should have four selections at most. (It depends on the length of the text.) As soon as it gets a fifth value, you should look at a list instead. Again, with a radio button you can just leave it at the default storing method. [00:25:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) Again the field attributes are very similar to the text attributes except for the 'options array' option here. Then also like the list field type, it is separated by comma, and the store value and the display value are separated by a pipe. It is important to note that you cannot use quotation marks inside of your values. [00:26:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m06s) If you want to use quotations inside you need to look up the html equivalent of those quotation marks and use that. Then it would work, but if you add an quotation inside, it will break off the string and you would have only one value show up. [00:26:38](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m38s)
Let's look at a radio button which is very similar to creating a radio button. There is one point to make here however. If you create a radio button you'd see that there are only two values. You can add more than two to the list, but I always think of it this way: [00:25:04](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m04s) as soon as it becomes a list of values then use a list. A radio button should have four selections at most. (It depends on the length of the text.) As soon as it gets a fifth value, you should look at a list instead. Again, with a radio button you can just leave it at the default storing method. [00:25:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) Again the field attributes are very similar to the text attributes except for the 'options array' option here. Then also like the list field type, it is separated by a comma, and the store value and the display value are separated by a pipe. It is important to note that you cannot use quotation marks inside of your values. [00:26:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m06s) If you want to use quotations inside you need to look up the HTML equivalent of those quotation marks and use that. Then it would work, but if you add an quotation inside, it will break off the string and you would have only one value show up. [00:26:38](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m38s)
**Color field example**
@ -64,24 +64,24 @@ Then there is the description, and if it's required, the showon feature. You can
**Category field example**
Another one that's quite interesting is category. In category you have extension. If you read it, this extension is the name of the extension for which the category will be retrieved. For example, to list content categories use the value "com_content." [00:29:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m42s) You can add also target one view, use the value 'com_component.view.' That means that by adding the category field to a view you automatically add a category to your component so you don't need to map the category. In fact, you cannot map it even if you wanted to. [00:30:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m09s) Joomla already has a category component in place. (You can add your own category view and then use a custom field to link its values to other views.) If you are going use Joomla's category implementation that integrates with your component, this is the way you do it. You don't write anything for the category area because Joomla do that itself and adds it to your component dynamically. The only thing you need to do is an extension, add your component's name. [00:30:48](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m48s) The categories can also be targeting a specific view instead of the whole component itself. So it can be related to just one specific view which means that you can have multiple categories for one component. [00:31:25](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m25s) This might be an overkill, but it's none the less possible. The way you do that is simply, your component name, and the specific view's name. (The view must be singular. You cannot target a list view; it must be a editable, single view.)
Another one that's quite interesting is category. In category you have extension. If you read it, this extension is the name of the extension for which the category will be retrieved. For example, to list content categories use the value "com_content." [00:29:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m42s) You can add also target one view, use the value 'com_component.view.' That means that by adding the category field to a view you automatically add a category to your component so you don't need to map the category. In fact, you cannot map it even if you wanted to. [00:30:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m09s) Joomla already has a category component in place. (You can add your own category view and then use a custom field to link its values to other views.) If you are going to use Joomla's category implementation that integrates with your component, this is the way you do it. You don't write anything for the category area because Joomla do that itself and adds it to your component dynamically. The only thing you need to do is an extension, add your component's name. [00:30:48](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m48s) The categories can also be targeting a specific view instead of the whole component itself. So it can be related to just one specific view which means that you can have multiple categories for one component. [00:31:25](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m25s) This might be an overkill, but it's none the less possible. The way you do that is simply, your component name, and the specific view's name. (The view must be singular. You cannot target a list view; it must be a editable, single view.)
**Editor field example**
Editor is also a common field which is often used. [00:32:11](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m11s) The editor is that big block in your Joomla content article manager in which you articles are placed. Here you can add such a block to your component. There are some important things, like the buttons. If you read the description we have here it explains to you how it works, including the hide option and what kind of editor you want to load; the preferable or alternative one. [00:32:44](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m44s) The button option here: you can read it or hide buttons, based on what you selected. You have a filter option that require your normal attributes as with with other field types in Joomla. Since most of them are extending your base field in Joomla, the type, name, label, and default are also available to all the others. [00:33:24](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m24s)
Editor is also a common field which is often used. [00:32:11](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m11s) The editor is that big block in your Joomla content article manager in which your articles are placed. Here you can add such a block to your component. There are some important things, like the buttons. If you read the description we have here it explains to you how it works, including the hide option and what kind of editor you want to load; the preferable or alternative one. [00:32:44](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m44s) The button option here: you can read it or hide buttons, based on what you selected. You have a filter option that require your normal attributes as with with other field types in Joomla. Since most of them are extending your base field in Joomla, the type, name, label, and default are also available to all the others. [00:33:24](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m24s)
**Media field example**
Media. Make sure with media that you select the correct directory. If none is set it falls back to images, but you can target a specific directory inside of images. It's mandatory, so you need to set it. You can only target images itself, which is a limitation from Joomla's side. So the directory starts at images. The attribute should be relative to the top level /images/folder. [00:34:01](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m01s) That means that if you want to target a specific folder inside images called 'foo,' then you would add that there. Then preview: if an image has been selected and you want the image to be able to be previewed by hovering over the side of the field, you change it to true. The showon feature is here as well as the other default concepts that we had discussed.
Media. Make sure with media that you select the correct directory. If none is set it falls back to images, but you can target a specific directory inside of images. It's mandatory, so you need to set it. You can only target images itself, which is a limitation from Joomla's side. So the directory starts at images. The attribute should be relative to the top level /images/folder. [00:34:01](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m01s) That means that if you want to target a specific folder inside images called 'foo,' then you would add that there. Then preview: if an image has been selected and you want the image to be able to be previewed by hovering over the side of the field, you change it to true. The 'showon' feature is here as well as the other default concepts that we had discussed.
**Notes field example**
Notes come above a field. [00:34:43](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m43s) You can add notes around your fields. It has very nice implementation in the Field Information here that you can read through.
We had now looked at basic field types, or common field types. [00:35:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) If there are any other field types that you need help with, please look up the Joomla documentation since the implementation is more or less straight forward. We aren't trying to redesign the wheel; we are simply trying to implement Joomla's way of doing it. If there is a field type you need more information on, you can look at Joomla's documentation on that field type. If they don't have documentation then you can go into the field, like I said, libraries. [00:35:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m41s) There are three places to look in the libraries' folder: CMS, Joomla, and legacy. These are the places where these fields can be found. If you look under the CMS folder, you have captcha field type, chromestyle, content editor. So if you want to know if there are more attributes that can be used in editor you can open the editor and look through the code and see the the attributes that are being implemented across the board. [00:36:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m06s)
We had now looked at basic field types, or common field types. [00:35:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) If there are any other field types that you need help with, please look up the Joomla documentation since the implementation is more or less straight forward. We aren't trying to redesign the wheel; we are simply trying to implement Joomla's way of doing it. If there is a field type you need more information on, you can look at Joomla's documentation on that field type. If they don't have documentation then you can go into the field, like I said, libraries. [00:35:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m41s) There are three places to look in the libraries' folder: CMS, Joomla, and legacy. These are the places where these fields can be found. If you look under the CMS folder, you have captcha field type, chromestyle, content editor. So if you want to know if there are more attributes that can be used in editor you can open the editor and look through the code and see the attributes that are being implemented across the board. [00:36:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m06s)
**Translation brief overview**
If you see that there is an attribute that we are not already targeting you can go to the field type, open it, add the attribute, add the name, add the value, set whether it's mandatory, and set whether it's translatable. [00:36:37](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m37s) Whether it is translatable or not is an important concept. Not all fields are translatable. When a field is translatable, component builder basically translate it for you. If you look at this acronym, for example. I added the label as 'acronym,' then, while the component builder builds this field into your component, it takes that value, [00:37:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m17s) converts it into a translatable string which adds it to the language file, and then adds that in here so if somebody updates the language file it updates everywhere in the system. This basically means that languages are implemented everywhere in component builder's components. All the components it's building, it translates; as well as everything that you set to be translatable. If we look at a certain field type, like text. [00:37:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m54s) Any property that you set to translatable means that component builder will dynamically take the hint and translate it into a language string, add it to your language file, and replace the XML with the language string. [00:38:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m31s)
If you see that there is an attribute that we are not already targeting you can go to the field type, open it, add the attribute, add the name, add the value, set whether it's mandatory, and set whether it's translatable. [00:36:37](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m37s) Whether it is translatable or not, is an important concept. Not all fields are translatable. When a field is translatable, component builder basically translate it for you. If you look at this acronym, for example. I added the label as 'acronym,' then, while the component builder builds this field into your component, it takes that value, [00:37:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m17s) converts it into a translatable string which adds it to the language file, and then adds that in here so if somebody updates the language file it updates everywhere in the system. This basically means that languages are implemented everywhere in component builder's components. All the components it's building, it translates; as well as everything that you set to be translatable. If we look at a certain field type, like text. [00:37:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m54s) Any property that you set to translatable means that component builder will dynamically take the hint and translate it into a language string, add it to your language file, and replace the XML with the language string. [00:38:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m31s)
So that is how you can extend existing field types and create fields with them. I hope that is good enough for you to be able to use. Having fields might still feel very primitive, and so next up we'll be looking at adding those fields to views and basically building your view yourself. [00:38:59](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m59s)