Updated 069 Join Fields in the admin list view with field relations (markdown)

069-Join-Fields-in-the-admin-list-view-with-field-relations.md

@@ -4,44 +4,44 @@
 
 [00:00:00](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
 
-Well I'm happy to announce that we have added a very long awaited feature to JCB. You will need to upgrade to version 2.8 to have this feature. This feature though does effect how JCB builds the Admin View, List View. That means these areas where you got list of items. [00:00:33](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) If you have custom scripting in your component in these areas, when you install or upgrade to version 2, you would experience that your custom scripting doesn't get added correctly. We'll still add it, it will still be added to the document. But you have to go and move it into the correct place and comment it. Do the [00:01:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m01s) replacement of the code, add those diamonds to notify JCB to update the placement. Just a heads up, because the list views are improved the way it's being built. This extra changes to the code, snippets changes, the fingerprints and all that. 
+Well, I am happy to announce that we have added a very long awaited feature to JCB. You will need to upgrade to version 2.8 to have this feature. This feature though does effect how JCB builds the Admin View, List View. That means these areas where you got lists of items. [00:00:33](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) If you have custom scripting in your component in these areas, when you install or upgrade to version 2, you would experience that your custom scripting does not get added correctly. We will still add it, it will still be added to the document. But you have to go and move it into the correct place and uncomment it and do the [00:01:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m01s) replacement of the code, add those diamonds to notify JCB to update the placement. Just a heads up, because the list views are improved the way it is being built. This extra changes to the code, snippets changes, the fingerprints and all that. 
 
 ### What The Feature Is All About?
 
 [00:01:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m27s) 
 
-What the new features is all about, is taking specific values like maybe this value(Look) and that value(Looks) and to combine them into one value into one column. And yet have the option of still being able to filter with those values. We have this component Sermon Distributor and I am planning to take the Preachers List View, [00:01:59](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m59s) you'll see that it shows the name and a short description or whatever description you've added. I want to have it also show, if there is an email address. If this email address is filled in, then it should show the email address. Or if it doesn't find an email address but it finds a Web address it should show the web address. It should show either the one or the other. It must connected next to the name.  I think we'll use that as our demonstration of this feature. 
+What the new features is all about, is taking specific values like maybe this value(Look) and that value(Looks) and to combine them into one value into one column and yet have the option of still being able to filter with those values. We have this component Sermon Distributor and I am planning to take the Preachers List View, [00:01:59](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m59s) you will see that it shows the name and a short description or whatever description you have added. I want to have it also show, if there is an email address. If this email address is filled in, then it should show the email address or if it does not find an email address but it finds a Web address it should show the web address. It should show either the one or the other. It must connected next to the name.  I think we will use that as our demonstration of this feature. 
 
 ### Demonstration - New Feature - Field Relations
 
 [00:02:35](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m35s)
 
-Let's go back to Component Builder and then we would go to the Admin Views. If you haven't done it yet, there won't be an icon showing up anywhere, but once you've done it, there will be one. I'll show you that We will go to the Preachers Admin View. Go to the one you want to change. [00:03:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m01s) Under the fields area you'll see that there is a new area called Admin fields relations. At the bottom you'll see a Field Relations. That's the new feature. You could either click 'Create admin fields relations for this admin view' [00:03:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m27s) or you can click 'Create', both of them will achieve the same. Taking you to the same place. I'm going to click on 'Create admin fields relations for this admin view'. Then you are in the New Admin Fields Relations Builder. 
+Let's go back to Component Builder and then we would go to the Admin Views. If you have not done it yet, there would not be an icon showing up anywhere, but once you have done it, there will be one. Go to the Preachers Admin View and to the one you want to change. [00:03:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m01s) Under the fields area you will see that there is a new area called Admin fields relations. At the bottom you will see **Field Relations**. That is the new feature. You could either click 'Create admin fields relations for this admin view' [00:03:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m27s) or you can click 'Create', both of them will achieve the same and take you to the same place. I am going to click on 'Create admin fields relations for this admin view'. Then you are in the New Admin Fields Relations Builder. 
 
 ### Area Column - Three Places - Model(before modelling), Model(after modelling), View
 
 [00:03:43](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m43s)
 
-You could click on adding a admin fields. We are going to set we are going to use the name and we are going to join that up with the email and with the web URL. We will see that there is this 'Area' column. The Area column can target three places, before modelling the value, after modelling the value, and the view. [00:04:12](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m12s) If you know what a model is, that means the area where you still working with the code. Whereas in the view you must think of you already have a HTML trunk that represents that field. 
+You could click on adding a Admin Fields and we are going to use the name and join that up with the email and with the web URL. We will see that there is this 'Area' column. The Area column can target three places, before modelling the value, after modelling the value, and the view. [00:04:12](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m12s) If you know what a model is, that means the area where you are still working with the code. Whereas in the view you must think of already having a HTML trunk that represents that field.
 
 ### Looking In The Code(see video)
 
 [00:04:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m27s)
 
-If I could show you that more directly in the code. First looking at the folder structure, you will see I am in administrator, components, sermon distributor, here's the views and the models. Go to the model of the preachers the plural one, because we are going to the list view. You'll see it has items. At the moment there is nothing being modeled. Modeled usually would imply [00:05:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m01s) if it is a json object, and it needs to be taken from json to an array. Or if it's a encrypted value and needs to be encrypted. Those kind of things. Whether you want to work with the value before that happens or after that has happened. If you want to work with the actual item where it's still  an integer or a string. Then you'd target the model. If you want to target the view, [00:05:37](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) which in this case if we go to preachers and the body, you will see that everything from here up to here, is representing the ID. Everything from here up to here [00:05:58](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m58s) is a presenting the name(see video). If you want to target this portion, it still gets generated, then you would target the view. Because then JCB will still build this whole block for you. Basically this block and you can move this block around and join it with the other block for the other field as you like. That could be that you can have two links. [00:06:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m27s) Yes, all kinds of interesting things can happen. My best advice is to try it out, take it for a spin. Make some changes, compile it, install it. See what has changed, go to the areas which being either the view or the model. See the code that was generated based on your selection. 
+If I could show you that more directly in the code. First looking at the folder structure, you will see I am in administrator, components, sermon distributor, here's the views and the models. Go to the model of the preachers the plural one, because we are going to the list view. You'll see it has `items`. At the moment there is nothing being modeled. Modeled usually would imply [00:05:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m01s) if it is a json object, and it needs to be taken from json to an array. Or if it's a encrypted value and needs to be encrypted. Those kind of things. Whether you want to work with the value before that happens or after that has happened. If you want to work with the actual `item` where it's still  an integer or a string. Then you'd target the model. If you want to target the view, [00:05:37](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) which in this case if we go to preachers and the body, you will see that everything from here up to here, is representing the ID. Everything from here up to here [00:05:58](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m58s) is a presenting the name(see video). If you want to target this portion, it still gets generated, then you would target the view because then JCB will still build this whole block for you. Basically this block and you can move this block around and join it with the other block for the other field as you like. That could be that you can have two links. [00:06:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m27s) Yes, all kinds of interesting things can happen. My best advice is to try it out, take it for a spin. Make some changes, compile it, install it. See what has changed, go to the areas which being either the view or the model. See the code that was generated based on your selection. 
 
 ### Some Changes Targeting Model Area - Joint Type - Concatenation With Glue Option
 
 [00:06:52](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m52s)
 
-We are going to make multiple changes and show you what will happen. Save you some time, and understand what's happening. The first area I'm going to target is the model area. Then it has a Joint Type which is either a concatenation with a glue option. The glue option is: what do you want to be placed between the values? You could say no I want them to be completely crank up against each other like that (Glue/Code). It'll still add a little space in. [00:07:30](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m30s) You can say no I want a little Arrow-> between them. It's a value you want to place between these two values. I'm going to leave it as a comma for now. Save and close. Save and close the view. You'll see there is a new icon, we can click and directly go edit the relation. [00:08:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s)  A new icon is added. If we go to the compiler, we will be able to compile this and see it in action.  Go compile sermon distributor, install it. First thing is, let's open Sermon Distributor and let's go to the Preachers table and see how it looks in the interface. We see [00:08:30](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) it is adding both of them, adding the email, as well as the URL. Because it's exceeding a specific length, it is escaping it and we have this little Pop-up come up. There's that comma we added as a concatenation between the values. That is what we expected. 
+We are going to make multiple changes and show you what will happen. Save you some time, and understand what's happening. The first area I'm going to target is the model area. Then it has a Joint Type which is either a concatenation with a 'Glue' option. The 'Glue' option is: what do you want to be placed between the values? You could say no I want them to be completely crank up against each other like that (Glue/Code). It will still add a little space in. [00:07:30](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m30s) You can say no I want a little Arrow-> between them. It is a value you want to place between these two values. I'm going to leave it as a comma for now. Save and close. Save and close the view. You will see there is a new icon, we can click and directly go edit the relation. [00:08:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s)  A new icon is added. If we go to the compiler, we will be able to compile this and see it in action.  Go compile sermon distributor, install it. First thing is, let's open Sermon Distributor and let's go to the Preacher's table and see how it looks in the interface. We see [00:08:30](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) it is adding both of them, adding the email, as well as the URL. Because it's exceeding a specific length, it is escaping it and we have this little Pop-up come up. There is that comma we added as a concatenation between the values. That is what we expected.<<<<<<<< 
 
 ### More Changes - Instead Of Using Default Glue Option Do Code Option
 
 [00:08:53](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m053s)
 
-Let's go back and make some changes. Well let me let me first show you the code that was built. We were targeting the model, it add this as a glue to glue these values together. Concatenating them. Yes that was the model. This specific view doesn't have any modeling it does to the values. Even if I would to say it select after, it won't necessarily change anything. [00:09:32](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m32s) 
+Let's go back and make some changes. Well let me let me first show you the code that was built. We were targeting the model, it add this(See Video) as a glue to glue these values together. Concatenating them. Yes, that was the model. This specific view does not have any modeling it does to the values. Even if I would to say:  select after, it would not necessarily change anything. [00:09:32](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m32s) 
-Let's make another change. Instead of using the default glue option, we want to do a code option. You'll see the JCB cranks out to give you the freedom to write code. We are using the IDs of the fields [00:09:58](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m58s) in curly braces() because many reasons, I'm not going to waste your time, more or less boils down to the fact that it's difficult to know exactly what the field names are going to be at this point for every kind of type of field that is there. Working with the ID saves us a lot of effort. [00:10:22](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s) But since it's difficult to know which field is which ID, we had this little comment to give you a heads up. This value(280) is the website, this one (1222) is the email(see video). I would suggest if you are sure of what is what to take the comment out, because otherwise it'll be added to the code. On this stage we know that what this is saying, it is what we saw in the code. It is almost exactly the same, except that it is using numbers. We can do some little PHP. [00:11:00](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m00s) We can say something like this: $preachersDetails. We are checking if this is not empty. Then we use that, which is the email. Otherwise we fall back onto the URL. When the URL is empty it means that there will be an empty string. Maybe that's not that ideal either. Let's make it a little bit more advance. It's saying if there is an email, use the email otherwise check if there is a URL. [00:11:32](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) No, if there is, sure then add it, if not then add nothing. It stays without the comma and everything. There we have a little adaptation there. So just make sure that this  Convention is kept, ($item->(1222) the curly braces with the ID and then the closing curly brace. This will then be updated with the actual name of the field and so you can do full PHP coding in this area and [00:12:02](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) it will be implemented. You could also pass the value to a function which then passes it back to the value. This is in the model. This is before modelling and after modelling. That's a good thing that happened. Every time you change anything it's going to update the code. Sometimes it is expected that these two values might look different at this stage it doesn't. It is a JavaScript that fires on [00:12:37](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m37s) changing of any of these fields. I have to type all that over. The best idea if you want to make changes, first copy the value then you can make changes. See what happens. Then as you decided what you want to do, you can paste it back in. [00:13:04](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m04s) There we have it. If it doesn't behave right just change it a few times. We will still tweak the JavaScript to make sure that it's working exactly 100 %. So this is sort of beta phase but it works it functions as it should. I'm still ironing out some JavaScript. 
+Let's make another change. Instead of using the default 'Glue' option, we want to do a code option. You'll see the JCB cranks out to give you the freedom to write code. We are using the IDs of the fields [00:09:58](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m58s) in curly braces{} because many reasons, more or less it boils down to the fact that it is difficult to know exactly what the field names are going to be at this point for every type of field that is there. Working with the ID saves us a lot of effort. [00:10:22](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s) But since it is difficult to know which field is which ID, we had this little comment to give you a heads up. This value(280) is the website, this one (1222) is the email(see video). I would suggest if you are sure of what is what to take the comment out, because otherwise it will be added to the code. At this stage we know that what this is saying, it is what we saw in the code. It is almost exactly the same, except that it is using numbers. We can do some little PHP. [00:11:00](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m00s) We can say something like this: $preachersDetails. We are checking if this is not empty. Then we use that, which is the email. Otherwise we fall back onto the URL. When the URL is empty it means that there will be an empty string. Maybe it is not that ideal either. Let's make it a little bit more advanced. It is saying if there is an email, use the email otherwise check if there is a URL. [00:11:32](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) No, if there is, sure then add it, if not then add nothing. It stays without the comma and everything. There we have a little adaptation there. So just make sure that this  Convention is kept, ($item->(1222) the curly braces with the ID and then the closing curly brace. This will then be updated with the actual name of the field and so you can do full PHP coding in this area and [00:12:02](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) it will be implemented. You could also pass the value to a function which then passes it back to the value. This is in the model. This is before modelling and after modelling. That is a good thing that happened. Every time you change anything it's going to update the code. Sometimes it is expected that these two values might look different at this stage it doesn't. It is a JavaScript that fires on [00:12:37](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m37s) changing of any of these fields. I have to type all that over. The best idea if you want to make changes, first copy the value then you can make changes. See what happens. Then as you decided what you want to do, you can paste it back in. [00:13:04](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m04s) There we have it. If it does not behave right just change it a few times. We will still tweak the JavaScript to make sure that it is working exactly 100 %. So this is sort of beta phase but it works and functions as it should. I am still ironing out some JavaScript.<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 
 ### Only Target The Name List Field Once