How to create multiple tabs form in Power Apps

Are you struggling to create a tabbed form in Power Apps? Check out this complete step-by-step tutorial on how to create multiple tabs form in power apps.

Recently, we got a requirement to build a tabbed form within the Power Apps while working with the Power Apps’ customized SharePoint form.

That means we will create an app within the Power Apps having multiple tabs such as Personal Details, Education, and Projects. When the user clicks on the ‘Personal Details’ tab, the respective form with fields will be visible. Similarly, when the ‘Education’ tab is clicked, the respective fields will be displayed as shown below:

Power Apps Tabbed Form
Power Apps Tabbed Form

Create multiple tabs form in power apps

Here, we will see how to create a Power Apps tabbed form. To work with the above scenario, follow the below step-by-step guide:

  • We have a SharePoint list named ESP Job Portal having columns such as:
Column NameType
Full NameSingle line of Text
EmailSingle line of Text
MobileNumber
DOBDate
GenderChoice
AddressMultiple lines of text
Highest QualificationChoice
Course NameChoice
UniversityChoice
Passing YearChoice
Academic ProjectSingle line of Text
Project TypeChoice
Project GroupChoice
SkillsSingle line of Text
Power Apps tabbed form
SharePoint List
  • Let’s integrate the above SharePoint list into Power Apps to create a customized form. For this, on the SharePoint list, click on Integrate > Power Apps > Customize forms.
Build Power Apps tabbed form from SharePoint
Build Power Apps tabbed form from SharePoint
  • It will redirect to the Power Apps by creating customized forms as shown below:
Build a tabbed form in Power Apps
Build power apps tabbed form 
  • Add a rectangle to the above custom form and add a text label control to the rectangle. Also, give a name to the label control (Ex: ESP Job Portal).
Create a tabbed form in Power Apps
Create a tabbed form in Power Apps
  • Add a blank horizontal gallery to the above screen and place it on the rectangle.
  • Insert the below expression on the horizontal gallery’s Items property to create a table.
Items = Table({ID:1, label:"Personal Details"}, {ID:2, label:"Education"}, {ID:3, label:"Project"})

Where, we have created 3 tabbed such as Personal Details, Education, and Project whose IDs’ are 1,2, and 3 respectively.

Create a tabbed form in PowerApps
Create a tabbed form in PowerApps
  • Add a button control to the horizontal gallery. Set the Text property as below to display the labels.
Text = ThisItem.label
Create a tabbed form in Power Apps using SharePoint list
Create a tabbed form in Power Apps using the SharePoint list
  • Next, we will create a variable using the table’s ID. Using that variable and ID, we will arrange the tabbed form. To create the variable, insert the below expression on the button’s OnSelect property.
OnSelect = Set(VarTabClicked, ThisItem.ID)

Where VarTabClicked is the name of the global variable and ThisItem.ID is the value of the variable.

Power Apps create tabbed form
Power Apps create tabbed form
  • Now, select each data card and use the variable to insert the following expression on the Visible property and set an ID.
  • For example, if we set the Visible property of the Title data card to ‘VarTabClicked = 1‘, the card will only appear when the Personal Details tab is clicked. Similarly, if we set ‘VarTabClicked = 2′, the data card will only appear when the Education tab is clicked.
  • As per the requirement, the client wants to display the Title (Full Name), Email, Mobile, DOB, Gender, Address, and Attachments in the first tab i.e., Personal Details. For this, insert the below expression on each data card’s Visible property as below:
Title's Visible: VarTabClicked =1
Email's Visible: VarTabClicked =1
Mobile's Visible: VarTabClicked =1
DOB's Visible: VarTabClicked =1
Gender's Visible: VarTabClicked =1
Address's Visible: VarTabClicked =1
Attachment's Visible: VarTabClicked =1

Below, we are displaying a screenshot where we have set the DOB data card’s Visible property as VarTabClicked =1.

Create a tabbed form in Power Apps using SharePoint Online
Create a tabbed form in Power Apps using SharePoint Online
  • Similarly, set the visible property of the Highest Qualification, Course Name, University, and Passing year’s Data card with the below expression.
Highest Qualification's Visible: VarTabClicked =2
Course Name's Visible: VarTabClicked =2
University's Visible: VarTabClicked =2
Passing year's Visible: VarTabClicked =2

As per the above expression, the above-mentioned data card will only appear when the Education tab is clicked.

