A canvas app is one of the two main apps you can create within Microsoft Power Apps. Canvas Apps allows you to design applications with high flexibility over the design, look and feel whist still being able to integrate business data such as SharePoint, Dataverse as well as third party data sources such as SQL.
To create a Canvas App visit https://make.powerapps.com/. There are several different ways to start building canvas apps that Microsoft have pre-set. For this purpose of jumping straight in I will use ‘Start with an app template’
Navigating Canvas App
Canvas Apps can be quite daunting to navigate the first time you open them. The main areas we will look at are
- Properties Menu
- Navigation Menu
- Formula Bar
- Main Designer
From the Navigation menu on the left hand side is the Navigation menu, each object within this menu represents an object within the app.
Clicking on an object within the screen will highlight the object in the Navigation Menu on the right hand side.On the navigation menu you will see different screens inside each screen are controls/ objects which have different functionality. Before you start building an app it’s good to click through each object to see what different types of objects do within the app.As you click through each object you may notice the properties pane on the right-hand side change. Each object type within the app have different properties that you can play about with and changeUsing The Properties Pane
On the right hand side of the screen is the properties pane, each object type will have different properties that can be changed and adjusted to fit your style.
Not all the properties for this control are visible on the properties pane and for the most part you will find yourself changing properties using the formula bar. However there are some useful features inside the Properties Pane, some common ones are:
- Text
- Position (X,Y)
- Size (Width, Height)
- Padding
- Colour
- Border
- Display Mode
- Visible
Formula Bar
The formula bar may seem daunting at first but you will quickly get used adding formulas using low code. The FX Formula Bar allows you to add dynamic code and give your app functionality.
A simple example below is retrieving the text from a label and showing that text on a button:
I have a Label named ‘MyTextLabel’
And on my button named ‘MyButton’ in the formula bar you can enter in the object you want to refer to, in this case ‘MyTextLabel’ then the property you want to call or display, in this case the ‘Text’ value:
The end result:
Main Designer
The main designer is what you will be using to display objects for the user interface there are lots of different objects to choose from. The main designer is the screen where you can can preview all the your visualisations of your app and you can use drag and drop to move objects around the canvas.
Designer Controls
There are a lot of controls to pick from that can be added to the canvas, below are some of the more commonly used ones
Gallery
Galleries are uses to display data this can be from a temporary data source (Collection) or you can use external data source such as Excel, SharePoint, Dataverse, SQL below is an example of a gallery:
Buttons
Buttons are used for the user to interact on the page, a button could do a number of things for example, patching data to a data source, show/ hide something, send an email, there are lots of different possibilities:
Label/ Text
Containers
Containers are ways of grouping items together as the name suggests, containing them within an area of the app, objects inside the containers will stay within the set dimensions making it easier to control objects inside them.
Text Input
Text Input controls are open space controls that allow users to input information into a box, for example a search or form input
