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

Updated 006 Basic Fields (markdown)

Amigo 2019-07-16 13:30:36 +02:00
parent 0bbc0523f4
commit 821b746fd8
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
006-Basic-Fields.md

@ -38,13 +38,13 @@ This is just looking at the check boxes and other JSON items for the view and so
[00:09:12](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m12s)
Going back to just a normal text field. We would just leave it to default. These other options of encryption will be explained in a later video. [00:09:22](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m22s) You would possibly never use these. I had the need for them in a component that I had to develop, and so I added those features in. At this stage it's really quite difficult to implement. The basic one, which is actually more secure if you would ask certain people, is easy to implement. [00:09:50](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m50s) But the advanced one, which is for other purposes than just your normal encryption, is a bit more advanced and difficult to implement. So for now, if you're not that advanced in your programming skills then you should just avoid these. This base64 is often used where you're storing code into the database. Most of component builder's areas where you can add custom scripting uses this base64 as the storing method.[00:10:22](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s)
Going back to just a normal text field. We would just leave it to default. These other options of encryption will be explained in a later video. [00:09:22](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m22s) You would possibly never use these. I had the need for them in a component that I had to develop, and so I added those features in. At this stage it's really quite difficult to implement. The basic one, which is actually more secure if you would ask certain people, is easy to implement. [00:09:50](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m50s) But the advanced one, which is for other purposes than just your normal encryption, is a bit more advanced and difficult to implement. So for now, if you're not that advanced in your programming skills then you should just avoid these. This base64 is often used where you're storing code into the database. Most of component builder's areas where you can add custom scripting uses this base64 as the storing method.
### Example e-mail field _E-mail field and XML fields example_
[00:10:28](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m28s)
So if we are going to create an email field, we say that it should not be required, change data length\values to 255, leave store method to default, and change name to email. (We don't usually do uppercase.) [00:10:47](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m47s) That's what is going to be used for the database. So this field all over the system and all the code is going be called by that name: email. Underscore. [00:11:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m09s) Here the label is what will be visually seen in the form. There we'll be adding 'Enter Email.' We'll leave the text size the same. Max length is good. I'm not going to use the default field. [00:11:36](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) Default is optional so I can just leave it out. Description: I'm going to say 'Enter Email.' We'll remove those (readonly"false"; disabled"false".) We're going to leave required to 'false' to ensure that it isn't required. Then I'm going to use validate email and I'm not going to use the field option. [00:12:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m08s) The field option is to validate against another field that they both 'equal' each other. We don't need that for this field. Here I'm going to place demo. I'm going leave those (showon; onchange) out. So there we have an email field. Now this validate option. (There is some custom validating option in Joomla. Email is one of them.) [00:12:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m42s) Then there is a way to create your own validation. The way to implement that would be to write PHP up for that. You need to know how to write your own validation and to place it via the custom adding in our files; to place it in the correct location where the Joomla form builder will be able to get that field validation type and add it into your field. [00:13:07](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m07s) So if you know what I'm talking about then you will know where to place it, and you'll later see that in the component itself it has an option to add custom files and how to map it to the correct location. [00:13:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m31s) You can then use your own validation figure type there to extend on the validation options. But currently component builder itself doesn't do extra custom validating options. It only uses Joomla's defaults. That means you can also leave it out and then it doesn't do validation but it will still do filtering. Here is a list of the available filters that Joomla has. [00:14:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m08s)
So if we are going to create an email field, we say that it should not be required, change data length\values to 255, leave store method to default, and change name to email. (We don't usually do uppercase.) [00:10:47](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m47s) That's what is going to be used for the database. So this field all over the system and all the code is going be called by that name: email. Underscore. [00:11:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m09s) Here the label is what will be visually seen in the form. There we'll be adding 'Enter Email.' We'll leave the text size the same. Max length is good. I'm not going to use the default field. [00:11:36](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) Default is optional so I can just leave it out. Description: I'm going to say 'Enter Email.' We'll remove those (readonly"false"; disabled"false".) We're going to leave required to 'false' to ensure that it isn't required. Then I'm going to use validate email and I'm not going to use the field option. [00:12:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m08s) The field option is to validate against another field that they both 'equal' each other. We don't need that for this field. Here I'm going to place demo. I'm going leave those (showon; onchange) out. So there we have an email field. Now this validate option. (There is some custom validating option in Joomla. Email is one of them.) [00:12:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m42s) Then there is a way to create your own validation. The way to implement that would be to write PHP up for that. You need to know how to write your own validation and to place it via the custom adding in our files; to place it in the correct location where the Joomla form builder will be able to get that field validation type and add it into your field. [00:13:07](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m07s) So if you know what I'm talking about then you will know where to place it, and you'll later see that in the component itself it has an option to add custom files and how to map it to the correct location. [00:13:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m31s) You can then use your own validation figure type there to extend on the validation options. But currently component builder itself doesn't do extra custom validating options. It only uses Joomla's defaults. That means you can also leave it out and then it doesn't do validation but it will still do filtering. Here is a list of the available filters that Joomla has.
### Target fields with custom CSS/Javascript _Adding custom CSS/javascript to fields, in both edit and list views using Jform and Jquery_
@ -54,7 +54,7 @@ So that's how to create a text field. You can target these text fields with CSS
So this is primarily targeting your admin area with these scripts. Although you can extend the the editing one, which is the single view, to the front, which means it will also extend that to the front. [00:15:10](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m10s) The way to target this field would be: that is the ID plus jform. If you forget that, you could look at any other field and you'd see it says jform_ and then the field name as a ID. [00:15:38](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m38s) I'm just using Fire Bug to do that. So that means you can just put that in front of the email. Not here though if you want to target it in your Java Script or in your CSS. Let me show you. You'd add #jform_email. [00:16:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m08s) Now you can target it with CSS. Maybe color or something. JavaScript is done in the same way. If you use jQuery, add jform_ in front of the field name.
The nice thing about this is that you can add the script to the field and in any view where you use this field this script will follow it. [00:16:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) It will go along with it. It will be added to that view dynamically. You don't need to rewrite it everywhere. For example, I have a script that I'm using for numbers. [00:17:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m16s) Here is an even better option to demonstrate: I had to create a repeatable field, which we will look at later; it's an advanced field. Inside of that repeatable field I wanted to add a date field. [00:17:49](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m49s)
The nice thing about this is that you can add the script to the field and in any view where you use this field this script will follow it. [00:16:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) It will go along with it. It will be added to that view dynamically. You don't need to rewrite it everywhere. For example, I have a script that I'm using for numbers. [00:17:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m16s) Here is an even better option to demonstrate: I had to create a repeatable field, which we will look at later; it's an advanced field. Inside of that repeatable field I wanted to add a date field.
### Repeatable field with date _Adding PHP and Javascript in custom script_
@ -68,7 +68,7 @@ Now those of you that work with Joomla will know that you can't currently add a
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 show[00:00:15](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m15s)n 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)
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.
### Radio button example
@ -80,7 +80,7 @@ Let's look at a radio button which is very similar to creating a radio button. T
[00:26:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m54s)
Let's look at another one. Color is quite straight forward. It has a default value. You need to remember to set the label and the name. The type must not be changed. If you select color here and you do change the type, the component builder will simply ignore what you did. [00:27:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s) The reason for this is because we had set the type itself to be mandatory and unchanging when we had set up the field type. That's why you cannot override it. Everything that you set to mandatory and unchanging will fall back to the setting that you set there in the field type. Even if you change it here, it will not change. [00:27:44](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m44s)
Let's look at another one. Color is quite straight forward. It has a default value. You need to remember to set the label and the name. The type must not be changed. If you select color here and you do change the type, the component builder will simply ignore what you did. [00:27:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s) The reason for this is because we had set the type itself to be mandatory and unchanging when we had set up the field type. That's why you cannot override it. Everything that you set to mandatory and unchanging will fall back to the setting that you set there in the field type. Even if you change it here, it will not change.
### Showon attributes example
@ -98,7 +98,7 @@ Another one that's quite interesting is category. In category you have extension
[00:32:10](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m10s)
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)
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.
### Media field example