155
Views
11
Comments
Reactive - how to refresh the DOM of the page using OnBlur

I have a loading web block that is a loading image in an If statement so when I set the variable to true that loading image shows up in cause the page takes too long to reload.

I have a Input widget that has an event Onblur with an action associated "ActionOnBlur" in this action I set the value of that variable to true in a being and set the variable to false in the end so the image disappears and appears.

In this case, the image doesn't show up, I think because the Onblur doesn't refresh the page, I notice that if I add a refreshFetchData in the middle of the action the image shows up and disappears correctly.

I like to know if there is any form to do it or if there any thing in OutSystems to this particularly case

UserImage.jpg
Suriya Narayanan

Hi Antonio

As per my understanding In the Reactive application, the DOM will change without refreshing the page. In your case, your action took place very fastly without the Data Action in the flow, so you are not able to see the loader block, while adding the Data Action in the flow it may take a little bit more time so the loader is actually visible at that time.

Otherwise, the refresh DataAction will trigger Data Action on the After fetch event if you are making the variable true there then in this case also it will appear.

I hope my explanation is clear.

Thanks & Regards

UserImage.jpg
António Matos

Hi Suriya,

Thanks a  lot for your explanation, but the action even without the DataAcion takes a lot of time but the image doesn't show up.

I only add the data action because I think how the event is onblur didn't refresh the DOM without the data Action

Thanks & Regards  

2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Hello António  Matos,

Can you share the OML. It´ s faster to help.

Best Regards,

Nuno R

UserImage.jpg
António Matos

Here is the OML to be easier

ValuationSheet.oml
2021-09-30 18-38-59
Nuno Ricardo Rodrigues

Hello António  Matos,

Did you try  the solution of Ricardo Ferreira? If don't work I will try to see if I can find a solution.

Best Regards,

Nuno R

UserImage.jpg
António Matos

Hello Nuno,


Yes I have tried and didn´t work, the image didn't show up

2021-09-30 18-38-59
Nuno Ricardo Rodrigues


Hello António  Matos

There is one more solution from Dorine Boudry? If don't work I will try to see if I can find a solution.

Best Regards,

Nuno R


2021-11-30 12-35-05
Ricardo Ferreira

Hi António,

I think it will work if instead of assigning the LoadUpdate to false directly you do the following:

  1. Create an action "SetLoadUpdate" were you do that assign 
  2. Create a SetTimeout using a Javascript node calling the SetLoadUpdate action. This will be called in the same place you now have the assign at the end of the flow.

setTimeout example:

setTimeout(function(){

     $actions.SetLoadUpdate()

},1);

Hope it works,

Best regards,

Ricardo

UserImage.jpg
António Matos

Hi Ricardo, 

Thank you for your answer but I didn't work it just take around 30seconds and the image don't show up 


Best regards,

António

2021-11-30 12-35-05
Ricardo Ferreira

Hi again António,

maybe changing also the first assign to a JS node will work.

Best regards, 

Ricardo

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi All,

Changing the value of a variable during a client action doesn't trigger a refresh of the dom, in that case dom only gets refreshed at end of client action.  

Coming back from a server call (a fetch or an aggregate or a server action called inside a client action) does.

see example oml, you can see that adding a dummy server to logic that otherwise runs completely on client side, makes an extra update to the dom.

Dorine

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