From ee89f41d2c6c50239ebe87332a446759b9f7a828 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Wed, 19 Jun 2019 17:29:00 +0200 Subject: [PATCH] Updated 032 JCB manual custom code implementation (markdown) --- 032-JCB-manual-custom-code-implementation.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/032-JCB-manual-custom-code-implementation.md b/032-JCB-manual-custom-code-implementation.md index 64a35b7..d56309e 100644 --- a/032-JCB-manual-custom-code-implementation.md +++ b/032-JCB-manual-custom-code-implementation.md @@ -26,7 +26,12 @@ Now JCB manual if you setup custom code, the JCB manual will do exactly that. It * ### Example Field -It is this little drag and drop field. Is actually and note as you can see. I'm using some HTML in the description and I've added some JavaScript to this footer of wherever does field is being used. This code [00:14:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m16s) is used to upload or it's part of the process, there is much more code but this is what I need to reuse quite often. I improve this in many areas and then I would always have to come back here(JavaScript). There are certain text that differs from each place. For example that word teaser, needs to be different everywhere else and the word image. Sometimes it must be [00:14:48](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m48s) images and not just image. What I've done, is I've actually taken this code, I've added it to a custom code. I have set, this is JCB manual, and everywhere where I want dynamic script updates, I've added the 'arg' values. If you want to understand more about the 'arg' values just read this note above here. To make it simply [00:15:19](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) arg. These arg areas is like placeholders. I can pass strings or values via this custom code placeholder and it gets updated on the fly during compilation everywhere where I used this code snippet elsewhere in JCB. [00:15:44](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m44s) This gives me a little bit of that object orientated feeling where I write a function or a piece of script once, then I can reuse it everywhere else, and simply update the values being passed to it. It's by far not error proof there, you can't use any commas, and plus signs in these values. It needs to be [00:16:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m15s) one word. It can have a dollar sign if you want to have it place a dollar sign symbol in the code, but it doesn't execute the string that you pass. It will literally just pasted in wherever you've placed this arg placeholder. You can add as many values to this arg values as you want. Always make sure that the amount of values that is in the code must correspond to the amount of values that you are passing to it. [00:16:54](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) -??? +It is this little drag and drop field. Is actually and note as you can see. I'm using some HTML in the description and I've added some JavaScript to this footer of wherever does field is being used. This code [00:14:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m16s) is used to upload or it's part of the process, there is much more code but this is what I need to reuse quite often. I improve this in many areas and then I would always have to come back here(JavaScript). There are certain text that differs from each place. For example that word teaser, needs to be different everywhere else and the word image. Sometimes it must be [00:14:48](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m48s) images and not just image. What I've done, is I've actually taken this code, I've added it to a custom code. I have set, this is JCB manual, and everywhere where I want dynamic script updates, I've added the 'arg' values. If you want to understand more about the 'arg' values just read this note above here. To make it simply [00:15:19](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) arg. These arg areas is like placeholders. I can pass strings or values via this custom code placeholder and it gets updated on the fly during compilation everywhere where I used this code snippet elsewhere in JCB. [00:15:44](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m44s) This gives me a little bit of that object orientated feeling where I write a function or a piece of script once, then I can reuse it everywhere else, and simply update the values being passed to it. It's by far not error proof there, you can't use any commas, and plus signs in these values. It needs to be [00:16:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m15s) one word. It can have a dollar sign if you want to have it place a dollar sign symbol in the code, but it doesn't execute the string that you pass. It will literally just pasted in wherever you've placed this arg placeholder. You can add as many values to this arg values as you want. Always make sure that the amount of values that is in the code must correspond to the amount of values that you are passing to it. [00:16:54](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) Otherwise you would end up having a certain area of the code, the arg placeholder will not be replaced with anything it will stay like that if they doesn't have a value for it. Now what I'm doing is, back into the field, I add the placeholder here. Since it is id 1, I am passing three values to it, [00:17:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) image, image and teaser. Which will then correspond to the replacing arg values here. So that 0 would be image, this 1 value here would be image, and this 2 would be teaser. It will actually replace it on compilation. Now I'm able to reuse this code anywhere else in JCB. So far I have saved this previously. I'm going to close it and open another one. [00:18:03](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s) I've got one here called poster. Which is basically doing the same thing. Now I'm also passing image, image and then poster. That means on this area it will change that 2 arg value which is actually the third one. It will update it to poster instead and so I have [00:18:29](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m29s) the ability to have dynamic code in custom code, which can be reused all over JCB. -Otherwise you would end up having a certain area of the code, the arg placeholder will not be replaced With anything it will stay like that. If there doesn't have a value for it. Now what I'm doing is, back into the field, I add the placeholder here. Since it is id1 obviously it's that one number one and I am passing three values to it [00:17:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) Image image and teaser Which will then correspond to the replacing arg values here So that 01 would be image This one value here would be image and this one would be teaser So it will actually replace it on compilation and now I'm able To reuse this code anywhere else In in JCB So far I obviously have saved this previously I'm gonna just close it now and just open another one [00:18:03](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s) I've got one here called poster Which is basically doing the same thing And so now I'm also passing image image and then poster so That means now on this Area It will actually Change that second Arg value which is actually the third one It will update it to poster instead And so I have [00:18:29](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m29s) Somehow the ability to now have dynamic Code in custom code which can be reused all over JCB The only negative thing currently Is that This kind of code that actually has Dynamic values past To it Will not be updated By any changes you make in the editor outside of JCB so if you think about the [00:18:58](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m58s) Two functions you'd realize that they do not fully merge at this stage But Let me say this if you Have a snippet of code which has None of these Arg For example if you only used It like this Without any place holders like that Sorry without any extra values now that code will be actually Replaced If you make any changes to it in the editor [00:19:32](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m32s) So it will Start behaving like the initial implementation it it will place it back into the component With that inserted tag above it and if you put the diamond in like we explained you know it will get this inserted tag sorry not that one this one So if you if you have a custom code To which you not passing any values Then it will add this inserted around it and you can then in the editor Add a diamond in there so that looks like this And then on compilation it will update that code in JCB and then place it back into The new compiled component [00:20:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m16s) So That still works And I think it's amazing that it does but Unfortunately the moment you pass any arguments to it Like so then we know that there are Arg placeholders in the Script like that And since the script is now being used at multiple areas with multiple values Now let's say you change one of them You don't really want it to replace the the database script because How will we know where these arg placeholders should be placed [00:20:53](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) The code at that stage has nothing, no reference whatsoever to these arg values Now there is an idea busy formulating Which we would Ideally Move All the arg values Up Above your script Like this Maybe put some [00:21:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m14s) Convention of arg's you know, wait Like that and then arg and then equal And then wait sorry Then change this to Value Bar in this case because it's JavaScript And That could possibly start resolving the issue [00:21:45](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) I'm still working on it which then we would only really not update this area In the data in the database But update the whole rest so you would then in that case use value Where ever arg0 is to be found Like that Then we need only take care of this area and this area can be done dynamically updated I haven't actually Find a complete Satisfaction with this solution [00:22:22](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) I'm still working on it But I can guarantee you That it is something I would like to be able to do is to make a change to it in the editor and it Also updates it here in the database I think that would be excellent But for now Any code with args As long as this note remains here I think we said here that if there is any change to these limitations These notes will change So the next time you open it and you see the note is different you would be as happy as we are with the [00:22:56](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m56s) Advance and so that that is really the other Feature that we've now add Basically creating custom code and then reusing it across Multiple areas of your component Without Without the The old complexity of needing to update it every where again obviously you need to know your PHP and whatever language you are Targeting with this custom [00:23:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m28s) Code well enough So that you By this place holders and by everything else that it actually works If it does not work that debugging and everything unfortunately is is your responsibility there is another thing that is still functional though I think I didn't mention it Yet and that's the component placeholder And the view placeholder if if this specific script Is gonna end up somewhere under a specific View This one actually doesn't [00:24:02](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m02s) Wait it does actually because your field script this field script it gets added to the view footer right so Then you have a view placeholder which basically is just also three brackets View Like that and three brackets So that's how you could then do a view Dynamic update Of anything you know if you if you need to use to view a string name any where in the script okay so that means you have component Obviously with the uppercase [00:24:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s) And the all uppercase and all that Variations And you have the view unfortunately only That current view that is being targeted Will be added to that place holder In lowercase so that that is Demonstrating the Well I've demonstrated actually actually demonstrated So we have got these there I'm just gonna not save it because None of the changes here is relevant [00:25:11](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m11s) And then I will compile this now And then In the code show you where it's been added Ok A component that it's Using That at the moment is registry Ok so I'm gonna install it now So let's go look at the code where it should have been added [00:25:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) So in the code we see there the image is being updated with image Teasers have been placed there images been placed There As well as in all the other areas where we had those arg placeholders they've all been updated And the code itself has been inserted in the correct area Well That is custom code in a little different implementation of it We've called that The [00:26:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m14s) JCB manual option If you wanna know more about the hash automation option Then please watch the previous Tutorial On YouTube Thank you for watching +### Differnce Between Editor Changes And Custom Code Changes + +The only negative thing currently is that this kind of code that has dynamic values past to it, will not be updated by any changes you make in the editor outside of JCB. If you think about the [00:18:58](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m58s) two functions you'd realize that they do not fully merge at this stage. Let me say this if you have a snippet of code which has none of these arg, for example if you only used it like this, without any extra values, that code will be replaced, if you make any changes to it in the editor. [00:19:32](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m32s) So it will start behaving like the initial implementation. It will place it back into the component with that inserted tag above it, and if you put the diamond in like we explained, it will get this inserted tag. If you have a custom code to which you not passing any values, then it will add this inserted around it and you can then in the editor add a diamond. And then on compilation it will update that code in JCB and then place it back into the new compiled component. [00:20:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m16s) + +That still works, and I think it's amazing that it does, but unfortunately the moment you pass any arguments to it, like so(see video), then we know that there are arg placeholders in the Script like that. And since the script is now being used at multiple areas with multiple values. Now let's say you change one of them, you don't really want it to replace the database script, because how will we know where these arg placeholders should be placed. [00:20:53](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m53s) The code at that stage has no reference whatsoever to these arg values. Now there is an idea busy formulating which we would ideally move all the arg values up above your script. (see video)Like this maybe put some [00:21:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m14s) convention of arg's, like that and then arg and then equal and then change this to value var, in this case, because it's JavaScript and that could possibly start resolving the issue. [00:21:45](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) I'm still working on it. Which then we would only really not update this area in the database. But update the whole rest so you would then in that case use value where ever arg0 is to be found. (see video)Then we need only take care of this area and this area can be dynamically updated. I haven't actually find a complete satisfaction with this solution. [00:22:22](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) I'm still working on it. But I can guarantee you that it is something I would like to be able to do, is to make a change to the editor and it also updates it here in the database. I think that would be excellent. But for now any code with args as long as this note remains here, I think we said here, that if there is any change to these limitations, these notes will change. Next time you open it and you see the note is different you would be as happy as we are with the [00:22:56](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m56s) advance. That is really the other feature that we've now add. Basically creating custom code and then reusing it across multiple areas of your component, without the old complexity of needing to update it every where again. You need to know your PHP and whatever language you are targeting with this custom [00:23:28](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m28s) code well enough so that you by this placeholders and by everything else that it actually works. If it does not work that debugging and everything unfortunately is your responsibility. + +There is another thing that is still functional though. I think I didn't mention it yet, that's the component placeholder, and the view placeholder. If this specific script is going to end up somewhere under a specific view, [00:24:02](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m02s) because your field script, this field script gets added to the view footer. Then you have a view placeholder which basically is just also (((view))). So that's how you could then do a view dynamic update of anything, if you need to use the view string name any where in the script. That means you have component with the uppercase[[[Component]]] [00:24:39](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s) and all uppercase and all that variations. And you have the view unfortunately, only that current view that is being targeted will be added to that placeholder in lowercase. [00:25:11](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m11s) I will compile this now and then in the code show you where it's been added. A component that it's using that at the moment is registry. I'm going to install it now. Let's go look at the code where it should have been added. [00:25:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) So in the code we see there the image is being updated with image. Teasers have been placed there, images been placed. There as well as in all the other areas where we had those arg placeholders, they've all been updated. The code itself has been inserted in the correct area. That is custom code in a little different implementation of it we've called that the [00:26:14](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m14s) JCB manual option. If you want to know more about the hash automation option, then please watch the previous Tutorial On YouTube.