Why and How I Use Experience Builder

4 weeks ago
MVP Regular Contributor
0 0 397

Today, I would like to walk you through three things I built in Experience Builder, why I chose to use Experience Builder and (on a philosophical level) how they were made.

Telecom Editor


Why: To Make A Focused Application

We have a group of people in the city who are tasked with building out the telecom infrastructure used in city operations. They also must track the telecom infrastructure built by private companies within the city. These people are not GIS people. They don't need access to all the data in the city. They need access to telecom data and they need to be able to edit it. That's it. Anything more than that would be more confusing than helpful. Could they use the Webmap Viewer? Sure, but it just wouldn't be as dedicated to doing one thing. ArcGIS Pro? Way more confusing.

How: ESRI Widgets

This application is pretty basic. Fundamentally, it is just a Map Widget, an Edit Widget and an edit enabled Table Widget. It does have a few custom widgets, but none of them are essential to the application.

At this point, I would like to explain that my job is specifically to build stuff that is more complicated than can be done with OOTB tools. The next two projects are significantly more complex. The best way to keep a project within the OOTB capabilities of Experience Builder is to keep it focused on a small number of closely related tasks. Trying to build an everything app in Experience Builder is a really bad idea...

Virtual Map


Why: It's An Everything App

We want every city employee to have access to all the city's authoritative data. People in different departments need access to different things and to do different things, but sometimes they also need access to other sources of data. In many ways, this is a simplified version of ArcGIS Pro dedicated explicitly to city data. As above, most of the users are not GIS people, many of them are not even computer people, so the Webmap Viewer and ArcGIS Pro are not realistic options. With the retirement of WebAppBuilder, the only viable options for building such an application is Experience Builder or the JavaScript API. And as I see it, Experience Builder is the JavaScript API with some helpful UI components built-in. In retrospect, a series of department focused applications may have been faster, easier and better, but an all-in-one application is still possible.

Why: It Saves Us Money

Shhhhhhh! Let's keep this one quiet. Don't put this anywhere ESRI can hear about it.

An ArcGIS Enterprise subscription comes with unlimited Viewer licenses which is all that is necessary for our users to log into Virtual Map. At standard list prices, an ArcGIS Pro subscription for all of our Virtual Map users would cost the city approximately two million dollars a year. And that's not counting training or hiring additional tech support personnel.

For all the GIS Administrators and Managers out there, how many people in your organization really need a Pro license? How many of them could instead be using the Webmap Viewer or one of the various web apps to do their jobs? It might be more than you think. 

How: Time and Communication

Virtual Map was in development for over a year before it was officially released and it's still not entirely finished. It may never be truly finished. Why did it take so long? There were some external delays and I was also working on other projects, so several months of unproductive time were being counted in there. But one of the biggest reasons it took so long is we were trying to get it right. Throughout the entire process, we were communicating with the users to try and make what they needed. Versions of the application were available for testing six months before the official launch. You'll see the other big reason it took so long a little later.

Pet Finder


This application needs a little explanation. You're an animal control officer and you just caught a dog. How can you figure out who owns it? Luckly, our city has records of many of the dogs in the city. Too many records. Tens of thousands of records without pictures. Then, there is the problem of identifying breeds and colors and if the person who made the record agrees with your identification. How can you narrow down this list of thousands to a few prime candidates so you can actually call some people and ask if they are missing a dog? Pet Finder was built to help.

How: Cheating

Developer Edition is cheating. I have previously pointed out using Developer Edition is a pretty sweet trick even if you can't code. As much as Experience Builder is sold as a no-code environment, it is so much more useful and powerful as a developer's framework. This application is built around two custom widgets, one that takes user input, finds what animals meet the search criteria, filters through the possibilities and controls the map display and the other displays the candidate animals in a list. Other than connecting me to the webmap, Experience Builder is not doing much functionally in this application.

Virtual Map contains 19 functional widgets. Eight were developed by ESRI and another was made by ESRI and modified by me. Another widget was made by a third-party and three more are my modifications of a third-party widget. And the last six are entirely my creations for a final score of 8 OOTB widgets to 11 custom ones. Learning to code is probably the greatest Experience Builder trick of them all.

Why: Experience Builder As A Framework

I knew before I started that what Pet Finder had to do was too complex for the OOTB widgets, so Experience Builder was useless on this project? No, it was vital. Before I started, I thought about the ingredients I would need to make this work. I was working with a map and feature layers, so obviously I would need the ArcGIS JavaScript API. I had a good idea for a slick user interface that would respond quickly and update itself based on user inputs. You know something that would react. React! React was literally built for this! Ok, so I want to use React, but I don't want to be limited to strict one-directional data flow, so I'll need a state manager like Redux. And I don't want to spend too much time messing around with the user interface, so having a UI component library and a CSS library like Bootstrap would be very nice. A drag and drop builder would be even nicer. Ok, let's add this all up.

ArcGIS JavaScript API + React + Redux + UI Component Library + Bootstrap + Drag and Drop Builder = Experience Builder

By the time I was through with Pet Finder, I had used every single piece of that formula and I got it all set up for me by just clicking a single button. Experience Builder was still very helpful even though it was useless.

About the Author
A frequently confused rock-hound that writes ugly, but usually functional code.