13 Dec How to build Power Apps like a Wizard
In this article, Jolene e Sousa, Microsoft Power Platform Lead Functional Consultant and App Maker, a.k.a “The App Wizard” at Eighty20 Solutions, shares her top 3 tips for all app makers to build apps faster and with less issues.
These tips will help you regardless of whether you are new to building apps or whether you are an experienced app maker. Jolene has extensive experience on both Power Platform and Dynamics 365 Customer Engagement building apps and will highlight the quickest ways to success through her lessons learned.
Top 3 tips summarized
1. Save yourself hours of work using this Canvas App Theming tool.
2. Learn basic UI layout and UI Design concepts and best practices. Empower your users.
3. Using Connections and Environment variables directly in Canvas Apps.
Tip #1 – Canvas Apps Power CAT Themes
The traditional way of app building involves creating your own set of custom theme colours, and storing colour schemes in your app inside components or variables, and manually updating all the controls 1 by 1, while configuring your app. This is manual and time consuming and can easily lead to issues with:
- Inconsistent theme design and fonts,
- Unexpected hours spent on UI design
- Difficulties changing your app themes later
- Themes which are not centrally managed, and
- Limitations (some control colours cannot be amended via your own variables manually).
The Power Platform Centre of Excellence (CoE) comes with a Themes solution in-built, which addresses this fundamental issue facing app makers. To use the tool, download the managed solution from Microsoft’s Centre of Excellence Toolkit, and install it into your Dataverse environment using the step-by-step instructions provided by Microsoft.*
Once installed, the tool takes care of rebranding all of your controls for you whilst you focus on your app build. This will not only speed up your build, but create a consistent theming experience throughout the app which is easy to update later, for app rebranding.
*Using the themes tool out-of-the-box will require your app to be Premium licensed, due to the use of the Dataverse connector
Tip #2 – Master your UI Design Fundamentals
UI design refers to the presentation and interactivity of your app such as the look, responsiveness and adaptation on different devices.
With powerful low-code tools at our fingertips, many of us have landed into the uncharted world of app development and with it, UI and UX design methodologies that we’ve never tackled before.
UI design and creating a seamless user experience is crucial for successful app use. It helps users understand how to use your app without having to think about it, eliminating user frustration, so the app user can focus on the content itself. Good UI design should feel like an “invisible” element, like “second-nature”, yet it’s extremely important. Good UI design should create an enjoyable and satisfying experience for app users. Here are Jolene’s top UI design points to keep in mind when designing:
1. Know your user – design for a specific person, get to know what they need from your app
2. Don’t reinvent the wheel – use patterns, icons and control positioning which modern-day tech users are already accustomed to and mimic popular platform concepts in your own apps. An example would be where you place your navigation buttons, similar to Google, Facebook and other popular platforms.
3. Use Visual Hierarchy and repeatable design patterns.
4. Provide effective communication and feedback to users – talk to your users; let them know what’s happening, what has happened, and what’s about to happen. Keep them informed and help them along the way. An example could be a pop-up dialog component which alerts the user that a workflow will be triggered and they need to confirm they are ok with the action.
5. Anticipate – ensure your app pre-empts user errors, for example if we accidentally closed an app – did anything autosave?
6. Be consistent – all elements including colours, button styles, text hierarchy styling, should remain the same across the app. Allow your users to understand your app once, and not every time they change screens. App users learn how to use an app as soon as its opened, don’t frustrate them by forcing them to learn constantly.
7. Keep it simple – use purposeful, clear and predictable elements only if they are needed e.g. buttons. Effective navigation and clear labels and tasks.
8. Guided behavior with design patterns, and clear hierarchy and readability. Use colours as value indication, let the theme tell a story. (e.g. positive and negative colour coding)
9. Empower the user – give them actionable insights, features and helpful tips and tricks, which are automated as opposed to users having to find things manually. Help them to manage work in a way that feels rewarding and satisfyi4.
Tip #3 – Connections and Environment Variables in-app
When creating an app which uses the SharePoint connector, you’ll want to:
- Enable the new setting which is available, allowing your app to use Environment Variables to connect your data sources for easier deployment.
- Remove any values from these variables in your solution BEFORE you import into the target environment.
Bonus – you can also create a Power Automate flow which will provision your SharePoint lists into the target environment, because the site collections cannot be added to your solutions in Dataverse
Something we see a lot from Canvas App makers, is they will call Power Automate Flows simply so they can use connectors other than their datasource connections. You could however avoid this altogether and add connections directly into your PowerApp.
In this example app, we’re using the Microsoft Translator connector which allows us to detect and translate any text in any language for a scanned object. This is considerably simpler thank using Power Automate for language translation.