Binding issue between custom UI components

UI Builder
1

I found that data binding for component properties is not working for a certain scenario. I’ve prepared a minimal scenario to reproduce the issue. AppId is 15D1E631-1E7E-C551-FFD8-6E10595D5F00 and I’ve created the page “test” to look at.

On this page, I’ve placed two custom UI components:

  • ‘‘Component1’’ has an action and an event. The action is just for firing the event
  • On the page there is a button which is calling this action.
  • The event handler for Component1 looks like this:

image
image785×200 17.1 KB

  • This handler sets the property pageData.outputText and calls an action of my second component Component2.
  • This action is just printing (console) the value of the property outputText of Component2.
  • In addition, I’ve configured Component2 on the page to bind its property outputText to pageData.outputText.

This means, the event handler Component1.myEvent is setting the value for pageData.outputText which should then be printed by the action Component2.printOutputText. So, when pressing the button, I expect to see the following console output:

Action Component1.fireMyEvent is calling the event handler now ...: 
<Component1.myEvent> my outputText is: Set within Event Handler
<Action Component2.printOutputText> my outputText is: Set within Event Handler

This is not what is happening!
Instead I’m seeing the following output:

Action Component1.fireMyEvent is calling the event handler now ...: 
<Component1.myEvent> my outputText is: Set within Event Handler
<Action Component2.printOutputText> my outputText is: undefined

Component2 prints undefined as if the binding to pageData.outputText did not work.

The situation changes if I’m enabling the wait statement in the event handler:
image

Then data binding is working and the output is as expected.

So, I guess there is something “wrong” with the event loop …

Regards,

2

hello @Klaas_Klever

Thanks for the deep research!

Actually, there is no bug, the flow you can see works by design.

When you modify a DataModel it doesn’t reflect these changes to linked components/properties immediately (in the current sync call stack) because there can be lots of changes and they apply asynchronously (in another sync call stack) for performance reasons right after completing the current sync call stack.

Take a look at the diagram below it describes two scenarios:

  1. without timer - where the component2 doesn’t have the new value yet
  2. with timer - where the component2 has the updated value

data-binding-flow - diagrams.net 2022-09-26 12-55-50
data-binding-flow - diagrams.net 2022-09-26 12-55-501142×1302 243 KB

Regards, Vlad

3

Thanks @vladimir-upirov ,
So, it is ok for my case to use wait(0) to achieve the desired behavior, or can I “break” something else?

Regards,

4

I do not think you can break something but the logic doesn’t become obvious and it can lead to many questions in the future

So, you can use it, but for me, it looks like a hack and I would not recommend using it, perhaps there is another way to archive what you want

Why can’t you use the new value from the DataModel in the myEvent handler, what’s the purpose to get value from the second component after assigning value through data-binding?

5

Yes, I will go this way and pass the value as a parameter to the 2nd component …
Regards,