How to add a JS library to a reusable module
Application Type
Reactive
Platform Version
11.13.2 (Build 32392)

Hi, all.

I'm currently trying to create a reusable module that implementS the Heron Maps JS library.

My goal is to have an application that implements the library and makes available widgets that the users can use.

What I've already done:

  1. Created the Heron application with its Heron reactive web app module
  2. The Resources:
    1. Imported a couple of CSS and Images to Resources
    2. Updated the Target Directory of each resource to reflect the real location of each resource
    3. Imported all the necessary JS files to the Scripts folder
  3. The WebBlock:
    1. Created the Heron web block
    2. Set up the OnReady action to call the RequireScript on each of the JS files

My difficulties:

As the Resources always have the module's name prepended to its path (see image below), when I try to run the web block in an application, the paths called are relative to the current URL, which doesn't include the name of the module.

How can the CSS files request its images without I having to update each one to include the module name in its URL?

What the CSS have:

What I would have (and want to avoid) to do:


Hello Gustavo Nogueira,

This is really a good question.

I think with just with CSS you cant solve your issue, because "url()" cannot accept 2 css variables, for example:

background-image: url(var(--urlFinal));
--urlModule: <module url>;
--urlImage: <image path>;
--urlFinal: var(--urlModule)var(--urlImage);

With JS is possible, but you have maybe the same work as changing on the CSS the path.

Hope it helps,

Nuno R

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.