Types of Power Apps

Left Navigation Menu

Once we choose the type of PowerApp we would like to create, we are brought to the canvas to build our application. The left-hand menu is replaced as seen in Figure 13-4.

Your First PowerApp

Now that we have a basic understanding of how to access Microsoft Power Apps, let’s create one as seen in Figure 13-3. Our first PowerApp will be created from a data source (Excel). This will allow Power Apps to build out the majority of the entire application and with very little code.

The first step in creating this PowerApp from data is to create the data source in Excel. Open Excel, and enter the data (or similar) as seen in Figure 13-5.

Once the Excel data source is created, the next step is to format the cells and columns to be a table. By creating a table, Power Apps can ingest it and create the appropriate connectors to read and write to the file. To create the table, highlight the cells and choose “Format as Table” in the Excel ribbon, under the Home tab as seen in Figure 13-6.

Pick a style and check the checkbox “My table has headers.” When complete, it should look similar to Figure 13-7.

Now that the table has been completed and formatted, the final step is to rename the table, which can be done from the Design tab of the Excel ribbon. We are now ready to save the file to a location that Power Apps can access it. For this example, I will save the Excel document to my OneDrive. If you need a refresher on OneDrive, please refer to Chapter 3, which details the OneDrive application.

Once the file is saved to your OneDrive, we can then navigate back to Power Apps and create our first PowerApp. Navigate to Power Apps and choose “Other data sources” from the Start from data graphic as seen in Figure 13-3. Next, choose OneDrive for Business connection; if you do not see it, you may need to add the connection so Power Apps can access the file. Select the correct file as seen in Figure 13-8.

Once you select the file, Power Apps will ask for the table, select the correct table, and click “Connect” in the lower-right corner. This will initiate Power Apps and begin to build the data-driven application. The process takes a few seconds and after a few seconds will display the completed application as seen in Figure 13-9.

When looking at the Power Apps interface, there are a few areas to be aware of. These areas include the Power Apps ribbon, Object panel, main design area, and Properties panel as seen in figure 13-10.

Now that we are familiar with the Power Apps IDE, let us take a look at the application and quickly change the table name to something that is meaningful. To change the table name (upper--left corner), left-click the “Table32”; once clicked, you then will be able to change the name by the property in the Properties panel. For reference, see Figure 13-11, which details the change.

Let us preview our first PowerApp; to do so, click the play button in the upper-right corner. The application will render within the browser as a new tab, and the following functions will be available out of the box. These functions include sorting, adding an item, deleting an item, and refresh. To add a new item, click the plus sign in the upper corner of the application and enter an employee name and a lunch item. When entered, click the checkmark icon in the upper corner of the app to save your changes.

Like adding, deleting is very straightforward as well. To delete an item, select an item from the application and click the trash can icon in the upper corner. To edit an item, click the pencil to edit the item. Any changes within the application will be automatically saved back to the Excel spreadsheet.

Once we are satisfied with our application, let us add it to Microsoft Teams. To publish the app, click File in the Power Apps ribbon. Save the application, and then choose Share. In the Share window, select “Add to Teams” as seen in Figure 13-12.

Once you clicked the link, you will be promoted to save the file locally. Click “Download app,” in the lower-right corner; the file format will be a zip file. Now that we have the zip file of our PowerApp, choose which Team you want to add the PowerApp to. In my example, I will be adding the PowerApp we created to the All Employees team. Within the General channel of the team, click the plus sign (Add a tab) and select Manage apps located in the lower-right corner as seen in Figure 13-13.

In the next screen, select “More apps” ➤ “Upload a custom app” and choose the file we saved from Power Apps earlier. In Figure 13-14, you can see that we embedded the PowerApp into Teams and in a new tab.

This is a very simple PowerApp but shows the basic functionality that can be provided. As your skillset grows, you will be able to create more complex Power Apps.

Editing a SharePoint List Form with Power Apps

As we briefly mentioned in Chapter 2, we can edit the SharePoint list forms in Power Apps. For the IT users who are familiar with InfoPath, this is not a full replacement; however, it is getting closer. For new users, InfoPath, which has been deprecated from the Office product, was Microsoft’s attempt at a user-friendly form product.

Editing a form in Power Apps only currently applies to lists and not libraries as well as some other restrictions. The first step in this project will be to create a SharePoint list and associated columns with the appropriate data type. Once completed, the list and form should look like Figure 13-15.

• List name: Budget Details

• Column: Title (single line of text)

• Column: Amount (currency)

• Column: New Request (yes/no)

• Column: Vendor (single line of text)

• Column: Renewal (yes/no)

• Column: Contract Number (number)

The next step is to edit the form in Power Apps. As discussed in Chapter 2, click Power Apps in the list and choose “Customize forms.” This will open the form in Power Apps and allow us to begin to edit the form as seen in Figure 13-16.

The first thing we are going to do is to remove the ability to add an attachment; to do so, simply delete the attachment field by highlighting the field and pressing the Delete key.

The next thing we are going to do is to set the visible property on the Vendor and Contract Number fields via conditional formatting. The idea is that if the user does not need to fill in those fields, we can leave them blank. In Power Apps this is very simple to accomplish; it starts with setting the visible property of the control to false via a formula. To do so, click the form to identify the control that will be used to hide the other fields as seen in Figure 13-17.

This toggle is identified as New Request_DataCard1, and the toggle control is called DataCardValue3 as highlighted in red in Figure 13-17. The correct formula for this example is “If(DataCardValue3.Value = true, true),” which will be used to hide the Vendor field. Other types of fields such as choice can be used for conditional formatting.

The next step is to select the Vendor field and set the visible property to “If(DataCardValue3.Value = true, true),” as seen in Figure 13-18. Repeat the process again by selecting the correct value for the Renewal toggle and setting the Contract Number field to hidden/shown based on the chosen value.

Once completed, the form should look like Figure 13-19. To test functionality within the Power Apps IDE, hold down the Alt key and interact with the form. The fields should react to the chosen value for both New Request and Renewal toggle fields.

Once, you make the needed changes and are happy with the form, go to File ➤ Save. Once saved you will be able to publish back to the SharePoint list, by clicking “Publish to SharePoint.” Once the form is published, navigate back to the SharePoint list, and click “New.” The edited form will be displayed as seen in Figure 13-20.

As you can see, Microsoft Power Apps offers an extraordinary interface to begin crafting applications and editing list forms within SharePoint. This chapter only exposed a very tiny bit of the power of Power Apps. I encourage you to explore the available templates to understand and interact with nearly built applications provided by Microsoft. If you are interested in learning more about Power Apps, please take a look at Beginning Power Apps: The Non-Developer's Guide to Building Business Applications, Second Edition, by Tim Leung.

In the next chapter, we will summarize the key aspects of the applications and provide a very high-level plan to use them.