How To Navigate Among Tabs In PowerApps Form

In PowerApps, you might come across a scenario where you need Prev and Next buttons to navigate among the tabs. Yes, in this article we will see how to achieve this requirement in PowerApps.

If you are interested to learn about PowerApps tab control, then refer to this blog - How To Create Tabs In PowerApps.

Let's start with Prev and Next Buttons  ;)

Introduction

A tab control is a flexible navigation component that can be used to build tabbed interfaces in PowerApps applications.

It is important to place the Prev and Next buttons at the bottom of the form to reduce scrolling up and navigating using tabs when there are more fields in the form.

Step 1

Create a Canvas App in PowerApps.

Step 2

Create Tabs (refer to the above link).

Step 3

Add a button on the edit form and name it as "Prev" and "Next",

Step 4

Adding Visible property for the buttons to show on particular Tabs,

In the above image, we see that there are 2 buttons "Prev" and "Next" in Tab2.

Tab2 - Prev button - Visible property - Tab2

Tab2 - Next button - Visible property - Tab2

Similarly, create 1 button for Tab1 as "Next" and set its visible property to Tab1.

Create 1 button for Tab3 as "Prev" and set its visible property to "Tab3".

Step 5

To Navigate from Tab1 to Tab 2 using the "Next" button,

Step 6

To Navigate from Tab2 to Tab 1 using the "Prev" button,

Step 7

Follow the same for the Tab 2 "Next" button and Tab 3 "Prev" button.

Tab 2: Next - OnSelect - Set(Tab3, true);Set(Tab1,false);Set(Tab2,false)

Tab 3: Prev  - Onselect - Set(Tab2, true);Set(Tab1,false);Set(Tab3,false)

OUTPUT

Prev and Next buttons work as expected. Try this out :)

Note
It is important to understand that each tab is not a different screen, we are just playing with visible property to hide and show the tabs, buttons, and fields on the form in a single screen/form.

Summary

In this article, we have learned to navigate among tabs in PowerApps.