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-04 09:46:35 +02:00
parent ccbabc659c
commit 70138f1cd6
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
008-Advanced-Fields.md

@ -18,35 +18,45 @@ How to create a sermon preacher custom field. Basically it's a preacher custom f
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 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, like this example, we are targeting the 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. 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.
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)
Then the list view or the views plural, would be the add value there. All lowercase as well and then the value field is the field that the user will see. That is what is visible in the UI user interface. The key field is the value that will be stored in the database. This field relate to this table(#-###component###-preacher). Inside this table, what field do you want the user to see? That would be the name of the preacher. And inside this table, what field would you want to store in the other database? Because we are looking into preacher but we are going to store it wherever this field is being used. That would be the ID and the column name in that data base of that view where this field will be used, will be called [00:14:24](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m24s) preacher. To show that to you in the database itself. You can open it there,(See video) scroll down to sermon distributor, open sermons, click on structure, and here in the back end. Go to sermons, click 'new' and you will see that there is a place for preacher. If I was to look with firebug at it, we'll see that it is the name is preacher and remember we spoke about this Jform_ as the ID. But it's actually simply the preacher field which is being stored directly in the database in the preacher [00:15:28](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m28s) column of the table. It's stored as int 11 and that was set up here. Int 11 and we say that it is a key. We can target it. At the bottom if we look at indexes, we'll see that it has actually added it as a key.
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 it would 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 components 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. And to do that is going to affect the whole component and so we added this placeholder structure which should make the data less painful at least.
Anywhere in all the code 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)
Then the list view or the views plural, would be the add value there. All lowercase as well and then the value field is the field that the user will see. That is what is visible in the UI user interface. The key field is the value that will be stored in the database. These field relate to this table(#-###component###-preacher). Inside this table, what field do you want the user to see? That would be the name of the preacher. And inside this table, what field would you want to store in the other database? Because we are looking into preacher but we going to store it wherever this field is being used. That would be the ID and the column name in that data base of that view where this field will be used, will be called [00:14:24](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m24s) preacher. To show that to you in the database itself. You can open it there, scroll down to sermon distributor, open sermons, click on structure, and here in the back end. Let's close this, go to sermons, click 'new' and we will see that there is a place for preacher. If I was to look with firebug at it, we'll see that it is the name is preacher and remember we spoke about this Jform_ as the ID. But it's actually simply the preacher field which is being stored directly in the database in the preacher [00:15:28](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m28s) column of the table. It's stored as int 11 and that was set up here. Int 11 and we say that it is a key. We can target it. Here at the bottom if we look at indexes, we'll see that it has actually added it as a key. There we go.
**Custom PHP layout in Field Definition**
That all is done right here in the database structure and then in this area here. Again in this part which you can add your own custom PHP. The fact that I'm using 19, 18, 17, it's just creating line breaks and spacing and tabs for me dynamically. I could have placed them all under PHP one, without this quotation marks. [00:16:32](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m32s) Wrapping around them all like we just did with the file folder list view example we did previously. Just a note inside of this code, you cannot use quotation marks, you need to use single quotes. Unfortunately at this stage it is not able to accommodate your even if you try to do an escape it will not behave as it's as you might expect. So my apologies for that. At this stage you can only do single quotes between these two quotations, double quotes.
That all is done right here in the database structure and then in this area here. Again in this part which you can add your own custom PHP. The fact that I'm using 19, 18, 17, it's just creating line breaks and spacing and tabs for me dynamically. I could have placed them all under PHP one, without this quotation marks. [00:16:32](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m32s) Wrapping around them all like we just did with the file folder list view example we did previously. Just a note inside of this code, you cannot use quotation marks, you need to use single quotes. Unfortunately at this stage it is not able to accommodate you even if you try to do an escape. It will not behave as you might expect. So my apologies for that. At this stage you can only do single quotes between these two quotations, double quotes.
That is adding a custom field which is a little bit more advanced. If you know PHP you will know exactly what's happening here.
**Built Code for Sermon Preacher**
**Build Code for Sermon Preacher**
These place holders reflect back to these(key_field_id) values here. So basically a.###ID### will be written there [00:17:36](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m36s) and the text value which is the field value is going to be called a.###name### and then ###ID### and ###code_text###. This code is build-up by the view that we are in, and the text, so this would read sermon preacher in the code. I can go show you how it looks when it builds it. Let's quickly look at that. To show you where it starts, let's open jformfieldlist. That is what it starts with, it replaces this place holder with your code. It replaces all these features up here as well and updates that(see video) and [00:18:30](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m30s) every where you see these things(###component###), it's going to be updated through component builder. Everything up here(selected area) will be replaced with your licensing tags. Let's look at the finished product. Sermon it's placed on the model field and there is preachers. Open it, [00:18:57](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m57s) you would see that it added preacher there, and in the input add it and it also shows you where, if you had trip that switch like we have explained to show the line numbers in your component. It shows you in what file. These files are found, if [00:19:15](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m15s) you go to component builder, under helpers compiler. These are the files that is being used to compile your component. I'll when we go to the advanced section, I'll go much more in-depth in regards to these files.
These place holders reflect back to these 'key_field_id' values here. So basically 'a.###ID###' will be written there [00:17:36](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m36s) and the text value which is the field value is going to be called 'a.###name###' and then '###ID###' and '###code_text###'. This code is build-up by the view that we are in, and the text, so this would read sermon preacher in the code. I can go show you how it looks when it builds it. Let's quickly look at that. To show you where it starts, let's open jformfieldlist. That is what it starts with, it replaces this place holder with your code. It replaces all these features up here as well and updates that(see video) and [00:18:30](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m30s) every where you see '###component###', it's going to be updated through component builder. Everything up here(selected area) will be replaced with your licensing tags. Let's look at the finished product. Sermon is placed on the module field and there is 'preachers'. Open it, [00:18:57](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m57s) you would see that it added preacher there, and in the input add it and it also shows you where, if you had trip that switch like we have explained to show the line numbers in your component. It shows you in what file. These files are found, if [00:19:15](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m15s) you go to component builder, under helpers compiler. These are the files that is being used to compile your component. When we go to the advanced section, we will go much more in-depth in regards to these files.
**Generate a New Button**
Now we just trying to get across how to build a component. [00:19:40](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s) Not to extend component builder itself as yet. At least here you can see where in the code it is building this and compiling this and putting it together. Remember we talked about getting the structure, let's [00:19:59](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m59s) go down. This(see video) is used for the button. This is to generate a new button. When you click on new, that(selected area) is the button. This area from there to there is generating the button. This is what controls whether the button should show up or whether it shouldn't. [00:20:21](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m21s) Even if it is to be set at all this is what generates the button. This area here, the 'get options', you will see, we said that it will show the name, and it will show ID. Go back to our structure here, we dynamically replaces these(###ID###,###name###) with those(view preachers). The reason for it is actually done a few times. [00:20:48](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m48s) I felt like let's make it that you only need to update these values and then if you gets updated all over in the bottom of the code. It makes it just much more easy to change your custom fields. It build a field called preacher name. Which again it uses here(preacher_name) as a object value. Because it [00:21:17](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m17s) retrieves the object from the database and it looks as if that object exists it actually reiterates and builds up option list which is returned to use in the drop down. It dynamically generates your list. So component builder through that infrastructure what I have [00:21:37](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m37s) Just explained here, compiles all of that code for you. And puts it in the right file in the right place and all of that. Once you build a component and you know where you have made those changes in component builder, you can go look at those files if you know how to build a Joomla website. I used the same conventions as decor in regards to implementation of your files. [00:22:07](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m07s) At the moment we are only pulling values that are published. This is what it is all about. That is the custom fields.
Now we just trying to get across how to build a component. [00:19:40](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s) Not to extend component builder itself as yet. At least here you can see where in the code it is building this and compiling this and putting it together. Remember we talked about getting the structure, let's [00:19:59](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m59s) go down. This(see video) is used for the button. This is to generate a new button. When you click on new, that(selected area) is the button. This area from there to there is generating the button. This is what controls whether the button should show up or whether it shouldn't. [00:20:21](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m21s) Even if it is to be set at all this is what generates the button. This area here, the 'get options', you will see, we said that it will show the name, and it will show 'ID'. Go back to our structure here, we dynamically replaces these(###ID###,###name###) with those 'view preachers'. The reason for it , is that it's actually done a few times. [00:20:48](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m48s) I felt like let's make it that you only need to update these values and then it gets updated all over in the bottom of the code. It makes it just much more easy to change your custom fields. It build a field called preacher name. Which again it uses here 'preacher_name' as a object value. Because it [00:21:17](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m17s) retrieves the object from the database and it looks as if that object exists, it actually reiterates and builds up option list which is returned to use in the drop down. It dynamically generates your list. So component builder through that infrastructure what I have [00:21:37](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m37s) Just explained here, compiles all of that code for you and puts it in the right file in the right place.
Once you build a component and you know where you have made those changes in component builder, you can go look at those files if you know how to build a Joomla website. I used the same conventions as decor in regards to implementation of the files. [00:22:07](https://www.youtube.com/watch?v=VpzYbifqv0M&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m07s) <Editted
**Dropbox Custom List Example**