diff --git a/049-The-New-Library-Manager-Area.md b/049-The-New-Library-Manager-Area.md index 99b9bf5..a709247 100644 --- a/049-The-New-Library-Manager-Area.md +++ b/049-The-New-Library-Manager-Area.md @@ -65,5 +65,9 @@ Let's link the Library to a View. I'm going to go to Site View. I'm going to go Let me show you that quickly. You can go to Snippets, you don't really need to go to Snippets. The Uikit Snippets are still being shipped, [00:15:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m32s) but not the Bootstrap v4 Snippets. You then click on Get Snippets, select Bootstrap v4 and it will then load all the Bootstrap v4 Snippets that are available to the community. You can then either use bulk import or you could import individual Snippets for Bootstrap v4. Once it's ready it will show you which ones are new. I'm going to add Bootstrap v4 - (Alert)Alerts - Heading, Get snippet. [00:16:02](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m02s) Say yes I want to do that. It's installing it. I'm also going to take that one Bootstrap v4 - (Alert)Alerts - Danger, It says would you like to add it? Yes OK. I've install two Bootstrap Snippets. The way to install all of them since there's so many, Is the use the bulk option. So you could actually come here to Bulk. You will see that it has the Get All New Snippets and you can click on it and it will install all of the the Bootstrap Snippets. [00:16:37](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m37s) That is the quick way of getting Libraries Snippets into your system and installing them just by clicking on Get Snippet. It will do that for you. ### Site View + +Let's go back to Site Views. Again open the Looks area. If I select in Libraries, Bootstrap [00:17:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m05s) then you'll see those two Snippets that I've installed and I can click between them. That's just for you to get the snippet and to be able to add it into your code wherever you would like it to be. I'm going to do that. + +### Adding The Library ?? -Let's go back to Site Views. Again open the looks area So now if I select Bootstrap [00:17:05](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m05s) Then you'll see those two Snippets that I've installed And I can Click between them and really that's just for you to get the snippet And to be able to add it into your You know into your code Where ever you would like it to be like that Ok so I'm gonna do that I'm just gonna demonstrate Adding the library so selecting the library here [00:17:29](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) Is what will add the library to the component and actually to this view So you can select Multiple libraries for one View But there could be a problem with that if you for example want Uikit version 2 and Uikit Version 3 on this page but you want to have it Only use the one or the other based on certain switches in the global options of the component Now Uikit version 2 was set to fall back to the internal Build-in option [00:18:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m04s) And Uikit Version 3 was said to fall back to Always add So if we just look at that Ok so that's Always Add and Built-in Now you want to Actually have both libraries under the page But you wanted to work within some custom implementation the way to do that is to click on new And use the bundle option [00:18:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m32s) Select Those two libraries Like that Decide how you want to do it so it will be possibly a custom script Or it will be a conditional one Which you will then have to create Obviously let me just say this So we could call those Uikit Bundle Let's call it Uikit like that [00:19:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m06s) And save Now Once you've saved it once You should now add the actual files So You would go to folders And then At Uikit 3.... wrong button Uikit 3 and Uikit 2 [00:19:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m39s) ......... And you wanna add them to the media folder So You'll have to still link the files remember selecting those libraries Doesn't inherently clone it's Files You'll need to still manually add the files so now we've got version 3...... Why is this so difficult here we go [00:20:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m07s) The screens not working along here Ok you like it Version 3 and version 2 And save and close So now We have The files And here they are as folders And it shows you all the files and folders That are found inside of those two folders that you've added So [00:20:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) Yeah I think it's little difficult you cannot see which version is which here This might be a A good option to add Maybe the folder the name here I think that will be In the next release we will make that change But I think the other option which is also ideal for this kind of implementation is a custom scripting Which you could still create The the the configed files Fields excuse me [00:21:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m04s) So when it when it's this Uikit version 2 is selected it will load the Uikit version 2 files But you must understand if you create the buttons it will be added to the component But if you use custom script And in here in the behaviour you write the custom script You need to Let me just show you in the file So in the file You see that it actually puts the parameters [00:21:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m36s) In params this params So You will need to down here Get The Uikit The switch the the button name That you now Have created to the configed fields You then get the value put it into a variable And then based on that variable [00:21:59](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m59s) You would either Add the file or not add the file So you'll basically write this script If I was to Just copy this is an example All the way up there And go here paste This is basically what the custom script should look like But that means that you created In the library config you created buttons [00:22:30](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m30s) With those names right And that the values are related to these values here The HeaderCheck option Is something that if you go into the file you go look at the PHP you might understand how to Use this And so the HeaderCheck at this stage always being loaded If you don't wanna use the edit check then you just you know just don't use it But you could go and and try and figure out how the HeaderCheck works And then use it [00:23:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m06s) anyway so that is Making a bundle Now let me save this as an example And so now we got this Uikit And it's a bundle If we go back to the site View And we open that up again We will now instead of creating this one and that one we will just create Select that bundle instead And that bundle will give me [00:23:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m32s) Uikit version 2 snippets it and if we have any version 3 snippets installed it will also load that for me So I will be able to work with both libraries Why selecting is bundled Library option and JCB when it compiles He will basically use the custom script that you wrote in the Bundler To add it to the view so let me Show you that so I'll save and close here And let's go back to the library quickly And just do something silly to the code [00:24:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m10s) So that you will actually see it's implementation I am just gonna add These bunch of lines here Save and close And then let's compile this and install Ok let's look at the code So now you see that it's added in this library files Obviously it's also added in The [00:24:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m43s) Originals because We haven't set that button to show let me just show you What I mean In the component You need to change the version Of the old library implementation You need to change that So now You need to change this from adding Uikit version 2 To basically to dynamic [00:25:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m10s) Save and close No if we compile it now you will see it will not add the That Code To the file twice You're basically just add that Uikit bundled Code that we wrote Ok let's look at the code So now We see that it only added the code that we wrote [00:25:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m38s) And then Remember in the file we added this as custom script So we need to go remove this In the View Where we added this in So in the view we added these custom script We actually didn't need to add the spaces And we do have a little bit of a A discrepancy there [00:26:08](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m08s) Ok I'm gonna escape this just that you can see We don't need to add this in this way anymore We can go here And Basically do that we still want that Bundler in there as well Ok so we don't need to do this anymore We can just [00:26:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m35s) Basically select Bootstrap Save and close And then I'm gonna run the compiler again There we go If you look at it hear we see that there is that escaped code that we removed And here is this code that JCB added remember I said to you that We basically in JCB We are Linked in If we look at the library might not here [00:27:12](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m12s) Let's go here The Bootstrap 4 library we set Always Add And we basically linking it from a link right and we just said local get Now if we look at the code We see that it wrote For us this Path So now let's check if it actually did add the path correctly So we wanna go to the media area of the [00:27:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m43s) Program And go to ......... Demo And so We see it created the Bootstrap folder And added the files According to the path That it also set here so that it is really implementing the get Option [00:28:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m07s) For the libraries And all you really did is you just linked it to this view This does give another situation where To every view that you want is pacifically library to be available You need to link it To that View Which wouldn't be a problem If you created a view now and just add your library and then add the Snippets Then I mean then you're starting a fresh and you will actually select the right views you want to use But if you since you haven't done this before all the components [00:28:46](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m46s) If you wanna use a library in the view You have to go and add it Or you just have to Basically in the components area fall back On the old way of implementing The the libraries that are built into JCB so that means the old implementation still work If you If you basically set it here to Add both Uikit version 1 and 2 and 3 [00:29:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m19s) And also Maybe to add food table version 2 those Implementations still work And doing that will add it to every custom and admin view where it's used Sorry Custom insite view custom admin view site view template layouts So that that's the old way and that still works it's just that when you want to start using like Bootstrap 4 You'll have to actually link it to the custom admin view or site view or template layout [00:29:53](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m53s) Where you want That specific library to be available So View link in Bootstrap over here Then it will be available to this layout and to every view where this layout is Used Ok so that's the quick and demonstration of the new Libraries implementation We call it a library manager [00:30:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m19s) Because of The Diverse ways of you linking in the files and so forth We really hope that you Understood then are able to enjoy this new implementation We want to Make it possible for you to add libraries And then basically share that snippets With the rest the community So those of you that interested in doing that Please watch some of the previous tutorials about Snippets and the snippet manager Because [00:30:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m50s) I think doing this will not only help everyone else in the community but also get your name I'm out there I get people connected with with each other Anyway Thank you for watching +I'm just going to demonstrate adding the library. Selecting the Library, [00:17:29](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) is what will add the Library to the Component and to this View. You can select multiple Libraries for one View. But there could be a problem with that if you for example want Uikit v2 and Uikit v3 on this page but you want to have it Only use the one or the other based on certain switches in the global options of the component Now Uikit version 2 was set to fall back to the internal Build-in option [00:18:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m04s) And Uikit Version 3 was said to fall back to Always add So if we just look at that Ok so that's Always Add and Built-in Now you want to Actually have both libraries under the page But you wanted to work within some custom implementation the way to do that is to click on new And use the bundle option [00:18:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m32s) Select Those two libraries Like that Decide how you want to do it so it will be possibly a custom script Or it will be a conditional one Which you will then have to create Obviously let me just say this So we could call those Uikit Bundle Let's call it Uikit like that [00:19:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m06s) And save Now Once you've saved it once You should now add the actual files So You would go to folders And then At Uikit 3.... wrong button Uikit 3 and Uikit 2 [00:19:39](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m39s) ......... And you wanna add them to the media folder So You'll have to still link the files remember selecting those libraries Doesn't inherently clone it's Files You'll need to still manually add the files so now we've got version 3...... Why is this so difficult here we go [00:20:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m07s) The screens not working along here Ok you like it Version 3 and version 2 And save and close So now We have The files And here they are as folders And it shows you all the files and folders That are found inside of those two folders that you've added So [00:20:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m35s) Yeah I think it's little difficult you cannot see which version is which here This might be a A good option to add Maybe the folder the name here I think that will be In the next release we will make that change But I think the other option which is also ideal for this kind of implementation is a custom scripting Which you could still create The the the configed files Fields excuse me [00:21:04](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m04s) So when it when it's this Uikit version 2 is selected it will load the Uikit version 2 files But you must understand if you create the buttons it will be added to the component But if you use custom script And in here in the behaviour you write the custom script You need to Let me just show you in the file So in the file You see that it actually puts the parameters [00:21:36](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m36s) In params this params So You will need to down here Get The Uikit The switch the the button name That you now Have created to the configed fields You then get the value put it into a variable And then based on that variable [00:21:59](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m59s) You would either Add the file or not add the file So you'll basically write this script If I was to Just copy this is an example All the way up there And go here paste This is basically what the custom script should look like But that means that you created In the library config you created buttons [00:22:30](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m30s) With those names right And that the values are related to these values here The HeaderCheck option Is something that if you go into the file you go look at the PHP you might understand how to Use this And so the HeaderCheck at this stage always being loaded If you don't wanna use the edit check then you just you know just don't use it But you could go and and try and figure out how the HeaderCheck works And then use it [00:23:06](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m06s) anyway so that is Making a bundle Now let me save this as an example And so now we got this Uikit And it's a bundle If we go back to the site View And we open that up again We will now instead of creating this one and that one we will just create Select that bundle instead And that bundle will give me [00:23:32](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m32s) Uikit version 2 snippets it and if we have any version 3 snippets installed it will also load that for me So I will be able to work with both libraries Why selecting is bundled Library option and JCB when it compiles He will basically use the custom script that you wrote in the Bundler To add it to the view so let me Show you that so I'll save and close here And let's go back to the library quickly And just do something silly to the code [00:24:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m10s) So that you will actually see it's implementation I am just gonna add These bunch of lines here Save and close And then let's compile this and install Ok let's look at the code So now you see that it's added in this library files Obviously it's also added in The [00:24:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m43s) Originals because We haven't set that button to show let me just show you What I mean In the component You need to change the version Of the old library implementation You need to change that So now You need to change this from adding Uikit version 2 To basically to dynamic [00:25:10](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m10s) Save and close No if we compile it now you will see it will not add the That Code To the file twice You're basically just add that Uikit bundled Code that we wrote Ok let's look at the code So now We see that it only added the code that we wrote [00:25:38](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m38s) And then Remember in the file we added this as custom script So we need to go remove this In the View Where we added this in So in the view we added these custom script We actually didn't need to add the spaces And we do have a little bit of a A discrepancy there [00:26:08](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m08s) Ok I'm gonna escape this just that you can see We don't need to add this in this way anymore We can go here And Basically do that we still want that Bundler in there as well Ok so we don't need to do this anymore We can just [00:26:35](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m35s) Basically select Bootstrap Save and close And then I'm gonna run the compiler again There we go If you look at it hear we see that there is that escaped code that we removed And here is this code that JCB added remember I said to you that We basically in JCB We are Linked in If we look at the library might not here [00:27:12](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m12s) Let's go here The Bootstrap 4 library we set Always Add And we basically linking it from a link right and we just said local get Now if we look at the code We see that it wrote For us this Path So now let's check if it actually did add the path correctly So we wanna go to the media area of the [00:27:43](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m43s) Program And go to ......... Demo And so We see it created the Bootstrap folder And added the files According to the path That it also set here so that it is really implementing the get Option [00:28:07](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m07s) For the libraries And all you really did is you just linked it to this view This does give another situation where To every view that you want is pacifically library to be available You need to link it To that View Which wouldn't be a problem If you created a view now and just add your library and then add the Snippets Then I mean then you're starting a fresh and you will actually select the right views you want to use But if you since you haven't done this before all the components [00:28:46](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m46s) If you wanna use a library in the view You have to go and add it Or you just have to Basically in the components area fall back On the old way of implementing The the libraries that are built into JCB so that means the old implementation still work If you If you basically set it here to Add both Uikit version 1 and 2 and 3 [00:29:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m19s) And also Maybe to add food table version 2 those Implementations still work And doing that will add it to every custom and admin view where it's used Sorry Custom insite view custom admin view site view template layouts So that that's the old way and that still works it's just that when you want to start using like Bootstrap 4 You'll have to actually link it to the custom admin view or site view or template layout [00:29:53](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m53s) Where you want That specific library to be available So View link in Bootstrap over here Then it will be available to this layout and to every view where this layout is Used Ok so that's the quick and demonstration of the new Libraries implementation We call it a library manager [00:30:19](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m19s) Because of The Diverse ways of you linking in the files and so forth We really hope that you Understood then are able to enjoy this new implementation We want to Make it possible for you to add libraries And then basically share that snippets With the rest the community So those of you that interested in doing that Please watch some of the previous tutorials about Snippets and the snippet manager Because [00:30:50](https://www.youtube.com/watch?v=rDjvgLYOt1o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m50s) I think doing this will not only help everyone else in the community but also get your name I'm out there I get people connected with with each other Anyway Thank you for watching