10
Views
9
Comments
Action handler for react visibility change?
Question

In react I am trying to find what action can be caught when visibility changes in react.  The use case is say you have an if on a page where the if condition is a boolean called isEdit.  True condition of the if has a form and the false has a set of table records.

If an action on the page (say the user clicks on an item in the table) runs a client action that loads the clicked record into the form and then toggles isEdit.  Or if isEdit is true and the researcher clicks on cancel, it would just set isEdit to false.

For the case of going from the form to the table, I want to use ScrollToElement to scroll to the clicked table item.  However, in the actual page action where isEdit is toggled, the table isn't visible therefore the javascript throws an error.  So what I need to do is put an action handler on the table or even the div so that when it becomes visible again I can catch the action, see if I should scroll to a certain line and then if so do it.  Any ideas on this?

Rank: #70

Hi Jason,


I think you can do that, using the OnRender event. As per definition:


You can a variable that holds if the element you want to scroll to is visible or not and on the OnRender, run a Javascript to check if the element is on the screen and update the variable. With that, you will be able to identify when the element was not on the screen (variable is false) and the element is now rendered (output of the JavaScript) and on that scenario perform the ScrollEvent


Hope it helps.


Regards,
João

Joao,

I tried onRender and onrender for the form itself and it is not triggering on the react visibility change. 

Ok! The on Render does get triggered with the react visibility changes.  I will take a look.

Ok - so I tried just making a button on the page that would call the scroll to element and I am still getting Logger.js:476 [2020-12-01T14:52:01.538Z]: Cannot read property 'classList' of null.  Any idea why if I am using the name of the form or the container its in (tried both)?

LOLOL. Soooooo, I made just a page with the scrollToElement in it - nothing fancy.  Still getting the same error.  I cloned the OutSystemsUI and opened the react client action scrollToElement and it has this line:

    var isFixed = layout.classList.contains('fixed-header');

I made my own javascript action and changed that to 

    var isFixed = false;

And boom - it worked.  So apparently they have an error in their action - I will start a service ticket to let them know.  I am also pretty much going to start over with a new action and see if that was causing the issue where that error would come up if I try to scroll before the page has refreshed in react - I bet it will now work but have to try it.