66
Views
6
Comments
Solved
Upgrade the display of a block inside a table
Question

Hello everyone, I have a little problem that I didn't yet found a solution for it.


I have a table that has data fetched by an aggregate, the table also has 2 columns, that has one block in each collumn. The blocks have a list that has data fetched by an aggregate, and the data depends on the input parameter id that is sent from the table. The problem is that when the table renders, the info of the table is fetched first, and then it shows the info of the blocks, but I want to show all the info at the same time.

I can give an example to be more clear:


Table show info about categories in a supermarket, like: fruits, toys etc

Then, one column has a block that show the products depending on the category Id, so, for fruits it shows: apple, mango etc


The thing is that in the table, the info about the categories show first, and then, 1 sec later it shows the info in the block.


How could I show all the info at the same time without using an advanced sql query?


Thanks in advance.


2019-09-30 07-35-56
Aurelio Junior
Solution

Hello,

You could fetch all the data at once by creating a single data action in the screen with the aggregates you need to get everything. Then pass the data directly as input parameters to the blocks instead of only passing the IDs.

However, it might very well be the case that you're reusing those blocks in multiple places, so refactoring everything as described above might not be feasible. In that case, you still have a few alternatives:

  • Use an animation in the blocks that is displayed while the data is being fetched. Take a look at this forge component.
  • Have your blocks fire an event when their data is loaded, and handle those events in your screen to only show the content when all data is loaded. In your scenario with 2 blocks, you could have 2 boolean variables in the screen that you set to True when the blocks raise something like a "DataLoaded" event. Then, use the variables to control a CSS class for the content that shows/hides it. Something like this:
    If(MainAggregate.IsDataFetched and IsBlock1DataLoaded and IsBlock2DataLoaded, "", "hidden")


2023-12-28 15-13-10
Mauro Alviza

Thank you very much Aurelio. The data action solved my problem. Thanks!

2025-12-15 09-29-24
Thibaut G

You could create a Boolean Variable 'IsLoading'

The default value of this variable should be True. Using the OnAfterFetch actions and triggers in your block, you can assign the value of 'IsLoading' to False once all the data is fetched.

Use the variable with 'NOT' int front of it as the 'visible parameter' of the container that holds your table 

Regards

Thibaut 

2023-12-28 15-13-10
Mauro Alviza

I think that's not possible, because the block will only inizialite if it is shown in the screen. If I hide it, it would not inizialite and then the aggregate inside the block will not start to.

2025-12-15 09-29-24
Thibaut G

You are correct, i didn't think about it.

In our company, we solve this by implementing a loading spinner inside the webblock that is visible whilst the data is loading.This way, The table will be shown, but the content of the weblock will be a loading icon untill the data is fetched.

Regards

2023-04-03 21-05-20
Shahin Keshavari

Hi Mauro,

Although not a direct answer to your question, try avoiding a call to the database inside a webblock in a table. There will be many little calls that amount to a longer loading time.

See if you can move the aggregate that retrieves the data of the webblock to the screen, so you have 1 large aggregate that loads the data for your webblocks. So your webblocks will have input parameters 'the full list of the aggregate' and 'the Id of things to show'.

- you have 2 aggregates on the screen. 1 retrieves the info for the table, and 1 retrieves all the details that the webblocks will use to show their data.

- your webblock will receive the entire list of data (this is by-reference so be mindful of this)  and also the ID that it will use to identify which data to show. so for example in the OnInitialize of your webblock, you filter out the data that you want to show based on the ID.

- you can then use the IsDataFetched of the aggregate that retrieves the entire data set for the webblocks to show the table in 1 go. 

Apart from going advanced query, this would be an alternative solution.

2019-09-30 07-35-56
Aurelio Junior
Solution

Hello,

You could fetch all the data at once by creating a single data action in the screen with the aggregates you need to get everything. Then pass the data directly as input parameters to the blocks instead of only passing the IDs.

However, it might very well be the case that you're reusing those blocks in multiple places, so refactoring everything as described above might not be feasible. In that case, you still have a few alternatives:

  • Use an animation in the blocks that is displayed while the data is being fetched. Take a look at this forge component.
  • Have your blocks fire an event when their data is loaded, and handle those events in your screen to only show the content when all data is loaded. In your scenario with 2 blocks, you could have 2 boolean variables in the screen that you set to True when the blocks raise something like a "DataLoaded" event. Then, use the variables to control a CSS class for the content that shows/hides it. Something like this:
    If(MainAggregate.IsDataFetched and IsBlock1DataLoaded and IsBlock2DataLoaded, "", "hidden")


2023-12-28 15-13-10
Mauro Alviza

Thank you very much Aurelio. The data action solved my problem. Thanks!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.