Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Update app screens, controls, and fields; and use formulas to further customize app behavior.
You will learn how to...
In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. Second, we dig deeper into how the app is put together, and show you how to customize it. You'll definitely get some new information going through this section, so let's jump in!
Generate the app
The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.
To build an app, click PowerApps, then Create an app. In the right hand pane, enter a name for the app, then click Create. After you click Create, PowerApps starts to generate the app. PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.
View the app in PowerApps Studio
Your new three-screen app opens in PowerApps Studio. All apps generated from data have the same set of screens:
- The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
- The details screen: where you view more detail about an item, and can choose to delete or edit the item.
- The edit/create screen: where you edit an existing item or create a new one.
In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.
Click or tap each thumbnail to view the controls on that screen.
Run the app in preview mode
Click or tap in the top-right corner to run the app. If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.
Next we'll explore the app in more detail and later customize the app so it better suits our needs.
In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. We won't go through all the details, but seeing more about how this app works will help you to build your own apps. In a later topic, we'll look at the formulas that work with screens and controls.
Understanding controls in PowerApps
A control is simply a UI element that has behaviors associated with it. Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). And also some other really cool controls like Image, Camera, and Barcode. To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.
Explore the browse screen
Each of the three app screens has a main control and some additional controls. The first screen in the app is the browse screen, named BrowseScreen1 by default. The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).
PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. You will see more ways to control layout later in this section.
Explore the details screen
Next is the details screen, named DetailScreen1 by default. The main control on this screen is a display form named DetailForm1. DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).
There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.
Explore the edit/create screen
The third screen in the app is the edit/create screen, named EditScreen1 by default. The main control on this screen is an edit form named EditForm1. EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).
Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.
In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. The app that PowerApps generated is useful, but you will often customize an app after it's generated. In this topic, we'll walk through some basic changes for each screen in the app. There is a lot more you can do to customize an app - we'll get to that in later topics. In the meantime, you can take what you learn in this topic and build on it. Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. It really is the best way to learn how apps are put together.
We'll start with the browse screen. The SharePoint list contains an image for each product but the image isn't displayed by default. Let's fix that. In the right-hand pane, on the Layout tab, select a different layout for the browse screen. You see the results right away because PowerApps updates the app as you make changes.
With the right basic layout, now change the fields that are displayed. Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. This provides a better summary of each item in the list.
On the details screen, we want to change the order of the fields and display the image also. There are different controls on this screen, so the process is a little different from the browse screen. Click or tap a field, then in the right-hand pane, drag the Title field to the top. Then click or tap the Image field to display it.
Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.
You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. In the next topic, we'll get into formulas, which play an important role in driving app behavior.
One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. This is where formulas come in. If you have used Excel formulas, the approach that PowerApps takes should feel familiar. In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. You will get a taste of what formulas can do. Then you can spend some time looking at other formulas in the generated app and writing your own.
Understanding formulas and properties
In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). The following image shows the idea.
Let's start with the currency formatting. By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.
To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.
The formula -
Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. For example, here is a partial list of the properties for a label. Some properties are relevant across a broad range of controls and others only for a specific control.
To format the color conditionally based on the price, use a formula like the following for the Color property of the label:
If(Price > 5, Color.Red, Color.Green).
Formulas included in the generated app
Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.
The first formula is associated with the IconNewItem1 control: . You click or tap this control to go from the browse screen to the edit/create screen and create an item.
- The formula is
- The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. A value of
ScreenTransition.Nonemeans there is no transition between screens (such as a fade).
- The formula is
The second formula is associated with the IconSortUpDown1 control: . You click or tap this control to sort the list of items in the browse screen gallery.
- The formula is
- The formula uses
UpdateContextto update a variable called
SortDescending1. The value of the variable switches back and forth as you click the control. This tells the gallery on this screen how to sort the items (watch the video for more details).
- The formula is
The third formula is associated with the NextArrow1 control: . You click or tap this control to go from the browse screen to the details screen.
- The formula is
- The formula navigates to the details screen, again with no transition.
- The formula is
There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.
Wrapping it all up
This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. If you've followed along, you should have a better understanding of how a generated app works. Now you can take this understanding into creating your own apps.
Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. This provides a simple way to manage your lists with a friendly customized experience.