Integrating JS libraries?

UI Builder
1

I’d like to use a few JS libraries to enhance the UI. Examples include:

https://www.papaparse.com/demo

@stanislaw.grin helped me with one example to copy to the clipboard, which I followed. But with the examples above, I think they use the input ID, which isn’t the same in UI builder as the rendered HTML and the JS would be running against the rendered HTML?

Anyways an understanding of how to make one of these work in UI-Builder would be great!

2

You could read here how to use an external libraries - link

I think they use the input ID, which isn’t the same in UI builder as the rendered HTML and the JS would be running against the rendered HTML?

Could you explain this in detail? What are you trying to do in UI-builder but without success?

3

The link you shared to @mark-piller writeup was exactly what I needed.

I’ve found that I need to create a const in the custom code to include CDN hosted JS. I was trying

await BackendlessUI.requireModule('https://cdn.jsdelivr.net/npm/froala-editor@4.0.8/js/froala_editor.pkgd.min.js');

Which wasn’t working. When I did the following I was then able to call the JS function. I thought that simply including it would have made the function available but I guess not?

const FunctionName = await BackendlessUI.requireModule('https://cdn.jsdelivr.net/npm/froala-editor@4.0.8/js/froala_editor.pkgd.min.js');

Could you explain this in detail? What are you trying to do in UI-builder but without success?

I assumed that if you set the ID in UI-Builder like this it would be rendered in the HTML.

emailsubject
emailsubject1824×873 81 KB

But, if I inspect the element in the HTML the ID is something else:

image
image1906×916 95.1 KB

In the writeup from Mark you shared above he specifically mentions using the anchor input for situations like this, however, there isn’t an anchor input for text inputs.

4

Hi Tim,

Try putting the Input component into a Block and then using the Anchor in the block. I am wondering if that workaround would work.

Regards,
Mark

5

Can’t answer, cause we didn’t develop this library.

It could extend window object or return any kind of data(including functions). In both cases it’s JS related question, and may take a lot of time to explain it.

But I can advice you read about - Global Objects

I assumed that if you set the ID in UI-Builder like this it would be rendered in the HTML.

ID in UI-Builder designer needed for Codeless purpose. If you want to use an anchor(native ID), you could do it as Mark says.

Regards, Dima.

6

Thanks for the help. Using the anchor tag seems like the way to go.

Tim