How to create tabs in PowerApps in SharePoint Online List Form

This PowerApps tutorial explains, how to display a SharePoint online list form in a tabbed format. We will discuss how to create tabs in PowerApps.

Before creating the tab in the SharePoint online list form we should know in which case we want to display in the SharePoint online list form in tabbed form.

We will also see here for better looking at how we will add an image to SharePoint online List form using the PowerApps image control. We will also see using PowerAapps forms how the data will save to the SharePoint online list.

Learn below PowerApps tutorials:

Some time our SharePoint list contains many columns or fields. When we will go for the add new item to the SharePoint online list we will see all the field in a single form, which did not look good. For that, we can represent the SharePoint online list field in different tabs like the below screenshot.

One more benefit we can group all the related fields in a single tab. Suppose I have a Health insurance list.

The Health Insurance list will contain “PrimaryInsured Name”, “Occupation of PrimaryInsure”, “Policy Number, Company Name, “PatientName” fields. So we can replace the “Primary Insured Name” and “Occupation of Primary Insured” and “Primary Insured Address” related field in a single tab and named the tab as “PrimaryInsured”.

Like that, I have created two more tabs for the SharePoint online list that is “Insurance History” and “Insured Person” using the PowerApps designer page.

PowerApps create tabs

For creating the PowerApps form like below we need SharePoint list and the PowerApps designer page where we will customize the List form.

powerapps add tabs
powerapps add tabs

For creating some of the tabs in the SharePoint online list using the PowerApps, follow the below steps carefully.

I have created a custom list named as “HealthInsurancePolicy” in the SharePoint online modern site. I have added the below columns

  • PrimaryInsuredName of column type Single line of text
  • Primary InsuredAddress of column type Single line of text
  • Policy Number of column type Number
  • HealthInsurance of column type Choice
  • Occupation of column type Single line of text and
  • PatientAddress of column type Single line of text.
powerapps form tab
powerapps form tab

Go to the SharePoint online “HealthInsurancePolicy” list. From the Command bar, we will see the “PowerApps” option. We will see two option.

  • Create an App: This Create an App option is to create a new PowerApps form in the “HealthInsurancePolicy” list.
  • Customize forms: This is used to customize the existing list form using the PowerApps designer page.

Here we want to customize the existing list form using the PowerApps so choose the “Customize forms”.

powerapps tab control
powerapps tab control

PowerApps designer page will open where we can customize our list form. In the Right side corner, we will see the play button where we can preview our PowerApps form.

In the left side corner, we will see the “Back to SharePoint”. We can directly go to the SharePoint list from the “Back to SharePoint” option.

In the center of PowerApps designer page, we will see our SharePoint online list form.

Besides the list form, we will see the “DataSource” option. We can enable and disable the list field as per our requirement. Automatically all the columns are not displaying. So we can enable the fields from the “DataSource” options bar which contains all the list fields.

tabbed forms in powerapps
tabbed forms in powerapps

See the below screenshot I have enabled all the column from the “DataSource” option. I want to change the form color here. So select the “SharePointForm1”.

Go to the property dropdown and select the “Fill” and in the formula bar add the color name. Now the “SharePointForm1” color will change.

powerapps tabbed form
powerapps tabbed form

We will add the tab in the form so I have selected the “SharePointForm1” the drag the form down, for add the tab in the top of the form. Here we will see by using the button control how we will create the different tab. We have to take the “Button” control from the “Insert”.

create tab in the sharepoint list form using powerapps
create tab in the sharepoint list form using powerapps

Now the button control is added to the PowerApps form. In the left side panel, we can able to see our button control is added to the form. We can resize the control size from the “Size” property, we can set the size value in the formula bar.

Customize SharePoint form using PowerApps
Customize SharePoint form using PowerApps

We will change the Text property of the Button control in the PowerApps designer page. We can change the text property from the property bar from the top otherwise from the right panel we can also do.

Select the “Text” from the Properties drop-down. Write the text in the formula bar which we want to display as a control name.

sharepoint 2013 list form tabs
sharepoint 2013 list form tabs

The exciting part of PowerApps is we can create a variable and we can use in the entier form. We can create a variable using the Set method.

I have created a variable named as “varFormTab” and set the variable value as “PrimaryInsured” in the button click “Onselect” property.

powerapps tab control
powerapps tab control

We can rename the button control name from the left side panel and the right-side panel top of PowerApps designer page. For rename, just double click on the control name and rename it.

It is a good practice to rename the control. So that we can easily use in the formula when it is required. I have renamed as “btnPrimaryInsured” in the PowerApps form.

tabbed forms in powerapps
tabbed forms in powerapps

Select the button control and in the property dropdown list in the PowerApps form, select the DisplayMode. In the formula, bar set the formula “If(varFormTab=”PrimaryInsured”,Disable,Edit)” that is when the variable value is “PrimaryInsured” then button control is disabled otherwise enabled.

powerapps tabbed form
powerapps tabbed form

I have Clicked on the Play button to see how our PowerApps form look. So our output will look like below screenshot when I selected the button control, It will automatically disabled.

powerapps add tabs
powerapps add tabs

To Change the color of disable fill find the disableFill from the search in the “Advanced” tab. I have written the rule as “SharePointform1.fill”, now the button control color will change as SharePoint form color.

