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

Updated 007 Admin Views (markdown)

Amigo 2019-05-30 12:33:52 +02:00
parent 24151a05bb
commit b591167481
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
007-Admin-Views.md

@ -67,7 +67,11 @@ In Joomla the title and alias concept is quite interesting. [00:33:41](https://w
**Field Alignment**
We said that we wanted the preacher's name, etc, on the settings. Our tab for settings is the first tab. (See video.) We are looking at the back end setup where you want to have this field's display. There are different placing options and an order in which it should go. (For example, see video.) [00:38:20](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) Let me go to this one, 'Add Question'. (That is right of the tab, not in the tab.) You see an option which says: right in tab, left in tab, and left of tabs, right of tabs, etc. That means that you can put it outside of the tab area. Even if I was to click here it will remain displayed right there on the side. That is to put it right of tab. There's also a left of tab area over here. [00:39:31](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m31s) Above tab is this one here, above the tabs. It shows all the time. Then there's underneath tab. We added the option of placing data. At the right in tab, left in tab, right of tab, left of tab, above tab, and beneath tab which is six positions in the back end of your template. The places are being set by these alignment assignments here (select the field alignment inside the tab view) and you select these (from a list). This is the order in which you wanted them to display. [00:40:35](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m35s) Full width will always display under the left and right of in tab. You need to select your left and right and then your full width. Full width is the last thing to show up in a tab. Here is the switch to add permissions to specific values. If I want to control the group that can edit the name field, simply click this 'yes', and this field would be added into the permissional structure dynamically.
We said that we wanted the preacher's name, etc, on the settings. Our tab for settings is the first tab. (See video.) We are looking at the back end setup where you want to have this field's display. There are different placing options and an order in which it should go. (For example, see video.) [00:38:20](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s)
* **Field Alignment: Example*
Let me go to this one, 'Add Question'. (That is right of the tab, not in the tab.) You see an option which says: right in tab, left in tab, and left of tabs, right of tabs, etc. That means that you can put it outside of the tab area. Even if I was to click here it will remain displayed right there on the side. That is to put it right of tab. There's also a left of tab area over here. [00:39:31](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m31s) Above tab is this one here, above the tabs. It shows all the time. Then there's underneath tab. We added the option of placing data. At the right in tab, left in tab, right of tab, left of tab, above tab, and beneath tab which is six positions in the back end of your template. The places are being set by these alignment assignments here (select the field alignment inside the tab view) and you select these (from a list). This is the order in which you wanted them to display. [00:40:35](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m35s) Full width will always display under the left and right of in tab. You need to select your left and right and then your full width. Full width is the last thing to show up in a tab. Here is the switch to add permissions to specific values. If I want to control the group that can edit the name field, simply click this 'yes', and this field would be added into the permissional structure dynamically.
**Fields Title**
@ -77,17 +81,25 @@ Remember this is primarily for the back end. Although some of that information w
**Conditions**
There are much more things to explain here and I think the only thing I'll still cover in this tutorial is the actual conditions this is an amazing feature [00:43:47](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m47s) which goes beyond Joomla's control on the show on attribute per field. Remember we looked at the show on attribute and the show on attribute can control which fields to show when you are clicking on other fields. For example here we have a field called add JavaScript. If I click yes it opens this area Java Script where I can add custom scripting. Now that behavior is being controlled by this condition structure.
Conditions is an amazing feature which goes beyond Joomla's control on the showon attribute perfield. [00:43:47](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m47s) Remember we looked at the showon attribute: it can control which fields to show when you are clicking on other fields. For example, we have a field called 'Add JavaScript.' If I click 'yes' it opens this area, JavaScript, where I can add custom scripting. This behavior is being controlled by the conditions structure.
**Conditions using Sermons example**
* **Conditions: Example**
The condition structure for sermons are the following; if you can see there is a few already being set. So what we will do, we will first decide which field are we targeting. Which field do we want to show or hide. That is the behavior. Do you want to show a field or hide a field? Now most of the [00:44:51](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m51s) time we'll use show. Show means it will be hidden unless these criteria's are met. Show is the one I use the most and I think most will use that mostly. Here is the list of all the fields in your system. You might say, why don't you just show the fields that I've selected as part of this view and unfortunately that feature isn't in place yet. So you need to remember which fields you selected in the fields area. And for our purposes it is these fields and you need to remember their names. Then when you go to the conditions, when you type a field like name, you need to know it is this one. That is how you would link to them. I've build on option, files is a field and I wanted to show. Now this isolate and chain function is a concept which I believe would [00:45:55](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m55s) be best explained when you think about that not only one field must be used to show the other one but more than one field. So in this case Dropbox auto note in sermons should not only show when fields source is Dropbox, but also when built option is automatic. So that both of these should be true before it shows the Dropbox note. And so you would select the field you want to control, obviously you can control more than one at a time, but the logic behind this might not always work so you need to try it, test it, if it doesn't work come and tweak this until you you find it working in behaving the way you expect.
The condition structure for sermons is the following. (See video.) You'd see a few had already been set. We'll first decide which field we are targeting, which field we want to show or hide. [00:44:51](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m51s) Most of the time we'll use the option 'show.' 'Show' means it will be hidden unless this criteria is met. Here is the list of all the fields in your system. (See video.) You need to remember which fields you selected in the fields area. For our purposes, these are the fields. Remember their names. When you go to the conditions and you type a field, you need to know which one it is. That is how you would link to them.
So most of the times [00:46:59](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m59s) you would only link one field to one validation. But as soon as you have multiple fields, you would use the chain option. So it's either isolate like this one. The build option of files should show when file source is Dropbox. Then it's isolated, it isn't connected to any of the other settings here. As soon as you click chain, it means any other field that has this row, this is a row, that has this field selected as well will be chained together. So that it must be both being validated as true before. It actually will show the field. So let's look at it. It says file source and you can select any of these if you know that this file source is a list. Then you can look at list and see the list options. This is only for text, and it says that, only 4 text_field, only 4 text_field, [00:48:03](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m03s) only 4 text_fields, only 4 text_fields. This is only for list and radio and check boxes and dynamic lists. This is only for list radio and check boxes, this is only for list radio, and check boxes. Then you can say 'is' or 'is not' So if it 'is' Dropbox, then it should show, if it 'is not' Dropbox then it should show. That is the the logic behind it. Now here this one(any selection) is when you're dealing with a dynamic list. Unfortunately with dynamic list it's quite difficult to set these values since they are dynamic. And so the best way to deal with a dynamic, would possibly be to leave this blank. So that means that if any of the values are selected show this item. We will still look at dynamic list or custom fields [00:49:07](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m07s) and we will explain to you how to set up those custom fields. That is basically what that option is for. Most of the time we are using this 'Is' and when you select that specific field, let me show you if I select file source. If the field that you've selected is a text field, the system will show you that by saying keywords or length. So you can say I want if he has put in a length of '2' characters then show. Then you take keywords away. So then that is how you can use the text field. Now you would change this to [00:50:11](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m11s) 'Active', that is active and that it has a length of '2'. That's how that would mean if you know that what you've selected is a list, it will show you the list but it show you all the values and then you can remove the values that you don't want to use. And the only value that's really important is that 2 the other is just for you. So you could just leave 2. That will be the same as that we are just showing you. In fact what I do is I explode the string at the pipe and I only use the first value to develop the JavaScript. In fact the Java Script that is being written. We are in the sermons view, let me show you that, so we would go to component builder, admin, components, sermon distributor, modules, [00:51:15](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m15s) forms, and then you'd see there are two, there's a XML which is the fields and then there is a js which is actually the Java Script. So we open that and here's all the JavaScript that component builder would build.
**Isolate and Chain Function*
This isolate and chain function is a concept which would be best explained when you think that more than one field must be used to show the other one. [00:45:55](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m55s) In this case Dropbox Auto Note (in sermons) should not only show when the field's source is Dropbox, but also when Built Option is automatic. Hence both of these should be true before it shows the Dropbox note. You would select the field you want to control. You can control more than one at a time, but the logic behind this might not always work so you need to try and test it. If it doesn't work, tweak it until you find it behaving the way you expect. Most of the times you would only link one field to one validation. [00:46:59](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m59s) However, as soon as you have multiple fields, you would use the chain option. The build option of files should show when the file source is Dropbox and it's isolated, not connected to any of the other settings here. As soon as you click chain, it means any other row that has this field will be chained together. So both must have been validated as true before it will show the field. Here it says file source. You can select any of these if you know that this file source is a list, you can see the list options. (See video.) [00:48:03](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m03s) You can say 'is' or 'is not.' If it 'is' Dropbox, then it should show; if it 'is not' Dropbox then it should show. That is the the logic behind it.
This one is when you're dealing with a dynamic list. Unfortunately with dynamic list it's quite difficult to set these values since they are dynamic. The best way to deal with a dynamic is to leave this blank. That means that if any of the values are selected, it will show this item. We will still look at dynamic list or custom fields and explain how to set up those custom fields. [00:49:07](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m07s) That is what that option is for. Most of the time we are using this 'is. If you've selected a specific field and it's a text field, the system will show you by saying 'keywords' or 'length.'
You would change this to [00:50:11](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m11s) 'Active', that is active and that it has a length of '2'. That's how that would mean if you know that what you've selected is a list, it will show you the list but it show you all the values and then you can remove the values that you don't want to use. And the only value that's really important is that 2 the other is just for you. So you could just leave 2. That will be the same as that we are just showing you. In fact what I do is I explode the string at the pipe and I only use the first value to develop the JavaScript. In fact the Java Script that is being written. We are in the sermons view, let me show you that, so we would go to component builder, admin, components, sermon distributor, modules, [00:51:15](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m15s) forms, and then you'd see there are two, there's a XML which is the fields and then there is a js which is actually the Java Script. So we open that and here's all the JavaScript that component builder would build.
Now if we look at this let's go there it's only these are the conditions. So these are the conditions it's not even that long of a list, but to implement these conditions component builder builds this JavaScript so it starts up here and all of this JavaScript is the implementation of those things that we set there all the way down to there. So that means about 500 lines of JavaScript gets written by component builder just by these switches [00:52:19](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m19s) that you set up here. Now I'm showing you where the script is being written so did once you've set up these switches you can come into this script and if you remember the field name that you are working with so for example let's look at it, build option is the field and files source. So let's look if we can find that here. There is source so it gets the value when the page is ready it checks the jform on this called source what is the value and it puts it in here and our first function obviously I'm using a random function name generator as you can see and it's start with V and the next one would be VW and so on and so on and [00:53:23](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m23s)
So that means you need to now how we implement this function hiding and showing of the source. You would search for the V function by just adding a bracket there and search ok so it's the first function. And I'm basically saying, is it set? if it's set, then I add a source constructor and if it's an array, is this an array? checking the value whether it's an array. If it's not an array I put it into a temporary array. There we push it into the temporal array. And if it is an array and it isn't set we just create a blank array. Then we do a validation here and again this you can go check. [00:54:27](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m27s) So basically the function is that one(source_vvvvvvv_somefunc). So let's check that function and all that function does is it checks, is it 2? If it's 2, it returns true, if it's not 2 it returns false. So you see it's quite simple and the value whether true or false is returned to source. We put source into if it is true then we close that view. Sorry we get the closest class called control group. And we check, is this field required? If it's required and these are some home works that we do. Now if it's false then we hide it, and if it's required we do some house cleaning so that is simply a quick looking at the code which is being generated just by this one switch. [00:55:31](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m31s) This is not the only code there is another place and that is in the view itself. We are looking at sermon then template and edit and then from around here we have JavaScript again. And again of a we have on keyup for source or on change, because the system doesn't know, is this a text field or is this a list field or what is it? So we have these two check function on it and also there is another place where source is going to be used for another functions. We just focusing on this one and so it gets the value and it runs that function which is in our JavaScript file. So here's the JavaScript file, there is the function. So it's reusing the same function. [00:56:35](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m35s) The moment that there is a keyup or a change on that specific field. That is what I've done. Obviously other developers who are more advanced in JavaScript than I am, get's involved I could show them where in component builder the script is being generated and we can improve this dramatically. I am not that good at JavaScript and in fact I feel like most probably a little bit resource-intensive here but this is the best I could do so far and obviously if we can improve it and if you know how to improve this then you welcome to get involved on GitHub and start with a discussion on improving this infrastructure. I can tell you that this infrastructure is done in the compiler of course and I can show you exactly on which line this was developed. In fact all you need to do is when you compile your component just if we [00:57:39](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m39s) go back to components. Here we're inside a component. All you need to do to know where that is being built it's just tick this to yes and then it will add in the comments it will add a line reference of where that specific script is being build.
So that means you need to now how we implement this function hiding and showing of the source. You would search for the V function by just adding a bracket there and search ok so it's the first function. And I'm basically saying, is it set? if it's set, then I add a source constructor and if it's an array, is this an array? checking the value whether it's an array. If it's not an array I put it into a temporary array. There we push it into the temporal array. And if it is an array and it isn't set we just create a blank array. Then we do a validation here and again this you can go check. [00:54:27](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m27s) So basically the function is that one(source_vvvvvvv_somefunc). So let's check that function and all that function does is it checks, is it 2? If it's 2, it returns true, if it's not 2 it returns false. So you see it's quite simple and the value whether true or false is returned to source. We put source into if it is true then we close that view. Sorry we get the closest class called control group. And we check, is this field required? If it's required and these are some home works that we do. Now if it's false then we hide it, and if it's required we do some house cleaning so that is simply a quick looking at the code which is being generated just by this one switch. [00:55:31](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m31s) This is not the only code there is another place and that is in the view itself. We are looking[00:44:51](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m51s) at sermon then template and edit and then from around here we have JavaScript again. And again of a we have on keyup for source or on change, because the system doesn't know, is this a text field or is this a list field or what is it? So we have these two check function on it and also there is another place where source is going to be used for another functions. We just focusing on this one and so it gets the value and it runs that function which is in our JavaScript file. So here's the JavaScript file, there is the function. So it's reusing the same function. [00:56:35](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m35s) The moment that there is a keyup or a change on that specific field. That is what I've done. Obviously other developers who are more advanced in JavaScript than I am, get's involved I could show them where in component builder the script is being generated and we can improve this dramatically. I am not that good at JavaScript and in fact I feel like most probably a little bit resource-intensive here but this is the best I could do so far and obviously if we can improve it and if you know how to improve this then you welcome to get involved on GitHub and start with a discussion on improving this infrastructure. I can tell you that this infrastructure is done in the compiler of course and I can show you exactly on which line this was developed. In fact all you need to do is when you compile your component just if we [00:57:39](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m39s) go back to components. Here we're inside a component. All you need to do to know where that is being built it's just tick this to yes and then it will add in the comments it will add a line reference of where that specific script is being build.
Let's go back to the admin views. We're not really finished, so this is structure that you can use to actually manipulate the conditions upon which field should show or not show. and I really think we have done a very good implementation here. It gives you so much possibilities of structuring and chaining and working with fields in its relationships if you want to not use this and just use the on show then that is also going to work just as well in fact I think it will work better. The only problem with the on [00:58:43](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m43s) show, is that it doesn't actually provide the ability to target as a text field like we have here. Where you can add a keyword and say OK if they types in 'his' for example, then immediately this other field will show up which is an excellent feature. I mean I don't think you can get that kind of intricacy with show on option and furthermore it cannot look at multiple other fields if they have certain values and if it evaluates true then only show the other field. Those kind of controls are not yet available in the show on implementation as far as I know, and yes I possibly would like to get involved on the get repo of Joomla and see if we can add these nice features. But for now we have add them to Component Builder. In component builder you can implement these(match options) and we are writing the JavaScript to manage this [00:59:47](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m47s) for you. That is your conditions for fields.