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

  1. Customize your form with PowerApps. (see my previous post on how to do this)
  2. 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.
    image
  3. 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)
  4. 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.
    image
  5. 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.
  6. Go ahead and rename this button control, call it btnBasicsTab
    image
  7. 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).
  8. 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
  9. Now, when you click the button, you’ll see that it looks like this:
    image
  10. 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.
  11. 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”.
  12. 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.
  13. 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.

SharePoint Power Hour is live today, 1/3/2018, with a demo of this solution.

9 comments

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

    Like

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

    Like

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

    Like

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

    Like

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

      Like

Leave a reply or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.