Custom Forms in the Story Map Crowdsource Beta

In June we released the Story Map Crowdsource as a new beta template in our platform of apps. As a beta, we know that it is not fully featured but our intention is to give our users something to work with as we better integrate a crowdsource storytelling approach into our existing apps. To this end, we have chosen only to provide a simple form which allows contributors to upload a photo, title, and description centered around a specific topic while we focus on building a full featured app.

With that being said, we have had many users begin to ask for the capability to customize the form in the current version of the beta. For those who are willing to customize the JavaScript, you can do so now. The instructions below will show you how to get started and pointers of where to look in code.

As we begin to integrate this crowdsourcing experience into our other apps, you’ll see more features integrated into the online builders including capabilities to customize the form fields, add new data types, and options to upload additional attachments to each point. At the same time, we are updating the code architecture to load faster, have more modern layouts, and be easier for developers to understand and customize.

NOTE: Any modifications made outside the hosted builder may not be compatible with future versions of the app.

Prerequisites

• Experience with HTML, CSS, and JavaScript (ES6)
• General understanding of React and Redux
• Experience with ArcGIS API for JavaScript and REST
• Have a web server to host your customized app

Instructions

• Download code from: https://github.com/esri/storymap-crowdsource
• Add the additional fields to the feature service definition that the builder creates (Location in code).
• Then in the feature service application configuration, you’ll need to add a new settings object for each field (Location in code). The key must be the field name from the feature service. These settings help determine how the form looks and how it should be displayed.
• Currently, the form understands text, textarea, location, and photo inputs. If you need a different input type (such as a select input), you will need to add additional type checking and code(Location in code). You may also need to create new react components to handle these.
• If you have a special way you need to save data back to the feature service, you can modify the save method (Location in code).
• Finally, customize the template used when displaying a selected point (Location in code).