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

2018-08-05_PowerApps_Studio

The Ribbon

 

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

2018-08-05_PowerApps_Studio_Ribbon

File

Clicking on the fill tab will open a different view with a menu on the left containing items including App settingsSave, Save as and Close.

2018-08-05_PowerApps_Studio_Ribbon_File

To get back to the main PowerApps Studio screen you press the back arrow in the upper left corner.

Home

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.

2018-08-05_PowerApps_Studio_Ribbon_Home

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.

2018-08-05_PowerApps_Studio_Ribbon_Home_NewScreen

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.

2018-08-05_PowerApps_Studio_Ribbon_Home_Theme

Insert

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.

2018-08-05_PowerApps_Studio_Ribbon_Insert

View

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.

2018-08-05_PowerApps_Studio_Ribbon_View

Action

Under the Action tab your will find quick links to add actions to your app such as navigation steps or running a Flow.

2018-08-05_PowerApps_Studio_Ribbon_Action

Ribbon icons

The icons on the right side of the ribbon are a mix of different tools:

  1. Click to start app checker – a summary of app health, listing formula and accessibility errors.
  2. Click to undo or redo modifications to your app (or press Ctrl-z / Ctrl-y).
  3. Click to run the app in preview mode (or press F5).
  4. Click to share the app.
  5. Click to show quick links to PowerApps documentation, support and community.

2018-08-05_PowerApps_Studio_Ribbon_Icons

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.

2018-08-05_PowerApps_Studio_PropertyDrop_FormulaBar

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.

2018-08-05_PowerApps_Studio_FormulaBar_FormulaDropDown

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.

2018-08-05_PowerApps_Studio_FormulaBar

Navigation pane

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.

2018-08-05_PowerApps_Studio_LeftPane

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.

2018-08-05_PowerApps_Studio_LeftPane_Thumnails

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.

2018-08-05_PowerApps_Studio_LeftPane_Tree

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.

2018-08-05_PowerApps_Studio_LeftPane_Tree_ContextMenu

Middle pane

The middle pane shows the currently selected screen with all controls that are not hidden.

2018-08-05_PowerApps_Studio_MiddlePane

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

2018-08-05_PowerApps_Studio_MiddlePane_Botom

Right-hand pane

The right-hand pane contains three tabs: PropertiesRules 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.

2018-08-05_PowerApps_Studio_RightPane_Properties

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.

2018-08-05_PowerApps_Studio_RightPane_Advanced

Modifications to controls through the advanced tab with formulas allow for more complexity than through the Properties tab.

Next time

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.