Apex Designer Documentation
What's New
Getting Started
Projects
Business Objects
Processes
User Interfaces
App Behaviors
Files
Dependencies
Project Settings
Libraries
Patterns and Best Practices
App Showcase

Sticky Tabs

How to improve tab usability by retaining the current tab in a URL query parameter.

Blank Profile Image
Written by Keith Miller
Updated 8 months ago
2 min read

Tabs in the Apex Material Library provide a great user experience while on a page but navigation can introduce issues:

  1. User navigates to the page with the tabs.  The first tab is active.
  2. User clicks the third tab. The tab contains a list with anchors to navigate to other pages.
  3. User clicks a link to go to a different page.
  4. User clicks the back button.  The system displays the page with the first tab active.
  5. User frowns.

The same thing happens when the user reloads the page:

  1. User navigates to the page with the tabs.  The first tab is active.
  2. User clicks the third tab.
  3. User reloads the page.  The system displays the page with the first tab active.
  4. User frowns.

The Solution

It is easy to improve the usability of tabs using Apex Designer. The design pattern uses a tabIndex query parameter in the page URL to retain the current tab.

Add a tabIndex Property

First add a tabIndex property of type number:

Property dialog window

Bind tabIndex to the Tab Group

Next bind tabIndex to the selectedIndex attribute on the Tab Group:

Tab group component configuration

Add a setTab Method

Next add a setTab method to your page with this implementation:

this.router.navigate([], {
	relativeTo: this.route,
	queryParams: {
		tabIndex: this.tabIndex
	},
	queryParamsHandling: 'merge',
	replaceUrl: true
});

Normally router.navigate is used to go to a different page. In this case, the empty array along with the "relativeTo" option keeps the user on the same page. The "queryParams" option sets the tabIndex query parameter. The "queryParamsHandling" option merges the tabIndex parameter with any others that are already there. Finally the "replaceUrl" option tells Angular not to add this change to the browser history (more on that later).

Trigger setTab on tabIndex Change

Next trigger setTab when tabIndex changes:

Property Dialog with on change event

Add a getTab Method

Finally, add a getTab method set to be called automatically on load with this implementation:

this.subscription = this.route.queryParams.subscribe((params) => {
	this.tabIndex = params.tabIndex;
});

The code subscribes to changes in the queryParameters and updates tabIndex appropriately. Since the Tab Group is linked to tabIndex, it will automatically change the current to the tabIndex value from the queryParameter. Be sure to clean up your subscriptions as described in Cleaning Up Subscriptions.

Changing Tabs with the Back Button

If you want the back button to move to the previous tab, just remove the "replaceUrl" option in the setTab method implementation:

this.router.navigate([], {
	relativeTo: this.route,
	queryParams: {
		tabIndex: this.tabIndex
	},
	queryParamsHandling: 'merge'
});
Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2022 Apex Process Consultants