Suppose we have to change the color of SharePoint form then the disabled fill color will also change.

powerapps form tab
powerapps form tab

To change the radius of button control go to the “Advanced” from the left side panel. Search for “radius”. Set the “RadiusTopLeft” value and “RadiusTopRight” value. I have set the value 15 in the PowerApps form.

powerapps tab control
powerapps tab control

Now our Button control of PowerApps form looks like a tab control.

tabbed forms in powerapps
tabbed forms in powerapps

To change the alignment of button control text to top in the PowerApps form, go to the property bar and select the “VerticalAlign” and in the formula bar right Top. Now our button control text align to Top in the PowerApps form.

powerapps tabbed form
powerapps tabbed form

We want to send the PowerApps form button control, back to “SharePointForm1”. So right-click on button control, we will see the Record. Select the “Send to back”.

create tab in the sharepoint list form using powerapps
create tab in the sharepoint list form using powerapps

Now our button control sends back to the SharePoint form.

Customize SharePoint form using PowerApps
Customize SharePoint form using PowerApps

For adding another control just copy and paste the existing button control in the PowerApps form..

sharepoint 2013 list form tabs
sharepoint 2013 list form tabs

For this button control, I have to change the text property from the right-side panel. I have set one variable for this control and assign the value “InsuranceHistory” in the PowerApps form.

customize sharepoint list forms with powerapps
customize sharepoint list forms with powerapps

Now I have select the DisplayMode from the rule bar in the PowerApps form and write the rule as If(varFormTab=”InsuranceHistory”,Disabled,Edit). When we select the “InsuranceHistory” variable then it is disabled otherwise it is enabled.

powerapps add tabs
powerapps add tabs

Here I have changed the PowerApps form “InsuranceHistory” button control name.

powerapps form tab
powerapps form tab

For send this button control back, I have followed the same process like previous button control of the PowerApps form.

powerapps tab control
powerapps tab control

I have chosen the Landscape view here. To set the Landscape go to the File of the PowerApps designer page, Select the “App settings”. Choose the “Landscape” from the “Orientation” option.

powerapps tabbed form
powerapps tabbed form

Again I have copied the button control to add one more button control. I have copied so the name of button control is “btnInsuranceHistory_1” in the PowerApps form. The variable value and the Text is also the same as “InsuranceHistory” control.

create tab in the sharepoint list form using powerapps
create tab in the sharepoint list form using powerapps

To change the name go the left panel, set the name. I have set the name as “btnInsuredPerson”. I have also change the button control text value as “Insured Person”. Here I have assigned the variable value as “InsuredPerson”.

powerapps add tabs
powerapps add tabs

For this PowerApps button control also in the “DisplayMode”,I have add the rule as If(varFormTab=”InsuredPerson”,Disabled,Edit)

powerapps tab control
powerapps tab control

Now we need to set the field for each tab in the PowerApps designer page. So select the card. From the formula bar choose the “Visible” and add the rule “If(varFormTab=”InsuredPerson”,true,false)“.

The rule means when the variable value is “InsuredPerson” then the card will visible otherwise it will hide. I have set the card value should visible in the “InsuredPerson” tab.

powerapps add tab to the sharepoint form
powerapps add tab to the sharepoint form

I have select another card of PowerApps form and in the Visible property I have set the rule If(varFormTab=”InsuranceHistory”,true,false). The card only displays when the variable value is “InsuranceHistory”.

tabbed forms in powerapps
tabbed forms in powerapps

I have selected another card which we want to display on PowerApps form “PrimaryInsured” tab. So in the visible property of the card I have set the rule “If(varFromTab=”ProimaryInsured”,true,false)“.

powerapps add tabs
powerapps add tabs

I want to give the space in the card name. So I have selected the card name and clicked on “Unlock to change the Property” in the PowerApps designer page.

Customize SharePoint form using PowerApps
Customize SharePoint form using PowerApps

Now we can able to change the Text property of card name in the PowerApps form. I have set the text value as “Patient Address”. Like that set the text property for all the card name.

create tab in the sharepoint list form using powerapps
create tab in the sharepoint list form using powerapps

I want and Image should display in the PowerApps form. So go to the Insert->Media->Image.

Customize SharePoint form using PowerApps
Customize SharePoint form using PowerApps

Our Image control is added to the PowerApps form. We can add direct the Url in the rule bar. I want to add one image from the local system. So I have Clicked on Select an image”.

Now it is displaying all the local image file. Select the image it will automatically add to the PowerApps form.

create tab in the sharepoint list form using powerapps
create tab in the sharepoint list form using powerapps

Now our PowerApps form looks like bellow screenshot in the SharePoint online list. In the first tab, some of the fields is displaying.

powerapps tabbed form
powerapps tabbed form

In the second tab of SharePoint online list form, we will see some of the tab.

tabbed forms in powerapps
tabbed forms in powerapps

When we select the third tab rest of the field is showing in the SharePoint online list form.

powerapps add tabs
powerapps add tabs

You may like following PowerApps tutorials:

This PowerApps article helps us to knew how to customize the sharePoint online existing list form. This artcle was also teched how to break a large list form in a tab using the PowerApps button control. We saw here how to add an image in the SharePoint online list form for a better look.

>