Microsoft PowerApps - Incident Management / Hazard Reporting App, Part 1

Introduction

We are doing a series of blogs on how to create a a Hazard Reporting solution with PowerApps.

An app like this can be valuable to members of your internal team to report various kinds of hazards in the work place, field, factory floors, warehouses, and so on.

In this article, we have given step-by-step instructions on how to create a Hazard Reporting App with PowerApps.

There are three main steps to creating a hazard reporting app with PowerApps:

1. Database Setup in SharePoint

2. App Creation in PowerApps

2.A. Create the App’s User Interface

2.B. Integrate Data Source with the App

2.C. Set up App’s Form

2.D. Publish the App

3. Testing the App

Rather Watch a Video?

You can watch this video that runs you through the process of creation of a Hazard Reporting App or read this blog for a clear step-by-step guide:

In the following sections, we have listed the steps required to accomplish each task easily to create a safety incident tracking software:

1. Setup a SharePoint Incident Management List

Here are the five steps required to set up the SharePoint List for the Hazard Reporting app that you will build.

Step 1: Go to a SharePoint Site and click on ‘Site contents’ section, Click on New in the top bar, and then click on List

In the Create List pane that opens on the right side, Enter the name of the list and click on Create. We named the list Hazard Report.

Step 2: Click on Add Column to add a Date column. Click on Date. Again in the right-hand pane, enter the name of the column as Date Submitted and click on the Save button at the bottom.

Step 3: Click on Add Column followed by a click on ‘Add a Line of Text’. Name this column Latitude and save.

Step 4: Add anotherAdd a Line of Text’ column and name it Longitude.

Step 5: Add another Column with ‘Multiple Lines of Text’ as the column type. In the right-hand pane, enter the name of the column as ‘Description’ and save.

sharepoint incident management system setup

2. App Creation in PowerApps

In this section, we will cover four main points of designing an incident management software or app—user interface designing, database integration, setting up of app form, and publishing the app.

2.A. Create the Hazard Reporting App’s User Interface

Step 1: Go to PowerApps.com and Sign In. Click on App and then on ‘Create an App’ followed by Canvas.

Step 2: When you see a Blank App on your dashboard, click on its Phone Layout option. In the left-hand pane, you will see the default screen 1. Rename it to NewHazardReport

Step 3: On the canvas, Insert an Icon. Choose the Rectangle Icon. Stretch the rectangle to create a header, and then copy and paste it to create a duplicate for the footer of the screen.

Step 4: Now, click on Label. Adjust the Text box that appears to align it properly over the header. Change the color of the text in the text box to White (or whichever other color you prefer) by clicking on the text box and then using the color palette in the right-hand pane.

Step 5: Go to Home, centre align the text in the Text Box and change font size. You can also make the font Bold, Semibold, or Lighter, as you prefer.

Step 6: To change the text in the box, click on the text box and you will see a function row on top. Choose Text as the function type, using the left-most section of the Function row. Then click into the function value area to change the heading’s name to whatever you like. We named it ‘Hazard Report’.

Step 7: Again click on Insert followed by Icons, and select the Save icon. Move the icon to the bottom right of the app screen. You can change the color of the icon using the color palette in the right pane.

Step 8: Insert the Cancel Icon to the bottom left of the screen and change its color, too, as you like. 

microsoft incident management tool

2.B. Integrate Data Source with the App

Step 1: Click on View followed by Data Source. In the right-hand pane click on ‘Add data source’. Then click on SharePoint. Let the data sources from your SharePoint load.

Step 2: Click on the Incident Reporting data source. Click on Hazard Report database that you created with SharePoint. Click on the Connect button at the bottom of the screen. Now the right pane will show Hazard Report in the Data sources section.

Step 3: Insert a Form in the app. Click on Edit. This will add a form to your app screen. Stretch the Form to cover the entire app screen between the header and footer. In the right-hand pane. Choose the Hazard Report as the Data source of the form. As soon as you do this, you will see the form load on your app screen. 

sharepoint safety management system ideas

2.C. Set up App’s Form

Step 1: In the left pane, click on the ellipsis (three dots) icon next to Form1. Click on Rename to rename the form to frmHazardDetails.

Step 2: Now click on File on top left, change the App’s name to Hazard Report and click on Save in the left pane and then the Save button on the bottom right.

Step 3: Go back to the app screen. Click on the Title card in the form. Click on the data card’s Key  and then click on Advanced section in the right-hand pane. Click on Unlock to change properties’.

In the function value on top, change the text to: “Submitted By”

Step 4: Now click on the Value section of the first Data card in the form. In the function value section on top, insert: User().FullName

Step 5: For the second data card in the form, change the Key value by selecting the Key. Click on Advanced to change the DefaultDate to Today()

Step 6: Now click on the third data card that is Latitude. Select ‘Visible’ as the function type and change the value of the function to: false

This will make the data card disappear.

Step7: For the same card, change the function type to Default and change the function value to: Location.Latitude 

Step 8: Now click on the Longitude data card and select the Visible function of this card and change its value to: false

This will make this data card disappear, too.

Step 9: For the same card, choose the function type as Default on top left. Change the function value to: Location.Longitude

Step 10: Now click on the ‘Attachment’ data card. Adjust the height of the data card by clicking on its bottom border and moving it up and down.

Step 11: Click on the ‘Description’ data card. In the right-hand pane, change its Mode to: TextMode.Multiline

Step 12: Drag down the bottom line of the Description data card to increase the height of this card.

Step 13: Now click on the Save icon on the bottom right of the canvas screen. Change the OnSelect function value to: SubmitForm(frmHazardDetails)

Step 14: Click on the Cancel icon on the bottom left of the app screen, and change its OnSelect function value to: ResetForm(frmHazardDetails)

Step 15: Click on the full form or click on frmHazardDetails option in the left-hand pane. Select the OnSuccess function and enter the function value as: ResetForm(frmHazardDetails)

Workplace safety software - powerapps examples

2.D. Publish the App

Step 1: Now click on File on top left and click on Save and then on Publish. Click the Hazard Report checkbox and then click on Publish this Version.

Step 2: Go back and again click on frmHazardDetails, and in the right pane, change the Default mode to New.

Again go to File and click on Save. Click on Publish and the Publish this Version.

3. Testing the app

3.A. Testing in PowerApps

Step 1: On your phone, go to PowerApps. Open the Hazard Report App.

Step 2: You’ll see your name and date are pre-filled. Add description to the description form.

Step 3: Attach a file. In this case, we are attaching a picture taken using the phone’s camera. Click on the Save icon when you’re done.

powerapps examples - incident reporting tool

3.B. Testing in SharePoint

Step 1: Now go to SharePoint, where you’ll see the Hazard Report entry that you just made using the phone app.

Step 2: Click on that entry and click on the ‘open detail’ icon (left arrow) on the top right. You will see Who submitted the report, date on which the report is submitted, their location latitude and longitude, the description of the report, and the attachment with the report.

Step 3: You can open the attachment by clicking on it. In this example, you will see the image that was taken through the phone camera and submitted to PowerApps

sharepoint ticketing system

This completes all the steps required to create and test a Hazard Reporting app with Microsoft PowerApps. For more such PowerApps ideas and examples, follow our blog.

We are writing a series of blog posts on creating a complete Hazard Reporting Solution with the help of PowerApps.