A beginner’s guide to building a Canvas app with Microsoft PowerApps

Have you ever wanted to build an app but you feel as though you don’t have the coding skills to get started? Microsoft’s Power Platform tools might be for you.

10 min readMar 23, 2022

In this post, I will be going through how to build an application using the low code development platform, Microsoft PowerApps.

What is a low code development platform?

It is an application which allows a user to take a visual approach to develop code using a drag and drop GUI. This allows project teams to accelerate the delivery process, and is useful for those who want to kick start a project but have limited costs or developer resources.

Microsoft Power Apps, specifically, is a suite of apps, services, data platforms, and connectors which allow the user to build custom business applications. Users will need a license plan to use PowerApps, there are various plans available such as standalone and developer plans, depending on which data sources you would like to integrate your application with. Microsoft have also announced a community plan which allows users with an Office 365 license to create their own personal environment to explore PowerApps. Note: These environments are not intended for production use and have Dataverse integration disabled, so you will not be able to use that as a data source.

For this tutorial having an office 365 license will be sufficient to use PowerApps and integrate with a Excel database. You can access PowerApps via Office > All Apps.

Fig 1: PowerApps option in Microsoft 365.

What types of apps can you make with PowerApps?

There are three approaches you can take when using PowerApps; Canvas, Model-driven, and Portals. With each approach you can edit your UI, choose which pages you would like in your application (homepage, menu, form pages etc), create custom components and functions as well as rules for app navigation and add connectors.

Canvas design gives complete UI control and the user can choose their data source: it can be a list in SharePoint or it can be a SQL database. Commonly used for internal facing apps.

Model-Driven gives the user a limited UI options, they can use a standard template to build their app on, this is perfect for a low design application. They are built on a data storage system, known as a common data service (CDS). This can help reduce the cost of an application as CDS is included in the PowerApps license. Again used for internal facing apps.

Portals also use and consume data from a common data service but they are typically used for external users (consumers).

When creating an app, the user can choose which method they want to take, there is even a canvas app tutorial which guides you through the steps of creating a canvas app.

Fig 2: PowerApps — Create a project screen.

Let’s make an app!

For this tutorial, I am going to make an application where we can manage a to do list using an excel data source.

Step 1: Choose and set up your data source.

Whether you are using lists in SharePoint, tables in Azure CosmosDB, databases in Microsoft Dataverse you’ll need to set up your data source. For this tutorial we will set up a basic data source in Excel.

This list will store to do list entries with name, description, due date, status and comments and I have saved this in OneDrive so it is accessible to PowerApps.

Step 2: Create a blank Canvas app.

Navigate to PowerApps in Microsoft 365 and create a blank Canvas app. You will need to choose the optimum format you would like your app to function for, tablet (desktop) or phone (mobile). For now I will choose mobile.

Fig. 4: PowerApps options: blank Canvas app, blank model-driven app, blank portal app (LTR).

Fig 5: PowerApps options: define app name and format.

Step 3: Connect to your data source.

PowerApps support a lot of different data sources, but they do not directly support Azure Cosmos DB (yet). If you want to connect to an Azure Cosmos DB then you will need to set up a custom connector.

For this tutorial I will stick to basics and use the OneDrive connector to select an excel file which I have saved in OneDrive as a data source.

Select the correct excel file and the table within that file you want to use as your data source.

Step 4: Build your UI.

Adding objects to your screen

On the left hand side you’ll have a list of objects you can insert such as text boxes, buttons, labels etc. You just click to add and drag and drop to where you would like them to be.

Fig 9: Adding objects to your Canvas App.

Once you have added an object, on the right hand side you are shown an object option screen. Here you can change the font, text colour & alignment, positioning/size of your element etc.

It was useful to start by creating a homepage with a button to navigate to a page where I can add an item to my list. It’s important to have a design in mind because this part of the process can become a time sink if you have no plan of what you want your application to look like. You can try sketching out what app structure is ideal for you and the basic design of each screen before diving into PowerApps. For this tutorial I have created a very basic UI.

Fig 11: Basic homepage within Canvas App.

At the moment I did not want to clutter the homepage with unnecessary links, as time goes on I will build upon the homepage as I add more functionality.

Using Actions

The plus icon in the header of my homepage has an action associated to it. Actions are used when you would like an event to occur on user interaction, i.e. if a user clicks the plus icon then they are navigated to another page. Actions can be set in the advanced tab of the element options screen. I have set an onClick navigation to another screen in my application. You can specify in the action what type of animation to display when this action is taken. I have found a handy cheat sheet which covers common custom actions.

Fig 12: Setting Actions within the Advanced properties tab.

Adding screens

Along the top we have the ribbon strip where you can select to add new screens and you can choose from a template or select a blank screen to build on.

Fig 13: Adding a new screen to the Canvas app.

I used this to add a new screen where a user could add a to do item to the database. I could have used the existing template for a form but I wanted to have some freedom with the layout and design.

To create my form, I used the input objects that were readily available, specifically the Text and Date Picker inputs. It was as simple as adding them to my blank canvas and configuring them to have a hintText (e.g. please enter name) with a OnSelect function which cleared the field and allowed the user to type in their text:

Reset(TitleTextInput)

