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
I have to admit — Day 3 seemed tad long because of the depth I went into Common Data Service (CDS) and Common Data Model (CDM). I felt that this is an area which was not clearly addressed and misunderstood in the community. If properly designed and used in an enterprise, there are lots of potential where CDM can cut across multiple business units and bring alignment when it comes to data strategy.
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?
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.
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.
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.
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.
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
Before jumping in to start designing the app on Power Apps, the use of storyboarding allows me to have a high level overview of the application flow and the experience. You can choose to use any wire-framing tools, PowerPoint or sketching on paper. Below is my initial draft for this app.
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
Now, we are ready to create our app on Power Apps with a good idea on the experience and with the entities ready. I will be focusing on Appointment entity, exploring the screens and controls, and functions.
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”.
- 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
All apps that are generated from data have the same set of screens that you can view from the Screens pane:
- 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.
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.
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.
For this screen, the icon control open up an edit/create screen.
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
Once you are done, you can preview the canvas app by pressing “F5” or click the “play” icon on the top of the toolbar.
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
Once you are satisfied with the current version, you can publish the app to all users with whom the app is shared.
- Click on “File” on the top bar and under “Save”, click “Publish” and the latest version of this app will be published.
You can access the app from your mobile device by downloading Power Apps on the respective app store (i.e. Android and iOS).
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.
