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
