Hazard Reporting Tutorial Series (Part 1): PowerApps - Mobile App for Reporting Hazards

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. List 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

  • Click on the Cog / Settings in the upper right corner of the screent

  • Then click on ‘Site Contents’

  • 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:

  • Next you will find yourself in the newly created list

  • Click on + Add Column > Date

  • 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 > Single Line of Text

  • Name this column Latitude and save.

Step 4:

  • Click on + Add Column > Single Line of Text

  • Name this column Longitude and save.

Step 5:

  • Click on + Add Column > Multiple Lines of Text

  • In the right-hand pane, enter the name of the column as ‘Description’ and save.

Step 6:

  • Click on + Add Column > Choice

  • In the right-hand pane, enter the name of the column as ‘Risk

  • Set the Choices property to:

    • High

    • Medium

    • Low

  • Set the Default Value to Medium 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.1 Create the Hazard Reporting App’s User Interface

Step 1:

  • Go to PowerApps.com and Sign In.

  • Click on Apps (in the left navigation) > Create an App > Canvas.

Step 2:

  • You will see the Blank App layout option, click on Phone Layout

  • At this point, the designer will open a blank app

  • In the left-hand pane, you will see the Screen 1

    • Rename it to NewHazardReport

Step 3:

  • In the top navigation, click on: Insert > 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.

  • NOTE: You can click on a design element in the designer and press CTRL-C to copy and CTRL-V to paste

Step 4:

  • In the top navigation, click on: Insert > Label

  • Adjust the label box that has been added to your canvas to align it over the header.

  • Change the color of the text in the label 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 (or under Home in the top navigation).

Step 5:

  • In the top navigation, click on: Home

  • Use the alignment tools to 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:

  • Click on the label you added to the design canvas in Step 5

  • Choose Text from the drop down list next to the formula editor at the top of the page.

  • Then click into the formula and set it to “Hazard Report”

Step 7:

  • In the top navigation, click on: Insert > Icon

  • 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:

  • In the top navigation, click on: Insert > Icon

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

microsoft incident management tool

2.2 Integrate Data Source with the App

Step 1:

  • In the top navigation, click on: View > Data Sources

  • In the pane that appears, click on the Search box and type "SharePoint”

  • If already have a connection to SharePoint, choose it

    • If you don’t have a connection to SharePoint click Add a Connection

  • When the connect to data pane appears:

    • Enter the URL for the SharePoint site you created your list on

      • OR

    • Search for the site by name

Step 2:

  • After you have connected to the site, choose the Hazard Report List

Step 3:

  • In the top navigation, click on: Insert > Forms > 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 lists fields load into the form. 

sharepoint safety management system ideas

2.3 Set up App’s Form

Step 1:

  • Access the explorer view / left pane in the designer

  • Find Form1 in the explorer view, Click on the ellipsis (three dots) next to Form1

  • Click on Rename > rename the form to frmHazardDetails.

Step 2:

  • In the top navigation, click on: File > Save

  • Change the App’s name to Hazard Report

  • Then the Save button on the bottom right

  • After saving, press the left / back arrow in the upper left

Step 3:

  • Click on the Title card in the form.

  • Click on Advanced properties

  • Click on Unlock to change properties’.

  • Select the label in the Title card, change the value of the Text Property to “Submitted By”

Step 4:

  • Now click on the text box in the Submitted by / Title card

  • Set the Default property to: User().FullName

Step 5:

  • Click on the Date Submitted card in the form

  • Unlock the Advanced properties

  • Click on the label, set the DefaultDate property to Today()

Step 6:

  • Now click on the Latitude data card.

  • Unlock the Advanced properties

  • Set the Default property of the Latitude card to Location.Latitude

  • Set the Latitude card’s Visible property to false

  • (This will make the data card disappear)

Step 7:

  • Now click on the Longitude data card.

  • Unlock the Advanced properties

  • Set the Default property of the Longitudecard to Location.Longitude

  • Set the Longitudecard’s Visible property to false

  • (This will make the data card disappear)

Step 8:

  • 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 9:

  • Click on the ‘Description’ data card.

  • Unlock the Advanced Properties

  • Click on the Text Box

  • In the right-hand pane, change its Mode property to: Multiline

  • Adjust the size of the Description data card and text box to increase the height of this card.

Step 10:

  • Now click on the Save icon on the bottom right of the canvas screen.

  • Change the OnSelect function value to: SubmitForm(frmHazardDetails)

Step 11:

  • Click on the Cancel icon on the bottom left of the app screen

  • Change its OnSelect function value to: ResetForm(frmHazardDetails)

Step 12:

  • Click on frmHazardDetails in the left-hand pane / explorer view.

  • Select the OnSuccess function and enter the function value as: ResetForm(frmHazardDetails)

Workplace safety software - powerapps examples

2.4 Publish the App

Step 1:

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

Step 2:

  • 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.

3. Testing the app

3.1 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.2 Verify in SharePoint

Step 1:

  • Now go to SharePoint, where you’ll see the Hazard Report list item that you just made using the phone app.

Step 2:

  • Click on the entry and click on the ‘open detail’ icon (left arrow) on the top right.

  • You will see the details of the Hazard item.

Step 3:

  • You can open the attachment by clicking on it. In this example, you will see the image that was captured with the camera in the Canvas app. 

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.

Download the Samples

You can download the samples and try these apps out for yourself.

Download the Basic solution (click here)

  • Build instructions above

Download the Advanced solution (click here)

  • Enhanced features, like:

    • Build a Gallery to List Hazards

    • Create a Gallery Search

    • Dynamic / Conditional formatting

    • Email generation

    • Working with Collections