069 Join Fields in the admin list view with field relations

Jump to bottom Edit New page

Amigo edited this page Oct 1, 2019 · 14 revisions

JOIN FIELDS IN THE ADMIN LIST VIEW WITH FIELD RELATIONS

Feature Effects How JCB Builds

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 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 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?

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 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

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 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 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

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 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)

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 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 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 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 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

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 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 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 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

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 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 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 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 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 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 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 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 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 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 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 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 But as you see this now is a link the whole thing is a link And That might not be exactly what you Actually want Ok let's Let's add a web address And then save and close and so here Because your web address was a little long It created a a pop-up 00:15:26 Now all that can be changed But let me just Do something else Let's use a shorter address Save and close And now there you have it That looks more acceptable And so it detects now whether there's an email or a web address and if there's none it shows none So that was now with this new combine Feature 00:15:53 So let's, let's do something even more interesting So again we go and open that area clicking this icon This is sort of a shortcut And now instead of targeting the model We gonna target The View And this is where it really gets interesting Because now this little place holder called field=199 Is basically a chunk of code as I explained Initially in the beginning Where we are saying 00:16:30 Ok Instead of Targeting the actual value database value You are now targeting the produced code which JCB builds The html block For that specific field So We can now also I would also encourage you removing the comment this is the comment that shows you that that is the name That's the email And that's the web address 00:16:57 So I would also encourage you to once you seen it or just remove it we might at a later stage Take the comment and added underneath the box so that it Clearly is nowhere In the way But it is for you to just sort of know that this chunk Is for the email and this is for the website Address ok so again I want to add a little bit Dynamic Script here But I need to keep in mind that I'm actually in HTML 00:17:31 So if I wanted to add PHP here I actually need to Do the correct PHP tags And all the rest of it Ok And that means you can actually Target the item value You can remove this and work with the actual item value But this little placeholder will produce the whole 00:18:03 Block of code which if it's going to be a dynamic link Or something like that It'll produce all of that for you So if it's a If it's an A custom field which links to a to another View Then all of that can still be produced in this Sort of dynamic placeholder here But you can remove this all of this and you can Yeah have it 00:18:27 Echo out anything So which you just have to code of course I think Best to demonstrate is first used in concatenation option And which would just put a break between the values And then save and close And compile install So we refresh this area And now we see that This value is a link but the other two 00:19:01 It's actually just text And that's exactly What we wanted to achieve Going into the code We open the body And you'll see The JCB added the brakes There is a break There's a break And there's the chunk of code that JCB build 00:19:22 So It really build all of this It's still built a link to the preacher And then It's still built this As well So if this was going to be a link to another View It will produce that code Checking again the permissions and everything Which is really what makes 00:19:43 This areas implementation quite exciting Because it still takes care of the hard work of producing The actual code needed to display the value If you pick up any behaviours in this new feature that sort of unexpected Then please give us a heads up on Github open an issue And we will try and address it as quick as we can Again thank you for watching This is the new feature of Combining admin view values 00:20:19 In a Very easy way It could have been done previously with some custom scripting But this sort of helps you and I'm sure Makes it easy for you to just select the field you want to Target of course that means You first need to add the fields that you are ready going to show in the list View And then select the field you wanna join to it That's sort of I expected you understood maybe that but I realize I must mention that separate 00:20:53 So that means if we go into the preacher Fields area you'll see That We actually just got two Fields the name As shown in list And the description shown in list So here we don't make any changes we don't say that the email and then Website Must also show in the list View In fact 00:21:17 Only the fields that I'm not showing in the list View Show show in the relationship view as joint options So that's just a heads up What is exciting though as you can Actually Do a a filter And a Yeah you can do a filter or a search On these Fields that are not going to be placed but you know you gonna later select them as relationships 00:21:47 And then the end up creating JCB will in upgrading the filter And make it searchable at even if it's a link to To another page you can click this to be a link And then it will generate the link Which is I think amazing knowing that it's gonna set that all the permissions in place And everything else Ok well maybe I should Demonstrate that Just quickly 00:22:15 So here in the sermons area We see that we have a Preacher table and we gotta name table So That means we can actually We have these two links this one will open the preacher As We know Same as opening it from the preacher list view and then this one's gonna open the sermon So This is going to be easy because now 00:22:45 We can decide Ok we got so many rows here let's Combine the preacher With the name row And yet we wanna retain this link As it is working now and we wanna retain the option to actually filter by The preacher So let's show you how easy it is to do that So we'll go to the sermons list View or admin viewing and then Also again to the fields and click on create fields relations in this ad o wait before we We do that 00:23:20 I first need to remove The preacher From the list so we first gonna go to the Where we selected the fields That needs to be linked To the List the admin list View And the one we want to remove Is the preacher value So it's this one 00:23:42 Sermon preacher we gonna say no Don't add it and when you do that is gonna wipe out all the links that usually Should not be selected if it's not a listview But since we still wanted to be a link And we still wanted to be a filter We gonna leave those checked And then click save and close So now Getting back to this page And going to Fields we'll see that 00:24:10 The the preacher now Is No longer going to show the list View But it's still Going to be A filter in a link And if you compile now it won't show up at all You still need to now go and select the relations area click on new And then select name 00:24:33 Here You would now Need to select The sermon preacher And then View And then Well we could either say We wanna do this ourselves Or 00:24:50 We could Use glue Which in this case I'm just gonna use a space just an empty space like that And save and close And then we compile Install And then refresh the sermon page we see that now They are 00:25:21 Two links here The one is to open the Actual Sermon and the other one is opening the It's going to open the preacher So if we click on it it still behaves as before the preacher gets opened we closed again And we back here and we still have the preacher filter Here at the bottom of our page As we had it before 00:25:48 And so This is really Great We can also then open here And All is working as expected Now as easy as it was To combine these two values into one column While still retaining the actual links and everything surrounding this value having a Dynamically get the name 00:26:16 Because obviously in the table it's taught the ID only And now showing it here it means it's actually remapped it in the database so let me show you that So we open the sermons Model and we scroll down We'll see here in the the list query It's still Maps the preacher table in And Builds the connection on the ID in the preacher And still selects 00:26:49 The preacher name Then going to the view of that Sermons We see if you scroll down Here It has Produced this chunk Of code For the for the preachers name And this chunk of code 00:27:14 For the Sermon name So it still does all the Producing of the HTML code and all the permissional checking whether Does this user actually have The edit permission to To change this value Of the specific preacher 00:27:37 So yes and yet it's showing the preacher name As the linking up in the database was done So it's quite exciting I really Hope that you would find it as useful as I am already doing And like I said if you discover anything not to work as expected Please do contact me and on GitHub open up a issue And we will Take it from there. Thanks for watching.