Using Tabs, ever wish each Tab could have a stack of Screens to navigate through, while also remembering their previous location when going "Back" (Screen and Scroll location)?This application includes a Sample module that uses some Utility Client Actions that can be used to enable this "Stack Navigation" across Tabs, allowing each Tab to remember the last screen and scroll amount
Instructions:
.customTabs .tabs-header { position: absolute; bottom: 0px; width: 100%; } .customTabs .tabs-content { position: absolute; top: 0px; height: calc(100vh - 91px); overflow: auto; } .customTabs .tabs { position: relative; height: calc(100vh - 45px); } .tabs-content-wrapper { transition: none; }
If you are migrating from existing Screens to these Blocks, these are the steps you can follow:
NOTES:
OPTIONAL: Fade-in the screens with CSS to avoid letting the End User see any (potential) scrolling.
Other Client Actions (utilized by above instructions):
Known Limitations:
Here is a related Ideas entry for this workaround:
https://www.outsystems.com/ideas/5996/bottombar-that-behaves-like-tabs-stacknavigation-for-all-screens-in-each-tab