Power Apps Tabbed SharePoint Form
In this post, I’ll show you a way to create a form that has the appearance of tabs, using a SharePoint list form customized with PowerApps.
- Customize your form with PowerApps. (see my previous post on how to do this)
- The tabs at the top of your form are just going to be buttons, we’ll make them look like tabs. So select your form control (SharePointForm1) and drag the top of it down, so it’s shorter.
- While you have your form control selected, you may want to delete all of the cards for columns you don’t need in your form at all. (like Compliance Asset id, modified, etc)
- From the Insert tab, insert a button. For the text, instead of Button, type the text you’d like your first tab to say. Drag the button so that it lines up right at the top of your form control.
For fun, from the Home tab, I changed my theme, as well.
- With your button selected, go to the Advanced pane on the right. Change the RadiusTopLeft to 15, and RadiusTopRight to 15 also. This gives your tabs some curvature at the top.
- Go ahead and rename this button control, call it btnBasicsTab
- For your form, by default the form is clear. I want the form to be a different color than the background (the screen). So for mine, I set the screen’s fill color as a light gray RGBA(217, 216, 217, 1), and then I selected the form, and set it’s color to a dark gray RGBA(46, 46, 46, 1).
- Let’s go ahead and set up a bunch of properties on this button before making the other tabs, so that when we copy and paste it to create the others, we’ll have less work to do. For the button, also set these properties. Basically, once you have these properties in place, as soon as you change the text on every other button, it will by dynamic, and you won’t have to change any other settings, except to drag the button to the right spot.
OnSelect Set(varFormTab,btnBasicsTab.Text) DisabledBorderColor ColorFade(btnBasicsTab.BorderColor, 70%) PressedBorderColor btnBasicsTab.Fill HoverBorderColor ColorFade(btnBasicsTab.BorderColor, 20%) BorderStyle BorderStyle.Solid DisabledColor btnBasicsTab.Color HoverColor btnBasicsTab.Color DisplayMode If(varFormTab=btnBasicsTab.Text,Disabled,Edit) DisabledFill SharePointForm1.Fill VerticalAlign Top - Now, when you click the button, you’ll see that it looks like this:
- Now, select your button, and copy and paste it so that you’ll have 2 buttons, paste as many times as you need buttons. I’ll just do three. Go ahead change the text and rename them as well.
- Line your tabs up across the top of the form. My form is a time off request, so I’m naming my other tabs “PTO” and “Contact”.
- Now it’s time to decide which fields go on which tab. We’ll just do this on each card. Select your first card. What tab do you want it to show on? For mine, I’d like the Title field to show on the “Basics” tab.
Select the card, and set the visible property: varFormTab=”Basics”
This screenshot shows me selecting the Employee card, and setting the Visible property:
Notice that each time you set a visible property, the card will immediately disappear. If you skip any cards and don’t set the OnVisible property, they will show on all tabs. - When people first open this app, you’ll want it to default to a specific tab, most likely. Select your screen (by default, it’s called FormScreen1). Set the OnVisible property to varFormTab=”Basics” if you want it to always start on the basics tab. If your screen is the first screen in the app, go ahead and set it in the OnStart property as well.
I’m going to add a nice little label at the top of the form, for a title, just to make it look a little nicer. Don’t forget to save the form and Publish it.
Interested in learning a lot more about PowerApps? Check out my online classes here.
Check out my hour long demo of this solution
Pingback: SharePoint Power Hour: Microsoft Forms Updates | Microsoft Home
Hi Laura, I have created a same tabbed view form and have set variable for the tabs on select. Now I want to update a field in the list based on the variable. How do I do that? I have tabs named “Sales order” & “Purchase order” now based on the selection I want a single line text filed to be updated as per the selection. Can I use the variable to update the field? If yes then where do I put the formula in the single line field property “Default” or “Update”? Please suggest.
I created a SharePoint List and started going through creating the Form. It’s “Sort of” working. I can Add the data, but when I go back to say Edit the list, it just creates a new list with just that data that I added in the list instead of appending to the list I was editing. How do I go about editing from the form without creating a new item?
Is it a customized list form, or just a regular PowerApp? If it’s a customized list form, take a look at your SharePoint integration settings, and the new and edit form setting specifically. I covered those in this other post. https://wp.me/p77gqd-S0
Hi Laura,
Very helpful article!
Quick question: Is there a way to modify the font size/card size at the FormScreen or SharePointForm level? I’m creating a new form for a SharePoint list and faced with the prospect of updating every card individually just isn’t practical. Any suggestions?
No, there isn’t a way to do that on all of them at once, in the current version. I know, frustrating and inefficient.
A follow-up question:
I’ve noticed that when I update the form on one tab, save and move to another tab, the fields in the original tab don’t stay put!
I have 35 fields spread over 3 tabs with a finishing tab at the end. The fields on each tab need to be in order to make any sense. The issue is that when I switch from one tab to another (using the preview button), the field order changes on the tab I worked on just prior. I have tried updating 1 tab at a time, saving and moving on. It looks like field order is only persistent on the tab I’m currently working on. I have also tried to save/publish after each tab, it just messes up the others.
Any ideas? I’m pretty sure I’m missing something painfully simple, so any help is appreciated. 🙂
Thanks!
Ive been experiencing the same thing. I have an interface with 8 tabs and variety of fields on each tab. Each tab is a “stage” in a process and depending on the stage the list item is in, a specific tab is displayed. While setting up the tabs, the order of the field gets shuffled when in design mode. once I reordered, it seems to be stable, but if i add new fields… it will shuffle again. very frustrating.
I agree.
Not sure if anyone found a solution to this or not. Just found a comment on another similar post where “ericonline” referenced the Microsoft documentation on “Understanding Form Layout.” Not sure if they were the first but thought I would let everyone know what the solution they implemented was:
Original posting: https://powerusers.microsoft.com/t5/PowerApps-Ideas/Please-don-t-allow-Form-Cards-to-change-order-on-the-fly/idi-p/13284
Summary of ericonline’s post:
Check this out: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/working-with-form-layout#set-width-and-height
This article states that cards can be controlled using the X and Y values of each. This can be done by stepping through each card and setting the Y value manually to an increment value. After inputting a value (such as “3”) it might dynamically change and show a higher number. However, by manually inputting a higher number value in the next desired card, it will orient below every time.
For a form that has a lot of cards, this is really inconvenient, but better than a form that reorders all its fields I guess. Thanks for the wonderful tutorial on the tabs WonderLaura. With this implemented, it really turned out nice!
Awesome!! Perfect!
Any idea how to set the default tab for a customized list form? Setting the default tab with OnStart or OnVisible does not work, because it seems that both event are not fired, When you close your PowerApp-SharePoint item with “Cancel” and then open a new item this new item will open the tab that has been selected in the form before…
For a customized list form, go to your “SharePointIntegration” control in the app. That special control has properties that control what happens when a new form is started, when a form is being edited, etc. Those are the properties that you’d use instead of OnVisible.
Yes, that’s right. But non of these action fires, when you close the SharePoint form with the ‘X’ on the right side of the form.
Hi Laura,
Is there a way to show SharePoint list items to show in Tab Views like InProgress items in one Tabs Completed Items in another Tab?
Yes, you’d use galleries on each tab, instead of forms like in this solution. There’s a Microsoft template called “help desk” that does something similar.
Great post Laura! Do you know an efficient way to adjust the size of all of the card fields (not just label text but entry text too. I have a tabbed form with hundreds of fields and the thought of manually adjusting the properties of each card is making me cringe!!!
No, I don’t know of a way. I agree it’s a pain.
Great article. having an issue where i set the Visible property, as described to “varFormTab=”tabname”. yet, the cards do not appear on the tabbed pages. the variable shows properly, using that “label” tip to confirm it is being passed. everything else seems good, though
Simple, but elegant, I loved it! well done.
Can i suggest a refinement? i used your method down to the tee and then realised what if someone wanted to change the Tab text there might be problem. So I thought instead of explicitly stating it in the Visible property of the Data Card that instead you then refer back to the Button.text value. that way the text can be changed without crippling the functionality. just sayin is all. 🙂
So at step 12 type this: Set(varFormTab, btnFormTabxxx.Text) and using multiple DataCards with relevant fields embedded in each card.
u da best! and thanks
Trying to figure out a way to show a datacard under multiple tabs (I used customize forms). Anyone have a good way?
Yes, use OR logic. The || will let you do logic like that, so visible will be if it’s this or this or this, so that it displays under multiple conditions (tabs). So for example, step 11 would be Visible = varFormTab=”Basics” || varFormTab=”PTO || varFormTab=”Contact”
That way, that card would show on those 3 tabs.
Thank you so much!! Worked like a charm. Love your videos!
I modified the tabs each with their own color and then added the following code to the main “SharePointForm1″, Fill section so each tab changes color when I select it: (Hope it helps)
If(varFormTab=”Asset Info”,RGBA(214, 235, 255, 1),
If(varFormTab=”Check Out”,RGBA(220, 153, 153, 1),
If(varFormTab=”Check In”,RGBA(187, 221, 140, 1),
If(varFormTab=”Stock Take”,RGBA(255, 191, 0, 1)
))))
is there a way to have a datacard visible on multiple tabs?
Yes, read the previous, similar comment, above, and my answer.
I want to start with de Contacttab, when I open the form in Sharepoint on Edit and View.
How to do that. ?
It sounds like you’re using a SP list form customized with PowerApps. If so, go to the SharePointIntegration settings, then the advanced tab. Then, in the OnEdit and OnNew properties, you can add a SET command in there, to set your variable to the right tab.
Hi Laura, How can we set a default selected tab of a tab component?
Andre asked that also, and I answered it. It’s the question right above this one.
Hi Laura,
I have a screen on which I’m using a tab component which has Datacards.
I want to navigate the particular data card on the same screen when a slice of a pie chart is selected.
Thank you
Hi Priya, you can use the OnSelect of the pie chart, and have it set a variable to “toggle” to that tab. I think there’s a pieChartcontrol.Selected that will tell you which thing was clicked on.
This is wonderful Laura. I followed your step by step instructions and built the form with more than 10 tabs. Thanl you very much for the detailed instructions.
I need you help with one issue I am facing.
Let us say I have 4 tabs with names Basics, Contacts, Project Details, Summary.
When “Project Details” tab is hidden, the “Summary” tab sits in its place but does not move to the empty space created by then hidden tab.
My requirement is that, when “Project Details” tab is hidden, the “Summary” tab should appear beside the “Contacts” tab and when “Project Details” tab becomes visible, the “Summary” tab should move such that it appears after the “Project Details” tab.
Is this kind of dynamic moving of tabs possible? If yes, can you suggest how to achieve it?
Yes, your X, Y, and width can be variable, and so can the Visible property. You’d put an IF condition in that property, and put your logic there.
Hi Laura,
i am trying to have multiple(three) content type with three screens as its explained in this video https://www.youtube.com/watch?v=RPITzpPlbiQ.
I am not able to get the content type by name so im trying it with ID.
i tried this in onnew event
If(SharePointIntegration.Selected.'{ContentType}’.Id=”0x01000D92AA58EB9F37469CC787F24307122703″,NewForm(ComponentForm) && Navigate(ComponentScreen,Transition.None),SharePointIntegration.Selected.'{ContentType}’.Id=”0x01000D92AA58EB9F37469CC787F24307122701″,NewForm(ProductAttributesForm) && Navigate(ProductAttributesScreen,Transition.None),SharePointIntegration.Selected.'{ContentType}’.Id=”0x01000D92AA58EB9F37469CC787F24307122702″,NewForm(SystemForm)&& Navigate(SystemScreen,Transition.None))
I also tried same in Onview, Onedit nothing worked.
Thanks you
Hi Laura,
I’m having a requirement to have tabbed forms using powerapps for the sharepoint online library form.
we have really 50 fields which will be splitted to 5 long tabs where each tab holds 10 fields of sharepoint library which is also mandatory.
Now, the biggest part is user cannot or not allowed to give entries to all fields,
user can edit tab1 form and save and later or by another user tab2 form can be edited and saved final tab is submit where we do validation and submit to library or list.
How do we achieve this using powerapps?
will collect and patch works?
if yes how to retrieve the values of tab that already entered, how to save it for later or till final submit?
your solution to this will really be helpful for us!!
You can use a variable to capture who the logged in user is User() when the app starts. Then, you can do logic on each card if you’d like, to hide and show based on who that person is. And/or hide the tabs based on that logic. I highly recommend taking my Advanced Power Apps course to learn about these concepts if you’re not familiar.
Hi Laura,
Considering tabbed forms with multi screen each screen can be saved individually, but I have another button called submit which will validate all the empty fields.
The scenario is when I click save button I should not see any mandatory error label appear, the values filled are strored into the List/Library, but on clicking submit the error labels(*) must appear near all empty fields and restrict form for submit.
Imagine this for more fields. How to achieve this?
Hi Laura,
I have multiscreen tabbed form designed in PowerApps, where there are two buttons, Save and Submit.
I am expecting, at On select Submit, the fields which are empty must be highlighted or show error label, but on clicking Save no validation needed even empty fields can stored. If there are few fields, it can be handled at Submit Onselect button using “If condition IsBlank or IsEmpty for field”, what if there are more fields like 50/100?
Can we write code for each label as “If Submit button is selected check for field blank then show error otherwise submit the form” or is there any other solution available to notify errors?
Fields are mandatory only at PowerApps Form level not in SPlist.
Expecting a knowledge on this complex problem!!!
Regards,
This is great and worked perfectly. I just have one question. I am able to put one card on two tabs using varFormtab=”Entries” Or varFormtab=”PTO”, however the field does not work. When i type anything into the field it immediately deletes. I would like to have the entries tab, and the other tab they will see when they go into edit or view the form, then add more entries to some other fields. Do i need to use an edit form instead?
Thanks mam for the great article . Is there a way to navigate between tabs using a next button
Thank You much Laura! Your post with tabs is Great, really helped a lto.
Thank You!
Best regards,
Gennady
Hi Laura,
I tried the steps you have shown but when I go back on the SharePoint form and use click on New. I get an error message.
It says something like data type not supported, is it because I have lookup coloums?
If yes, please tell me how to fix it.
You’d have to test by seeing if your form gave that error before you created the tabs. Tabs and hiding cards wouldn’t cause that error.
Hi Laura,
Can I fix the position of data cards in a particular sequence in power apps?
Yes, in the advanced properties, you can type a number for each X and Y, to control that. It’s like a grid where the X and Y go 0 through 2 if it’s 3 columns, etc. They’re not pixels like in the rest of power apps.
Hi Laura, this is an awesome and simple way to do tabs. Is this just for SharePoint list customized forms though? I’ve followed the steps to a tee, but it’s not working for me. My app is a standalone canvas app with SharePoint as a backend data source. Does that make a difference?
No, it doesn’t make a difference if it’s a customized list or standalone. You can troubleshoot by looking at the value of your variable in the View menu, in the list of variables, to make sure it’s being set, and remember that it’s case sensitive when you’re referring to that value.
Hi this is amazing thank you. I now have my datacards all on the right tabs. However now within a tab I want to make some fields only visible if value of another field is a particular value how do I do this. I tried in the visible formula for a field If(ThisItem.FieldName.Value=”Value”, showTab1,false) but it doesnt work
Where did you put that formula? In the visible property for the other field, you can just type:
showTab1
Hi I have showTab1 in the visible property for all datacards that I want on Tab1. But now I also only want the Organisation field to showcon Tab1 if complaint type 《》 Student so I tried the IF statement in the Organisation visble area. On further digging I think the problem may be that the complaint type is a sharepoint choice field!