Announcing a handy tool to generate Survey123 URLs

10-11-2018 11:23 AM
New Contributor III

I'm excited to announce a web-based app for the Geonet Community that generates Survey123-schema URLs and buttons for web map popups for integrating Collector and Survey123. The app creates a button with the Survey123 URL embedded that looks great in your map and ensures good referential integrity for your data. You can use the Survey123 URL Generator on Github Pages. More details below.


The app creates a button that carries a primary key attribute from a geometric feature to be inspected to a related Survey123 item. The copying of the key ensures referential integrity in a one-to-many relationship. I wrote this because I tend to forget the exact parameters of the Survey123 URL schema and wanted to generate it with a tool.


The app is built in Bootstrap 4 and runs in any modern browser, desktop or mobile. The code is open-source and on Github. The button API is based on DaButtonFactory and renders the image on the fly. I've found that these even work offline with some caching, but you can always copy the raw link and put that in a text URL as well.


The app is very simple.

  1. Copy your Survey123 item GUID into the Item ID box
  2. Populate the primary/foreign keys using the instructions in the app
  3. Enter a button label in the Button Text field
  4. Click Generate
  5. Click the Copy Button Code button
  6. Open a web map
  7. Open the custom popup config
  8. Switch to HTML Mode
  9. Paste your button link in

Optionally, you can copy the Raw URL and incorporate it into your own button or text link.


Please leave any feedback here. You can report bugs or feature requests in the Github repo.

6 Replies
Esri Notable Contributor

Well done Elliot. Thanks so much for sharing.

0 Kudos
New Contributor III

Hi, when sending the survey it is possible that the asset changes color automatically

0 Kudos
Occasional Contributor

This is a great app, thank you so much.  It would be great to expand on this idea and add the ability to do some further field mapping so that other attributes may be transferred, particularly location.  I know how to do it manually but would be a nice addition to the GUI.  Also, the ability to give the user the ability to determine whether the survey is opened in the app or browser and adjusting the URL to do so.  Regardless, this is outstanding.

0 Kudos
New Contributor II

Good news! A contributor on GitHub added a pull request that adds the multiple field functionality.

0 Kudos
Occasional Contributor

I was able to take this idea and also apply it to creating buttons in storymaps to use when creating bookmarks.  It's a little bit of a cumbersome process, but within storymaps you are able to effectively create bookmarks by using a "Story Action" to zoom and pan to a specific location whenever the text is clicked in the description panel.  When an action is created you can then go into the html source code and copy that code to be applied in the next step.

I then created a button from the resource in the original post and put place holders in for the fields required except for the text I wanted in the button.  I then replaced the code that calls Survey123 with the code that is outputted when creating an Action within the storymap.  The code should look something like this:

Notice the ACTION number.  This appears to be the unique number generated when an action is created.  Once an initial button is created the process can be repeated however rather than generating a new button from the GitHub resource, simply copy and paste the code from the first button and replace the ACTION number with the new ACTION number created when you repeat the initial step of creating a "bookmark" action within the description panel.

The end product looks something like this:

Without buttons:

With buttons:

Again, it's a clunky process but the difference between a button and simple text is worth the trouble, in my opinion.

To repeat the process:

1.) Create an action (in this example it's a bookmark or jump to location action but I'm assuming you could use the other options as well such as switch main stage, etc.) within the details page of a map within a storymap

2.) Create a button from the original post via GitHub using placeholder values for all fields except the text desired on the button

3.) Copy the button code into the html source code of the description of the map within the storymap

4.) Delete the first part of the code that calls Survey123 and replace it with the code from step 1 which includes the ACTION number.

The process can then be repeated by repeated step 1, copying the button code from step 4, and replacing the ACTION number and altering the desired text.

Occasional Contributor II

Hi Elliot,

This is so cool!!  I added the button code to the popup in my webmap and it worked like a charm.  Well, at least for one survey. The button worked for my Field Parameters survey launches the survey in Survey123 (desktop) and populates the SITEID field. Seriously, so cool!!  But for my Macros survey, the button launches the survey but doesn't populate SITEID. 

Not sure if this is helpful, but here's the html:

<a href="arcgis-survey123://?itemID=9804a1b685fa4864a7b84b4d07f4934e&amp;field:SITEID={SITEID}"><img alt="Field Parameters Survey" src="" /></a> </p>
<a href="arcgis-survey123://?itemID=c14ab0a5dbde486591d4c0e85dccb418&amp;field:SITEID={SITEID}"><img alt="Macros Survey" src="" /></a></p>

Any idea what's going on with the Macros survey? 


0 Kudos