Custom Code Block - Return to page data from included file?

UI Builder
1

I have some custom JS using WebHID to bring in a scale weight value. I have it working by including an external JS file like this -

On Page Enter -
image

This is the custom code

image
image1201×768 16.3 KB

This is a snippet of the code in the JS file -

image
image1197×738 40.1 KB

The JS file returns the value to UI Builder like this -

image
image977×163 10.3 KB

The JS code is triggered on button click -
image

And inside the custom code block -

image
image1196×357 4.33 KB

I want to put the results directly to pageData. I can update pageData from the custom code block in On Page Enter, but I can’t do it from the JS file.

I’d like to move the JS code into the On Page Enter custom code block from the JS file, but I can’t figure out how to make the On Click work.

Thanks,
Tim

2

Hello @Tim_Jones

Help us to clarify where directly you are stuck, with passing Page Data to Custom Code or something else.

Also, as I see, here

The JS file returns the value to UI Builder like this -

image
image977×163 10.3 KB

You didn’t return anything to UI builder. You manually change Browser DOM(changing HTML by your hands). You could return a value from these handlers, and set it to Page Data in On Click(or any else system handle). For this purpose, you could add and pass Page Data to Custom Code like below.

image
image1609×828 32.6 KB

Regards, Dima.

3

Hi @Dima,

Sorry for the confusing request. Let’s start with something basic. How can I add this function to a On Page Enter Custom Code Block and call it on a button click?

const connectDevice = () => {
  navigator.hid.requestDevice({filters:[]}).then(devices => {
    if (devices.length == 0)
      return;

    for (let device of devices)
      addDevice(device);
  });
};
4

Hello @Tim_Jones

UI Builder - viewDataGrid - Backendless 2022-12-16 10-32-35(1)
UI Builder - viewDataGrid - Backendless 2022-12-16 10-32-35(1)2758×1638 296 KB

UI Builder - viewDataGrid - Backendless 2022-12-16 10-34-43

Regards

5

Thank you, that worked.

Is there an article about how the Custom Code block works? For example, why did you put the function connectDevice in the clock block that runs on click and not in a Custom Code block for On Page Enter?

If this were HTML I would put the function code in the head tag. Is putting code in a custom code block On Page Enter similar?

Thanks again,
Tim

6

Hello @Tim_Jones

Unfortunately we don’t have documentation for this block yet, but there are helpful articles:

Regards,
Inna