Educator Developer Blog

6 MIN READ

Building an Expense Report Application with Microsoft Power Apps

Brass Contributor

Jan 24, 2022

Hi! Welcome back to empowerseries. The goal of this series is to showcase some of the amazing solutions built with Microsoft 365 and Power Platform. I'm Japhlet Nwamu a Microsoft Student Learn Ambassadors and member of Low Code League specializing in Power Platform. As an Microsoft Learn Student Ambassador, I work with student teams around the world to empower people with the knowledge necessary to build tech solutions without code. In this blog, I would be featuring a solution built by Rachel Irabor currently studying Industrial Mathematics at the University of Benin, Nigeria. Rachel is passionate about technology and aspires to become a data analyst. Rachel has built some amazing solutions with Microsoft Power Platform.

Rachel father works in a car company. Each time his car broke down and was repaired, he had to write down the expenses on a note with the receipt of the transaction. This note along with the receipt were passed to the company and the details were copied to the company’s records where they were collated and refunded to the drivers at the end of each month. This process was strenuous and wasn’t efficient. How can Rachel help this car company avoid cases of missing or torn notes, thereby fostering accountability and efficiency in the car maintenance department? Rachel decided to develop an application to make this work.

Rachel Power Apps application makes use of Microsoft’s Dataverse as the data source. Each driver records their expenses on car maintenance immediately incurred with the receipt attached. Once submitted, the details are stored on Dataverse and can be viewed by anyone who has access. Now let’s get started building our solution.

Step 1: Head over to make.powerapps.com on your browser

Step 2: At the upper right hand of the page, change your environment from default to the specific environment you would like to use. The reason for changing the environment from default is that it can only be created in the Dynamics 365 admin center.

Creating a Table in Dataverse

Now that you have changed your default environment and understood the reason, it’s time to set up the application database.

Step 3: Click on "Data/Dataverse" at the left side of your screen, then click on "Table".

Step 4: Go to the top right corner of your screen and click on default and then change to Custom from the drag down.

Step 5: Click on "+New table" at the top of the screen

Step 6: Input the name of your table in the first column for "Display Name".

Step 7: The "Primary Name Column" is similar to the title of a column in the table. Notice that in the column "Display Name" and "Name", a default name has already been inputted. You can change it if you wish. Tick the box "Enable attachment (including notes and files)" if you want your employee to attach a document, then click Create. You would be redirected to a page informing you that your table has been provisioned successfully.

Step 8: Click on "Default" on the top right side of the screen and change to "Custom".

Step 9: Click on the "+Add column" to add more details to your table. In the sidebar that pops out on the left, input your details. Click on "Data Type" and select the right data type for the column. To learn more about data types, check out the link: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/data-types. Select any of the three options under "Required" and click on Done.

Step 10: Repeat Step 9 for all columns you would like to add to the table. To save everything you have done, click on "Save Table"

Building your Application from Dataverse

Congratulations on creating your table using Dataverse. Next,

Step 10: Click on "Create" on the left side of the screen. This would take you to a page where you can select a data source you would like to connect your application to.

Step 11: Click on Dataverse.

Step 11: Next click on the connection and choose the table you created in step 6, then select Connect. This will take you to the Power Apps Studio.

Step 13: Click on "App" on the left side of the screen. In the dialog that pops up on the right side of the screen, input the name of your application in the section "App name".

Step 14: Click on DetailScreen1 and from the drag down click on DetailForm1

Step 15: On the right-hand side of the screen, search for "Fields" and click on "Edit fields".

Step 16: Go to "Add field", then choose the fields you created in your table in step 6. Thereafter, click "Add"

Step 17: You can rearrange the fields in the preferred order you want them to show on your app. Click on the ellipsis sign (…) by the side of the field and move it to the position you want it to be.

Step 18: Next click on "EditScreen1" section and select "EditForm1". On the right side of the screen under the section "Fields", click "Edit fields".

Step 19: Click on "+Add field" and select the fields you created in your table in step 6. When completed, click on "Add".

Step 20: Arrange the fields in the same format as in "DetailForm1".

Notice that the "EditScreen1" page now has all the fields you selected. Next, let's create a home screen for our application.

Creating a Home Screen for our application

Step 21: Click on "New screen" at the top left corner of the screen, and select "Blank".

Step 22: We would love to display an image on our home screen. To add one click on "Background Image" on the right-hand side of the page and select "+Add an image file".

Step 23: In the Image position, click on "Fit" so the image would fit the fullscreen.

Step 24: Now let's add a button to the home screen that would take us to the next page whenever clicked. At the top of the screen click on the "Button". Notice that as you do, a new button is added to the page.

Step 25: Drag the button to your preferred location on the page. To rename the button, change the name in "Text" on the right side of the page from "Button" to your preferred name.

Step 26: For navigation to the next screen when clicked, go to the top of the screen change the text from false to Navigate(BrowseScreen1). BrowseScreen1 is the name of the next screen.

Step 27: Next you would need to create a button for your app so you can navigate to the home screen whenever clicked. Follow step 24 to add a button to the page. For the navigation of the button to the home screen change false to Navigate(Screen1). Screen1 is the name of the home screen.

Step 28: To save your app, click on "File" at the top of your screen, then "Save" and click on "Save" again to save everything you have done.