How to build Canvas App in Power Apps - Part II
Table of Content:
Improve apps by making basic customizations in Power Apps
In the previous module, you generated the Flooring Estimates app and started to explore its default design. While the default screens make a useful app out of the box, you'll often want to customize a generated app to suit your needs.
This unit explains basic changes for each screen in the app. You can do a lot more to customize an app, but the best way to start learning is to take a generated app and make common customizations. This will allow you to become familiar with the controls, layouts, and functions.
Browse screen
The Flooring Estimates app already shows an image and some text for each product, but the layout could be better.
To improve the layout, use the following procedure:
The selection box around the gallery confirms your choice.
Details screen
On the details screen, you want to change the order of the fields. The controls on this screen differ from the controls on the browse screen, so the process for changing them is also slightly different.
Edit/create screen
On the screen where your users edit and create entries, you want to make it easier for them to enter information in a text box.
A few basic steps can greatly improve the appearance and experience of using an app, and Power Apps Studio provides many options for customizing those apps.
Explore screens and controls in Power Apps
This unit examines the screens and other controls that define the behavior of apps that Microsoft Power Apps generates. All the details won't be covered; however, knowing more about how these apps work will help you build your own apps.
Controls in Power Apps
A control is a UI element that produces an action or shows information. Many controls in Power Apps are similar to controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on.
In addition to these typical controls, Power Apps has more specialized controls, which you can find on the?Insert?tab.
A few controls that can add interest and impact to your apps include:
To see what controls are available, select the?Insert?tab, and then select each option in turn.
Explore the browse screen
Each screen in the app has multiple controls, but one control takes up most of the screen space. The first screen in the app is the browse screen, which is named?BrowseScreen1?by default.
Controls in the browse screen that you'll want to become familiar with include:
Explore the details screen
The details screen is named?DetailScreen1?by default. Some of its controls are as follows:
领英推荐
Explore the edit/create screen
The third screen in the app is?EditScreen1. Some of its controls include:
Get started with functions in Power Apps
When using Microsoft Power Apps, you don't have to write complicated application code the way that a traditional developer does. However, you must express logic in an app and control its navigation, filtering, sorting, and other functionalities. This is where formulas come in.
If you've used Microsoft Excel functions, you should recognize the approach that Power Apps takes. This unit shows a couple of basic formulas for text formatting and then describes three of the formulas that Power Apps includes when it generates an app. With this information, you'll have a better idea of what formulas can do, and then you can also start to write your own.
Get started with formulas and properties
The previous unit explored controls in all three screens of an app that Power Apps generated. In this section, you’ll use the properties of the label control to format the price in the gallery.
By default, the price appears as a plain number without a currency symbol. Suppose that you want to add a dollar sign and change the text color based on the item's cost (for example, red if it's more than $5 but green otherwise). The following graphic shows the expected result.
By default, Power Apps pulls in a price value for each item. This value is set as the?Text?property of the label that shows the price.
?Note - Be sure to complete the steps in unit 1 of this module as the description field is changed to price as reflected in the next steps.
Text(ThisItem.Price, "$ ##.00")
Note - If your formula returns an error, then please note that the language setting of your Power Apps environment can affect some separators and operators. For example, the above formula is expressed in a language and region that uses dot or period as the decimal separator, such as Japan or the United Kingdom. However, this same formula in a language and region where a comma is used for the decimal separator, such as France or Spain, the formula will need to be:?Text(ThisItem.Price; "$ ##,00")
The property selection operator (dot or period) in ThisItem.Price is always the same, no matter what the decimal separator is, but notice that the decimal separator and the chaining operation separator changed to a comma and semicolon respectively. Internally the formula doesn't change, all that changes is how it's displayed and edited by the author. See?Formula separators and chaining operator?for more information.
The?Text?function specifies how to format the number. The formula is like an Excel function, but Power Apps formulas refer to controls and other app elements instead of cells in a workbook.
If you select a control and then open the property drop-down list, a list of properties that are relevant to the control appears. For example, the following is a partial list of the properties for a?Label?control. Some properties are relevant across a wide range of controls, but others are relevant only for a specific control.
To conditionally format the price's color, select the price?Label?and choose the Color property and set it to this formula:
If(ThisItem.Price > 5, Color.Red, Color.Green)
Formulas included in the generated app
Power Apps uses a couple of formulas in every app that it generates. Both examples are from the browse screen and work with the?OnSelect?property. This property defines what happens when a user selects a control.
NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
The formula instantiates an edit page on the edit/create screen so that users can create an item. A value of?ScreenTransition.None?means that there's no transition, such as a fade, between screens.
UpdateContext({SortDescending1: !SortDescending1})
The formula uses?UpdateContext?to update a variable called?SortDescending1. The exclamation "!" symbol in the formula is a shortcut for the Not function. The value of the variable switches back and forth as you select the control. This variable tells the gallery on this screen how to sort the items.
The app contains many other formulas, so take some time to select controls and determine what formulas are set for various properties.
For more information about these and other functions, refer to?formula reference for Power Apps?page.
For additional information on customizing a canvas app, refer to the Use the UI and controls in a canvas app in Power Apps learning path and the Use basic formulas to make a better canvas app in Power Apps learning path.
Summary
This module showed you how to customize an app by adding controls, formatting, and logic in Power Apps.
Additionally, you were able to:
This article is part of Microsoft Certified: Power Platform App Maker Associate and will be one of many in the series of articles on my journey to become Microsoft Power Platform Architect:
Until next time,
Nikola Basta