Going forward functions will be the most important building blocks for the app functionality.

Functions (formulas)

PowerApps also makes use of excel style functions, these can be useful for handling your source data. To view/display data within your app you can use basic functions such as:

ThisItem.Name - function which will display the value of the name attribute in the to do list database.Set(VariableName, Value) - function which will set the variable <VariableName> to the Value.

You can also use patch functions to add or update data, for example the save button on my form has an onClick patch associated to it:

Patch(Table1, Defaults(Table1),
{
         Name:TitleTextInput.Text,
         Description: DescriptionTextInput.Text,
         'Due By':DueByDateInput.SelectedDate,
         Status:"To Do",
         Comment:(CommentInputText.Text)
});

This will save the data a user has entered as a new entry in the designated Excel file I have in OneDrive. Now I can add data to my database, I would like to retrieve and view that data on my homepage so I can see what items are outstanding on my to do list. To do this I used the layout objects, in particular the Vertical Gallery, this added a template to my homepage with text label objects. I was able to assign text functions to them to the retrieve the Name, Description, and Status of a to do list item.

Rules

In addition to functions, PowerApps also utilises rules to build up app functionality. I thought it would be useful to see whether any of my to list items were past their due date so I added a colour coded warning text label. To implement the colour coding I had to set some rules. Rules are conditional statements, similar to an if statement, where if a particular condition is met you have a particular outcome.

To implement my colour coded warning, I had to construct the following text & colour rules:

If(ThisItem.'Due By' > Today(), "", ThisItem.'Due By' < Today(), "OVERDUE", ThisItem.'Due By' = Today(), "DUE TODAY")If(ThisItem.'Due By' < Today(), Red, ThisItem.'Due By' = Today(), Orange, Black)

You can choose which role you want to set the rule for via a dropdown menu in the action bar. They allow the users to set very specific conditions without any prior coding knowledge. From a developer perspective if we were writing in code then we could combine these rules into one if statement and have clean code, but this is a good way to separate concerns and it allows a user who may not have coding knowledge to clearly see what conditions have been set.

Fig 17: List of roles where rules and functions can be applied.

Step 5: Debugging and running the app

To run the app, there is a play button in the header, click that and you can use the app in preview mode. Alongside this there is also a stethoscope button, this allows you see any build errors within your app. Maybe you have mistyped a function or made a typo in a rule, PowerApps errors will be displayed here and are generally quite clear.

Fig 18: Viewing error messages in Canvas app within the debug pane.

Once you have finished completing your app, you can publish it by going to File > Publish. The app will be published to your environment and can be shared with other members of your team.

I won’t be publishing my app as part of this article as I need to test it first! Look out for an upcoming blog where I cover how I test this app using the advanced tools within PowerApps.

Lessons learned

Canvas apps are not responsive — you need to choose whether you are building for Tablet or Phone. You need to consider your audience early on so planning your app on paper is key before starting a project.

You can’t have labels and screens with the same name, which is a bit weird. On my Home screen I wanted a label with the same name, but it wasn’t possible to use duplicate names so I had to leave the label name as TextBox1_1. Before starting a project it might be useful to determine a naming convention you will use for variables, screen names, object names etc.

PowerApps does not support Cosmos DB yet, from a lot of searching we cannot seem to create a Cosmos DB data source connector (yet). It seems that we would need to have an API over the Cosmos DB in order to create/edit/delete/retrieve the data and use a custom connector to call that API if we wanted to use Cosmos DB as the data source.

To test the app I had to keep running it and then exiting it to make changes to objects, it was very late in the day when I realise I could just hold down the alt key to test onClick events which sped things up a bit.

Lastly, I found that if I made changes outside of the app to the data source, the data source within PowerApps would need to be refreshed, this is quite simple to do via the ellipses dropdown menu on your data source.

Overall, I think PowerApps is a user friendly tool for someone who has no prior coding experience or if a low maintenance UI solution is required. There are different licenses available depending on what your usage is and I was able to create a basic test app within an hour or so. There is good documentation available and it seems like a commonly used tool, as there are also many discussion forums and how to guides available on YouTube so if you did get stuck it would be easy to find help.

If you’ve made it this far, I hope this has been useful and keep an eye out for a follow up article on how to test in PowerApps.

References:

1. PowerApps documentation: https://docs.microsoft.com/en-us/powerapps/
2. PowerApps licensing: https://docs.microsoft.com/en-us/power-platform/admin/pricing-billing-skus
3. PowerApps community plan: https://powerapps.microsoft.com/en-us/blog/communityplan/#:~:text=The%20PowerApps%20Community%20plan%20gives,of%20PowerApps%20and%20Microsoft%20Flow
4. Common Data Service: https://radacad.com/what-is-common-data-service-cds-and-why-it-is-important-for-you-if-you-use-power-apps-or-power-bi
5. Useful breakdown of PowerApps application types: https://www.youtube.com/watch?v=M_tvnAmHMZY
6. PowerApps cheat sheet: https://pragmaticworks.com/resources/cheat-sheets/power-apps-cheat-sheet-page/
7. PowerApps and Cosmos DB: https://www.cdata.com/kb/tech/cosmosdb-odata-powerapps.rst