Power Apps Canvas App UI Components, Templates and Techniques
Good canvas apps look and feel like modern products, not forms on a screen. This guide brings together the Power Apps UI components, templates and techniques I’ve built and shared over the years: user cards, progress bars, accordions, colour themes, Graph API integrations and complete screen templates.
Each section explains the approach and the key Power Fx formulas so you can rebuild the pattern in your own app. If you’re new to canvas apps, start with the Power Apps tutorial and the guide to Power Apps galleries, which most of these patterns rely on.
Contents
- Reusable UI components for canvas apps
- Practical Power Apps techniques
- Ready-made canvas app templates
Reusable UI components for canvas apps
Out-of-the-box controls only get you so far. These patterns use galleries, containers, HTML text and simple formulas to build polished, reusable UI elements.
User cards
“Your Power Apps applications should have an attractive user interface (UI).”
By only using the out-of-the-box controls of Power Apps, I was able to create various user profile card variations without the need to build a custom component with PCF.
This free to use collection of components, is available from Git hub, and allows use to insert nice looking profile cards in your Power Apps Canvas Applications.
Large Vertical Cards
The large vertical cards show:
- The user profile picture
- The user’s full name
- Job Title
You have two available controls:
Basic – Large Vertical Card
This card has the following input parameters:
- User Email
- Border Radius
Gradient Background – Large Vertical Card
This card has the following input parameters:
- User Email
- varColorGradient1 (hex value)
- varColorGradient2 (hex value)
- Border Radius
Horizontal Cards with Job Title
Another variation of these cards is the horizontal card with Job title
Basic – Horizontal Card with Job Title
Gradient Background – Horizontal Card with Job Title
Minimalist Cards
These cards only display the user’s profile picture and full name
Get these cards for free!
Download the .msapp file from –> https://github.com/samirlogisam/PowerApps—User-Profile-Card
Import the app in your environment, or import only the components to your existing app. And voila, enjoy it 😋
Progress bars and multi-step indicators
Today, we will explore different components of progress and step bars that can be utilized in your Canvas application.
Components can be customized with static backgrounds, gradients, or images.
You have the option to include text inside the progress bar or leave it empty.
There are two “multi-step”controls which take a table of objects and the current step as inputs Step Bars.
How to Install?
These components are available from GitHub –> https://github.com/samirlogisam/ProgressBars/
1- Import the entire App
Download the .zip file and import the app.
2- Import the components only
If you want to import the components only, you can download the .msapp file.
Navigate to your app and select the components tab.
Click Import Components, and select the .msapp file as your source file.
Enjoy 😍
Simple progress bar with a single formula
Although PowerApps comes with the general controls you might need to build most of the applications for your orgranization, I was faced recently with this particular scenario, where I needed to have some kind of progress bar in my App.
The context
I had to create a quiz app in PowerApps, which allows user to pick a subject, and take a quiz for that particular subject.
The list of questions and subjects are basically two custom lists in SharePoint, with the question list referencing the subjects’ one using a lookup column.
So my Screen in PowerApps had to start with the first question of the selected subject, and whenever you Click next, that would load the next question, until it is the last one, in which case, you get the complete button.
I will not cover all the aspects of my app here today. But I will exclusively cover the Progress Bar that I had to display, at the top right corner of my Screen in PowerApps.
The solution
The way I approached this is as follow:
- I needed a static outer rectangle, with solid border (1px width) –> Let’s call it Prg_Outer
- I also added a second rectangle which was displayed on top of the outer rectangle Prg_Inner. The height of Prg_Inner is equal to whatever you have as the height of Prg_Outer – 2 (as the border is 1px).
- A label (optionnaly, to display the text value inside the progress bar.
I am also maintaining two variables in my app to track the current Question and Total number of questions (this will be equivalent to Current and Max Values of the progress bar).
Width of the outer rectangle
I decided to set the width of my outer rectangle to a static value equal to 300px.
Value of the text
Concatenate("Question ", Text(CurrentQuestion),"/", Text(TotalQuestions))
The magic
On my next button, I have a custom code which checks, if I reached the last question, if not, it adjusts the size of the inner rectangle.
The idea is that the width of the inner rectangle Prg_Inner, should be equal to (CurrentQuestion/TotalQuestion)*300
Et voila, you got a nice dynamic Progress Bar !
Accordion (expand and collapse sections)
In this article, we will explore how to create an accordion in a PowerApps Canvas Application.
In our application Screen, we will have a container, which contains:
- A horizontal container, with two main components
- The section on the left will contain an HTML text with our help guidelines.
- A right container which contains an optional image.
- An accordion text (label)
- The left help icon
- An expand button on the far right.
The container’s height will be dynamic and based on a context variable set when the accordion text or expand button is clicked.
If(
varHelpAccordion = true,
UpdateContext({varHelpAccordion: false}),
UpdateContext({varHelpAccordion: true})
)
Now, the accordion height’s value is as follows:
If(varHelpAccordion,Parent.Height - Self.Y*2,48)
What this does, is that it checks the varHelpAccordion value, if it is true (expanded), the container height is calculated dynamically from the (Parent. Height- Self.Y*2) which will ensure that that accordion is vertically centred in the screen, if not (collapsed), it will set the height to 48.
Download the app from GitHub
The sample code of this accordion is freely available from GitHub:
https://github.com/samirlogisam/powerapps_accordion
Colour themes driven by a single variable
In today’s article, I would like to share a quick solution i’ve put in place Colour Theme for one of my projects, where the colours keep changing and I wanted to be ready for any theme changes when required.
The different theme colours would be stored in a collection which will be referenced by the different Power Apps controls instead of hard coded.
I have created a simple screen, which allows me to set the different colours such as:
- Button fill,
- Button text,
- Border,
- Chevron background colour …etc.
I wanted also to view the rendering of the most used controls:
- Textbox
- Text input
- Dropdown
Application Strucure
The app has one screen only, with two containers:
Colours definition
In the left section, you will be able to set the different Colour Theme,
The colours values are expected in Hex format, we will use the ColorValue function to convert the colours to RGBA format.
If you want to learn more about ColorValue, ColorFade and different ways to convert hex to rgba and apply transparency, please visit the Microsoft reference ->
In addition, this panel, will render the collection definition, which you can just copy and paste in your project.
Preview panel
This area is the preview area, it allows you to view and amend the colours if you are not happy with the results.
Enjoy !
Download from GitHub
The app code is available from –>
https://github.com/samirlogisam/CanvasControlsTheme
Practical Power Apps techniques
Short solutions to problems I keep running into on client projects. For more on Microsoft Graph, see getting started with Graph API in Power Apps.
Convert a user profile picture to Base64
Today, I will explain how we can convert a picture to a base64 string.
The context for this request is a project in which I allow users to update their profile pictures with a badge showing their skills.
However, as I wanted to provide the users with the capability of restoring back their previous picture in case they dont like the new badge, I had to save the user profile picture in a location where it can be easily retrievable. I’ve opted for a SharePoint list, and created a multi line text field to store the base64 value of the user’s profile picture.
For this demo, I have created:
- A Canvas app (phone layout).
- I added into this app the following controls:
- Label : to display the user full name
- Image : for the user profile picture
- Button : to generate the base64 value of the user profile picture, this value is stored in a temporary variable
- Textbox : to show the variable
The button action is a simple as :
onSelect –>
Set(varBase64,JSON(User().Image,JSONFormat.IncludeBinaryData))
Once I set the varBase64 variable, I can set the TextBox value to this variable
The result will look like this:
List all the Microsoft Teams a user has joined (Graph API)
In my previous article, I have covered how you can get started with the Graph Api integration with PowerApps.
If you have missed this article, you can jump back and get started.
In Today’s article, we will look at how you can list all the MS Teams Teams you have joined.
We are aiming at creating a simple app, which lists all the teams, and allow PowerApps the users to jump quickly to one of their teams.
Call to GraphAPI to get all the teams
First, we will need to have a button which performs a call to the GraphAPI and returns the list of all the teams joined by a logged in user.
If we revert quickly back to the Graph Explorer, we can see that there is a function which lists all the teams, the function in question is called joinedTeams.
So, our button will make the call to this end point as follow:
Set(varAllTeams, Office365Groups.HttpRequest("https://graph.microsoft.com/v1.0/me/joinedTeams","GET",""))
Basically, we are creating a collection which will contains the JSON result from this call.
Next, we will need to use this collection (converted to a table) to populate a gallery:
Table(varAllTeams.value)
Embed Bing Maps with the Maps control
PowerApps control to embed Bing Maps in your apps.
This is a free control which allows you to embedd Bing Maps in your PowerApps applications.
Getting Started
1- Download the Demo App from https://github.com/samirlogisam/powerapps_maps/
2- Get your free Bing Map Api Key from https://learn.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key
3- Import the App in your environment
4- Copy the Component and re-use it in your Apps
Component Parametres
1- The Address or PostCode
2- Zoom (From 1 to 21)
3- Map Style: (Road,AerialWithLabels,Aerial)
Reporting with Power Apps
In this article, I will show you how we can use PowerApps for reporting purposes.
I know, PowerApps is not meant to be used as a reporting platform, but sometimes, you might need to have some analytics and graphical capabilities in your Power Apps Applications.
Also, if using PowerBi is not possible (for licensing or skills limitations), you can just through couple of nice Power Apps.
Context:
This is an example of an app I have built which uses
- Custom html controls (I can’t thank Kristine enough for her contribution, https://www.kristinekolodziejski.com/)
- PowerApps Collections and Data grouped by different values using Power Fx Group by functionality.
- PowerApps Graph Controls (Pie Charts, Bar Charts, and Line Charts).
The App is a reporting App for the CRM Solution I have built for one of the biggest UK Councils, which help tracking the pupils’ transport from/to schools.
With call handling and tracking of issues, and a centralised DB of Pupils, Schools and Transport Providers.
The end result is just stunning !
The touch of gradient background for different widgets, give a nice and professional look to the app.
Here is the final result.
Ready-made canvas app templates
These templates are full screens you can drop into your own apps. They are also available, with many more, on powerapps-template.com.
Login screen template
This Power Apps login screen template is designed as a sleek, mobile-friendly interface for authentication in mobile applications. The layout is simple and user-focused, featuring a clean design with minimal distractions to ensure a seamless login experience.
This template is designed as a plug-and-play solution. It allows developers to easily integrate authentication into mobile apps, saving time and providing a polished user experience.
==Download this Template==
Mobile self-service app template
The “Mobile Self Service” template is a mobile-optimized Power Apps canvas app designed for building intuitive self-service applications with built-in dashboard functionality. It allows users to manage tasks, access personalised data, and view real-time metrics from their mobile devices.
Use Cases:
- HR Self-Service: Request leave, view benefits, and update personal information.
- IT Support: Log tickets, check ticket statuses, and view issue resolution history.
- Customer Service: Access FAQs, submit support requests, and track resolution progress.
The “Mobile Self Service” template simplifies the creation of self-service apps, providing an interactive dashboard experience tailored for mobile users.
==Get this Template==
Ocean dashboard template
The “Ocean Dashboard” template is a versatile and visually appealing Power Apps canvas app designed to help users create intuitive and interactive dashboards. This template is ideal for building apps that require a dynamic presentation of data and key performance indicators (KPIs) in an organized and visually captivating manner.
Use Cases:
– Business Intelligence: Visualize company-wide metrics, sales performance, and operational efficiency.
– Project Management: Track project progress, resource allocation, and timelines.
– Financial Overview: Monitor revenue, expenses, and financial health.
– Customer Insights: Analyze customer data, feedback, and engagement metrics.
With the “Ocean Dashboard” template, users can quickly build powerful and engaging apps that provide valuable insights through a well-designed and functional dashboard.
== Get this template ===
UI best practices for canvas apps
- Build repeated elements as components or component libraries so styling stays consistent across apps.
- Drive colours, fonts and spacing from a single theme variable or named formulas, not hard-coded values on every control.
- Prefer containers (horizontal and vertical) for responsive layouts over absolute X/Y positioning.
- Keep galleries lean. Heavy nested galleries and many controls per row hurt performance; see why your Power App feels slower than it should.
Related reading: Power Apps forms from start to finish, the Collect function and Patch in Power Apps.
