Users prefer easy navigation, and Microsoft Power Apps is all about it. It has been years since businesses used it to build applications. They have modern tabs with each section, users can also create a modern tab design to their own suitability. It helps them track and navigate through the data easily.
The capacity to dynamically filter and show data is a key component of the design. By highlighting the specified tab, the user can quickly identify the data in question. Furthermore, adding an ‘All’ tab option improves the accessibility of all data.
Another important aspect is the count of items related to the selected tab. This graphic count allows for quick data reference and improves usability. Furthermore, the design should be responsive in order to adapt the app’s layout to different screen sizes.
Previously, we provided the guide to generating and downloading PDFs from PowerApps forms, how to build a responsive modern gallery in PowerApps, and explored PowerApps’ new modern screen templates. Now, we bring you a step-by-step tutorial on creating a responsive modern tab design in PowerApps.
What Is a Modern Tabbed Design in PowerApps?
A Power Apps Tabbed form arranges data into groups. Users can easily switch between tabs to find what they need. To build form tabs, we install a tab list control atop a form and display or hide its input fields based on the current selection.
Step-by-Step Power Apps Tab Layout Guide
The Power Apps Modern Tab Design creates a versatile and stylish environment for app developers to increase user engagement.
A responsive interface allows developers to ensure their product remains successful across all devices, from smartphones to PCs.
By combining design components such as Galleries and Modern Button controls, the app may have a polished and user-friendly appearance.
Because of its hierarchical tabbed arrangement, it is easier to navigate and obtain info quickly. These small PowerApps Custom Tab Design Tips and ways add to the attractiveness along with its operating efficiency.
All in all, it’s a win for developers who are having difficulty with data navigation.
Now, how do you create a Modern Tab Design in Power Apps? Let’s go through it step by step.
Step 1: Setup the Data Source
As a first step, we will set up the data source. Let’s assume the scenario where we have a database with the records of employees.
- We can use the table in Microsoft Dataverse. In this scenario, we will go to the employee records and then the choice column for departments.
There is another gallery that lists all the departments, as shown below. As you select one department, you will get to see the relevant details, like the employee number working in the particular department.
What Is a Modern Tabbed Design in PowerApps?
A Power Apps Tabbed form arranges data into groups. Users can easily switch between tabs to find what they need. To build form tabs, we install a tab list control atop a form and display or hide its input fields based on the current selection.
2. Inside this container, add a gallery to display employee records filtered by department.
We will add the horizontal gallery control.
Step 3: Insert a Horizontal Gallery for Tabs
Now, to set the interface of our choice, we can change the properties as we need.
- First, we will rename it to galTab.
2. Set its Template Size to 250 and its Height to Parent.Height.
3. Remove default controls within the gallery.
Step 4: Add Modern Buttons to Represent Tabs
1. Insert a Modern Button Control into the tab gallery.
2. Enable Modern Controls in your app settings if not already done.
3. Configure button properties, both text properly and onSelect property, as shown below:
Step 5: Highlight the Selected Tab
Make the selected tab visually distinct by modifying its style dynamically.
When not selected, you can change settings to make it look like the below:
Next, set the button’s Type Property:
Step 6: Display a Count of Items
Add a count of employees for each department to the buttons. To include a cound we will change the text property.
Step 7: Filter Data in the Main Gallery
Update the Items Property of the main gallery to reflect the selected tab:
This formula shows only the employees for the selected department or all employees if no tab is selected.
Step 8: Add an 'All' Tab
Now, if we want to add the all tab, we will go to the header container, add a modern button.
We can change the settings and alingment to place it at the right position.
Next is to configure its OnSelectProperty:
Once we change the name, we can now set the value. For example, if we select blank, it shows nothing.
To see it all, we will change the value to:
To make sure it is not always “All” selected, we will change the type:
Now, it will only light up when slected else, it will be transparent. You can also add the count to it using similar code as we did for other tabs changing the text property.
Step 9: Enhance Tabs with Icons
To enhance it more, you can change the icons of each tab too. We will use the Switch here.
Step 10: Make the Design Fully Responsive
To make it more optimized for all other devices too, you can use the following setting:
Adjust button widths dynamically:
Parent.TemplateWidth
Use Screen.Size to modify layouts based on device type:
This ensures that your tabs display appropriately on desktop, tablet, and mobile devices.
Final Thoughts
In the end, do not forget to test it on all the devices. All in all, you are now an expert in building responsive Power Apps interfaces. However, if you still need expert guidance through the process or need more on Power apps and amazing new features, stay in touch or reach out for consultation about Power Apps UI Design Tutorial, Power Automate implementation and Power BI pricing.
We also offer Dynamics 365 ERP implementation and Dynamics 365 CRM consultation to help businesses streamline operations and maximize efficiency. Get in touch to enhance your business with the right solutions!