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:

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 Name	Type
Full Name	Single line of Text
Email	Single line of Text
Mobile	Number
DOB	Date
Gender	Choice
Address	Multiple lines of text
Highest Qualification	Choice
Course Name	Choice
University	Choice
Passing Year	Choice
Academic Project	Single line of Text
Project Type	Choice
Project Group	Choice
Skills	Single line of Text

• 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.

• It will redirect to the Power Apps by creating customized forms as shown below:

• 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).

• 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.

• Add a button control to the horizontal gallery. Set the Text property as below to display the labels.

Text = ThisItem.label

• 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.

• 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.

• 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.

• 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.

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

• 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.

• 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:

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

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.

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

Power Apps tabbed form using canvas app

In the above section, we have seen 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’.

• 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 name of the tabs that we are going to use.

• Add a Power Apps button control into the horizontal gallery and insert the below expression on the button’s Text property.

Text = ThisItem.Value

• 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:

• 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.

• 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.

• 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.

• 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"

• Again set the rest data cards’ visible properties as the below expression. As a result, when the Project Details will click, 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"

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")

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:

• 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)

Let’s fill in the fields and click on the Save button. We can see the inserted data will save into the 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

In this section, we will see Power Apps tabbed form with the required fields.

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

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

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:

Once mandatory fields will fill, we can 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:

• Power Apps Print Function [With Various Examples]
• Get Value from Text input in Power Apps
• How to Get Gallery Item By ID in Power Apps
• Power Apps Set ThisItem Value