Integrating The ArcGIS JavaScript API With React

As more and more businesses are looking to digitally transform their field operations, the use of location based mobile apps for “in the field” data capture has increased. Esri maintain a suite of mobile apps, designed to facilitate data capture in the field, each with different functionality. These apps can be used individually, or they can be used together, to create a streamlined mobile workflow. When making use of the integration options that Esri offer, you can really leverage the power of the ArcGIS platform and its many capabilities.

This blog post will focus on integrating three of Esri’s popular mobile apps – QuickCapture, Workforce and Suvey123. QuickCapture allows users to quickly record information at the touch of a button, Workforce provides task assignment functionality, while Survey 123 offers easy to use form-based surveys for data capture.
 

For this example, we will imagine that we are interested in capturing and responding to sightings of invasive species in Ireland. Members of the public or volunteers should be able to report incidents of invasive species and we want to make this as simple as possible for the user. To do this, we are going to set up a QuickCapture project for reporting sightings and configure the project so that each of these reported sightings will automatically create a new task in Workforce. Once the Workforce task is created, we can assign this to a trained specialist, who can visit the site of the reported invasive species and carry out a more detailed investigation using Survey123.
 

The first thing we need to do is create a new Workforce Project. Setting up a Workforce project is straightforward – choose a Project Name, create Assignment Types, add Field Workers and add Dispatchers.

In this example, the project name is “Invasive Species”. We have created two assignment types – Invasive Species (plants) and Invasive Species (animals). This will help when it comes to data capture and assigning tasks – as we might have one specialist who investigates incidents of invasive plant species and a different specialist who investigates incidents of invasive animals. We have assigned multiple mobile workers and one dispatcher.
 

For more detailed steps on how to create a Workforce project, see Create Your First Project. 

Once the Workforce project is set up, a new folder appears in ‘My Content’. This folder has the same name as the Workforce Project, in this case, Invasive Species, and contains two Web Maps and a Feature Layer. Workforce automatically creates these content items when a new project is created.
 

The Feature Layer shown above contains the Assignment Layer, where various assignments are stored. Workforce creates this layer using a standard schema.

We are going to use this layer to create assignments using QuickCapture. However, not all attributes in the layer are relevant, so before we create a QuickCapture project, we will first create a View of the Assignments Layer, where we will hide some of the attributes that are not relevant.

To create a view, we can go to the Item Details page of the Workforce Feature Layer and click on Create View Layer.
 

Once the View Layer is created, we can click on the Visualisation tab, and click the More Options button, then Set View Definition. Here we can Define Features and Define Fields, as shown below.
 

In this example we have hidden assignment types and fields that are not relevant for the QuickCapture project.
 

Once we have the view layer set up, we can create a QuickCapture project to write into this layer, creating ‘unassigned’ assignments. When creating the QuickCapture project, we need to select the ‘Assignments’ View layer as the ‘selected feature layer’.  
 

Once the project is created, we can add buttons for each invasive species to be recorded. We need to configure the data source for each button to be the Assignments View layer, as shown below.
 

In this example, the Description field is populated with the common name of the species, and the Status field is set to Unassigned – as the task will be assigned to a particular field worker in Workforce. We have set the Priority to Medium (different invasive species can have different priority according to their risk level), and the Assignment Type is set using the unique ID (Global ID) for the Invasive Plants assignment type, from the Workforce Assignments Layer. Buttons for Invasive Species Animals should be set up using the unique ID for Invasive Species (animals), from the Workforce Assignments Layer. The Location is set to a user input, to allow the user to add more detailed information about where they have spotted the invasive species, if required.

Tip: to get the Global ID values from the Assignment Type layer, open the layer in a Webmap and configure the pop-up to show the Global ID field.

For more detailed steps on how to create a QuickCapture project, see Getting Started with ArcGIS QuickCapture.
 

The final thing to set up for our example workflow is the Workforce to Survey123 link. This means when a field worker opens their task assignment in Workforce app, they can be directed from Workforce to the Survey123 app, which will open the relevant form for their inspection (based on the assignment type in Workforce).

In the invasive species workflow, we are using a Survey123 form to carry out a detailed inspection of the reported invasive species. We might want to capture different information about invasive plants versus animals - for this, we can use two different Survey123 forms. We can control which Survey123 form the user is directed to, based on the assignment type. If the assignment (created from QuickCapture) is for invasive plants, then our field worker (in this case, invasive species expert) will be directed to the relevant plant Survey123 form. If the assignment type is for invasive animals, the field worker will be directed to the Survey123 form for invasive animals.

In the example shown above, we have set up Workforce to link out to two different Survey123 forms, based on assignment type. We are passing the Global ID (unique ID) from the Workforce assignment layer into a field in the Survey123 form. This means we can track which survey response is related to a particular workforce task.    

For detailed steps on how to create a Survey123 Form see, Create your First Survey.
 

Now that we have everything set up, we can go through the end-to-end workflow. This starts with reporting a sighting of invasive species in the field, then assigning the task of inspecting this sighting to one of our expert field workers and the field worker completing a Survey123 inspection form in the field. The workflow is shown in the short video below. 

In this example, we have integrated three of Esri’s most popular mobile apps – QuickCapture, Workforce and Survey123. By connecting each of the apps, we have streamlined the reporting and task assignment process – removing the need for an administrator to manually review reported sightings of invasive species and create task assignments for each. There are many other scenarios where this workflow can be of benefit, particularly when using QuickCapture, as it allows your field workers to very quickly report something in the field with the touch of a button.

This workflow can also be used with either Collector or Survey123 creating the Workforce task assignment in the field, so you can choose to use the app that is most suitable to your needs or that your workers are most familiar with.

For more information about anything covered in this blog – contact mapmakesense@esri-ireland.ie