069 Join Fields in the admin list view with field relations

Well I'm happy to announce that we have added a very Long awaited feature To JCB You need to upgrade to Version 2.8 To actually get this feature This feature though Does effect How Jason be built the admin View List View So that means Basically These areas Where U Got list of items I'm sorry if you got custom scripting in your component In these areas The Nuke when you install or upgrade to version 2 You would experience that your custom scripting doesn't get at it Anyway you know Correctly We're still at it it will still be added to the document But you have to go and move and into the correct place and an commented and You know do the re Placement of the code At this diamonds to Notify JCB to update the placement So that's Just a heads up because they're 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 So another that what the new features all about is actually Taking specific values like maybe this value And that that you 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 SA minister buter And I am planning To take the preachers List View You see that it now shows the name and a short description or whatever description you've had it 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 Photos are other one or the other And it must connected next to the male name 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 any work here But once you've done it there will actually be one I'll show you that I will go to the preachers at - View So just go to the the one you want to change And then under the settings area Sorry not the settings area List the fields area You see that there is now A new area called admin Fields relations And here at the bottom You see if field relations So that's the new area that's the new feature You could either click here Or You click here None 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 If you could click here on adding a Atkins fields are we gonna set for your money used in them And we gonna join that up with the email And with the whip euro I'll see that there is this area Colin The error column actually Can Target three places Before modelling the value after modelling the value And the view So If you know I'm what a model is that means the area where you still working Just with a code Where is interview You must think of your ready 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 ucc I'm in admin Strater components Then summon 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 If it is a Jason object And it needs to be taken from Jason to an array Or if it's an encrypted value and 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 Item Where it's still just an integer or a string and really that's all that is Then you target the model If you wanna talk at The View Which in this case if we go to preachers And then the body You see that Basically Everything from here Up to here Is representing The ID Everything from Year of the year Is a presenting the name And so if you wanna target this trunk Because it still gets generated Course Then you would target The View Because then they see we 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 feel As you like So that we could be that you didn't have two links Or that Yes All kinds of interesting things can happen my best Advice is not write out take it for a spin Make some changes compile it install it See what's changed go to the areas Which being I love you Or the model and see the code that was generated based on your selection Are we gonna Make multiple changes and show you what will happen so save you some other time and then understand What's happening And so this code Do it The first area I'm gonna target is the model area Then it has a joint type which is either a concatenation with With a glue option the glue option is basically 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 And usually it'll still had a little space it'll still had a little space in And You can say no I want I want a little Arrow between them Like that But it's basically a value you want to place between these two values Ok so I'm gonna just leave it as a comma for now And then save and close And then also save and close the view And now you'll see That there is a new icon here We can click and directly go edit the relation So That is the new icon added Now if we go to the compiler We will be able to compile this and see it in action Soccer They just gonna compile 7 distributor Install it and now First thing is let's open 7 distributor and let's go to the preachers table and see See how it looks in the interface They here we see It basically adding Both of them is adding the email as well as the URL And because it's exceeding a specific length it is escaping it and we have this all Pop-up come up here It so there's that comma we added as a compact in Asian Between the values So that is really what we expected Let's go back and make some changes Well let me let me first show you the code that was built So we were tired at a given model so basically it just Add this As a glue To view these values together Concatenating them Yes So that was the model now Like I said this specific view doesn't have Really any modelling it does to the values So even if I were to say it select after It won't necessarily change anything Ok so Let's make another change But instead of using the default glue option Let's say Ok we wanna do a code option Then you'll see the JCB cranks out sort of ok 2 Give you the Freedom to actually write code We are using the ID is Of the fields In in braces Curly braces because Well Many reasons I'm not gonna Waste your time More or less Boils down to the fact that it's difficult to know exactly what the field names gonna be at this point For every kind of type of field that is there 2 working with the it just saves us a lot of Effort But since it's difficult to know which field is which ID we had this little comment 2 sorry give you a heads up ok so this value is basically the website this one here is basically the him Email And I would suggest if you are sure of what is what To just take the comment out because otherwise it'll be added to the code So that is just What I would suggest so this stage we know That what this is saying is basically what we saw In the code it is almost exactly the same Except that it is using numbers here so now we can do some of the PHP So we can say something like this So we basically checking If this is a business empty Then we use that which is the email otherwise Before back onto their You know the URL I never urls empty it just means that there will be an empty string So maybe that's not that ideal idea So let's make it a little bit more advanced So now it's saying if there is an email use the email otherwise check is there a URL No Is there is Sherlyn at it if not then at nothing And it just stays without the comma and everything So there we go Got 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 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 That's Her 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 it fires on Changing of any of these fields And so I have to type all that over now To the Best Idea is you wanna make changes here First copy the value in the year And then you can make changes And see No what What happens And Then as you decided what you want You can just paste it back in 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 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 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 Tulsa targeted In some way 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 quiet Impressive results Ok so here we have it we've adapted it it will only show an email or a Padres If there is actually wants it 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 So we will compile it Uninstall So there we have it Pictures 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 this close again show you Now there is nothing not even a comma But as you see this now is a link their whole thing is a link And That might not be exactly what you Actually want Ok let's say Let's add a web address And then save and close Zahir Because I wet the dress was a little long You created a a pop-up Now all that can be changed But let me just Do something else The shoes is shorter address Save and close And now there you have it That looks more acceptable And so it the textnow 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 So let's say let's do something even more interesting So again we go and open that area clicking this icon As well for the 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 = 9th 101 Is basically a truck of code as I explained Initially in the beginning Where we are saying 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 removing the comment this is the common that shows you that that is the name That's the email And that's the web address So I would also encourage you to want to see in it or just remove it we might at a later stage Take the comment and added underneath the box soda Clearly is nowhere In the way But it is for you to just sort of know that this song Is for the email and this is for the website Address ok so again I want to add a Lil Bit Dynamic Script here But I need to keep in mind that I'm actually in HTML So if I wanted to 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 is all placeholder will produce the whole 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 I'm sorry Peter If it's an A custom field which links to a to another View Then all of that can still be produced in this So the dynamic placeholder here But you can remove this all of this and you can Yeah have a Echo out anything Sweet 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 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 trunk of code that Jason be built 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 This area is 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 I'll get up open an issue And we will try and address it as quick as we can Beginning thank you for watching This is the new feature of Combining Open view values In a Very easy way It could have been done previously bass 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 future wanna join to it That's sort of I expected you understood maybe that but I realise I must mention that separate So that means if we go into the preacher Fields area Hi 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 Impact Only the fields that I'm not showing in the list View Show show in the relationship view as joint options So that suits a heads up What is exciting though as you can Actually Do a I'm a filter And a Yeah you can do a filter or a search On these Fields that I'm not going to be placed but you know you gonna later select them as relationships And then the end up creating JCB will in upgrading the filter And make it searchable at even if it's a link 2 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 say that all the permissions in place And everything else Ok well maybe I should Demonstrate that Just quickly 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 You know Same as opening it from the preacher this too and then this one's gonna open the sermon So This is going to be easy because now We can decide Ok we got so many rows here let's Combine the preacher With the name row And yet we want to 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 Turbo go to the sermons list View For admin viewing and then Also again to the fields and click on great at the fields relations in this app oate before we We do that I first need to remove The preacher From the list so we first gonna go to the We 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 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 will see that The the preacher now Is No longer going to show him 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 Akon new And then select name Here You would now Need to select The Sermon preacher And then View And then Well we could I this a We wanna do this ourselves Or We could Use Google Which in this case I'm just gonna use a space To send empty space like that And save and close And then we compile Install And then refresh the cement page we see that now They are Two links here The one is to open the Actual Sermon and the other one is opening the He's going to open the preacher So if we click on it it still behaves as before the preacher gets opened Be 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 And so This is really Great We can also then open here And All is working as expected Nice as easy as it was To combine these two values into one column While still retaining the actual links and everything or surrounding this value having a Dynamically get the name Because obviously in the table it's taught the idea only And now showing it here it means it's actually room up that in the database so let me show you that So we open the servants 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 select The preacher name Then going to the view of that Sermons We see if we scroll down Here It has Produced this trunk Of code For the for the preachers name And this chunk of code For the Sermon name So it still does all the Producing of the HTML code and older promotional checking weather Does this user actually have The edit permission 2 To change the value Of the specific preacher 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 get up opening issue And we will Take it from there