How can I load an external script in ui-builder with custom code block

[Dennis_Nelson1 (Dennis Nelson)]

The new custom code block is super cool. Thanks for that. I can’t figure out how to do the following though:

I want to load an external script and use it. As an example I have the following attached to the on page enter event. The script (moment js) appears to load, but when I try to call a function it says moment is not defined.

[mark-piller]

Hi Dennis,

Please try the following:

const someLib = await BackendlessUI.requireModule( ['https://complete-url-to-your-js-file.js'])
someLib.someMethodFromTheLib()

Let me know if this works for you.

Regards,
Mark
p.s. we’re working on a document describing various approaches to load external scripts or npm modules

[Dennis_Nelson1 (Dennis Nelson)]

Thanks Mark, but it gave this error:
bundle.js:17 Uncaught (in promise) TypeError: BackendlessUI.requireModule is not a function

[mark-piller]

Are you using it in UI Builder or business logic (Cloud Code)?

[Dennis_Nelson1 (Dennis Nelson)]

UI Builder

[mark-piller]

Thanks, Dennis. We’ll look into it.

[vladimir-upirov]

Hello @Dennis_Nelson1

try to refresh the browser page where the UI-Builder is running in order to get the latest UI-SDK

[Dennis_Nelson1 (Dennis Nelson)]

It works now. Thank you! This is a great feature.

[vladimir-upirov]

@Dennis_Nelson1

Btw, the requireModule won’t accept brackets in the nearest releases since the methods can require only one module so using an array doesn’t make any sense.

I just released a new UI-SDK that temporary accepts both variants (with and without brackets), here is the correct example:

const someLib = await BackendlessUI.requireModule('https://complete-url-to-your-js-file.js')
someLib.someMethodFromTheLib()

[Dennis_Nelson1 (Dennis Nelson)]

@vladimir-upirov Thanks for letting me know. I removed the brackets from my code and it is still working.

[Klaas_Klever]

@mark-piller

p.s. we’re working on a document describing various approaches to load external scripts or npm modules

Hi @mark-piller ,
Where will this document be published?
Regards,

[Marina.Rudenko]

HI, @Klaas_Klever

We’re about to add an article to our blog post describing how the custom block component works and describing examples of its use. As soon as this article is available you will be notified by email.

Regards,
Marina

[William_Lee]

Is this article available?

[Alexander_Pavelko]

Hello @William_Lee!

I think these articles might help you:

How to import an external CSS into a UI Builder page

The introduction of the Custom Code codeless block opens up a lot of possibilities. One of them is importing external CSS files. This may become necessary when you need to embed an external UI component into your UI Builder application. For example, the AG Grid component comes with its own CSS files. Of course, you could copy/paste that CSS into a UI Builder theme extension, however, importing original CSS for a component seems like a better approach. So here we go: Switch to the LOGIC tab i…

How to use NPM modules in Codeless logic in API Services, Event Handlers and Timers

With the introduction of the Custom Code Codeless block, it is now possible to use functionality from NodeJS modules in Codeless logic. This recipe demonstrates the process of importing an NPM module and using it in a Codeless API Service. A sceptic reader may point out that using the Custom Code in Codeless is an oxymoron. Technically, it is, however, any code you place inside of Custom Code would be seen in your overall logic as one Codeless block, so I’d continue to maintain the position th…

[JohnP]

I wanted to post directly from some custom code to the Backendless database, so I used this approach but with the script for Backendless rather than an external script, and it worked great.

const Backendless = await BackendlessUI.requireModule('https://api.backendless.com/sdk/js/latest/backendless.js')
Backendless.initApp(APP_ID, JS_API_KEY)
Backendless.Data.of('SomeTable').save(someData)

Custom Code blocks are awesome, thanks for creating them!