create multiple tabs in powerapps
Build a tabbed form in Power Apps using the SharePoint list
  • Again, insert the below expression on the Visible property of the rest data cards (i.e., Academic Project, Project Type, Project Group, and Skills).
Academic Project's Visible: VarTabClicked=3
Project Type's Visible: VarTabClicked=3
Project Group's Visible: VarTabClicked=3
Skills's Visible: VarTabClicked=3

As per the above expressions, the above-mentioned data cards will appear only when the Project tab is clicked.

create multiple tabs form in power apps
Power Apps create a tabbed form

That’s it! We can see when the user clicks on any tab, the respective data cards will appear as shown below:

How to create a Power Apps tabbed form
How to create a Power Apps tabbed form
  • Finally, we will add a Save icon to the above form and insert the below expression on the icon’s OnSelect Property. As a result, when the user clicks on the icon the inserted data will be saved to the specified SharePoint list.
OnSelect = SubmitForm(SharePointForm1)

Where SharePointForm1 is the name of the SharePoint customized form.

How to build a Power Apps tabbed form
How to build a Power Apps tabbed form
  • On the SharePoint list, let’s rename the Title column as Full Name and refresh the data source on the Power Apps. We can see that the Title name is renamed to Full Name as shown below:
Power Apps tabbed form from SharePoint
Power Apps tabbed form from SharePoint

Now preview the app and click on each tab to insert the respective data with values. Press the Save icon.

Power Apps build a tabbed form
Power Apps build a tabbed form

This is how to build a tabbed form within the Power Apps.

Along with this, as we have created this tabbed form by integrating the SharePoint list, we can see this tabbed form within the SharePoint list while creating a new item.

Using SharePoint list create a Power Apps tabbed form
Using SharePoint list create a Power Apps tabbed form

This is how to display a Power Apps customized form within the SharePoint list.

Power Apps tabbed form using canvas app

The above section shows how to create a tabbed form from the SharePoint customize form within Power Apps. Now, we will see how to create a Power Apps tabbed form using the Canvas app.

For this, we are going to use the above SharePoint list and the following steps are:

  • On the Power Apps, create a blank canvas app and give a name to the canvas app. (Ex: Power Apps canvas app tabbed form)
  • Connect the above SharePoint list(‘ESP Job Portal‘) to the canvas app.
  • On the blank Power Apps screen, add a rectangle and add a text label control. Give a text to the label control i.e., ‘ESP Job Portal’.
Tabbed form in Power Apps
Tabbed form in Power Apps
  • Add a blank horizontal gallery to the screen and place the gallery under the header of the form.
  • Insert the below expression on the horizontal gallery’s Items property to create the items.
Items = ["Personal Details", "Education Details", "Project Details"]

Where Personal Details, Education Details, and Project Details are the names of the tabs that we are going to use.

Create a tabbed form in PowerApps canvas app
Create a tabbed form in PowerApps canvas app
  • Add a Power Apps button control into the horizontal gallery and insert the below expression on the button’s Text property.
Text = ThisItem.Value
Power Apps canvas app tabbed form
Power Apps canvas app tabbed form
  • To check whether the button(tab) is clicked or not, insert the below expression on the respective properties of the button control.
Fill = If(ThisItem.IsSelected,Color.LightBlue,RGBA(0,0,0,0))
HoverFill = Color.LightBlue
RadiusTopLeft = 25
RadiusTopRight = 25

As a result, now the button control will look like as below:

Power Apps canvas app build tabbed form
Power Apps canvas app build tabbed form
  • Using the button’s text, let’s create a global variable on the button’s OnSelect property. Later we will use the variable for each data card that will appear when the respective tab is clicked.
OnSelect = Set(VarTabClicked, Self.Text)

Where VarTabClicked is the name of the global variable and Self.Text indicates the respective button’s name that has been clicked.

Tabbed form in Power Apps canvas app
Tabbed form in Power Apps canvas app
  • Now, we will add an edit form to the above Power Apps screen. Connect that edit form to the Sharepoint list and add all the fields to the form.
How to build a tabbed form in Power Apps canvas app
How to build a tabbed form in Power Apps canvas app
  • As per the requirement, when the user clicks on the Personal Details tab, then the respective certain fields will appear. Such as Full Name, Email, Mobile, DOB, Gender, Address, and Attachments.
  • For this, select each above-mentioned data card and insert the below expression on the Visible property.
