We have implemented the tab widget. We have tried to prevent users from switching between tabs if there are unsaved changes in a tab.
We tried to build the logic in the tabsonchange action but this is not working as we want. Since if you redirect the user in that action with the SetActiveTab client action in fact the tab is changing two times: 1) the clicked tab is triggered and the 2) the original tab is triggered. So ther are two switches.This causes undesired behaviour and we would like to block the switching all together before ...etc.etc.
Is there anybody who knows how we can check something before switching so we can prevent switching?
Hi @Rogier Mullaart ,
one possible option is to have an OnChange on all your inputs, and make the tab headers unclickable as soon as something changes until data are saved.
See attached oml for a basic example.
Just keep track of it with a local boolean that gets update to the correct value on every change and on every save, and have some CSS based on that local variable.
Dorine
Thank you Dorine. This looks like a solution for my problem. I will try this option and keep you posted.
Hello Dorine,
Your solution to stop the tabs from working is perfect. Only one thing is still not working. I would like to add that if the user tries to click on a non-functioning tab that he or she gets an message "Yo can not switch tabs untill you have saved the changes".
But it is not clear to me how and where to add this action. Do you maybe have another tip?
Regards,
Rogier.
sure,
i wrapped the header items in a container with an onclick action.
In that action, if the boolean says they should not switch tabs, I give a message.
See attached
Or even better,
also give the user a visual cue even before they try to change tabs, something like
Hi @Rogier Mullaart,
For Unsaved changes :
Outsystems have different components to check differences between two records of same entity like Compare Entity and many more.
Please refer OML.
Hope this help's!
Thanks!
Thank you for your response. That local variable in which I save if something is changed was the first thing I did. But it still not will prevent the tabs from switching. Anyway thanks for the tip.
Suppose we have Tab1 , Tab2 , Tab3 and each one has associated boolean variable corresponding to that .
Tab1 has isEnable1 (initially set to true)
Tab2 has isEnable2 (initially set to false)
Tab3 has isEnable3 (initially set to false)
All of the booleans are set to false except isEnable1 that is for Tab1.
Now when you completed the changes in Tab1 , you will hit save changes button which will make the isEnable2 = true.
Now when you completed the changes in Tab2 , you will hit save changes button which will make the isEnable3 = true.
and so on…
I think this will help you. Have a great day!!!
Thanks & Regards ,
Sudip Pal
Thank you Sudip, that was already implemented but it will not prevent that you switch to another tab. Thanks anyway.
Hello @Rogier Mullaart,
I realize you have our answer, but out of curiosity, wouldn't a wizard be a better solution for the intended outcome instead of tabs?
Good option Paulo. But is it possible to jump from step to a totally diffrent step? I think not.