Creating an app from SharePoint

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...

Generate an app

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.

Flooring Estimates list

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.

Generate app from list

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.

Toggle the views

Click or tap each thumbnail to view the controls on that screen.

The generated app

Run the app in preview mode

Click or tap Start app preview arrow 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.

Run the app in preview mode

Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Explore a generated app

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.

Controls tab on PowerApps Studio ribbon

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).

Browse screen with controls

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.

PowerApps gallery options

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).

Details screen with controls

There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

PowerApps form options

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).

Edit screen with controls

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.

Customize the app

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.

Browse screen

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.

Change the browse screen layout

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.

Change the browse screen fields

Details screen

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.

Change the detail screen fields

Edit/create screen

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.

Change the edit screen fields

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.

Explore app formulas

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.

Text formatting for color and currency

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.

Price default formatting

To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Price currency formatting

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.

Setting properties

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).

Price color formatting

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: New item icon. You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • 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.None means there is no transition between screens (such as a fade).
  • The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. You click or tap this control to sort the list of items in the browse screen gallery.

    • The formula is UpdateContext({SortDescending1: !SortDescending1})
    • The formula uses UpdateContext to 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 third formula is associated with the NextArrow1 control: Go to details arrow icon. You click or tap this control to go from the browse screen to the details screen.

    • The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • The formula navigates to the details screen, again with no transition.

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.

App as view of Sharepoint list

Now that you've gone through the SharePoint app section, you have a choice about where to go next:

The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

Congratulations!

You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

You learned how to...

Next Tutorial

Creating an app from the Common Data Service

Contributors

  • Michael Blythe