A couple of months ago I kicked of this blog with the first part of this series. Lets have another look at what we can learn from the default functionality available in a PowerApp Canvas App generated from data. In this blog post I will zoom in on the different screens that are generated within the app – what is on those screens and for what purpose.

In part 1 of the series I created a SharePoint list with different types of columns and some data –  and generated a PowerApp based on this list. The app that I created at the end of the blog contains 3 default screens as is the case with all the apps created directly from data regardless of the data source:

  1. a browse screen – named BrowseScreen1
  2. a detail screen – named DetailScreen1
  3. an edit screen – named EditScreen1

DefaultScreens

The Browse Screen

The purpose of the browse screen is straight forward: to browse through a list of items of the connected data source.  The screen is built up of the following elements:

BrowseScreenOn the top of the screen there is a header area with the name of the data source (1) – in this case the name of the SharePoint list. Bellow the header there is a search box (2) meant for filtering the shown items by adding a search text to the search box. Below the search box a gallery control (3) is showing the items of the data source. In the upper right corner within the header area three icons can be found. The first one is a refresh icon (4). Selecting this icon while running the app will refresh the shown items in the gallery. The second icon is a sort icon (5). Selecting this icon while running the app will switch the sorting order of the items in the gallery. The third icon is a plus icon (6). Selecting  this icon while running the app will navigate you to EditScreen1 allowing you to add a new item to the data source through that screen. Within the gallery for every item three fields from the data source are shown (7). PowerApps selects a couple of fields by default. In this case the fields show the Title column, the content of the Number column and one of the available values of the Person column – in this case the claims value. In a future blog I will show how to select what fields are shown. Also there is a next arrow icon on the far right of every item in the gallery (8). Selecting this icon while running the app will navigate you to DetailScreen1 showing you the details of the selected item on that screen.

The Detail screen

The purpose of the detail screen is to show the details of an item from the data source.

DetailScreenAt the top of the screen there is a header area slightly different from the header area on the browse screen. The name of the data source is also shown on this screen in the header (1) but left of the title there is a back arrow icon (2). Selecting this icon while running the app will navigate you back to BrowseScreen1. On the right in the header are a trashcan icon (3) and a pencil icon (4). Selecting the trashcan while running the app wil delete the shown item from the data source. Selecting the pencil icon will navigate you to EditScreen1 allowing you to update the item shown on the detail screen. But the biggest part of the screen is reserved for the detail form (5) showing a number of fields with the details of the item. The fields are accompanied by the labels of the corresponding field.  This form is of the type Display Form meant for showing the details of a record.

The  Edit screen

The purpose of the edit screen is both editing existing items and adding new items to the  data source.

EditScreenJust as on the other screens there is a header containing the name of the data source (1). left to the name is a X icon (2). Selecting this icon will navigate you back to your previous screen without changing any data in the data source. The X functions as the cancel button for the edit screen. The form in this screen (3) is different from the one on the detail screen. As in the detail screen the fields are accompanied by the field label, but the form is an edit form containing editable controls for the fields in the data source so they can be changed. PowerApps picks a edit control based on the type of column in the data source. The title and number field have received a text box (4) to add or edit data in those fields. The person and choice fields are complex column types in SharePoint and have received a pick list control (5) to be able to select a person or choice for those fields. The Yes/No field has received a toggle control (6) to be able to switch between Yes and No. The Modified and Created fields are not editable in the data source, so those are added as view only fields (7). One last difference with the form on the detail screen is that required fields in the data source are marked by an asterisk (*) next to the field label (9). On the upper right corner in the header there is a check icon located (8). Selecting this icon while running the app will submit the content of the form to the data source creating a new item or updating an existing one if the data matches the requirements of the data source.

Summary

To finish of this blog post a summary of what PowerApps creates for you when you start from data. You get three screens filled with controls that let you view the items in your data source, view the details of an item, update an item or add a new item and navigate between these screens to support all these actions. A good head start for making your fist app. Great right?!

Previous parts of this series: