How to Create Tabbed Forms in PowerApps for SharePoint List

In this PowerApps Tutorial, We will see what are tabs in PowerApps, How to create a tab or tabs in the PowerApps app. This is a complete example of how to create tabbed forms in PowerApps for the SharePoint list.

Also, by taking a simple scenario, We will see how we can use the PowerApps Tabs on the PowerApps screen.

What are PowerApps Tabs?

• A tab is maybe a Button or any clickable input control at the top of a Form or a Window. This tab helps to display another page or area when a user clicks on it. When a user clicks the tabs, it is doing some functionality.
• Similarly, PowerApps Tabbed forms are used to make group items and keep the visible size of the forms manageable.
• Till now PowerApps does not have any tabbed form. So we can create the tabbed form by using some group of Powerapps input controls and as well as a gallery.

Requirement:

Below screenshot represents the scenario that I want to create for users. There are total three tabs as:

1. Disease: When a user will click on the Disease tab, then it will display all the fields that are related to disease only (like Circulatory Problems, Liver Disease, Hepatitis, etc). At the same time, this tab will be in disable mode and the rest two tabs are in edit mode.
2. Patient Details: When a user will click on the Patient Details tab, it will display all the fields that are related to the Patient only (like Patient Name, Father Name, DOB, etc). At the same time, this tab will be in disable mode and the rest two tabs are in edit mode.
3. Relative Details: When a user will click on the Relative Details tab, it will display all the fields that are related to the Patient Relative only (like Patient Relative Name, Relationship with the patient, Relative Contact Number, etc). At the same time, this tab will be in disable mode and the rest two tabs are in edit mode.

Also, When the user will enter all the field values and once submit it, then all the data will store in the SharePoint list.

Read: Power Apps Loading Spinner

Create Tabbed Form in PowerApps

Here we will see how we can create the different PowerApps tabs as per the need. Follow the below steps to do the above requirement.

Step – 1:

There is a SharePoint List named Hospital Registration Details. This list has these many below columns with different Data types as:

1. Title: This is a By default column with a Single line of text. I just renamed it to Patient Name.
2. Father Name: Single line of text
3. Date Of Birth: Date and Time
4. Gender: Choice Type and so on

Step – 2:

• Create a PowerApps Canvas app. Connect the SharePoint List Data source (Hospital Registration Details) to the app.

• On the PowerApps screen, Insert an Edit form (Insert -> Forms -> Edit). Connect the SharePoint list data source to the form. You can see all the fields have been retrieved from the list. Keep the required fields and remove the unnecessary fields from the form.

Step – 3:

• Add three Buttons to create three tabs on the screen. All the buttons should be placed above the edit form that looks like below.
• Set all the three Button’s Text property to Disease, Patient Details, and Relative Details.

Step – 4:

• Select the Disease tab and apply this beow formula on it’s OnSelect property as:

OnSelect = Set(varFormTab, "Disease")

Where,

1. varFormTab = Variable Name
2. Disease = This is the value that I have specified

• Then select the DisplayMode property of the tab and set this below formula:

DisplayMode = If(
    varFormTab = "Disease",
    Disabled,
    Edit
)

The above code specifies if the specified variable contains the Disease value, then the tab will be in disable mode otherwise it will be in edit mode.

Step – 5:

• Select the Patient Details tab and apply this beow formula on it’s OnSelect property as:

OnSelect = Set(varFormTab, "PatientDetails")

Where,

1. varFormTab = Variable Name
2. PatientDetails = This is the value that I have specified

• Then select the DisplayMode property of the tab and set this below formula:

DisplayMode = If(
    varFormTab = "PatientDetails",
    Disabled,
    Edit
)

The above code specifies if the specified variable contains the PatientDetails value, then the tab will be in disable mode otherwise it will be in edit mode.

Step – 6:

• Select the Relative Details tab and apply this beow formula on it’s OnSelect property as:

OnSelect = Set(varFormTab, "RelativeDetails")

Where,

1. varFormTab = Variable Name
2. RelativeDetails = This is the value that I have specified

• Then select the DisplayMode property of the tab and set this below formula:

DisplayMode = If(
    varFormTab = "RelativeDetails",
    Disabled,
    Edit
)

The above code specifies if the specified variable contains the RelativeDetails value, then the tab will be in disable mode otherwise it will be in edit mode.

Step – 7:

• Now we will decide which field will display in which tab. That means, suppose on the screen, I have a Disease named “Chronic Headaches“.
• I want to display this field when the user will click on the Disease tab. Follow the below formula to do so.
• Select the Chronic Headaches data card (the data card must be unlocked first) and apply this below formula on its Visible property as:

Visible = If(
    varFormTab = "Disease",
    true,
    false
)

Where,

1. varFormTab = Variable name that we have created before
2. Disease = The value we have specified

The above code specifies, if the variable is equal to the Disease value, then the field will visible otherwise it will hide.

NOTE:

If you are interested to learn about PowerApps Toggle control, then refer to this article: PowerApps toggle control + How to use with example. This PowerApps tutorial helps you to get how to change the toggle value from true to Yes or false to No and many more.

Step – 8:

• In the same way, suppose there is a field named Patient Name and we want to display the field when the user will click on the Patient Details tab.
• To do so, Select the Patient Name data card and apply this below formula on its Visible property:

Visible = If(
    varFormTab = "PatientDetails",
    true,
    false
)

Where,

1. varFormTab = Variable name that we have created before
2. PatientDetails = The value we have specified

The above code specifies, if the variable is equal to the PatientDetails value, then the field will visible otherwise it will hide.

• In the same way, you can do the same process for the rest fields for their specific tabs.

Step – 9:

• Insert a Button where it will help you to store the record in the SharePoint list (Hospital Registration Details).
• Select the Button and set its Text property to Save.
• Apply this below formula on Button’s OnSelect property as:

OnSelect = SubmitForm(Form1)

Where,

Form1 = Edit form name

Step – 10:

• Save and Publish the app. Reopen the app again. Enter the values by choosing each and every tab and then click on the Save button.

• Next, go to the existing Sharepoint list (Hospital Registration Details) and refresh it. You can see a new item has been saved as like the below screenshot.

Also, you may like these below PowerApps tutorials as:

• PowerApps repeating table
• PowerApps CountIf Function with Examples
• PowerApps CountRows function with Examples
• PowerApps Count Function with Examples
• PowerApps CheckBox – How to use
• PowerApps First, FirstN, Last, and LastN function with examples
• PowerApps AddColumns Function with Examples
• PowerApps LastSubmit() with Examples
• PowerApps ForAll Function with examples
• PowerApps Patch Function with examples

In this PowerApps Tutorial, We saw what are PowerApps tabs, How to create a tab or tabs in the PowerApps app. We learned here, how to create a tabbed form for the SharePoint list in PowerApps.