What is a Canvas App and How Do I Get Started?

What is a Canvas App and How Do I Get Started?

Over the course of the last few decades, apps have become a vital part of any business. We use apps to solve a multitude of different tasks every day, and the demand for new apps that can help us with our day-to-day work continues to rise. The use cases for apps are unlimited and having the ability to develop apps yourself will allow you to boost productivity for you, your team, and maybe even your whole company. Enter Canvas Apps that can be built in a user-friendly editor with very limited coding and are easily shared with people within your organisation. This article will explain exactly what a Canvas App is, and how you can get started with developing apps for yourself and your company!

What Is a Canvas App?

A Canvas App is one of the two types of Power Apps in the Power Platform. It is a low code app, which means that you can do all your development with little to no coding, and the app enables you to use data from multiple different data sources. Contrary to a Model-driven App, a Canvas App provides a high level of customisation which allows you to design the app exactly as you’d like! The Canvas App development platform – Power Apps Studio – provides a user-friendly interface for your app development, and the drag-and-drop functionality makes it quick and easy to design feature-rich apps without writing code. While you can build Canvas Apps without code, the app does come with a powerful programming language, Power Fx, that allows you to implement complex functionality to best fit the app to your business needs.

Canvas App Use Cases

Canvas Apps can be used for a broad variety of business purposes. The flexible nature of the app design combined with the powerful data source connectors makes Canvas Apps a great addition to any business. The following examples can shed some light on how Canvas Apps can be used to help your business:

Leave registration: The HR department as well as the managers of any company need an overview of when their employees are on leave. Creating a simple mobile or desktop Canvas App can allow employees to request leave and managers and HR to approve. The app can also provide the managers with a nice overview of when their team members are on leave, which can help them coordinate their work.

Facility management: In a company, there are a lot of things to attend to for the facility managers. The offices need to be in great shape in terms of furniture, cleaning, and heating, contractors need to be managed and coordinated, and emergencies and issues need to be handled. By creating a Canvas App for mobile devices, the employees can report broken furniture, unclean rooms, or broken heaters directly to the facility manager’s central system, and they can have easy access to all emergency contact information. Furthermore, a desktop app could give the facility manager an overview of the current contractors and help them distribute work.

Desk and room booking: Many companies today experience the need for desk and meeting room booking in their offices. This can easily be accomplished by creating a Canvas App that lets the employees see and book available desks and meetings rooms on specific dates, and the app can even be extended to show who is in the office on any given day.

Creating a Canvas App

When creating a Canvas App, you can either create the app automatically from a sample, template, or data source, or you can start from a blank canvas. When doing so, you have the option of choosing either a tablet or a phone format. A blank canvas will appear, and you can then start your Canvas App development.

The Tree View tab on left-hand rail provides an overview of the screens and controls of the app. A screen is the canvas on which you can add your controls, and an app can have as many screens as you wish.

The Insert tab on the left-hand rail contains all the controls that you can add to your screens. A control can be anything from a text label or a shape to a button or a gallery. Each of these controls contains editable properties specific to its type. A property can describe a simple feature such as font, colour, or border thickness, but it can also describe more complex features of the control such as visibility, data, or what happens when you click on a button.

To begin building your Canvas App, you simply go to the Insert tab and start adding controls to your screen by using the drag-and-drop functionality. You then customise the controls by editing their properties to your liking. You can quickly create headers and footers by inserting shapes and text labels. If you wish to add pictures or other media to your Canvas App, this can be done by going to the media tab on the left-hand rail, uploading a picture, video, or audio file, and dragging it to your screen.

One thing to note when you start adding screens and controls in your Canvas App is that the hierarchy in the tree view matters. The control at the top of the tree view list for a specific screen will also be the front most control on that screen, and similarly, the screen at the top of the tree view list will by default be the first screen that shows when the app opens.

A useful tip when building Canvas Apps is to give your screens and controls meaningful names. This will help you find the control you are looking for in the tree view, even when you have multiple controls on your screens!

Using Data from Data Sources

One of the most used features of Canvas Apps is the ability to convey data in a meaningful way. The employees in a delivery department may wish to get an overview of all unfulfilled orders, or the HR department may want a way to see all open leave requests, and a Canvas App is the ideal tool to accomplish this.

There are many choices when deciding where to store the data you use in your Canvas App, but no matter the source, the data connectors in your Canvas App makes it easy to get to your data. To connect to a data source, you simply go to the Data tab in the left-hand rail and choose the appropriate connection.

After you’ve connected to your data you can add a gallery control to your screen and choose your established connection as the data source for the gallery.

When you have chosen your data source, the gallery control will try to create a template that portrays your data, and you can then edit this as you like. The template of the gallery determines how the items from your data source will be presented, and so when editing the template, you edit how all the items are presented.

And that’s it; the Canvas App is now showing data from your selected data source!

Power Fx

As mentioned earlier, Canvas Apps can be developed using very little to no code, however, being able to write simple functions can significantly increase the value that the app adds to your business. The programming language used in Canvas Apps is Power Fx, which is a functional, excel-like low-code language. The low-code part of Power Fx comes from the language being expressed in human-friendly text, which means that the syntax is simpler to follow.

Power Fx functions can be used to implement a broad variety of functionality. Using Power Fx you can perform simple actions such as navigating between screens and setting the visibility of controls, and you can do more complex things like collecting and filtering data and writing conditional statements. The functions used in a Canvas App are stored in the properties of the different controls. Say for example that you wish your app to only show an email button on an item in the gallery if the person has a valid email address. You could accomplish this by adding the simple function Not(IsBlank(ThisItem.Email)) to the Visible property of the email button.

Why Should You Use Canvas Apps

Building Canvas Apps to digitalise and automate everyday tasks is a fun and easy way to increase the productivity for yourself, your team, and your company. Development is made easy with the user-friendly interface, drag-and-drop functionality, and simple programming language, and by connecting the app to your data source of choice you can easily convey business data to people within your organisation.

If you need help getting started with Canvas Apps and the rest of the Power Platform, consider Changing Social’s Citizen Developer University programme where you and your colleagues will learn how to use the Power Platform in your business.

As mentioned previously, a Canvas App is only one of two kinds of Power Apps. While the Canvas App is highly customisable and can use many different data sources, the other kind, the Model-driven app, is built from an underlying Dataverse model using components such as forms, views, and dashboards. Stay tuned for upcoming posts on Model-driven apps in the near future!

To get started building your own Canvas Apps, get in touch with Changing Social! We’re a leading Microsoft consultancy firm, specialising in all areas of the M365 suite. Whether you want to learn about the Power Platform, undergo a Digital Transformation or take part in our Digital Champions training programme – we do it all! To find out more please fill in the form to the right, or email us at [email protected]