In the previous episode we built an Out of Office app using a Power App template. The app allows you to quickly and efficiently create an out of office message, block your calendar, and notify colleagues you will be out of pocket.
Listen to a recording of this post:
In some respects, the app is plain and unappealing. In this episode, we will learn how to customize the Out of Office app we previously created and begin to understand some of the mechanics of the Power Apps Studio. We will look at how functions define all sorts of things in Power Apps and hopefully you are starting to get familiar with the process of building and modifying apps.
Power Apps Studio
Power Apps Studio is the name of the web interface you use to build your app. With Power Apps, there is no need to download or install any software for building apps. Everything is done from the browser by logging into https://make.PowerApps.com.
In Power Apps Studio you can fully develop your apps to make them more effective as a business tool and to make them more attractive. There are three panes that make creating apps seem more like building a slide deck in Microsoft PowerPoint. These panes include:
- Left pane– Shows a hierarchical view of the controls on each screen or a thumbnail for each screen in your app.
- Middle pane– Shows the canvas app that you’re working on.
- Right pane– Shows a set of options such as the layout, properties, and data sources for certain controls.
The following figure shows the main development window for Power Apps Studio followed by descriptions of each numbered section.
-
- Here you will see a ribbon with File, Home, Insert, View, Action, and Settings.
- File will take you to a system menu screen where you can save your app, share the app, or view collections, media, and variables used in the app.
- Home is where you can add new screens to your app, format, re-order, align, or group objects together.
- Insert is where you can add objects (buttons, galleries, labels, forms, pictures, icons, etc. …) to your app.
- View allows you to see the current data sources in your app or create new data sources. You can also view collections, media, variables used in the app, and open advanced settings for selected objects.
- Action helps you to quickly add actions to the selected objects, such as “Navigate” or “Add a new record.”
- Settings pops up a window to let you rename the app, set up the app icon, display features, …
- The app preview feature (also done by pressing F5) allows you to run the app checker, redo, or undo the action, share the app with other users, and help icon.
- This section shows different options depending on which item (File, Home, etc.) you click. For example, if you select “Insert” from the ribbon, you add controls and customizable design elements.
- The Property drop-down list, in the right pane, gives you the properties of the object you have selected. If no object is selected, the properties for the app screen you are currently working on is shown. You can define the properties for the currently selected object.
- The formula bar (Expression) is where you define or edit a formula or expression for the property of the selected object. It is located just above the canvas area.
- The left pane gives you different options based on what options you select. For example, you can see the app in a tree view, see a list of data sources, media galleries, and advanced tools.
- The right pane shows has options for Properties, which shows the UI properties for the selected object and Advance in another tab.
- Canvas/screen is the main area where you put objects for composing the app structure.
- App breadcrumb container gives a trail of objects that contains each other on the screen.
- Here you can change canvas screen size by zooming in or out, changing the size of the canvas during development in Power Apps Studio.
- The Focus zone helps you switch between a list of options like tree view, inserting controls, data sources, and advanced tools.
- Here you will see a ribbon with File, Home, Insert, View, Action, and Settings.
There are many different components within Power Apps to build solutions including screens, inputs, galleries, forms and more. Let’s review these basic elements in more detail.
App format
As we talked about in our previous episode, the first step in creating your app is to choose the format of your app: “Mobile” or “Tablet.” While both formats can be used interchangeably on a mobile device, a tablet, or a computer, they have different defaults around screen and control sizing. An important thing to note is, once you choose the format for an app, you cannot change it.
Galleries
The Gallery control is used to display rows from a table of data. The display of a row is then defined by a template, which you can customize to meet your needs. This allows you to control which columns are shown and how they are formatted. Power Apps will apply this template automatically to every row in your data.
Forms
Forms are focused on working with a specific record, often based on a selection from a gallery. A user browses a gallery to find and select the desired row to view the details on the form. Forms enable a user to not only view detailed information, but to save new records and edit existing ones. The various actions performed with forms are controlled by form modes allowing the form to serve many purposes.
Input Controls
To allow you maximum flexibility in customizing your apps, Power Apps has a wide selection of Input controls. Text inputs, buttons, dropdowns, toggles, date pickers, and sliders are a few examples. You can add these controls to galleries, forms, and screens to build a functional and aesthetic experience for your app. All inputs have a multitude of settings for default data, formatting, and actions, which allow you to build an app that has the right user experience for your business process.
Intelligent Controls
In addition to common inputs as covered above, Power Apps also provides a rich set of controls for more advanced operations. There are hardware-based controls, which allow access to the camera, bar code scanner, GPS, and more hardware features. There are also service backed controls like the business card reader or object detector which allow you to add artificial intelligence to your app without writing code.
Functions
The Functions are the glue that binds all these controls, inputs, and data sources together. You can use one or more function to create formulas in your apps. These formulas resemble the language in Excel and can be used for actions such as sending data to a data source, formatting information, creating animations, and more. No complicated code is necessary, simply powerful functions with straightforward inputs to enhance your app.
Modifying the app
Now we are familiar with the Power App components. Let’s move into exploring the generated app and modify the Out of Office app. If you have not built the app, check out my previous post, then come back and pick up here.
Go to https://make.powerapps.com and in the left pane select “Apps.” Find the Out of Office app and click on the ellipses (•••) and select “Edit.” The Power Apps Studio will open.
We will modify the salutation by automatically adding the name of the Person and their photo using the app. Multiple people in a group could be using the app so we will not hard code the name and photo. Instead, we will take advantage of the fact that we are using the 365 Users connector. The connector is pulling the calendar and contacts info into the app to populate the name and photo.
The following video will walk you through the rest of the process to customize the background with a different color, add an image, and customize the success screen.
In the next episode we will build an app from a personal data set.
Dr. Carlos Solís is Associate Vice President of the Technology Innovation Office.
