ArcGIS Experience Builder – First Impressions Case Study

What is ArcGIS Experience Builder?

The Experience Builder application aims to be a “no-code” map application creator for the web. It efficiently generates responsive applications for the web, with or without a supporting map(s).

Because Experience Builder is built on top of React and TypeScript and supports only the latest version of ArcGIS API for JavaScript (v4.x), it refines its predecessor, ArcGIS Web AppBuilder, which is built on version 3.x. It is available in two configurations:

• Standard Edition comes completely out-of-the-box and accessible from a web URL (https://experience.arcgis.com/)
• Developer Edition runs locally on Node.js and allows for widget and theme customization

Key differences from ArcGIS Web AppBuilder

ArcGIS Experience Builder improves upon Web AppBuilder with some key differences. It supports single-page, multi-page, and long-scrolling page layouts, eliminating the requirement for a map on each page. This change allows a designer to tell a full, clear story – with or without maps. When a map is used, either 2D or 3D mapping is support. It provides a mobile-first design that can adapt to any screen size. It also provides the ability to communicate between widgets with “action triggers,” which are a type of event listener. This feature allows multiple widgets to work together and react to one another.

ArcGIS Experience Builder includes some new widgets, such as the built-in Survey123 widget. However, is currently lacking many of the expected out-of-the-box widgets. Presently, it offers only 18 basic widgets, compared to Web AppBuilder’s  70+. Esri states in their FAQs that the Experience Builder app is planned to reach most of the functional parity of Web AppBuilder through incremental release. This level of “no-code” support drastically reduces the range of functionality without custom development.

Creating Custom Widgets

For this case study I worked primarily in the Developer Edition and focused on creating a custom widget with the ability to control time-enabled data. The use case was to show the migration pattern of the Prothonotary Warbler on its year-long trek.

My First Widget

(You can grab the source code from GitHub here)

Getting the Developer Edition up and running was very straightforward. I simply downloaded the source code, installed all dependencies, and ran locally through Microsoft’s Visual Studio Code.

Once running, I created a new web app using the default “launchpad” theme. Next, I added the migratory bird data for the Prothonotary Warbler to ArcGIS Enterprise (Portal). Using Esri Experience Builder sample code, I set up a connection to a web map through the setting.tsx file. From there it was just a matter of:

1. Connecting my custom widget—a time slider–to the web map
2. Consuming the migratory bird data from the Portal Rest service endpoint
3. Initializing the time slider widget
4. Connecting the time slider widget to the migratory bird data layer
5. Rendering the time slider widget for user interaction

The result is a web app with a map and a time slider that can be played or dragged to show the migration patterns of the Prothonotary Warbler.

Esri Experience Builder Time Series Screen Capture

My Second Widget

(You can grab the source code from GitHub here)

Referring to the available documentation, I used four (4) sample widgets to create a custom time slider widget. The functionality was not particularly different from the first widget; the difference included the addition of the speed control, enhanced styling, month picker, and depiction of data via a histogram chart.

By playing the data, I learned that the Prothonotary Warbler migrates from South America to the U.S. and back in one year. I can interact with the widget by:

• Altering the speed time series widget to control the speed of the data being rendered in the map
• Clicking and dragging the start and end times to view larger amounts of data at once in the map
• Using the month picker to jump to a specific timeframe of the data

The map activity and histogram stay in-sync with the data to show the Prothonotary Warbler’s movement. The darker the hexagon, the more movement in the area.

Lessons Learned

• To develop custom widgets, you must run “npm install” and “npm start” on both the server AND client folders. Full installation instructions can be found here.
• When creating a custom data store, add only one (1) instance at a time to an application. Unique naming is required to access your data store. Without unique naming, the data store will not return the correct data model.
• State management was difficult to implement. I had to use a mixture of documentation, sample widgets, and trial and error to be successful.
• Presently, there is minimal documentation, and the sample widgets are overly simplistic. I expect this to change as the product ages and Esri expands the capabilities of Experience Builder.
• Including third-party libraries is challenging. I was unable to include a React version of the chart.js library and, instead, had to add the jQuery version. Chart animations had to be limited to keep React from constantly re-rendering the chart from scratch.

Final Thoughts

The flexibility of ArcGIS Experience Builder supports increased application use-cases. By eliminating the map requirement and allowing for page variation, Experience Builder can be configured to support a range of needs. Using the JavaScript React framework, Esri is clearly attempting to modernize their programming standards. Limitations include insufficient documentation and few out-of-the-box widgets. These limitations, however, will almost certainly improve with future releases.

ArcGIS Experience Builder has great potential. Time will tell how successful the product can ultimately be as Esri expands on the initial release. It seems clear that with a few more out-of-the-box widgets Experience Builder could become a very valuable solution for many projects.