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:
- How to use PowerApps Table() Function
- PowerApps Functions Tutorial
- Working with PowerApps Collection
- PowerApps show hide fields based on Yes/No column
- PowerApps update data table columns
- PowerApps gallery control filter example
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.
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.
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 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.
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.
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”.
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.
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.
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.
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.
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.
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.
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.
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.
Now our Button control of PowerApps form looks like a tab control.
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.
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”.
Now our button control sends back to the SharePoint form.
For adding another control just copy and paste the existing button control in the PowerApps form..
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.
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.
Here I have changed the PowerApps form “InsuranceHistory” button control name.
For send this button control back, I have followed the same process like previous button control of the PowerApps form.
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.
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.
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”.
For this PowerApps button control also in the “DisplayMode”,I have add the rule as If(varFormTab=”InsuredPerson”,Disabled,Edit)
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.
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”.
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)“.
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.
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.
I want and Image should display in the PowerApps form. So go to the Insert->Media->Image.
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.
Now our PowerApps form looks like bellow screenshot in the SharePoint online list. In the first tab, some of the fields is displaying.
In the second tab of SharePoint online list form, we will see some of the tab.
When we select the third tab rest of the field is showing in the SharePoint online list form.
You may like following PowerApps tutorials:
- Customize SharePoint online list forms like new, edit and display form using Microsoft PowerApps
- PowerApps upload file to SharePoint Online document library using Microsoft Flow
- PowerApps Employee Engagement Survey Example
- PowerApps Media Control
- Microsoft PowerApps Radio Button Example
- PowerApps submit form to SharePoint Online list
- Embed PowerApps in Modern SharePoint Online Site Page
- Microsoft PowerApps: Create Login Screen
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.
I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com