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.

PowerApps Create Tabs
create tabbed forms in PowerApps

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
PowerApps Create Tab
create tabbed forms in PowerApps

Step – 2:

  • Create a PowerApps Canvas app. Connect the SharePoint List Data source (Hospital Registration Details) to the app.
Create tabs in PowerApps
How to create tabbed forms in PowerApps
  • 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.
Create tab in PowerApps
create tabbed forms in PowerApps

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.
how to create tabs in Powerapps
powerapps creating tabbed forms

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
how to create tab in PowerApps
powerapps creating tabbed forms
  • 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.

PowerApps Tabbed Form
powerapps creating tabbed forms

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
powerapps create tabbed form for sharepoint list
powerapps create tabbed form for sharepoint list
  • 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.

powerapps create tabbed form from excel
powerapps create tabbed form from excel

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
powerapps tab navigation
powerapps create tabbed form from collection
  • 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.

powerapps create tabbed form from collection
powerapps create tabbed form from collection

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.
powerapps create tabbed form from list
powerapps create tabbed form from list

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.

Create powerapps tab navigation
powerapps create tabbed form from list
  • 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

create tab navigation in PowerApps
powerapps create tabbed form from scratch

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.
powerapps create tabbed form from scratch
powerapps create tabbed form from scratch
  • 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.
how to create PowerApps tabed form
powerapps create tabbed form from scratch

Also, you may like these below PowerApps tutorials as:

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.

  • Nvm I fixed it. For some reason PowerApps doesn’t have the “Item” property set by default when you click the name of your form in the left pane. Just set it to Defaults(”)

  • Is there a step missing? Is there a way to container the fields and show and hide the container? Your fields are ordered so nicely and if you were hiding field by field it seems this form would be a mess?

  • >