Possible error/bug in the order of data object load and UI refresh?

Hi team,

I think there is an issue with the order of events from when data is read from the database and when the UI refresh occurs.

I’ll start with what I think the problem is. As soon as you try to load a database object in either the Before Page Enter or On Page Enter handlers the UI refreshes its elements on the page. However if a content logic handler references that object you will get an error because the UI refresh runs before the object is ready.

The example below is the flow that I can see from Before Page Enter then going to Page Enter and the error I get when referencing the data object in a Content Logic text element.

Below is the example. There is a Page with a repeater element (one record in the database) and a text element (in the blue area) that should also display the item “Try” from that database.

This is the error I get along with the print messages showing the application flow and when the error is triggered. Notice the completion of the On Before Page Enter handler is right at the end.

Here is the view in a flow along with the code that is executed on the page:

There needs to be a time when data can be loaded into objects without UI refreshes happening. I thought the reason for having “On Before Page Enter” was that you could load/define objects before the UI was initiated. So I think removing UI refresh operations from the “On Before Page Enter” handler could possibly work and leave the initial UI refresh operations to the Page Enter handler.

If you got this far… thanks. If I have it all wrong please let me know how I should be setting up database load objects.

Appreciate the support and the great product.

Thanks
Glenn

Hi @Glenn_D

Yes, you are right, logic in the OnBeforeEnter handler doesn’t block the rendering process, this is just an event handler which allows you to add logic before the first render

We can not block the rendering process in these OnBeforeEnter OnBeforeEntered because there might be a logic which doesn’t require it and there is no necessary display of a spinner or a white screen to a customer while we loading something in the background. Does it make sense?

However, if you need to display some components only when a particular data is loaded you can apply the following approach:

  • on the page have two main blocks: Spinner and ContentWithData
  • on page enter you load data and when it’s done set to the PageData a variable “loaded=true”
  • then add “Visibility Logic” for Spinner, to show it only when “PageData.loaded” is not true
  • for ContentWithData add “Visibility Logic” for Spinner, to show it only when “PageData.loaded” is true

the approach above allows you customize it as you need

Regards, Vlad

Hi @vladimir-upirov

Thanks for the reply. I just wanted to check. Are you saying that I should put a data_complete check at any content logic or other handlers that are impacted by data loads and UI refresh events initiated by Page handlers?

Thanks
Glenn

Hi @Glenn_D ,
Just an educated guess from my side.
I’m avoiding to work with content logic exactly due to this unpredictable timing. I’m using data binding wherever possible, because you can control when to set the bound variable.
In your case, try to bind the text element value to a page data property. Then set this property to the desired value right after having read from the database.

Maybe this will work …

2 Likes

Hi @vladimir-upirov

Adding a data loaded boolean at the end of either Page Enter handler works well. I then do the check before accessing the data object.

Thank you for the clarification.

1 Like

check existing before accessing the data object is also the way to go, but when there are lots of such checks I would recommend hiding the entire container and showing it only when the data is loaded and you are ready to display the container

Hi @Klaas_Klever

Appreciate the input. I will look at data binding rather than coding in the content logic handler.

Strange that data binding does not throw an error.

Thanks

Hi @vladimir-upirov

Thanks for your input on this. I just wanted one more check on this pattern please.

Pattern:
You need a data check (isdataloaded) around any visible container or element that is displaying information or has logic dependant on a data load even if you have not initiated that data load till much later in the page workflow.

The example.

Data Load 1:
I have a data load in Page Enter and a text element dependant on that data on the page.

Data Load 2:
I have a data load which is triggerd only by the click of a button on that same page and another text element showing a default value first and then some changed value after the button is triggered and the data loaded.

The result:

The Data Load 1 causes a UI refresh and that UI refresh looks at all logic handlers on a page for all containers/elements that have a display value of True. If I want a default value or message to be displayed for elements that have not had their data loaded yet I need to have an “isDataLoaded” check for any elements on a page because an error will be thrown from the Data Load 1 UI refresh.

Have I got it right?

Thanks
Glenn

yes, this is one of the options