Javascript Libraries

Liberty Create
1

Is it possible to use javascript libraries in Code Studio ?

Either by referencing them from a remote source or loaded locally ?

Ill not get into the why and what but just wondered what was possible.

2

Just never had to do it before so don’t know what’s practical / possible.

3

Hi @Haydn.Haynes ,

Yes it is possible to use Third-Party Libraries in Code Studio - We have documentation available in the Community that describes how it can be achieved here: Third-Party Libraries

Hope this helps :slight_smile:

Important notice regarding the use of third-party libraries
Within Code Studio, it is possible to import and include third-party libraries within your bespoke components, which is fantastic for expanding their capabilities. However, it is your responsibility to maintain and update these third-party libraries in accordance with any required updates to ensure their security.

This responsibility is paramount because outdated or unpatched libraries can introduce vulnerabilities, potentially compromising the integrity and safety of the entire platform. By diligently managing these dependencies, you safeguard against security breaches, protect sensitive data, and maintain the trust and reliability that our customers expect from our platform.

Ensuring the security of third-party libraries is not just a best practice; it is essential for the overall health and resilience of the system.

4

Ali,

Much appreciated. I had a feeling I had seen this before somewhere but couldn’t immediately lay my peeps on it.

All understood about the potential pitfalls but its functionality I would like to incorporate into my application and don’t forsee ever writing it myself !!!

5

One more thing Ali ?

Can this only be used in frontend because ideally id like to use it in the main.js file

Also I cannot find any reference doc around cs.loadExternalComponent and in fact CS errors if I try to use it.

6

I’m definitely going to need more documentation on how to use this …. Since this is specific to Create could there be a fuller example of how this is supposed to work please.

I cannot get it to work. It just doesn’t seem to load my .js file at all although there are no errors until I try to start using it (instantiate an object based on it).

so my config.json now looks like this …

{

"main": "main.js",

"frontend": {

    "vue": \[

        "frontend/frontend.js",

        "frontend/main.htm",

        "frontend/styles.css"

    \],

    "preload": \[

       "https://cdn.jsdelivr.net/npm/fuse.js@7.4.2/dist/fuse.mjs"

    \]

}

}

I could load it locally but frankly it seems to make no difference either way.
My import in the frontend.js looks like this …

const Fuse = cs.loadExternalComponent(() => window.Fuse);

I’m pretty sure its my naivety but I have no idea how the above line even works. Does this target my specific import or does this just force load anything set in the preload section ?

The minute I try to instantiate anything based on it I get and error - Uncaught TypeError: Fuse is not a constructor

sample code snippet

const fuse = new Fuse(this.blacklist, {

keys: [‘name’]

});

const results = fuse.search(‘test’);

console.log(results);

Thanks

7

OK so I’ve made some progress and can now load and use the module.

I cannot however stop the following message appearing in the console logs

VM15237:1624 Uncaught ReferenceError: module is not defined
at :1624:1
at m (desktop.min.js?cv=2025.2.784:2:880)
at ce.globalEval (desktop.min.js?cv=2025.2.784:2:3031)
at Object.dataFilter (desktop.min.js?cv=2025.2.784:2:78614)
at desktop.min.js?cv=2025.2.784:2:77064
at l (desktop.min.js?cv=2025.2.784:2:77466)
at XMLHttpRequest. (desktop.min.js?cv=2025.2.784:2:80265)
at Object.send (desktop.min.js?cv=2025.2.784:2:80625)
at ce.ajax (desktop.min.js?cv=2025.2.784:2:76167)
at ce._evalUrl (desktop.min.js?cv=2025.2.784:2:78479)

8

Oh and my preload configuration is now for a local file - remote urls dont seem to work at all.

9

All immediate issues are now resolved.

10

just to make it clear ….

my config.json now looks like

{

"main": "main.js",

"frontend": {

    "vue": \[

        "frontend/frontend.js",

        "frontend/main.htm",

        "frontend/styles.css"

    \],

    "preload": \[

       "frontend/libs/fuse.js"

    \]

}

}

the js file is physically located in the CS package in /frontend/libs

The declaration of the library is actually in a script block inside main.html

It can only seemingly be used in the frontend for now but that’s fine for what I need it for. Ideally it would have been server side but it seems like that is not possible at this time.

11

Hi @Haydn.Haynes ,

Apologies for the delay! I’ve been on annual leave enjoying some sunshine :sun:

cs.loadExternalComponent is already explained in the document I provided.

However, it’s worth noting - you can use third party libraries in Main.js, as well as processors that do not have a frontend (e.g. Event Actions) - It’s just handled in a different way. This is something that wasn’t documented, so I’ve added some documentation about it to the same document in the section called “Importing in Processors”.

In short, it can be done using the require statement to import your library/helper file for use. Below is an example code snippet of a file being imported using the require statement, then utilised.

return {
    main: function (record_id, parameters, rule) {
        var example = require('./example.js');
        const date = example.now();
    }
}

Hope this helps :slight_smile:

12

No worries Ali.

I did get there in the end for my needs right now but the extra detail on importing (in non frontend scenarios) will be useful going forward.

Thanks again.