TabStackNavigation

Stable Version 1.0.0 (OutSystems 11)
Published on 16 December 2018 by 
Created on 16 December 2018
Details
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
Read More

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:

  1. In a Screen, place a Tabs component inside a Container with Style Class "customTabs" (for the CSS below)
  2. (OPTIONAL) Add CSS to place Tabs at the bottom and also remove the transition between Tabs:
    .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; 
    }  
  3. Create Blocks for each "Page" content.  Every Content Block should optionally trigger an Event that lets the parent know which Block (Content) ID to switch to. (i.e. PageSwitchEvent with a SwitchTo integer parameter).  To "Go back" and pop off the Stack Navigation, it should trigger an Event and tell the parent to switch to NullIdentifier().
  4. Create the following local variables (copy them from the Sample)
    1. CurrTab (Integer) - holds Active Tab ID
    2. CurrScroll (Long Integer) - holds the ScrollTop that a screen should scroll to when first displayed
    3. TabScreenIds (Integer List) - List of "Last Screen (Content) viewed" for each Tab.
  5. Place all the related Web Blocks (Content) in their TabContent placeholders, separated by If conditions, checking for the value of TabScreenIds[<TabID>] where TabID is 0-index
  6. Define OnInitialize, which should call CreateTabScreenIdList, passing in the number of Tabs to be used on the Screen for the TabCount Input Parameter, and setting the TabScreenIds variable to its output parameter CreateTabScreenIdList.TabScreenIdList
  7. Define OnRenter, which should call GoScroll, passing in CurrScroll for the Scroll input parameter, and using the ".tabs-content" Selector
  8. Define the OnTabChange Event Handler for the Tabs (See TabsOnTabChange), which should receive the ActiveTab as the input parameter (i.e. DestTab), and should, in sequence: call PushTabStackNavigation, call PopTabStackNavigation, assign CurrTab and CurrScroll, and finally call GoScroll.  This is only used to set the store the previous Tab's ScrollTop location, and also set the new Tab's ScrollTop location.  This TabsOnTabChange for your OnTabChange Event Handler can be copied and used directly from the sample (assuming the suggested variable names above are used).
  9. Define the PageSwitchEvent Event Handler (i.e. TabSwitchBlockLocal) to be used by all the Blocks.  Each Block (Content) should pass in the local variable TabScreenIds, the currently active Tab (i.e. CurrTab), and the "next Block (Content) ID to display" (SwitchTo).  This is used to switch to the next Block (Content) to display, based on what the user clicked on in the previous Block (Content).  This TabSwitchBlockLocal for your Block (Content) Event Handler can also be copied and used directly from the sample (assuming the suggested variable names above are used).
  10. (Optional) To handle a hardware back button (Android), it should call TabSwitchBlock with NullIdentifier() as the destination Block (Content) ID, and then set TabScreenIds as well as CurrScroll.  This is the same thing that is done with a "Back" button from within the Blocks as explained above.  The OnBack screen action can be copied and used directly from the sample (assuming the suggested variable names above are used).

If you are migrating from existing Screens to these Blocks, these are the steps you can follow:

  1. Copy all Screen Local Varaibles, Fetch Queries, Client Actions onto Block
  2. Set Block Event Handlers (OnInitialize, OnReady, OnRender, etc)
  3. Copy (Advanced) Style Sheet onto Block
  4. Copy Content into Block
  5. For EACH Block - Add Event PageSwitchEvent with SwitchTo (Integer) Input Parameter
  6. Place each Block instance into appropriate TabContents
  7. Set each Block instance to call TabSwitchBlockLocal as its PageSwitchEvent Handler passing TabScreenIds, CurrTab, and SwitchTo as input parameters for TabScreenIdListCurr, ActiveTab, and SwitchTo
  8. Bottons/Links that navigate to a different page should Trigger the PageSwitchEvent from its OnClick event handler Action, and pass in the destination Block ID as SwitchTo
  9. Any Input Parameters for the original destination Screen will have to become Local Variables that get set via Assign before the PageSwitchEvent Trigger is called

NOTES

  • Don't forget to call ClearTabStackNavigation when exiting the app to clear the StackNavigation from LocalStorage for the next time the application is launched.
  • OPTIONAL: Fade-in the screens with CSS to avoid letting the End User see any (potential) scrolling.

  • Other Client Actions (utilized by above instructions):

    • PopTabStackNavigation Client Action 
      • Retrieves the ScreenId and ScrollTop of the Screen at the top of the Stack Navigator for the specified TabId; By default, also removes it off of the top of the Stack (can optionally just peek at the top by setting IsPeekOnly to TRUE)
    • PushTabStackNavigation Client Action 
      • Stores the ScreenId and ScrollTop of a Screen to the top of the Stack Navigator for the specified TabId
    • GoScroll Client Action
      • Scrolls the current Screen to the specified ScrollTop location.

Known Limitations

  • Need to add an Output Parameter for PageSwitchEvent to set the parent screen's Title for each Block switch; Potentially also for the HeaderLeft Link

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


Reviews (0)
Category
UI & Widgets, Developer Tools, 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 .
28591
Discovery
Architecture Team
A tool to discover and measure your architecture and understand how to improve
3476
OutSystems Now
OutSystems R&D
OutSystems Now brings your OutSystems experience to any device.
9232
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
BottomBarStackNavigation
Taka Torimoto
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.
2