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.

19 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

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

      Like

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

    Like

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

      Like

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

      Like

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

    Like

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

      Like

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

    Like

  • 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

    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 )

Connecting to %s

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