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

UI Builder
1

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.
image

image
image1047×331 20.9 KB

image
image1664×116 7.42 KB

2

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

3

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

4

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

5

UI Builder

6

Thanks, Dennis. We’ll look into it.

7

Hello @Dennis_Nelson1

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

8

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

9

@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()
10

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

11

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

13

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

14

Is this article available?

15

Hello @William_Lee!

I think these articles might help you:

16

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!

1 Like