BottomBarStackNavigation

Stable Version 1.1.1 (OutSystems 11)
Published on 10 December 2018 by 
Created on 29 November 2018
Details
Using the BottomBar, ever wish each BottomBar Item (Tab) could remember their previous location (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 BottomBar Items (Tabs), allowing each Tab to remember the last screen and scroll amount.
Read More

Using the BottomBar, ever wish each BottomBar Item (Tab) could remember their previous location (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 BottomBar Items (Tabs), allowing each Tab to remember the last screen and scroll amount: 

  • SwitchTab Client Action 
    • Stores the current location (Screen and ScrollTop) for the Tab we are leaving, then returns the Screen name it needs to navigate to for the new destination Tab (based on the last Screen that was viewed on the Tab).
  • GoScrollInit Client Action
    • Scrolls the current Screen to the stored ScrollTop location when it was last viewed.

I tried to make this as simple as possible: 

  1. For each ButtonBar Tab, call the SwitchTab Action within LinkOnClickXXX 
    • Pass in a unique Tab name for each BottomBar Tab
  2. Use a Switch that checks the SwitchTab.Screen output and create a condition for all possibilities to the appropriate Screen Destination. 
    • (Use Otherwise to go to the initial/default screen) 
    • TEST HERE to make sure each BottomBar Tab remembers the last screen it was on! 
    • If Tabs are not remembering the last screen it was on (goes to the default screen), then you are most likely not using the correct Screen Name for the Switch Condition OR the Switch Condition for the Screen does not exist. 
    • Use a Breakpoint on the Switch and see what SwitchTab.Screen is - make sure you have a Switch Condition for all the possible Screen names it returns. 
    • You can also use the GetPageName Client Action on each page to see what it would return. 
  3. For each (navigatable) Screen from all the BottomBar Tabs, call GoScrollInit Action within OnRender.  No parameters needed! 
    • If the Scrolling isn't working, then you might have to set the optional SelectorOverride input parameter for the Screen after finding which Selector is being used to scroll (instead of the default .content class) on that Screen (See Known Limitations below)

NOTES

  • Even if a BottomBar Tab links to only 1 Screen:
    • Calling SwitchTab (without the Switch statement) and going to the (one) Destination is required for it to remember the Screen name and Scroll location on that screen before it navigates away.
    • Calling GoScrollInit is required for the (one) Screen to be able to scroll to the previous Scroll location when navigated to.
  • Running it on a device (i.e. OutSystemsNow) shows the GoScrollInit scrolling to be instantaneous as opposed to in the Simulator where it is much slower.
  • The Utility module will add 1 AO (1 Local Storage Entity) to your project - there are no Screens and no external integrations involved.

Known Limitations

  • If using SelectorOverride, the current design requires modifying the internals of SwitchTab to call StoreCurrTabScreen with the specific SelectorOverride depending on the Tab that you are leaving (GetCurrTab.Tab) so that it can retrieve and store the correct ScrollTop for the current Screen.  This might make sense to be placed in Local Storage for retrieval with the (last used) Screen Name for each Tab.

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


What’s new (1.1.1)

Changed icon to differentiate between this and TabStackNavigation

Reviews (0)
Category
UI & Widgets, Samples & How-tos, Components
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Taka Torimoto who created this component.
Dependencies
See all 2 dependencies
Requirements
Platform
11.0.0.200
Database
All
Stack
All
Component Consumers
No consumers yet.
Weekly Downloads 
Related Components
Silk UI Web
OutSystems R&D
A fully responsive and beautiful UI framework that works within the OutSystems Platform. Build amazing looking applications, in a fraction of the time, which work perfectly across devices. Learn how to start using Silk UI and see the examples at silkui.outsystems.com . Obtain assistance on using Silk UI in our forums .
28593
Multiple File Upload
Multi Uploaders
Allow you to upload multiple files in one upload form or using drag and drop functionality.
2777
OutSystems UI Mobile
OutSystems R&D
Create amazing native mobile applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
10078
More from Taka Torimoto
MARTA
Taka Torimoto
MARTA Bus and Rail Realtime RESTful API Connector
14
WMATA
Taka Torimoto
Washington Metropolitan Area Transit Authority API Connector
5
TabStackNavigation
Taka Torimoto
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
8