Full Name's Visible: VarTabClicked = "Personal Details"
Email's Visible: VarTabClicked = "Personal Details"
Mobile's Visible: VarTabClicked = "Personal Details"
DOB's Visible: VarTabClicked = "Personal Details"
Gender's Visible: VarTabClicked = "Personal Details"
Address's Visible: VarTabClicked = "Personal Details"
Attachment's Visible: VarTabClicked = "Personal Details"

Now, we can see all the above-mentioned fields will be visible only when the Personal Details tab is clicked.

Create a Power Apps tabbed form on Canvas app
Create a Power Apps tabbed form on Canvas app
  • Similarly, let’s set the below expression on certain fields’ Visible properties that should appear when the Education Details tab is clicked, such as Highest Qualification, Course Name, University, Starting Year, Passing Year, and Mark Secured in Percentage.
Highest Qualification's Visible: VarTabClicked = "Education Details"
Course Name's Visible: VarTabClicked = "Education Details"
University's Visible: VarTabClicked = "Education Details"
Starting Year's Visible: VarTabClicked = "Education Details"
Passing Year's Visible: VarTabClicked = "Education Details"
Mark Secured in Percentage's Visible: VarTabClicked = "Education Details"
Canvas app tabbed form in Power Apps
Canvas app tabbed form in Power Apps
  • Again, set the rest data cards’ visible properties as the below expression. As a result, when the Project Details is clicked, the respective fields will appear, such as Academic Project, Project Summary, Project Type, Project Group, Skills, and Your role in Project.
Academic Project's Visible: VarTabClicked = "Project Details"
Project Summary's Visible: VarTabClicked = "Project Details"
Project Type's Visible: VarTabClicked = "Project Details"
Project Group's Visible: VarTabClicked = "Project Details"
Skills's Visible: VarTabClicked = "Project Details"
Your role in Project's Visible: VarTabClicked = "Project Details"
Power Apps canvas app create tabbed form
Power Apps canvas app create tabbed form

Now, for a better look, we’ll change the Edit form’s Column property to 1 and DefaultMode to New.

Also, add the below expression on the Power Apps Screen’s OnVisible property. As a result, when the user opens the app, bydefault it appears some columns that come under the Personal Details tab.

OnVisible = Set(VarTabClicked, "Personal Details")
Build tabbed form in Power Apps
Build a tabbed form in Power Apps

That’s it! Let’s save and publish the app for now. Play the app in preview mode and we can see that when we click on a certain tab the respective fields will appear as shown below:

PowerApps canvas app tabbed form
PowerApps canvas app tabbed form
  • Now, we will add two button controls to the above-tabbed form and rename the buttons as Save and Cancel respectively.
  • Insert the below expression on the Save button’s OnSelect property to save the inserted data to the SharePoint list.
OnSelect = SubmitForm(Form1)

Where Form1 is the name of the Power Apps edit form.

  • Similarly, insert the below expression on the Cancel button’s OnSelect property to cancel or reset the form.
OnSelect = ResetForm(Form1)
Tabbed form in PowerApps canvas app
Tabbed form in PowerApps canvas app

Let’s fill in the fields and click on the Save button. We can see the inserted data will save into the SharePoint list.

Power Apps canvas app tabbed form using SharePoint list
Power Apps canvas app tabbed form using SharePoint list

This is how to build a tabbed form within the Power Apps canvas app using a SharePoint list.

Power Apps tabbed form with required fields

This section will see Power Apps tabbed form with the required fields.

Suppose, there are certain required or mandatory fields available in the above SharePoint list.

Power Apps tabbed form with mandatory fields
Power Apps tabbed form with mandatory fields

Let’s refresh the SharePoint data source list on the above-mentioned Power Apps canvas app tabbed form. Once the data source is refreshed, the required fields (data cards) will appear with the small asterisk symbol.

Power Apps tabbed form with required fields
Power Apps tabbed form with required fields

Also, we can see on the above screen, by default, a required message is appearing under the required fields.

In Power Apps, it doesn’t allow saving the inserted data without filling in these fields. We also observe that the required message automatically disappears once the field is filled, as shown below:

PowerApps tabbed form with required fields
PowerApps tabbed form with required fields

Once mandatory fields are filled, we can be able to save the data to the data source. This is how to work with Power Apps tabbed form with the required fields.

Conclusion

From this Power Apps Tutorial, we learned how to build a create multiple tabs form in power apps from a SharePoint list based on different scenarios. Such as:

  • Build a tabbed form within Power Apps
  • Power Apps tabbed form using canvas app
  • Power Apps tabbed form with required fields

You may also like the following Power Apps tutorials:

>