8 Days of Power Platform — Day 4

This is a continuation of a 8-days series of Power Platform. For the rest of the series, please refer to links below:

TL:DR — Day 3 Recap

Besides the lengthy post, we have finally started into getting our hands dirty with Power Platform — starting with creating a new environment for our application, creating and managing entities.

Today, we will be looking at creating a Canvas apps for mobile — focusing on the look and feel of the application, showing the ease of connecting to your data sources and populating screens/forms and other controls with low or no code.

What is Canvas Apps?

Overview of Power Apps

There are two types of apps an user can create — Canvas or Model-driven apps:

  • Canvas apps start with your user experience, crafting a highly tailored interface with the power of a blank canvas and connecting it to your choice of 200 data sources. You can build canvas apps for web, mobile, and tablet applications.
  • Model-driven apps start with your data model — building up from the shape of your core business data and processes in the Common Data Service to model forms, views, and other components. Model-driven apps automatically generate great UI that is responsive across devices.
Available Templates and Controls for Canvas Apps

With canvas apps, it allows users to design an application with available in-built templates and by drag-and-drop elements onto a canvas — similar to how you use PowerPoint to build a slide.

Start with templates in Power Apps

Even if you do not know where to start, there are sample apps in Power Apps which you can generate, customize the properties and use it as your own.

Choosing a Contact App from template and ready connect with organization data source — Outlook 365

It take less than a minute or so to create an app using a template with a pre-configured data source. With templates, you can do so much more:

  • Use as a form of learning, understanding the flow, logic and function, and how they are built
  • Re-use the app parts for your app by copy and paste.
Creating Canvas apps with a data source

Besides starting with a template, you can also start with a data source. There are more than 200 data sources that Power Apps can connect your apps with.

This is a quick overview of Canvas apps and what you can essentially do.

Storyboarding

High level design for the application

It is not a perfect mock-up but it is to allow you to visualize when you are developing the interface and flow.

Create your first app in Power Apps

Appointment Screen Mock-up

Below are the tasks for the day

  • Create the canvas app with a data source
  • Explore the screens and controls of the app
  • Preview and Test the app
  • Publish the app

Create the canvas app with a data source

  • Open a browser of your choice and go to Power Apps https://make.powerapps.com/.
  • Under “Start from data” , click on “Common Data Service”.
Starting with a data source to create canvas app
  • Under “Connections”, click on “Common Data Service” and the right pane will show all the available tables.
  • Type “Appointment” in the search to filter for the table.
  • Click on the selected table and click “Connect”.
  • Once completed, there will be 3 screens generated — Browse, Details and Edit screens connected to “Appointment” table from Common Data Service.

Explore the screens and controls of the app

  • Browse screen — This screen appears by default. In it, you can browse, sort, filter, and refresh the data from the data source. In the browse screen, you can add items to the data source by selecting the plus sign (+).
  • Details screen — The details screen shows all information about a single item. In this screen, you can open an item to edit or delete it.
  • Edit/create screen — In this screen, you can edit an existing item or create a new one.
Where the controls are located in the editor

There are many controls presented in each screen — either perform an action or displaying information. You can see all the controls by expanding the left navigation pane to “Insert” or under the “Insert” tab on the ribbon.

I bring your attention to some of the common controls which you will see in most of the apps using the Browse Screen as the example:

BrowseGallery1 — It is a layout container that holds a set of controls which represent records from a data source. This will usually take up most of the screen estate.

Exploring the OOTB layouts from Gallery control

This control is currently pulling the data from the Appointment table and displaying the data based on the layout selected provided from this control as shown above.

IconNewItem1 — The icon control allows you to include these graphical symbols for which you can configure properties such as their color, or their OnSelect property so that the app responds if the user selects the icon.

Exploring the OnSelect property for the Icon control

For this screen, the icon control open up an edit/create screen.

Display and Edit form control

For Details or Edit/Create screen, the common control is Form Control — specifically Display and Edit form control respectively.

  • Display form — the user can display all fields of a record or only the fields that you specify.
  • Edit form — control, the user can edit those fields, create a record, and save those changes to a data source.

For more in-depth details on how this control handles CRUD, you can refer to this documentation.

For the form, you can dynamically change the fields without the need to drag an input for the desired field. As the form is connected to a data source,

Preview and Test the app

Preview your canvas app

Once you are done, you can preview the canvas app by pressing “F5” or click the “play” icon on the top of the toolbar.

Running the preview

Once you are in preview mode, you can play around with the app as though it’s on a native mobile to test out the functionalities and experiences.

Publish the app

  • Click on “File” on the top bar and under “Save”, click “Publish” and the latest version of this app will be published.
Accessing Power App on iOS

You can access the app from your mobile device by downloading Power Apps on the respective app store (i.e. Android and iOS).

All existing versions of the canvas app

You can check on the all the existing versions by clicking on “See all versions”. If there is a need to revert, choose the version and click “Restore”.

Conclusion of Day 4

Day 4 focuses on the basic steps of developing a Canvas app on Power Apps, the ease of connecting your data sources, showing the ease of connecting to your data sources and populating screens/forms and other controls with low or no code.

For the next day, I will be going deeper on playing with functions, variables and doing customized controls.

Happy #powerhacking away!

The opinions and views expressed here are those of my own and do not necessarily state or reflect those of Microsoft Singapore or Microsoft Corporation.

Closet geek, on the cloud journey with @Azure. Love Baseball. Git + LinkedIn: jenzushsu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store