Custom JavaScript for a theme

Support
#1

Hi!
I know, one can create custom JS components to use in screens.
But, unfortunately, it’s not what I need.

So, what’s the proper way to add a custom JS file globally, to use it for theming purposes?

Many thanks in advance!

#2

What I have now:

  1. Created an empty custom Toolkit UI JavaScript Component.
  2. Included a jquery.js alongside with a default connector JS file.
  3. Wrote my jQuery in the …connector.js file.
  4. Imported my custom JS component into mainWindow component.
  5. …
  6. Profit :slight_smile:

PS: I am OK with this solution, but was wondering if there is an appropriate one.
Thanks.

#3

Hi,

In order to include JS globally, you can create a bean that extends CubaBootstrapListener:

public class MyBootstrapListener extends CubaBootstrapListener {

    @Override
    public void modifyBootstrapPage(BootstrapPageResponse response) {
        super.modifyBootstrapPage(response);
        
        Element head = response.getDocument().getElementsByTag("head").get(0);

        // Include JS to HTML, for example: "VAADIN/webjars/mylib/0.1/lib.js"
        String pathToLib = "VAADIN/webjars/path/to/webjar/resource";
        includeScript(pathToLib, response, head);
    }

Register it in web-spring.xml:

    <bean id="cuba_BootstrapListener"
          class="com.company.demo.web.manifest.MyBootstrapListener"/>
2 Likes
#4

Hi, Yuriy. Thanks for the reply.
I am using CUBA v 6.10 and I have no such class “CubaBootstrapListener” to extend.
Are you referring to the newer version?

#5

It is com.haulmont.cuba.web.sys.CubaBootstrapListener:

1 Like