Citizen Developer Journey - My First "Power Apps" App

Caveat – this is a somewhat long post as I go step by step (with illustrations) in my app building process.

The following walks through the building of an Inventory management app I recently built using Microsoft Power Apps. In a former role I managed the teams' presence and SWAG for various in-person conferences. Keeping up with our SWAG inventory was a bit tedious; inventory was managed manually through the use of spreadsheets and emails. This app allows team members to update inventory – either when allocated to an event or when new inventory is acquired. So let’s jump in….

We will be using Microsoft Power App – https://make.powerapps.com . For this post I am assuming you have access to Microsoft Power Apps. If not, you can set up a 30-day trial subscription at https://powerapps.microsoft.com/.

 The app we will be building has three screens – a Summary screen; Inventory Detail screen; and an Inventory Edit screen. Below is what the app will look like:

Please note – we are using the app auto-generate functionality provided by Microsoft Power Apps for this blog post/demo. As you learn and become more familiar with Power Apps you will have the ability to build a canvass app from blank or a model driven app from blank.

To start, we need a data source. In this example we will be using Excel Online. From your PC build an Excel spreadsheet with the data associated with your SWAG inventory. Convert the data into a Table and name the Table – this named table will be referred to when we build our app. Once the data set has been converted to a Table and the Table has been named the save to the OneDrive that is associated with your Power Apps subscription.

Now that your data source has been set open Microsoft Power Apps (https://make.powerapps.com). Microsoft Power Apps provides opportunity for the app builder to connect to a vast array of data sources. In this case we will be connecting to the spreadsheet we built and stored in OneDrive (Excel Online). 

After clicking Excel Online, PowerApps connects you to your OneDrive for Business. A list of all Excel files will be shown. Click on the data folder you want to use for your app.

Clicking on Inventory Demo opens to the Inventory.xlsx file.

The Inventory.xlsx file holds the Inventory table we created earlier. Clicking on this table highlights the Connect button (bottom right).

Once the data has loaded, Power Apps auto-generates an app for you to build on and customize. This app has three screens:

BrowseGallery1 - this is your app’s summary screen. Includes the relevant, at a glance information you have defined. PowerApps takes a guess at the information shown. You are able change based on what you want to see.

DetailScreen1 - this hosts all the data from your data table. This screen is configurable.

EditScreen1 - this screen will provide the app user the ability to adjust and add new information about the inventory. This screen is configurable.

 With this auto-generated app there are a couple of cool app features that have been included.

1)     There is an App Preview button allowing the maker to test out the app.

2)     There are Navigation buttons in place allowing the user the move from screen to screen.

3)     There is a Add button allowing the user to add new inventory when acquired from within the app.

Now let’s start customizing the app to our needs. First, we will want to add the image of each associated piece of SWAG. To do this we will click on the preview button take us to the following:

Next, we click on the navigation button opening the Inventory DetailScreen1. From here we will click on the “pencil” in the upper right-hand corner of the screen allowing us to edit this screen. To add images to the app click on the text in the Image section. Once Image is in the screen you will click the submit button – the check in the upper right corner of the app screen. I will be pulling inventory images from my local machine. Once added Power Apps makes a copy of the image in your OneDrive and adds the image link to your Excel data source.

The inventory image has been added to the DetailScreen1. You need to do this each inventory entry. Click the back to list button (<) to go back to the main screen.

Now that we have added the inventory images to our app we will start customizing the User Interface. Closing the screen above will take us back to the working the screen. Clicking on the dropdown for BrowseGallery1 provides a listing of the components (referred to as “cards”) of the screen. Within Title1 ,card the app is pulling data from the data source column titled Color. Let’s change this to the Name column thus identifying the type of swag article. In the formula bar I changed the text ThisItem.Color to ThisItem.Name. Recall these are column titles from the Inventory table. Now we have the name of each Inventory line item. Note that this change is now reflected in each Inventory entry.

You will do this same process for Subtitle1 (I kept the same – ThisItem.CurrentCount) and for Body1 (I changed this to ThisItem.Size).

Within the right panel of the Power Apps maker screen, we are able to customize the text of each card. In this case we will re-align the text such that it is centered. Additionally, we will increase the font size for the Subtitle1 and Body text cards.

The BrowseGallery1 screen or Summary Screen for our app is now customized. Let’s move on to the DetailFrom1 screen for review and customization.

As you recall this screen details the inventory attributes for each swag line item. In reviewing the screen, we see that Size information is missing. The follow steps are taken to add.

1)     In the left-panel click on/highlight DetailForm1

2)     In the right-hand panel click on the Edit Fields

3)     Click on Add Field

4)     In the Choose Field text cell type in Size

5)     Click Add

6)     Size is now added to the screen.

Now that Size is added let’s rearrange the order. This is a simple drag and drop. As you rearrange the fields the changes are reflected in the DetailForm1. Close the Fields windows and the changes are applied.

You will want to go through this same exercise with the EditForm1 screen.

Now that all three screens have been customized click on the preview button (upper right-hand corner) to review your app. It will look like this:

Our app is looking good. I want to make a change to the CurrentCount field. Currently this is a static number based on what is listed within the Excel Table. This need to be dynamic, that is, as swag is allocated to events the CurrentCount field needs to reflect this allocation. Therefore, we will craft an easy formula that subtracts EventAllocation field from OriginalCount field. This is done as follows:

1)     In the Tree view (left panel), click on the drop down arrow for EditForm1

2)     Locate CurrentCount_Datacard2 – click the drop down arrow

3)     Click DataCardValue10

4)     In the right-hand panel click Advanced

5)     Now click Unlock to Change Properties

Now we can write the appropriate formula.

Within the formula bar we will write the following: Sum (DataCardValue15 – DataCardValue11). Breaking this down – DataCardValue15 represents the data field associated with OriginalCount_DataCard2; DataCardValue11represents the data field associated with EventAllocation_DataCard2.

To validate click on the Preview button, go to the Detail screen, click the Edit pencil, add a number in the data field for EventAllocation, and click the Submit (check mark button in the upper right of screen). Here is an example flow.

Now your app is finished and working as you like so let’s save. Click on File and then Settings. Power Apps offers you the opportunity to Name your app as well as add an icon that denotes your app.

 Once named and Icon selected click Save. At this point you are able to Share your app with team members. Simply add their email addresses with the Share field. Caveat – to share members need to be part of the M365 tenant your Power Apps subscription is associated with. If you are having difficulty sharing talk with your system administrator. If you are using Power Apps on a trial basis you will not be able to share your app.

You can access your Saved app on the Home page of your Power Apps subscription.

Congratulations! You have just built your first (or maybe second) Microsoft Power App. For additional learning I encourage you to go to https://aka.ms/PowerAcademy . This site has aggregated a number of Power App courses offered through Microsoft Learn.

Thanks for reading and happy Power App making!