Creating a Canvas App

Task: Create an app that allows employees to order food at the office canteen
Difficulty level: intermediate
Time to implement: 2-3 hours

In this post, I will show you how to create an app that allows your employees to order food at the office canteen. Many offices order food from catering services. The catering service may or may not have an interface for employees to register or order food. In some occasions, the administrative staff has to collect the food orders and send it to the catering company. To make this process more efficient we will give our employees access to the app and allow them to choose between a couple of menus for a given week.

By finishing the following steps, you will have a basic understanding how to create a Power App and can start to build your own custom apps tailored to your company’s needs.

Table of contents

Tools used for the app

  • Canvas apps
  • Common data service

1. Creating the app

  1. Go to → Apps.
  2. Click New app → Canvas. This will take you to the where you will create your app.
This image shows how to add a new canvas app in the Microsoft maker experience.
Add a new canvas app
  1. We will be creating an app based on data in Common Data Service (CDS), so we will choose to create an app in our environment using CDS.
  2. Under Common Data Service, choose Phone layout.
This image shows how to create a canvas mobile app from data in common data service.
Choose a data source/layout
  1. A list of connections are presented. Under the Common Data Service connection, choose an entity. If you don’t have the connection you’ll have to create one. In this case, I have created a customer entity called Food Orders.
This image shows how to create a canvas app from data in common data service.
Choose a table/entity
  1. Give your project a name by navigating to File → Settings and changing the name field. By default it is named App. I’ve named mine CanteenApp.
  2. Navigate to Save and click Save in the bottom right corner
This image shows how to name a canvas app file and save it.
Name and save your app

2. Customize the app

After you have created your app, you can start customizing the views and forms of your app. Similar to Dynamics 365, you edit the forms, e.g. rearrange fields and add/remove fields.

First, I’ll start with the list view as I want to control how this screen appears to the user. I want the view to be called Order Food instead of Food Order because we want the user to perform an action in the system, i.e. order some food from the canteen. To do this you:

  1. Have BrowseGallery1 selected on the left navigation.
  2. Click on the name. It is by default named after the table/entity. I’ve named my app ‘Order Food’.
This image shows how to rename a canvas app.
Rename the app
  1. Next, navigate to BrowseGallery1 → Layout and select the layout you like. In this case I have chosen a layout with an image.
  2. After you have given your app a title and chosen the layout, you’ll want to save our app. Repeat step 1.7 to do this. In the next step you will change the details and edit views of your app.
  3. In the Tree View menu navigate to → DetailForm1. You can do this by scrolling with your mouse or typing into the Search window.
  4. Under Properties navigate to → Fields and click on Edit Fields.
  5. Add the fields that you would like to see on the details view. This is the view the user sees when he clicks or taps on the Food Order item.
This image shows how to edit fields on a canvas app form.
Editing fields on a form
  1. Find the EditForm1 and Redo steps 2.5-2.7. Usually you want to display the same fields on an edit form as you do on a details form. This is expected behavior for a user. In the video at the end of this blog post, you can see how the app looks from the user’s perspective.

3. Publish the app

I assume that if you are like me, you want to polish the app to make it look a bit nicer. That’s fine. Once you are happy with how it looks (or perhaps you wan’t a colleague to test it for you), you can go ahead and publish the app.

  1. Navigate to File → Save to save your app.
This image shows how to save a canvas app.
Save the app
  1. As soon as you have saved the app you’ll see that a Publish button appears. Click on Publish. This will open a pop up window where you can add some information, publish the app or edit details.
  2. Choose Publish this version.That’s it. Your app has been published.
This image shows how to publish a canvas app
Publish the app

4. Share the app

The final step of the process is to share the app to get people to use it. If it is your first app, you will probably receive feedback for improvements. Don’t take it personally. Feedback is good when it comes to software because this way we can improve our product. Let’s go a head and share it with a colleague.

  1. Assuming that you are proceeding from Section 3 where you have saved and published the app. A screen appears where you have published the app offering you to share the app. You will see an option to share the app or see all versions of the app.
  2. Click on share.
  3. Type in the name or email address of the person who will receive the app. This contact has to have a license for Power Apps to be able to use the app.
  4. Select the user by clicking on the record.
  5. Assign a security role and click Share. Congratulations, you have now created, customized and shared a mobile app.
Image showing how to share a canvas app
Share the app

Please note that Jon (or whoever you share the app with) will require a security role and the appropriate permissions to be able to use the app for more information see Microsoft docs.

If you like this tutorial please subscribe to my Youtube channel and blog. Also, if you wan’t to create this app I created (see video below) feel free to contact me on the website and I’ll send you the solution file and share with you the template for the app.

If you want to study Power Apps there are plenty of resources online. I’ll leave a few links at the end of the post.


Chek out the video

Online resources on Power Apps


My post about Net Promoter Score on CustomerThink

A post written by myself just got published on CustomerThink, a highly ranked blog site. In the post I am discussing the benefits of using and implementing net promoter score to measure how satisfied customers are with your company’s products or services.

Furthermore, the article has been published as an Editor’s Pick giving it a more prominent place on the website as well as it will be featured in the blog’s weekly newletter next week.

As a taken of my appreciation, Stirna has decided to offer CustomerThink subscribers an hour of consultation for free! You can see the offer on CustomerThink’s Marketplace (valid until end of July) and you can subscribe to their newsletter here.


Introducing Stirna

The first blog post is dedicated to the name chosen for my consultancy business and my webiste: ‘Stirna’. The word ‘stirna’ is an Icelandic verb. It translates as (to) glitter, twinkle or sparkle. As you may have guessed already it has a reference to a star (in Icelandic ‘stjarna’). Although not very commonly used in Icelandic, it is primarily used to describe natural phenomena during winter time.