When working with the new tab list control you may have stumbled on the fact that this control does not contain native reset capabilities. As modern controls are a new set of controls, certain features present in the classic controls are currently not available in the modern variant. At the time of writing, modern controls are in preview and not meant for production use.
A common tab list question on the Power Apps Community forum, is how to reset the control or how to change tabs based on an action from another control. In this blog post we will be exploring some workarounds to reset the tab list and dynamically change the default selected tab.
TAB LIST RESET FUNCTIONALITY
The modern tab list is currently defined as a non-resettable control. As you quickly scan through the property dropdown, you notice that the ‘Reset’ property is missing. When trying to reset the control via the Reset() function, you receive the error ‘The function expects a resettable control as its input’.
Luckily, we can work around this limitation by using a variable. This variable will keep track of the currently selected tab and provide reset-like functionality by setting the variable back to the initial tab / value.
ADDING THE TAB LIST
Add a tab list to your Power Apps Canvas screen by (1) selecting ‘Insert’ in the top header, (2) opening the ‘Modern Controls’ tab and (3) clicking on the ‘Tab list’ control. In our scenario, I will create a tab list with ‘Cats’, ‘Dogs’ and ‘Other pets’ as separate tabs. The tabs can be defined by adding an array of text values in the Items property.
["Cats", "Dogs", "Other pets"]
TRACKING THE TAB LIST STATE
In order to keep track of the selected tab, let’s create a context variable that captures the tab changes. The OnSelect of the tab list should look as follows:
UpdateContext({locTab: Self.Selected})
The variable keeps track of the state but we will need to reference this value in the DefaultSelectedItems property in order for the tab to visually change.
locTab
In order to avoid a blank variable value during a new Power Apps session, define a default value in the OnVisible of that screen.
UpdateContext({locTab: {Value: "Cats"}})
Note: Should you want to change the tab state across screens or define the default value within the app OnStart, use a global variable instead.
RESET THE TAB LIST CONTROL OR NAVIGATE TO A SPECIFIC TAB
Now that we’ve defined our tab variable and a default value, you can reset the control or navigate to a specific tab by simply changing the variable value. In order to reset the control you will have to set the variable back to the initial tab value – similar to our OnVisible code.
Example of specific tab nagivation: After pressing a button I would like the tab list to automatically change to the Dogs tab – my second tab. The OnSelect of that button would have to contain the following code:
UpdateContext({locTab: {Value: "Dogs"}})
FINAL RESULT
As a closing note, the modern controls are still in preview and thus continiously being improved upon. A dedicated forum thread has been opened on the Power Apps Community forum for feedback. I have provided feedback on the Reset capabilities – feel free to give it a thumbs up.
If you liked this blog post, feel free to give it a like. | For more tips and tricks check out my blog (LaurensM).
ManishM
on:
How do you bulk download attachment files from a D...
on:
What you should know when recruiting for a Power P...
on:
Introduction of AI Builder in Power Automate: How ...
on:
Top-down 2D game engine proof of concept
WarrenBelz
on:
Locking down SharePoint so only Integrated App can...