Power Apps controls, although powerful, provide limited branding and customization capabilities. With Google investing a lot in research to come up with design standards (Material Design), I wanted to incorporate those standards into Power Apps controls using the standard out of the box controls. These revamped controls will help our apps look just like, if not better, than any app we see on our mobile phones!
The 3 controls I have revamped so far are: text fields, tooltips, and buttons. The reasons for picking these controls are:
- The standard out of the box (OOB) versions, while good, do not provide many customization capabilities
- The design for these controls was very different, so there was a greater scope of improvement
- These looked way better than their OOB counterparts, helping Power Apps look as pretty, if not prettier than any other app on our phones
- Tooltips interested me the most because
- honestly, they were the easiest to implement!!!
- on a serious note, the OOB tooltips don't show up on mobile as there is no way to "hover"
- One specific button type - floating action buttons (FAB) interested me the most among all the different types as they help save some real estate, especially for mobile apps.
The design specifications from Google are very detailed. I went through those documents (so you don't have to go through those documents!) and summarized the design for tooltips and buttons:
- Tooltips
- They should become visible when a user taps onto a control, like a text input field
- When visible, they should display a text label providing a description of the control
- They should stay visible for 1.5 seconds or until the user changes focus to another control
- Buttons
- A FAB represents the primary action of a screen
- When pressed, a FAB can display/emit 3 to 6 related actions in the form of a speed dial
- The speed dial actions close when a user taps the FAB again or anywhere else on the screen
- Text Fields
- This article does a very good job of explaining the research and provides a summarized design as well: https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03
I have blog posts for each one of these controls:
- Text Fields: https://thepoweraddict.com/implementing-googles-material-design-for-labels-using-power-apps/
- Tooltips: https://thepoweraddict.com/implementing-googles-material-design-for-tooltips-using-power-apps/
- Buttons: https://thepoweraddict.com/implementing-googles-material-design-for-buttons-using-power-apps/
Hopefully, my series of posts on Google's Material design along with the app I am sharing here will inspire you to achieve beautiful, more customizable controls using standard Power Apps controls!
Would love to hear your feedback, comments, suggestions, and questions!
Thank you!
Hardit Bhatia
The Power Addict
Here is a demo of all 3 controls on one screen!
