Customising SharePoint list forms with PowerApps – part three

This series of articles will show you how to customise a SharePoint list form using PowerApps:

• part one – customise a list form, create new, edit, and view forms, and wire up the buttons (read now)
• part two – create cascading drop-downs (read now)
• part three – create tabs so long forms can be broken into sections (read below).

Tabs for long forms

To avoid having overly long input forms, it is often useful to break-up the forms into logical sections.

When using a tabbed layout with multiple columns, first make your app wider by going to ‘File > App Settings’ and enter a custom width, in this case 640 X 790. Remember to set all your cards and component widths to less than 640 to avoid double scrollbars.

TIP: If you are adjusting font sizes, PowerApps uses ‘points’ not ‘pixels’, so you may need to go to a conversion site to get accurate sizes to keep your fonts from being HUGE. SharePoint lists use 14px semi-bold for headings and 12px normal for input boxes. In the weird world of PowerApps this equates to 10.5 and 9 points.

I have added more fields into the list so I have enough fields to logically put onto three tabs. Our starting point now looks like this:

The buttons always sit outside the form, so drag the top of the form down to approximately 85 pixels then add a button control above.

Next, go into the button properties and change Text to your first tab name (‘Basics’ in this case) and add round corners by giving it a border radius.

A trick often used to hide the bottom round corners is to give the form a white background colour and drop the button behind the form to obscure the bottom section of the button. I prefer to just go into advanced where you can adjust the ‘RadiusBottomLeft’ and ‘radiusBottomRight’ to zero.

Copy and paste your tab and change the text. Set the button background colour for your inactive tabs.

Now that we have set up the visual elements of our tabs we need to wire up how these will work. Essentially we are setting up some variables which are set OnSelect and we will use these variables to set the visibility of the form elements.

‘Basic’ Tab :
OnSelect = Set(showTab1, true);Set(showTab2, false);Set(showTab3, false);Set(showTab4, false)

‘Address’ Tab :
OnSelect = Set(showTab1, false);Set(showTab2, true);Set(showTab3, false);Set(showTab4, false)

‘Notes’ Tab :
OnSelect = Set(showTab1, false);Set(showTab2, false);Set(showTab3, true);Set(showTab4, false)

‘Attachments’ Tab :
OnSelect = Set(showTab1, false);Set(showTab2, false);Set(showTab3, false);Set(showTab4, true)

It is now simply a matter of going into each datacard and setting the visibility property to the tab variable. If the tab has been clicked and the variable set to false, then the card visibility will be false, the card will be hidden; if true the card will display.

Work your way through all the cards, setting the visibility. One trick is to click on the tab with the Alt-Key down. This will set the variable and then when you move from tab to tab the cards will disappear as you apply the visibility variable.

Now we need to set the tab background colour depending on the variable value.

Make a note of the ‘Fill’ colour for the tab control. For mine the active is : RGBA(0, 120, 212, 1) and the inactive tab control is RGBA(204, 204, 204, 1). Now for the ‘Fill’ colour on each tab control, set the colour dependent on the variable.

If (showTab1, RGBA(0, 120, 212, 1), RGBA(204, 204, 204, 1))

Go to each tab control and paste in the above line into ‘Fill’, changing only the variable name to ‘showTab2’, ‘showTab3’, ‘showTab4’ on the respective tab controls. Pressing Alt-Play you can now see that the functionality works perfectly, clicking through the tabs shows and hides all the datacards.

However, if you publish your form to SharePoint and try to use it, the tabs will all display grey (inactive) and no datacards will display. This is because the ‘showTab?’ variable has not been set. It only gets set when you click on the tab for the first time.

To fix this, go into the ‘SharePointIntegration’ section and set your variables by appending the following line:

Set(showTab1, true);Set(showTab2, false); Set(showTab3, false);Set(showTab4, false)

Repeat above for all of your screens (New, Edit, View).

As always when testing your changes, refresh your page several times to be sure you are not reviewing a cached version of your form.

Thanks goes out to DeShon Clark for demonstrating the simplest way to do tabs.