Reactive App Conditional Rendering Based on Data

Hi,


I have this page on react that either loads or not depending on the data fetched from the data action. The implementation we did was for all the pages was to only have one parameter, a Transaction (Application) Id of sort. And the pages just have a GetTransactionById data action on them. The problem for this page is that is has this needed in the GetTransactionByIdOnAfterFetch:

When a specific field of this Transaction is blank, it will redirect instead to a different page. The problem is that it loads the page split seconds before moving to the other. Any options I can do other than moving this field's value as parameter?


Thanks,

JC

I can confirm this is the expected behavior. I'd love to hear if anyone has a better solutions?

What I did was wrapped everything on an IF and then used IsDataFetched property of the Data Action as the condition. Well again if somebody has a better solution :)

Hi, 

If you want the redirection to happen before there is anything on the screen, use the OnInitialize action.

However, this could delay the page from rendering. Seeing your flow, it should not be a problem because the flow is very simple. However it does require receiving a transaction from the database. It should not be any problem to do this quickly if there is only 1 transaction to be retrieved and checked if the field is empty or not. So this would be a good solution to your case. Remember to use a data action in the page for interaction with the transaction further, so that OutSystems can optimize the query in the On Initialize action for quick loading.


Bas de Jong wrote:

Hi, 

If you want the redirection to happen before there is anything on the screen, use the OnInitialize action.

However, this could delay the page from rendering. Seeing your flow, it should not be a problem because the flow is very simple. However it does require receiving a transaction from the database. It should not be any problem to do this quickly if there is only 1 transaction to be retrieved and checked if the field is empty or not. So this would be a good solution to your case. Remember to use a data action in the page for interaction with the transaction further, so that OutSystems can optimize the query in the On Initialize action for quick loading.


The problem with this is that OnInitialize, the variable or the field being checked whether it has value or not is still not populated since the Data Action isn't triggered yet. I assume that OnInitialize triggers event before the Data Action so it will always go to the True path every time.


Juan Carlos Elorde wrote:

Bas de Jong wrote:

Hi, 

If you want the redirection to happen before there is anything on the screen, use the OnInitialize action.

However, this could delay the page from rendering. Seeing your flow, it should not be a problem because the flow is very simple. However it does require receiving a transaction from the database. It should not be any problem to do this quickly if there is only 1 transaction to be retrieved and checked if the field is empty or not. So this would be a good solution to your case. Remember to use a data action in the page for interaction with the transaction further, so that OutSystems can optimize the query in the On Initialize action for quick loading.


The problem with this is that OnInitialize, the variable or the field being checked whether it has value or not is still not populated since the Data Action isn't triggered yet. I assume that OnInitialize triggers event before the Data Action so it will always go to the True path every time.


Can you do an aggregate in the OnInitialize action to retrieve the value?

After checking, true proceeds with the page and there you do another data action to retrieve the full entity.

False just proceeds to the home page.


Hi, 

While I agree that on React, differently from mobile, fetching small amounts of data on the OnInitialize is probably not a problem, can I advise a possible different approach? 

Whi you do not decide the destination at the origin? 

I mean, if the user is coming from a different page, could you detect if the id is valid at the destination and redirect to the correct page at the source, a client action instead of a link/button, for example? 

Cheers

In any case, using an aggregate or a call to a server action that tests if the id is valid or not, in the OnInitialize, in this case, is not really a big problem, because you don't want to show the page if the id is not valid, but I would still prefer the above option, if possible. 

Solution

Hi Juan,


I had faced similar issue in one of my previous projects. I had to resort to a workaround.

Instead of fetching the required id in the page, I passed the id as input parameter to the screen and on ready of the screen redirect to different screen depending on the value of input parameter.


Regards,

Saugat


Solution

I guess I can resort to that workaround as well.

Reason behind is that the destination page is a 'Location/Zip Code' setting page. If the previous page knows the Zip Code already, e.g. via a Marketing URL or a Branch (Local) Website, then I don't need to ask it again.

Thanks for your suggestions.

Hi Juan,


Glad to be of assistance.


Regards,

Saugat