Hi All,


We have a requirement of relocating one of the element (here is a Table Records widget), once user clicked one button.

What I have tried to do is writing some JavaScript codes into RunJavaScript action in the button action, the main function is changing the margin-top value of the Table Records widget. Steps as following:

1. find the selected element's current Y position by e.clientY.

2. change the element's margin-top by document.getElementById("ElementId").style.marginTop = newValue;

3. trigger this function when user clicked the button.


My solution can actually work for a second, what does it mean is there is always an End node at each Action Flow. Once my RunJavaScript action has been executed, I can see the margin top of the element has been changed, but once the action flow reached to the End node, the page seems been refreshed. Then, the margin top value has been reinitialized. 


But, as I know, each Action Flow needs to have an End node, so that's why I think I have done part of my task. The other part is how to prevent the page being refreshed by the End node. 


Please comment, thanks

Hi,

Check please that you use Ajax submit instead of Ajax as method on your button.

https://success.outsystems.com/Documentation/11/Developing_an_Application/Implement_Application_Logic/Use_Ajax_to_Refresh_Part_of_a_Screen

Your requirements is btw easier to implement applying a class conditionally.

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi,

Check please that you use Ajax submit instead of Ajax as method on your button.

https://success.outsystems.com/Documentation/11/Developing_an_Application/Implement_Application_Logic/Use_Ajax_to_Refresh_Part_of_a_Screen

Your requirements is btw easier to implement applying a class conditionally.

Regards,

Daniel

Thanks Daniel,


It's working but still has an issue, which is in the Table Records, it doesn't display any data if we use Ajax Submit. Because in the button action flow, we need to dynamically load different data based on user's input as well. So, we have Aggregate action in there.

And it does display data if I add Ajax Refresh on the Table Records in the Action flow, but page will be refreshed.

Seems I have been trapped in a loop...


Do you have any other ideas for it?

Thanks

Solution

The Ajax refresh should only be done on the table records wrapper container. That should then not cause a complete page refresh.

If this doesn't help they provide a oml if possible.

Solution

Hello Calvin, 

The right way of doing it is to call the action with Ajax Submit, than execute a data refresh in the aggregate that is the source of the table records than Ajax refresh the table records to load new data. The aggregate need filters to correctly load the data on loading the page or in the action. 

If the same aggregate can't cope with the differences in the filters, use a local list as source, assign its values in preparation and on the action, instead of data refresh, do your new aggregate and assign its result to the local list, then refresh the table records. 

Cheers 

Daniël Kuhlmann wrote:

The Ajax refresh should only be done on the table records wrapper container. That should then not cause a complete page refresh.

If this doesn't help they provide a oml if possible.

Hi Daniël, thanks so much. Yes, it's working.


What I have done is putting the Table Record widget into a Container, then changing the margin-top of the Container by JavaScript. At the last step, using Ajax Refresh action to refresh the Table Record. 


So, because the Container's style has been changed and Ajax Refresh doesn't refresh the Container. So it keeps the changed CSS style.


Thank you again, and I have marked your suggestions as solution for me.


Eduardo Jauch wrote:

Hello Calvin, 

The right way of doing it is to call the action with Ajax Submit, than execute a data refresh in the aggregate that is the source of the table records than Ajax refresh the table records to load new data. The aggregate need filters to correctly load the data on loading the page or in the action. 

If the same aggregate can't cope with the differences in the filters, use a local list as source, assign its values in preparation and on the action, instead of data refresh, do your new aggregate and assign its result to the local list, then refresh the table records. 

Cheers 

Hi Eduardo,


Thanks so much, I have removed the aggregate from the Ajax Submit action to Preparation action. So, in the Ajax Submit, it doesn't reload the data, and just doing logic flows.


Thanks