diff --git a/032-JCB-manual-custom-code-implementation.md b/032-JCB-manual-custom-code-implementation.md index b8f3ff2..018bf6c 100644 --- a/032-JCB-manual-custom-code-implementation.md +++ b/032-JCB-manual-custom-code-implementation.md @@ -14,4 +14,16 @@ There are two ways in which the code is added. I have explain that in the previo ### GitHub Explanation For Update And Insert Issue 37 -There is also a note on GitHub about this which may be more logical. So here we are at Github. It's on issue 37 if you want to go look at it under the Joomla component on GitHub [00:06:55](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m55s) the component builder on GitHub. Basically to start inserting code, you would use this(///***[INSERT<>$$$$]***///) as a placeholder, then your code on a new line, then when you're finished this(///***[INSERT<>$$$$]***///) would close that code block. Sometimes you don't want insert code, you want to replace code that was generated by JCB. Then you'd use the replace code placeholder(///***[REPLACE<>$$$$]***///). And then again use this(///***[REPLACE<>$$$$]***///) one to end the code block. [00:07:25](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) Now when component builder on compilation discovers these tags(///***[INSERT<>$$$$]***///)(///***[REPLACE<>$$$$]***///), they get converted to from insert to inserted and from replace from replaced. It adds it back without this diamond(<>) between those dollar signs and inserted text or replaced text. [00:07:55](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m55s) It removes them because basically by doing that it means that this code doesn't need to be updated The moment to add those two back In there between those 2 Values Then the next time component Builder compiles It actually knows ok this piece of code I need to check again and update Whatever is in the database because it's been changed [00:08:25](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m25s) This diamond here tells it There is a change you need to update Now You will see that now there is this new number being added next to the The code That number Is actually the ID Of the data Database Column sorry Row the database row [00:08:49](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) That JCB Is Actually stored the code in So if you change this number You gonna Yeah you gonna have a problem So don't change this number JCB put this number in So that he can Basically know where to go update the code in the database so Once you've made any changes to the code you would simply at this diamond back in that's quite important otherwise it will not be [00:09:18](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s) Be parsed and it will be overwritten by what's in the Database So That's really it that was the initial purpose of this new feature was to be able to in the Editor create code and then on the fly have it become part of the JCB Infrastructure For your component And then in the future it will continue adding that code back in Without you having to write it Or [00:09:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m47s) Remembered or in anyway And if you wanna change the code you just add these Diamonds either for the insert or for the replace depending on what you did And it will automatically then know there's been a change and it will first update what is in the data Base and then store it back Into the new compiled version So That is exciting in itself I realize [00:10:12](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m12s) It's a It's a real stunning new feature We have been doing some teething on some of its implementation if you even read down here There's some comments and things we are at the moment at version 2.3.2 which is not yet released I'm busy working on it Because this new version 2 3. Sorry 2.3.2 Will include [00:10:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m41s) The extra feature which wasn't Ever Really discussed here on the Forum Because it was a feature that I've been Hoping for Quite some time You know I've actually build quite a number of components with JCB by now And I've always had this issue that I would develop a very smart Function A custom script obviously inside of some view or some field or somewhere In JCB and then I would like to use it again elsewhere [00:11:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m15s) But then I have to copy it And go pasted there And it will happen that I would improve it there you know it Add this little thing there and I Sort of debug this Improve the whole function the whole maybe just pieces script or whatever I just improves it And then it where I took it from does I need to know copy again back there and it It's always this Copy and move and then obviously there's variables inside that needs To be different names [00:11:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m47s) And This always been a Yeah Very unpleasant Experience And so since I know of object orientated concepts I've always wondered Is there a way for me to with JCB create the Same kind of In a small way of course But give that some kind of functionality [00:12:09](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m09s) And so when this new improvement came along Immediately thought Well yes there is actually there is a Way for us to make this work for both both of these aspects so what did we do Well I Let me see where we I created The option for you to Either I used the hash automation Which is the one I've just explained or to use the JCB manual [00:12:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m47s) Now JCB manual if you setup custom code The JCB manual Will do exactly that It will literally create The option For you To take This place holder For example And I have a field let me open it [00:13:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) Ok sorry about that Where Have a few jumps there I had to open the field So basically I have a field here with which I upload images so that will drag and drop Field is actually and note as you can see but I'm using some HTML in the Description and I've added some JavaScript To this footer of wherever does field is being used So Basically this code [00:14:16](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m16s) Is used to upload Or to it's part of the process this much more code but this is what I need to Reuse quite often And so Improve this in many areas and then I would always have to come back here and there are certain Ask a sorry text The differs from each Place for example that word teaser It's a bit 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 And so what I've done now is I've actually taken This code I've added it to a custom code Obviously I have set this is JCB manual And I everywhere where I want Dynamic Script updates I've added the Arg values If You Wanna understand and more about the Arg values Just read this note above here for basically in To make to say it simply [00:15:19](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m19s) Arg These arg areas is like placeholders And I can pass strings or Values Via this custom Code placeholder and it gets updated on the fly during Compliation everywhere where I used this Code snippet else in elsewhere in in JCB So this [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 And then I can reuse it everywhere else And simply update the values being passed to it so it's it's by far not Not error proof there if you Obviously you can't use any commas in these values and you can't use any 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 wanna actually have it Place A Dollar Sign symbol in the code but it obviously doesn't Execute the string that you pass so it will literally just pasted in Wherever you've placed this arg place holder So you have got you can add as many Values to this custom code I'm in arg values As you want but always make sure that they're mounted 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 there doesn't have a value for it Ok so now what I'm doing is back into the field I basically Add the place holder 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 +There is also a note on GitHub about this which may be more logical. So here we are at Github. It's on issue 37 if you want to go look at it under the Joomla component on GitHub [00:06:55](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m55s) the component builder on GitHub. Basically to start inserting code, you would use this(///***[INSERT<>$$$$]***///) as a placeholder, then your code on a new line, then when you're finished this(///***[INSERT<>$$$$]***///) would close that code block. Sometimes you don't want insert code, you want to replace code that was generated by JCB. Then you'd use the replace code placeholder(///***[REPLACE<>$$$$]***///). And then again use this(///***[REPLACE<>$$$$]***///) one to end the code block. [00:07:25](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) Now when component builder on compilation discovers these tags(///***[INSERT<>$$$$]***///)(///***[REPLACE<>$$$$]***///), they get converted to from insert to inserted and from replace from replaced. It adds it back without this diamond(<>) in between those dollar signs and inserted text or replaced text. [00:07:55](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m55s) It removes them because basically by doing that, it means that this code doesn't need to be updated. The moment you add those two back in there between those 2 values, next time component builder compiles. It actually knows this piece of code I need to check again and update whatever is in the database, because it's been changed. [00:08:25](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m25s) This diamond here tells it. There is a change you need to update. You will see that there is this new number being added next to the code. That number is actually the id of the database row [00:08:49](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m49s) that JCB is actually stored the code in. So if you change this number, you are going to have a problem. So don't change this number. JCB put this number in that he can know where to go update the code in the database. Once you've made any changes to the code, you would simply add this diamond(<>) back in, that's quite important otherwise it will not be [00:09:18](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m18s) be parsed, and it will be overwritten by what's in the database. That's the initial purpose of this new feature, was to be able in the editor, create code and then on the fly, have it become part of the JCB infrastructure for your component. Then in the future it will continue adding that code back in without you having to write it, or [00:09:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m47s) remember it. If you want to change the code you just add these diamonds(<>) either for the insert or for the replace depending on what you did. It will automatically know there's been a change and it will first update what is in the database, and then store it back into the new compiled version. That is exciting in itself I realize [00:10:12](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m12s) it's a real stunning new feature. We have been doing some teething on some of its implementation. You can even read down here. There's some comments and things. We are at the moment at version 2.3.2 which is not yet released. I'm busy working on it because this new version 2.3.2 will include [00:10:41](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m41s) the extra feature which wasn't ever really discussed here on the forum. Because it was a feature that I've been hoping for quite some time. I've build quite a number of components with JCB by now. I've always had this issue that I would develop a very smart function, a custom script, inside of some view or some field or somewhere in JCB. I would like to use it again elsewhere [00:11:15](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m15s) but then I have to copy it, go pasted there. And it will happen that I would improve it there. Add this little thing there and I debug this. Improve the whole function, maybe just pieces script or whatever, I just improves it. And then it where I took it from does I need to know copy again back there. It's always this copy and move and then obviously there's variables inside that needs to be different names. [00:11:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m47s) This always been a very unpleasant experience. + +### Custom Codes In JCB + +Since I know of object orientated concepts, I've always wondered is there a way for me to with JCB create the same kind of in a small way of course, give that some kind of functionality. [00:12:09](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m09s) When this new improvement came along immediately thought yes there is a way for us to make this work for both of these aspects. What did we do? Well I created the option for you to either I used the hash automation, which is the one I've just explained or to use the JCB manual. [00:12:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m47s) + +### Placeholder + +Now JCB manual if you setup custom code, the JCB manual will do exactly that. It will literally create the option for you to take this placeholder(customcode). For example I have a field, let me open it. [00:13:47](https://www.youtube.com/watch?v=KiAtJawZ3oo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) I have a field which I upload images. + +* ### 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) 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 place holder 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