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

Updated 008 Advanced Fields (markdown)

Amigo 2019-06-05 16:31:47 +02:00
parent e907f7ec75
commit ae300a8b30
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
008-Advanced-Fields.md

@ -102,4 +102,12 @@ Here I developed this specific pop-up repeatable structure. (See video.) Here is
**Joomla Icons Info & link**
If we go back to the view, you'd see that it says add. I'm adding an ID in a class to it. A description would appear if we were to hover over it. It has a little setup field for this view which is the description. [00:44:59](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m59s) Same there(discription) see and the label is fields. So it says there fields. Then the icon is list. Now the icon is what is shown in the button. That is a list. All that custom Joomla icons [00:45:17](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m17s) can can be used. And to know these icons you should go to a URL Docs.joomla.org/J3.x:Joomla_Standard_Icomoon_ fonts. That is the URL and you'll get to this(Available Icomoon Icons) page. [00:45:41](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlER close out here. That is looking at the advanced field type called custom user.LQgpMRE&t=00h45m41s) These are all the available icons and you basically use that(contract-2 and checkmark-circle) parts. If I wanted to checkmark-circle, copy checkmark-circle and I would [00:46:02](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m02s) change the icon to checkmark-circle. So that's how you change the icon and then these are simply the ID's of the fields I want inside of the repeatable field. If I was to [00:46:22](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m22s) show you where to get the ID, it simply would be close your repeatable field. And you'd see the ID is next to the fields there on the right. So you would create the fields that you want to use in the repeatable field. And you would get a list of those ID's jotted down somewhere in a notepad or something. Just add them in the [00:46:51](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m51s) order that you want them to be added. Then inside of your repeatable field you would simply paste it in the fields area with a comma separating them. And then component builder will dynamically construct this whole structure for you [00:47:11](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m11s) and add it to your component. I think it's really stunning and I hope you enjoy using the repeatable fields structure. I know it's little buggy still and there's a lot of talk about it not being as stable. But your normal basic fields like text fields and radio buttons and so forth they all work well. The only thing about the radio buttons that you use in [00:47:39](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m39s) the repeatable fields you need to remove the class ff your radio button. It cannot be a button. It must be a dot unfortunately they don't yet make it possible to actually load the button. Now what's the difference? [00:47:59](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m59s) The difference is, let me see if I can quickly show you. That(Add CSS YES/NO) is the button version of a radio button. That(searcable Yes/No) is the dot version of the radio button. And it doesn't look like a button. [00:48:20](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m20s) In your repeatable fields you cannot use the button version. It needs to be this one(searcable Yes/No). What makes it a button? It is the class that is being added to the field. So you need to remove the class values from your radio button if it's going to be used in the [00:48:38](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m38s) repeatable field. If you forgot to do that and you compile your component and now you are looking at the repeatable field you'll see that the radio button is not working, but that it messed up until they possibly fix it. This is unfortunately the case. That is looking at advanced fields [00:49:04](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m04s) called custom fields, custom user fields, as well as repeatable fields. These are really the advanced field types that there are.
If we go back to the view, you'd see that it says add. I'm adding an ID in a class to it. A description would appear if we were to hover over it. It has a little setup field for this view which is the description. [00:44:59](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m59s) The label is fields; the icon is what is shown in the button, a list. [00:45:17](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m17s) All those custom Joomla icons can be used. To know these icons you should go to URL Docs.joomla.org/J3.x:Joomla_Standard_Icomoon_ fonts. You'll get to Available Icomoon Icons. [00:45:41](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m41s)
These are all the available icons. You use contract-2 and checkmark-circle. If I wanted to checkmark-circle, I'd copy checkmark-circle and change the icon to checkmark-circle. [00:46:02](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m02s) That's how you change the icon.
These are simply the ID's of the fields I want inside of the repeatable field. [00:46:22](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m22s) You'd find the IDs next to the fields on the right if you close repeatable fields. You'd create the fields that you want to use in the repeatable field and get a list of those ID's jotted down somewhere. [00:46:51](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m51s) Add them in the order that you want them to be added. Inside of your repeatable field paste it in the fields area with a comma separating them. Then component builder will dynamically construct the whole structure for you and add it to your component. [00:47:11](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m11s)
A note: you need to remove the class ff in the radio buttons that you use in the repeatable fields. [00:47:39](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m39s) It can't be a button; it must be a dot. Unfortunately they don't make it possible to load the button. What's the difference? [00:47:59](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m59s) CSS YES/NO is the button version of a radio button. Searchable Yes/No is the dot version of the radio button. It doesn't look like a button. [00:48:20](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m20s) What makes it a button? It is the class that is being added to the field. You need to remove the class values from your radio button if it's going to be used in the repeatable field. [00:48:38](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m38s) If you forgot to do that and compile your component you'll see that the radio button is not working if you look at the repeatable field, but that it messed up.
That was looking at advanced fields called custom fields, custom user fields, as well as repeatable fields. [00:49:04](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m04s) These were the advanced field types that there are.