joomla/Component-Builder
40
26
Fork 12
Code Issues 80 Pull Requests 2 Projects 4 Wiki Activity

Updated 030 How to filter a list field based on association with another field (markdown)

Amigo
2019-07-10 12:08:57 +02:00
parent 6f92be1dae
commit 1d3784ed21
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
030-How-to-filter-a-list-field-based-on-association-with-another-field.md

@@ -7,19 +7,17 @@ Perhaps you encountered the necessity to limit the drop downs of a list field ba
* ### Example Component With Filters
For example: Here is a component called 'Job Tracking'. [00:00:50](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s)In this component is a client area. If you go to Admin Views,it may be seen that there is 'Country' and 'Regions'. It can be illustrated on the basis of Country and Regions but the field concepts can be changed and replaced it with other tables. [00:01:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) Nonetheless this will be used. Here follows a explanation of how it is implemented in the client's view because that's where most of the work is done. JavaScript, as well as the PHP area are two areas that need to be looked at. [00:01:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m51s)In various previous tutorials some of the Ajax functionality in Component Builder had been explained.
For example: Here is a component called 'Job Tracking'. [00:00:50](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) In this component is a client area. If you go to Admin Views, it may be seen that there is 'Country' and 'Regions'. The field concepts can be changed and replaced with other tables.(See video) [00:01:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) Here follows a explanation of how it is implemented in the client's view because that's where most of the work is done. JavaScript, as well as the PHP area are two areas that should be looked at. [00:01:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m51s)In various previous tutorials some of the Ajax functionality in Component Builder had been explained.
For the sake of those who have not watched all the tutorials, here is a brief explanation. But first it should be determined what is our objective. [00:02:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) When starting with a client a country needs to be selected. Then have it load only that country's regions. [00:02:41](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) Furthermore you want to make sure that when you unselect the Country, it also unselects the Region.
For the sake of those who have not watched all the tutorials, here is a brief explanation. But first it should be determined what is our objective. [00:02:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) When starting with a client a country needs to be selected. Let it load only that country's regions. [00:02:41](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) Furthermore you want to make sure that when you unselect the Country, it also unselects the Region.
There are various things that need to be achieved here. This will be illustrated in JavaScript. [00:03:10](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) If the country "Australia" is used for example, it will seen that it does not load any regions, in fact it shows: 'Create a region'. If Namibia is being selected, it says 'Select a region', and so there's two regions already created. There is this button(see video) in some of the drop downs which are being added by selecting 'true' to the button. It's very helpful for either creating or editing existing regions. So if a country is selected where there is not any regions set yet, it tells you to create one.[00:03:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) Then a region can be created for this country, If 'Create' is selected, then your region may be created. Save and close. Call it 'Region' for example. Save and close. Go back to Creating a client. [00:04:17](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) If Australia is selected shows that it got 'Regions'.
There are various things that need to be accomplished here. This will be illustrated in JavaScript. [00:03:10](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) If the country "Australia" is used for example, it will be seen that it does not load any regions, in fact it shows: 'Create a region'. If Namibia is being selected, it indicates 'Select a region', and so there's two regions already created. There is this button(see video) in some of the drop downs which are being added by selecting 'true' to the button. It's very helpful for either creating or editing existing regions. So if a country is selected where there is not any regions set yet, it tells you to create one.[00:03:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) Then a region can be created for this country, If 'Create' is selected, then your region may be created. Save and close. Call it 'Region' for example. Save and close. Go back to Creating a client. [00:04:17](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) If Australia is selected it shows that it got 'Regions'.
To demonstrate how that was done:
### Two Variables - Var Regions(object) Var Region(store)
Let's get started on a JavaScript side of things. There are two variables. Both may be called 'var'. [00:04:42](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) One is an object and one is where a value is going to be stored, if that value is already set. When the fields are Created, all the regions is brought to the page, no region should be left unloaded. [00:05:11](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) Rather parse those regions into this variable, only then put those regions that are part of this country back into the list of drop down options.<<<<<<<<<<<<<<<<<,
What you also see happening here, first thing I'm doing is I am [00:05:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) doing it for each on the regions options. And then I'm getting the value. I putting it in (var)key, I'm getting the text, I'm putting it in (var)text, and then I'm adding it to regions(Key)=text;. Simply as you would load it in any array there. And then I am also [00:06:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m08s) Getting the value of the set region(see video). And I'm adding that to region. And then I'm setting the function getregion. The getregion function is down here.
Let's get started on a JavaScript side of things. There are two variables. Both may be called 'var'. [00:04:42](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) One is an object and one is where a value is going to be stored, only if that value is already set. When the fields are Created, all the regions is brought to the page, no region should be left unloaded. [00:05:11](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) Rather parse those regions into this variable, only then put those regions that are part of this country back into the list of drop down options.[00:05:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) It is been done for 'each(funtion()' on the regions options.(See video) and then I'm getting the value, then it is put in 'var'key, then get the 'text', and place it in 'var'text, and add it to regions'Key=text'. Simply as it is loaded in any array. [00:06:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m08s) Then take the value of the set region(see video) and add that to 'Region', and the function 'getregion' is set.<<<<<<<<<<
### Loading Show - Class ID