So, you just created your first PowerApp based on a SharePoint list. What does this app look like and what can you learn from the way it is generated? Before we dive into the different parts of the generated app: In the second part of this series we a look at PowerApps Studio – the tool to make and modify PowerApps.
By generating your app PowerApps Studio will have launched in a separate browser tab.
PowerApps Studio has several distinct parts:
A ribbon at the top (1), a property drop-down list (2) and formula bar (3) below the ribbon, a left (4), middle (5) and right-hand pane (6).
The ribbon contains a set of tabs (1) that is similor to ribbons in other applications. To the right you find the App name (2) and next to that a set of icons (3).
Clicking on the fill tab will open a different view with a menu on the left containing items including App settings, Save, Save as and Close.
To get back to the main PowerApps Studio screen you press the back arrow in the upper left corner.
The Home tab contains often used formatting tools for text, color, alignment and order. The different parts of this tab will light up as soon as you select a part of your app.
Special notice for the first two options in this tab: the Home menu starts with the New screen menu. This menu you will use every time you need to add a new screen to your app. The New Screen menu contains a set of predefined screen layouts you can choose from.
The second option is the Theme menu. With this menu you can quickly change the color scheme of your app by selecting one of 12 out of the box themes.
The Insert tab contains all the building blocks you can use to create your app. This tab also contains the New screen menu followed by often used insert options Label and Button. To the right you will find insert options for all the other building blocks: from controls as Drop down and Toggle in the Controls menu to media controls like Camera and Microphone under the Media menu.
The View tab contains quick links to view the data sources, media, data collections and variables contained in the app along with an option the open the advanced settings of a selected control.
Under the Action tab your will find quick links to add actions to your app such as navigation steps or running a Flow.
The icons on the right side of the ribbon are a mix of different tools:
- Click to start app checker – a summary of app health, listing formula and accessibility errors.
- Click to undo or redo modifications to your app (or press Ctrl-z / Ctrl-y).
- Click to run the app in preview mode (or press F5).
- Click to share the app.
- Click to show quick links to PowerApps documentation, support and community.
Property drop-down list and formula bar
The property drop-down list and formula bar below the ribbon are very similar to the cell drop-down and formula bar in excel. The property drop-down list contains all properties of the selected screen or control that you can add formulas to. The formula bar shows the formula for the selected property and can be used as formula editor.
On the left side of the formula bar you find the formula drop-down that contains all the formulas you can use with a short description and a link to more information about the formula.
To edit large formulas you can expand the formula bar by using the expand option (1) on the right side and expand it even more by dragging the lower edge (2) of the edit box.
In expand mode the formula bar contains two buttons to add (3) or remove (4) formatting to the formula. Formatting makes large formulas easier to read.
On the left side of the screen the navigation pane is situated. In the navigation pane all screens and controls that are part of your app are shown in hierarchy. The controls on a screen below that screen, the controls that are part of a gallery below that gallery and so on. Every control has a matching icon to help you recognize what kind of control it is. By clicking on a screen or control you select that control and it will show up selected in the middle pane.
You can switch from tree view to thumbnail view using the icons at the upper right corner of the left pane. The thumbnail view only shows the screens of your app.
The tree view has a search box that filters down all the controls in the app containing the search text to help you quickly locate a specific control.
Right clicking a screen or control opens up a context menu containing options to move, duplicate or delete screens, rename controls and collaps or expand parts of the tree view.
The middle pane shows the currently selected screen with all controls that are not hidden.
The bottom of the middle pane shows the hiërarchie breadcrumb of the selected control on the left (1) and zoom options on the right (2).
The right-hand pane contains three tabs: Properties, Rules and Advanced .
The Properties tab shows the basic edit option for properties of the selected control that are often modified. Editing properties in the Properties tab is done by toggles, drop-downs or color pickers.
The Advanced tab shows all properties of the selected control. Editing properties in the Advanced tab is done by typing a formula in the text box under the property label. The properties list in this tab is the same as the properties drop-down list left to the formula bar. The formula’s in the text boxes are the same as shown in the formula bar when selecting a specific property from the properties drop-down list. Using the Advanced tab or the properties drop-down list – formula bar combination are interchangeable. Pick which one works best for you. For large formulas my advise is to use the formula bar due to limited space in the right-hand pane formula text boxes.
Modifications to controls through the advanced tab with formulas allow for more complexity than through the Properties tab.
So, now you have generated your first app and have learned about the ins and outs of PowerApps Studio. In the next part of this series we will have a look at the different screens of the generated app.