Power Apps Modern Controls - We Finally Have TABS!!

Modern controls bring the Fluent UI design system into Power Apps, offering an updated look and feel to your applications. These controls are still in preview, but they already provide enhanced styling and functionality that can elevate the user experience. - Nate Halliwell

Enabling Modern Controls in Power Apps

Before you can start using the new controls, you need to enable them in your Power Apps studio. Here’s how:

Change the Authoring Version:
- Go to Settings and select Authoring Version.
- Switch to the Latest Authoring Version (this version includes the modern controls).
- After this, you’ll need to reload your app to apply the changes.
Activate the Upcoming Features:
- Once your app is reloaded, head back to Settings and select Upcoming Features.
- Search for the modern controls option and toggle it on.

Once done, you'll have access to modern controls like buttons, dropdowns, progress bars, and of course, the tab list.

Using the Tab Control for Better User Experience

Let’s focus on a common use case: improving a form layout with the new tabs control. Imagine you’re working with a CRUD application in Power Apps, where you need to display and manage contact information. A form full of fields can look overwhelming, but using tabs to organize the information can make it more digestible for users.

Setting Up the Tab List Control

To get started with the tab control:

Go to the Insert menu and add the Tab List control.
Resize it as needed and position it at the top of your form.
By default, the tab list won’t display anything, so you need to provide data to populate the tabs.

Creating Tab Data

Here’s how to set up your tab list data:

Tab 1: General Info (fields like first name, last name, etc.)
Tab 2: Address (fields like street address, city, etc.)
Tab 3: Additional Info (fields like department, job title, etc.)

Tab Name: General Info
Tab Value: 1

Tab Name: Address
Tab Value: 2

Tab Name: Additional Info
Tab Value: 3

Customizing the Tab List

After you’ve set up your data, you’ll need to adjust the tab list to display the names correctly. Click on the tab list, go to Edit Fields, and select the Tab Name field for display. You’ll now see the tabs with clear labels like General Info, Address, and Additional Info.

Linking Tabs to Form Sections

To ensure that each tab displays the correct fields, you need to control the visibility of form sections based on the selected tab. Here’s how:

Insert a Label control to test the selected tab’s value.
Use this label to track which tab is currently selected, by referencing the tab list’s selected value.
For instance, use the formula:
```
TabList1.Selected.TabValue
```

Now, for each form section, update the Visible property of the data cards. For example:

For the General Info tab, set the visible property to:
```
TabList1.Selected.TabValue = 1
```
Do this for each tab, assigning the correct value (1, 2, or 3) to control visibility.

Testing the Tabs in Action

Once you’ve set the visibility properties for all data cards, test your form. You’ll see that each tab only displays the relevant fields. This makes the form much easier to navigate and fill out, as users will only see the fields that correspond to the selected tab.

Why Use Tabs?

Tabs are ideal for breaking up large forms into more manageable sections. Instead of overwhelming users with a long list of fields, you can give them a structured experience where they interact with only a few fields at a time. This enhances usability and provides a better overall experience in Power Apps.

Conclusion

With the introduction of modern controls, Power Apps users can now create more polished and user-friendly applications. The new tabs control offers a simple but effective way to organize forms, making them easier to navigate. By enabling these features, developers can provide a better experience for their users while taking advantage of Microsoft’s powerful design system.

Don't forget to check out the Pragmatic Works' on-demand learning platform for more insightful content and training sessions on Power Apps and other Microsoft applications. Be sure to subscribe to the Pragmatic Works YouTube channel to stay up-to-date on the latest tips and tricks.