Add js library to GBC customization

[Alessandro (Efisio) R.]

Hi,

I have already set up the GBC project environment and "compiled" a few simple customization.
What about adding for example a javascript library to the project for customizing the MESSAGE/ERROR instruction rendering?
I used to include js and css file into the html code, but in this project i really don't know how to achieve that and I haven't found anything about in the documentation.
Could someone please explain me if it's possible and how to do it?

Thanks

[Susobh S.]

Hi Effisio,

I had the exact same requirement, i wanted to add jquery js files.
Im not sure if my solution is the correct one,  but below is what ive done

You may go to your customisationProject directory
And go to src/bootstrapParams.tpl

And You may add a script tag at the bottom and add your required file

I have added the jquery js files likewise and works perfectly

You may try.

Not sure if editing the bootstrapParams.tpl is the correct solution, anyway above works


Thanks And Regard
Susobh Sugathan

[Susobh S.]

Hi Effisio,

Just to add to my previous comments.
For above solution, every time you need to add a new js file/library, you will need to modify the bootstrapParams.tpl file.

But there is another solution by modifying the 'grunt'  building scripts, so that you can place all your custom js libraries in one specific directory, and then during the grunt process, all the files will automatically be copied to the distribution directory and also all the required <script> tags will be added to the index.html as required.
You will just need to copy your required js libraries to a predefined path under your customization project path.

But as I said, this is by modifying the grunt scripts, and by this we are running into a problem, where by every time you upgrade your GBC, you will need to change the grunt scripts manually, so as your new changes are applied to the new GBC build.

If you are interested, please let me know, I can give you the required changes in grunt scripts.

Thanks And Regards
Susobh Sugathan

[Alessandro (Efisio) R.]

Thanks Susobh!
If I've understood correctly, I have to edit the bootstrapParams.tpl file in src directory since, even if I copy it into my customisation directory, it's not taken into account  when running grunt.
As for libraries files, I have to copy them to the dist customisation directory every time I run grunt.

[Reuben B.]

I wonder if there is some over-complication going on.

The request is to "What about adding for example a javascript library to the project for customizing the MESSAGE/ERROR instruction rendering?"

My first thought is that this is case of customising a widget as per  http://4js.com/online_documentation/fjs-gbc-manual-html/howdoi/customization/index.html, the widget in this case being the Message widget http://4js.com/online_documentation/fjs-gbc-manual-html/classes/classes.MessageWidget.html.

Reuben

[Alessandro (Efisio) R.]

I wonder if there is some over-complication going on.

The request is to "What about adding for example a javascript library to the project for customizing the MESSAGE/ERROR instruction rendering?"

My first thought is that this is case of customising a widget as per  http://4js.com/online_documentation/fjs-gbc-manual-html/howdoi/customization/index.html, the widget in this case being the Message widget http://4js.com/online_documentation/fjs-gbc-manual-html/classes/classes.MessageWidget.html.

Reuben

Thanks Reuben!
As you thought correctly, of course there is an over complication going on.
Just to try some alternative way to show messages, I wanted to replace the gbc message with a third party library one, but the first problem I came across is the z-index property of the third party library message item.
I gave up on this attempt, also because my javascript knowledge is little.
However, for other purposes, if you know a standard method to include some libraries into a customisation project please tell us.

[Leo S.]

Hi Efisio, you might explain what exactly you want to achieve by replacing the build-in message with a custom one.
If its more than colors/borders , so positioning and on screen time this might scratch the new feature area.
Are you perhaps after positioning the MESSAGE/ERROR near the current field ?
Regards, Leo

[Alessandro (Efisio) R.]

Hi Efisio, you might explain what exactly you want to achieve by replacing the build-in message with a custom one.
If its more than colors/borders , so positioning and on screen time this might scratch the new feature area.
Are you perhaps after positioning the MESSAGE/ERROR near the current field ?
Regards, Leo

Hi Leo!
I had nothing specific in mind, I just wanted to do some tests/examples.
For example I used Animate.css, in addition to other libraries, when developing a web application (non genero), maybe it could be interesting to use it in a GBC customisation.
What do you think?

[Leo S.]

Hi Efisio, my advice would be more conservative :
IMHO its very easy to break the GBC by adding custom CSS at the wrong place.
I never worked with Animate.css , but regardless which kind of CSS you add: it might has an impact on your existing widgets.
So you really need expert level to achieve something successful.
So I'd rather recommend to follow the "How do I. " guides and try to understand the intrinsics of GBC step by step.
If you feel something is missing in the "How do I .." guides , ask the support for filing a feature request.
Regards, Leo

[Susobh S.]

Hi,

I have been using Animate.css (https://daneden.github.io/animate.css) in my GBC project for quite some time, and so far no issues found.

You can add any custom css to your GBC customization. Below is what i did.

1. Download the required css file
2. Change Extention to scss (eg: Animate.scss)
3. Copy the scss file to [GBC_CUSTOMIZATION_DIR]/sass
4. Edit [GBC_CUSTOMIZATION_DIR]/sass/customization.scss and add a line at bottom to add the new scss file
    @import "Animate.scss";
5. Use the required classes of the Animate.css in your customization.
6. Build GBC   


Thanks And Regards
Susobh Sugathan

[Alessandro (Efisio) R.]

Hi Efisio, my advice would be more conservative :
IMHO its very easy to break the GBC by adding custom CSS at the wrong place.
I never worked with Animate.css , but regardless which kind of CSS you add: it might has an impact on your existing widgets.
So you really need expert level to achieve something successful.
So I'd rather recommend to follow the "How do I. " guides and try to understand the intrinsics of GBC step by step.
If you feel something is missing in the "How do I .." guides , ask the support for filing a feature request.
Regards, Leo

Thanks Leo, so, as I stated before, handling this kind of customisations requires mastering javascript.
I'll keep in mind asking for specific guides when I will have concrete ideas.

Hi,

I have been using Animate.css (https://daneden.github.io/animate.css) in my GBC project for quite some time, and so far no issues found.

You can add any custom css to your GBC customization. Below is what i did.

1. Download the required css file
2. Change Extention to scss (eg: Animate.scss)
3. Copy the scss file to [GBC_CUSTOMIZATION_DIR]/sass
4. Edit [GBC_CUSTOMIZATION_DIR]/sass/customization.scss and add a line at bottom to add the new scss file
    @import "Animate.scss";
5. Use the required classes of the Animate.css in your customization.
6. Build GBC   


Thanks And Regards
Susobh Sugathan

Thanks Susobh, I will definitely try this!