From 2ad27833b21399fa8a3df79b00b9118d5d19b8a3 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 26 Sep 2019 08:44:55 +0200 Subject: [PATCH] Updated 066 The new fields Area to make things easier (markdown) --- ...e-new-fields-Area-to-make-things-easier.md | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/066-The-new-fields-Area-to-make-things-easier.md b/066-The-new-fields-Area-to-make-things-easier.md index c6a406c..531a818 100644 --- a/066-The-new-fields-Area-to-make-things-easier.md +++ b/066-The-new-fields-Area-to-make-things-easier.md @@ -1,4 +1,25 @@ # THE NEW FIELDS AREA TO MAKE THINGS EASIER +### Explaining Changes In The Field Area + [00:00:08](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m08s) -I would like to explain it all more to you About all the changes we've made To the field area The field area is really the foundation of most Of your component As it is what actually causes many of the behaviour and Concepts Which you might have in your views Are all based on the field So the field area was a difficult place to change And it is still in progress So of this video The interface most probably won't change much [00:00:38](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m38s) Just little tweaks here and there But the backend of how we deal with the data we're certainly going to Continue improving that Just give you a quick recap of how it used to look If we go to an older Install Of JCB in So that's open a field here if we open the Elias here We would see that it has this XML field definition area [00:01:07](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m07s) As in the past it was very easy to leave out Maybe leave out Anything by accident change Something and then it breaks So That was a little bit Yeah we had lot of Freedom and as developers I'm sure there's didn't feel Anyway to be a problem I mean Whatever you selected we build the XML for you and you could just adapt [00:01:33](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m33s) it as you please Yet Since we are trying to make JCB more stable and obviously eventually Much more user friendly This new feature was suggested From Inside of the team And we decided to add it So what What did we do we basically removed [00:01:58](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m58s) This XML definition And we have replaced it With a subform we've moved the database values to its own tabs We also moved the field information to its own tab And so We add a lot of more Structure and tools to the page And I'm very sure you gonna be very Happy to see the things we've done so let's show you that So as of version 2.7.5 [00:02:28](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m28s) Which is the stable release of the Strange You'll see that if we open that same Elias which we did just now You see it looks like this now So you have a subform here Basically having those values in a subform layout And you have now a lot of new information here It also got the database in its own tab And then the type info is still available and you can still come and [00:02:58](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m58s) You know review The reality is the new option Still gives you the The ability to select other on add of those fields which Are not already on the page so you could still say ok I want to add size here and we still load the description of The field on the page and the default value Which you can then change Except like here when it tells you that it must be text We have not yet [00:03:31](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m31s) Blocked this field from being changed Or being removed though it's mandatory so there's still a level of Caution required , you could still break it Although no you can't really break it whatever is mandatory If you actually do leave it out on compiling The component We will detect that it's mandatory And if you obviously didn't add a value It will fall back to its default value [00:03:59](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m59s) So that's how it currently behaves But I wouldn't Rather I wouldn't develop That way best practice is to put in the value And make sure that is correct So that's the new Field area We've put a lot of work into this And there has been some Hiccups and [00:04:23](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m23s) Bugs which we have ironed out The predominantly all those we know about The new we also added this new option it's not yet Yeah we haven't fully Release some of the features but there is this option who's gonna sort of Separate If use the custom Field currently It adds the PHP here In the rows which [00:04:50](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m50s) Is a little tedious if you wanna change this To keep track of the open braces And all that in this way is little challenging So what we did And I can show you a little Peek of that it will be in In version 2.7.6 So you watching this video after those releases you possibly already have it [00:05:13](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) So the new let me show you click on new this is now the new implementation for the custom Fields And also for custom user So you click on it It actually takes the PHP And adds it to it's own little text area to now here you can easily follow and adapt The get options methods PHP values And that's [00:05:40](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m40s) Quite More convenient I suppose Then using one line at a time So we look at the user You got two fields then one folder Get exclude method and one for the Get group method And so they also Immediately available to you The other advantage with this implementation Is [00:06:05](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m05s) We have this new Extra properties Option which Has been available in JCB for some time now But many of you may not know that it exists So there is this what we call list class If you wanna add a class like a CSS class Value To this field when it appears in the list area That is the [00:06:29](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m29s) Let me show you This area this is the list area while any of the Views we see a list of items and you want this value Specific value To have a Specific CSS class value because maybe you wanna Style it Somewhat different Then you have this option To a use basically all you do [00:06:53](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) As you just say List class And you add there My Class But whatever you wanna call it And Then It will add that the class To the [00:07:15](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m15s) To the field In the list area which is Quite stunning There is also the escape Option which If you escape A value All the values are escaped by Default So if you want a value not to be escaped Because you gonna maybe [00:07:38](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m38s) have values in it which if it's escaped gets stripped Like a span tag and stuff like that You could say files here And then the specific fields That what I say escaped I mean in the list area again This area When there is a list value Then this is a being escaped at the moment And if you don't want that done Then you add this false escaped [00:08:06](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) The other option which is also available here is the display option We'll still add some more documentation to this But basically it's about when the field gets displayed In a config You know your it's component Has a let me see here Got this options area right and you can actually add Fields to that option area And when a field is added to the option area It it has implementation structures you could have it show in the menu you could have it show in various [00:08:43](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m43s) Places. I'll make a Tutorial About this specifically But just to show you quickly that that is also actually available here And then last but not least validate Not all Fields have the property To validate the value But here is the validation rules And you can [00:09:06](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s) Basically Add a validation to this field If that property is not available in the field type which you have selected now If it is we would suggest you add it the properties here at the top And it actually says that if you have a validation set as a field property this extra property will not be needed Because you can just use that one [00:09:33](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) Ok so that's just a quick demonstration really Of the new field area and We trust that it will Be as easy and as comfortable as we hoped It would be that the Strange would Will not frustrate you but actually be great Because of the reason that for example One of the Sort of unforeseen [00:10:00](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m00s) Outcomes Is if you have a field like this which already has all it's values And you thinking on changing it And you say, let me just check How will text look You can change it and it really adds all your text value here with its defaults And if you say no I wanna go back You can actually just click back And lo and behold your old values [00:10:25](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m25s) Are again added to the page The values that were there originally And that is even true if you were to remove a specific Property Then wanna add it back It actually adds the Original value back Which was What we intended because By accident [00:10:48](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m48s) You might remove it and wanna just put it back and it should be as easy as that You could obviously still go to Type info to see What what could be the The actual values Default values And adapt them So it's not like you don't have access to the default values it's just that we want to [00:11:10](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m10s) Recover your Current saved value for you And then whenever you add another field which isn't already here This drop down list only shows the fields That are not already on the page So you won't end up adding fields properties the second time And yes so now it's become much more easier I suppose To build fields Based on it's Properties [00:11:39](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m39s) As before You really had to Navigate Through Some of the complexities Of dealing with an XML Set of values Which maybe some of you don't even know exactly what's going on here And those of you that do I mean It's it's not like you're losing any advantage with the new implementation [00:12:02](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) You still targeting that value with any value want And it's still as easy as clicking a plus and selecting a value and adding it And so I I do hope that all of you will be as excited about this change As we are . We are now at the point where Making JCB easy-to-use is also a priority K well thanks for watching +(Click on these time links to see Youtube video) + +I would like to explain a little bit more about all the changes we've made to the field area. The field area is really the foundation of most of your component. It is what causes many of the behavior and concepts which you might have in your views that are all based on the field. The field area was a difficult place to change and it is still in progress. The interface most probably won't change much, [00:00:38](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m38s) just little tweaks here and there. The back-end of how we deal with the data, we're certainly going to continue improving that. + +### A Quick Recap how It used To Look + +[00:00:46](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m46s) + +I just want to give you a quick recap of how it used to look. If we go to an older install of JCB, open a field. If we open the Alias, we would see that it has this XML field definition area. In the past it was very easy to leave out, maybe leaving out anything by accident, change something and then it breaks. We had lot of freedom and as developers I'm sure this didn't feel in anyway to be a problem. Whatever you have selected we build the XML for you and you could just adapt [00:01:33](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m33s) it as you please. Since we are trying to make JCB more stable and eventually much more user friendly. This new feature was suggested from inside of the team. We decided to add it. + +### What Did We Do? - Removed The XML Definition Area Replaced It with Sub-form + +[00:01:55](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m55s) + +What did we do? We removed this XML definition and we have replaced it with a sub-form. We've moved the database values to its own tabs. We also moved the field information to its own tab. We add a lot of more structures and tools to the page. I'm very sure you are going to be very glad to see the things we've done. Let's show you that. Version 2.7.5 [00:02:28](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m28s) which is the stable release of this change. You'll see that if we open that same Alias which we did just now, you will see it looks like this now(see video). You have a sub-form, having those values in a sub-form layout. You have a lot of new information. It also have the Database in its own tab. The Type Info is still available and you can still come and [00:02:58](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m58s) review. + + + +???? +The reality is the new option still gives you the ability to select, other on add of those fields which are not already on the page. You could still say I want to add size here and we still load the description of the field on the page and the default value Which you can then change Except like here when it tells you that it must be text We have not yet [00:03:31](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m31s) Blocked this field from being changed Or being removed though it's mandatory so there's still a level of Caution required , you could still break it Although no you can't really break it whatever is mandatory If you actually do leave it out on compiling The component We will detect that it's mandatory And if you obviously didn't add a value It will fall back to its default value [00:03:59](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m59s) So that's how it currently behaves But I wouldn't Rather I wouldn't develop That way best practice is to put in the value And make sure that is correct So that's the new Field area We've put a lot of work into this And there has been some Hiccups and [00:04:23](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m23s) Bugs which we have ironed out The predominantly all those we know about The new we also added this new option it's not yet Yeah we haven't fully Release some of the features but there is this option who's gonna sort of Separate If use the custom Field currently It adds the PHP here In the rows which [00:04:50](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m50s) Is a little tedious if you wanna change this To keep track of the open braces And all that in this way is little challenging So what we did And I can show you a little Peek of that it will be in In version 2.7.6 So you watching this video after those releases you possibly already have it [00:05:13](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) So the new let me show you click on new this is now the new implementation for the custom Fields And also for custom user So you click on it It actually takes the PHP And adds it to it's own little text area to now here you can easily follow and adapt The get options methods PHP values And that's [00:05:40](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m40s) Quite More convenient I suppose Then using one line at a time So we look at the user You got two fields then one folder Get exclude method and one for the Get group method And so they also Immediately available to you The other advantage with this implementation Is [00:06:05](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m05s) We have this new Extra properties Option which Has been available in JCB for some time now But many of you may not know that it exists So there is this what we call list class If you wanna add a class like a CSS class Value To this field when it appears in the list area That is the [00:06:29](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m29s) Let me show you This area this is the list area while any of the Views we see a list of items and you want this value Specific value To have a Specific CSS class value because maybe you wanna Style it Somewhat different Then you have this option To a use basically all you do [00:06:53](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) As you just say List class And you add there My Class But whatever you wanna call it And Then It will add that the class To the [00:07:15](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m15s) To the field In the list area which is Quite stunning There is also the escape Option which If you escape A value All the values are escaped by Default So if you want a value not to be escaped Because you gonna maybe [00:07:38](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m38s) have values in it which if it's escaped gets stripped Like a span tag and stuff like that You could say files here And then the specific fields That what I say escaped I mean in the list area again This area When there is a list value Then this is a being escaped at the moment And if you don't want that done Then you add this false escaped [00:08:06](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) The other option which is also available here is the display option We'll still add some more documentation to this But basically it's about when the field gets displayed In a config You know your it's component Has a let me see here Got this options area right and you can actually add Fields to that option area And when a field is added to the option area It it has implementation structures you could have it show in the menu you could have it show in various [00:08:43](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m43s) Places. I'll make a Tutorial About this specifically But just to show you quickly that that is also actually available here And then last but not least validate Not all Fields have the property To validate the value But here is the validation rules And you can [00:09:06](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s) Basically Add a validation to this field If that property is not available in the field type which you have selected now If it is we would suggest you add it the properties here at the top And it actually says that if you have a validation set as a field property this extra property will not be needed Because you can just use that one [00:09:33](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) Ok so that's just a quick demonstration really Of the new field area and We trust that it will Be as easy and as comfortable as we hoped It would be that the Strange would Will not frustrate you but actually be great Because of the reason that for example One of the Sort of unforeseen [00:10:00](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m00s) Outcomes Is if you have a field like this which already has all it's values And you thinking on changing it And you say, let me just check How will text look You can change it and it really adds all your text value here with its defaults And if you say no I wanna go back You can actually just click back And lo and behold your old values [00:10:25](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m25s) Are again added to the page The values that were there originally And that is even true if you were to remove a specific Property Then wanna add it back It actually adds the Original value back Which was What we intended because By accident [00:10:48](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m48s) You might remove it and wanna just put it back and it should be as easy as that You could obviously still go to Type info to see What what could be the The actual values Default values And adapt them So it's not like you don't have access to the default values it's just that we want to [00:11:10](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m10s) Recover your Current saved value for you And then whenever you add another field which isn't already here This drop down list only shows the fields That are not already on the page So you won't end up adding fields properties the second time And yes so now it's become much more easier I suppose To build fields Based on it's Properties [00:11:39](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m39s) As before You really had to Navigate Through Some of the complexities Of dealing with an XML Set of values Which maybe some of you don't even know exactly what's going on here And those of you that do I mean It's it's not like you're losing any advantage with the new implementation [00:12:02](https://www.youtube.com/watch?v=26x_Sc8jbp8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m02s) You still targeting that value with any value want And it's still as easy as clicking a plus and selecting a value and adding it And so I I do hope that all of you will be as excited about this change As we are . We are now at the point where Making JCB easy-to-use is also a priority K well thanks for watching