Survey123: Automate Data Entry with JavaScript Queries!

One of the main benefits of utilizing Esri’s Survey123 application within your organization, is that it is a very powerful data collection tool. Survey123 can be utilized to collect data on just about anything and everything, and the purpose of the survey form will vary greatly depending upon what kind of data is to be collected. Regardless of what the end purpose of the survey form is, the best way to ensure data integrity and to streamline the data entry process is to have background functionality built into your survey forms to assist the end user who is inputting the data. In this blog post, we’re going to be looking at how using a JavaScript query can automate the input of data by auto-populating several fields in the form with values from feature service. By simply by entering the ID of a specific fire hydrant in the form, our survey can then be populated with values from one or more features in a feature service while performing flow rate inspections.

To provide an additional bit of context to this blog post, the example we’re going to be using is a survey form constructed and published within Survey123 Connect for performing flow rate inspections on a hosted feature layer in ArcGIS Online for fire hydrant assets. The submitted inspection forms will be stored as records in a table that is related to the fire hydrant features. For more information on how to accomplish this workflow, please find additional information in this previous blog post, or by watching this webinar series we hosted last year. You can find Part 1 here, Part 2 here, and Part 3 here.

Using Survey123 Connect to create and publish survey forms provides more functionality and options for beefing up the abilities of survey forms as opposed to creating simpler surveys using using web designer on ArcGIS Online. Some of these functionalities included utilizing the ability to have default values, show/hide fields based on pervious answers, constrain user inputs and even perform calculations to populate fields with certain values. With our fire hydrant flow inspection example, the survey form is constructed so that when a user selects a fire hydrant from the Collector map and clicks on the hyperlink in the hydrant’s pop-up, the fields in the survey form that relate to that specific hydrant (Manufacturer, Main Size, Tip Size, etc.) are populated in the form with that feature’s attributes. This is accomplished by using default values and calculations in Survey123 Connect, and prepopulating fields in the hyperlink structure of the hydrant pop-up using Esri’s Arcade language.

This is an example of pre-populating feature attributes in a Survey123 form. The Link opens the form, the pre-populated field is populated by specifying the name of the field in the survey form to be populated with the value in the desired field fou…

This is an example of pre-populating feature attributes in a Survey123 form. The Link opens the form, the pre-populated field is populated by specifying the name of the field in the survey form to be populated with the value in the desired field found in the feature.

While these attributes can be populated for the selected feature, what happens when a second hydrant’s (residual hydrant) data also needs to be populated in the form? Since this hydrant will change from inspection to inspection, the user will need to specify the hydrant ID in order to execute a query on the hosted feature layer. Look no further than JavaScript to accomplish this! We utilized a custom JavaScript file to query and return values to populate that residual hydrant’s data into the relevant fields in the survey form. The script first executes a query on the all of the features in the fire hydrant layer and searches for the hydrant feature with that specific ID. Then, the script populates the fields in the survey form (Manufacturer, Main Size, Tip Size, etc.) with corresponding values found in the feature layer! The field user is required to enter a value in a single field (“Residual Hydrant ID” in the GIF below), and the JavaScript does the rest!

There are a few components to constructing and utilizing a JavaScript file to populate data in a survey form, as described below:

  1. The Survey123 Form- In order to take advantage of this functionality, the user must construct their Survey123 form by using Survey123 Connect. In the app, script files can be added into the “Scripts” option for that form.

  2. Feature Layer- While this one seems obvious, it’s important to note that a well-maintained and up-to-date feature layer will ensure that the data being returned by the JavaScript query and populated into the Survey123 form will be accurate.

  3. The JavaScript file- Here’s the big one. The script is the key to making this workflow possible, as the script is what controls which data is returned from the feature layer, and available as values added to fields of our form. While our example query returns attributes from a fire hydrant feature layer, JavaScript query scripts could be used to pull real-time data into the form like current weather conditions, traffic data, location, etc.

Have more questions or need help with beefing up or implementing Arcade scripts into your Survey123 workflows? Contact us or visit www.cloudpointgeo.com.