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

Updated 007 Admin Views (markdown)

Amigo 2019-05-31 11:27:36 +02:00
parent bbdbec90a6
commit 047fddcda7
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
007-Admin-Views.md

@ -91,27 +91,27 @@ The condition structure for sermons is the following. (See video.) You'd see a f
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.'
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 'keywords' or 'length.' You would change this to 'Active' and that it has a length of '2'. (See video.) [00:50:11](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m11s) If you had selected a list, it will show you the list and all the values. You can then remove the values that you don't want to use. (The only value that's important is the 2 there. See video.) I explode the string at the pipe and I use the first value to develop the JavaScript. We are in the sermons view; we would go to component builder. (See video.) [00:51:15](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m15s) You'd see that there is a series_xml, which is the field's, and a sermon_js which is the Java Script. We open that and find all the JavaScript that component builder will build. These are the conditions. (See video.) To implement these conditions component builder build this JavaScript. All of this JavaScript is the implementation of those things that we set there. (See video.) It means about five hundred lines of JavaScript gets written by component builder by these switches that you set up here. [00:52:19](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m19s) I'm showing you where the script is being written so that once you've set up these switches you can come into this script. For example, build option is the field and file source. It gets the value when the page is ready; it checks the jform on source_. It determines the value and places it in here. Our first function start with V and the next one would be VW, etc. [00:53:23](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m23s)
You need to know how we implement this function: hiding and showing of the source. You would search for the V function by adding a bracket there and searching. (See video.) That's the first function. If it's set, I add a source constructor; if it's not an array, I place it in a temporary array. If it is an array and it isn't set we create a blank array. Then we do a validation. [00:54:27](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m27s) The function would be source_vvvvvvv_somefunc. Let's check that function; all the function does is checking. For example, is this 2? If it is 2, it returns true; if it's not 2, it returns false. The value, whether true or false, returns to source. We get the closest class called control group, and we check if the field is required. If it's false, we hide it, and if it's required, we do some house cleaning. [00:55:31](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m31s)
That was taking a quick looking at the code being generated by this one switch. It's not the only code. There is another place in the view itself. [00:44:51](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m51s) We are looking at sermon, template, and edit. (See video.) Here we will find JavaScript again. The system doesn't know whether this is a text field or a list field. We have these two check function on it. (See video.)
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.
There is another place where source is going to be used for other functions. It gets the value and runs that function which is in our JavaScript file. Here's the JavaScript file, there is the function. (See video.) It's reusing the same function the moment that there is a keyup or a change on that specific field. [00:56:35](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m35s)
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)
If you know how to improve this then you are welcome to get involved on GitHub and start a discussion on improving this infrastructure. This infrastructure is done in the compiler and I can show you on which line this was developed. For example, going back to components. [00:57:39](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m39s) All you need to know is where that is being built. Just tick this to yes and in the comments it will add a line reference of where that specific script is being build. (See video.)
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.
Let's go back to the admin views. This is a structure that you can use to manipulate the conditions, determining which field should show or not. I think we have done a good implementation here. It gives you many possibilities of structuring, chaining, and working with fields in their relationships. If you don't want to use this and only use the on show, it's going to work just as well. The only problem with the on show is that it doesn't provide the ability to target a text field like we have here. [00:58:43](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m43s) You can add a keyword and immediately the other field will show up. Furthermore, the on show option cannot look at multiple other fields if they have certain values; also, if it evaluates true, it only shows the other field. Those kind of controls are not yet available in the show on implementation. I would like to get involved on the get repo of Joomla and see if we can add these nice features.For now we added them to Component Builder. In component builder you can implement these. We are writing the JavaScript to manage this for you. [00:59:47](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m47s)
**Field Listing**
We've looked at all of these(permissions, tabs, fields, conditions and linked views). The next one is basically the list of the fields that you have already selected and clicked save. It will show a list of all the fields that you've selected. Again any of those fields, if you want to update them, you could just click on the field name and it will take you to the field and you can update it.
We had looked at permissions, tabs, fields, conditions, and linked views. The next one is the list of the fields that you have already selected and saved. If you want to update any of these fields, you could just click on the field name and it will take you to the field where you can update it.
**Custom CSS View - List Footer**
**Custom CSS View**
The next tab is a place for you to add custom CSS that is just related to this specific view. You can add CSS here, which is for the edit view or the single view and you can add CSS here, which is for the list view or the multiple views (plural). Then it will be placed in its prospective places. The same goes with the JavaScript, accept that you have four places to target instead of just one.
The next tab is a place for you to add custom CSS that is related to your specific view. You can add CSS here, which is for the edit view or the single view; or you can add CSS here, which is for the list view or the multiple views (plural). (See video.) Now it will be placed in its prospective places. The same goes with the JavaScript.
**Custom Javascript View - List Footer**
**Custom Javascript View**
If you remember when we looked at the way that we are [01:00:51](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m51s) building the JavaScript there is a file, a JavaScript file, which just has JavaScript for the view and then there is the footer area which is under the HTML and PHP at the end of the file there is a whole area which is just JavaScript at the footer of the file. And so we decided to add the option of adding JavaScript to the file or JavaScript to the footer. (The view file or the view footer or views file or views footer). So it just gives you the option of targeting. If you know list and this script can run as a function and I just wanted to be able to be on the page. Then you add it to the file and then if you want to use the function you can add it to the footer. That it's up to you.
@ -125,7 +125,7 @@ If we go back to our component you'd see that there is that code. So when you cl
So I first wanted to show you the PhP side and then the task name itself. Let's just make sure I do not miscommunicate here. The method name is set here and that should correspond [01:06:07](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m07s) to the method that you set up in your php Ajax method. Which is possibly the method in which you model the data, get the data, structure the data, and give it back to the Ajax call. So you return the data inside of this method, but in your JavaScript you will be using the task name to [01:06:29](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m29s) get to the system. So if we go to the JavaScript, close out, go JavaScript. It seems I used the JavaScript example which is going to get way ahead of us but since we started let me not leave you in mid air. So I have to close out here. [01:07:00](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m00s)
In sermon distributor which is the component to which that view belongs is a place called scripts and I have added a feature which is called chronic global [01:07:23](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m23s) events. So I have added a feature to add global events. Now global events or the way I am implementing it, is simply an event that should run every time a page opens. Anytime any page in the system opens, I wanted it to run the global event. Now the way I target it is, I say load Dropbox Ajax [01:07:50](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m50s) is a global event and it needs to do that. And the Dropbox Ajax is basically set up in the helper class. So I have a helper class which is called load Dropbox Ajax and it gets the document object. [01:08:11](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m11s) It takes the document object it adds a script declaration to it and here is the JavaScript that it is adding. And you see, in that, it is using check Dropbox listing as the task. So it's targeting the ajax [01:08:32](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m32s) controller and asking for check Dropbox listing as the task and it's passing to it a token and a view name. So possibly we would like to use that view ID later to log from which area this automated [01:08:52](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m52s) feature mostly gets triggered. I'm not doing that as yet so this is just what the script will do. So there is jQuery which only fires of after the page is loaded. And at the moment it's just adding a dummy 3 in there to just trigger the method. [01:09:10](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m10s)
In sermon distributor which is the component to which that view belongs is a place called scripts and I have added a feature which is called chronic global [01:07:23](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m23s) events. So I have added a feature to add global events. Now global events or the way I am implementing it, is simply an event that should run every time a page opens. Anytime any page in the system opens, I wanted it to run the global event. Now the way I target it is, I say load Dropbox Ajax [01:07:50](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m50s) is a global event and it needs to do that. And the Dropbox Ajax is basically set up in the helper class. So I have a helper class which is called load Dropbox Ajax and it gets the document object. [01:08:11](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m11s) It takes the document object it adds a script declaration to it and here is the JavaScript that it is adding. And you see, in that, it is using check Dropbox listing as the task. So it's targeting the ajax [01:08:32](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m32s) controller and asking for check Dropbox listing as the task and it's passing to it a token and a view name. So possibly we would like to use that view ID later to log from which area this automated [01:08:52](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m52s) feature mostly gets triggered. I'm not doing that as yet so this is just what the script will do. So there is jQuery which only fires of after the page is loaded. And at the moment it's just adding a dummy 3 in there to just trig - List Footerger the method. [01:09:10](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m10s)
And so that is really how this script ends up on the page. I'm sorry that I used that as an example I realise it's a little bit ahead of ourselves, but nonetheless I want to not leave it at a loose end. So I am redoing it actually for you. [01:09:32](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m32s) That is where this php script are going to be used. So since I need to add this somewhere I just selected a view to advantage it to this sermon view. And I added the ajax controller concepts here, but the actual JavaScript that fires off all this, is set to the global event and that means every time a back end area is opened in this component, [01:10:00](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m00s) it loads that JavaScript to the view. And JavaScript executes a ajax request which starts updating the Dropbox listing. I'm not going explain all of that Dropbox listing to you now, it's a quite an advance concept but it's basically sermon distributor that is able to link to a media inside of a shared Dropbox folder. And this whole method here that we looking at [01:10:28](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m28s) parses that Dropbox folder every so often to make sure that it's to date. That's what it's all about. So that is just looking at adding ajax.