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

@@ -1 +1,44 @@
-Well I'm happy to announce that we have added a very Long awaited feature To JCB You need to upgrade to [00:00:12](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) Version 2.8 To actually get this feature This feature though Does effect How JCB builds the Admin View List View So that means Basically These areas Where you got list of items [00:00:33](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m33s) So if you got custom scripting in your component In these areas The New when you install or upgrade to version 2 You would experience that your custom scripting doesn't get added you know Correctly We'll still add it will still be added to the document But you have to go and move it into the correct place and an commented and You know 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 So that's Just a heads up because the list views are Improved actually The way it's being built The this extra Sort of Changes to the code snippets changes the fingerprints and all that [00:01:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m27s) So enough that what the new features is all about is actually Taking specific values like maybe this value And that value And to combine them into one value into one column And yet have the option of still being able to filter with those values Now we forgot 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 now 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 So 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 so it should show other one or the other And it must connected next to the name [00:02:31](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m31s) And and I think we'll use that as our demonstration of this feature Ok so now let's go back to component Builder And then we would go to The admin views And If you Or not if you haven't done it yet there won't be an icon showing up anywhere here But once you've done it there will actually be one I'll show you that So we will go to the preachers admin View So just go to the the one you want to change [00:03:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m01s) And then under the settings area Sorry not the settings area It's the fields area You'll see that there is now A new area called admin Fields relations and here at the bottom You'll see a field relations So that's the new area that's the new feature You could either click here [00:03:27](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m27s) Or You click here both of them will achieve the same Taking you to the Same place So I'm the click on this one it's ok And then You basically in the admin Fields relations Builder so you could click here on adding a Admin fields we gonna set we gonna use the name [00:03:50](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) And we gonna join that up with the email And with the web URL Now will see that there is this area Column The area column actually Can Target three places Before modelling the value after modelling the value And the view So [00:04:12](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m12s) If you know I'm what a model is that means the area where you still working Just with a code Where as in the view You must think of you already have a HTML trunk That represents that field So if I could show you that more Directly in the code In first looking here at the folder structure you see I am in administrator components [00:04:39](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m39s) Then sermon distributor Then here's the views and here's the models So if we go to the model of the preacher Plural one because we going to the list View You'll see That it has Items Now At the moment there is basically nothing being modelled Modelled 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 in a needs to be decrypted Those kind of things Oh whether you wanna work with the value before that happens or after that has happened Ok so then if you want a you work with the actual IteLine truncated
+# JOIN FIELDS IN THE ADMIN LIST VIEW WITH FIELD RELATIONS
+
+### Feature Effects How JCB Builds
+
+[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. 
+
+### 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. 
+
+### 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. 
+
+### 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. 
+
+### 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. 
+
+### 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. 
+
+### 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 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 So 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 HTML Sorry PHP coding in this area [00:12:02](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) And it will be implemented that means you could also pass the value to a function which then Passes it back to the value And this is in the model And this is before modelling and after modelling oo That's a Good thing that happened every time you change anything here It's going to update the code Because Sometimes it is expected that these two Values might look different at this stage it doesn't but 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 And so I have to type all that over now So the Best Idea is you wanna make changes here First copy the value in here And then you can make changes And see you know what what happens And Then as you decided what you want You can just paste it back in [00:13:04](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m04s) Ok so there we have it If it doesn't behave exactly right just change it a few times We will Will still tweak the JavaScript here to make sure that it's You know working exactly 100 Percent So this is sort of Beta phase sort of but it works the The same functions as it should It's just that the I'm still ironing out some JavaScript here Another thing [00:13:31](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m31s) You can only Target The name list field Once You cannot add it a second time like this And say ok you're here we gonna do it again But now Using maybe some other values To also target it In some way [00:13:52](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m52s) You cannot do that only one of them will get implemented the other one will be dropped It's a limitation I know but believe me This feature as it is now is already really stunning And able to achieve quite Impressive results Ok so here we have it we've adapted it it will only show an email or a web address If there is actually one set And that There is None set it won't show any That's the expected result so let's save this and see it In action [00:14:31](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m31s) So we will compile it and install So there we have it The preacher showing up with an email address and that's it Let's Create one Without an email address So we created one With no email address if you see There's none here let's add a web address let's just close again show you Now there is nothing not even a comma [00:15:01](https://www.youtube.com/watch?v=hh4IIPmYIY8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m01s) But as you see this now is a link the whole tLine truncated