How to create tabbed SharePoint forms in Power Apps and its alternative

In this Power Apps tutorial, you'll find out how Power Apps form tabs are added, how the tabbed form is configured, and what steps are required for SharePoint form tabs to function. We'll also showcase a potential alternative in a few easy steps and highlight its advantages.

In this article

• What is a tabbed form?
• How to create a tabbed form in PowerApps?
  1. SharePoint List setup
  2. Create PowerApps form with buttons
  3. Customize buttons to hide/show tabs
  4. Show/hide fields on button click
  5. Final result: tabbed form in SharePoint
• Is there an easier way to build a tabbed SharePoint form?
• Try Microsoft Power Apps alternative for free

What is a tabbed form?

A tabbed form, or a form with tabs is a form that is split into sections:

• Each tab, or section, has its own selection of fields or controls
• When tab's button is clicked, this tab is selected and other tabs are hidden
• This helps to structure a form, making sure only some parts are loaded

A tabbed form can be much easier to handle and complete, as it's logically split into sections, thus this functionality can be highly desirable.

How to create a tabbed form in PowerApps

In this section, we'll go into detail on each step necessary to setup a tabbed form in PowerApps:

1. We'll show how to setup a list
2. Configure a form, add buttons
3. Write all the required formulas for the tabs to function.

SharePoint List setup

First of all, you need to create a SharePoint List with all the required columns. In this case, we've created a Projects List with details related to the project, client and team that are responsible for the project:

 

My list has the following columns:

 

Then, you need to click on Form Settings:

 

And customize the form in Power Apps:

 

Create PowerApps form with buttons

On the form in the PowerApps, make sure have all the desired columns:

 

If some are missing, you can add them:

 

Then, add buttons to the top of the form, to switch between tabs, in this case, we've added Project, Client and Team:

 

We'll use these buttons to show/hide fields, making them function as tabs.

Customize buttons to hide/show tabs

In order to add functionality to buttons, select each button, and customize their functions.

For each button, customize the following functions:

OnSelect

• Project:

Set(formTab, "Project")

• Client:

Set(formTab, "Client")

• Team:

Set(formTab, "Team")

 

DisplayMode

• Project:

If(formTab="Project", DisplayMode.Disabled, DisplayMode.Edit)

• Client:

If(formTab="Client", DisplayMode.Disabled, DisplayMode.Edit)

• Team:

If(formTab="Team", DisplayMode.Disabled, DisplayMode.Edit)

 

Show/hide fields on button click

Then, you need to select all fields and other elements for each tab, and customize their visibility function:

Visibility

• Project fields:

If(formTab="Project", true, false)

• Client fields:

If(formTab="Client", true, false)

• Team fields:

If(formTab="Team", true, false)

 

This will ensure that the fields are only displayed when a tab is selected.

Final result: tabbed form in SharePoint

Save and publish the form. As a result, you'll get the following form in SharePoint:

 

Is there an easier way to build a tabbed SharePoint form?

If you're looking for an alternative approach, don't want to write complicated formulas, deal with clunky UI, or if you want more control over your form, you can check out Plumsail Forms for SharePoint.

Same functionality can be achieved by simply opening form in an editor, dropping Tabs container, creating tabs and dropping fields into them:

 

And it looks the same, if not better, in SharePoint:

 

Alternatively, you can utilize Accordion container where multiple sections can be opened at once:

 

Or even a Wizard, where each step comes after previous one is complete, and you can make a logic sequence in which your form needs to be completed:

 

Try Microsoft Power Apps alternative for free

The product is very easy to install and use, get started with 30 days free trial of Plumsail Forms for SharePoint Online by following the installation instruction in our documentation, which includes a full video walkthrough.

If you're using SharePoint 2019 or Subscription Edition, follow the SharePoint On-Premises installation guide.