Experience Builder Tips and Tricks

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.

In Experience Builder, there are two ways to get map layer controls and a legend in your map. The first option is to flip on the Layers Tool in the Map Widget. This will give you an icon on your map that when clicked contains a list of map layers and a legend in a tabbed view. It's super easy, looks ok, and has zero customization options. You can't even decide where to put it. It'll just dance around the map however Experience Builder feels like putting it. The other option is to use the separate Map Layers and Legend Widgets. This takes only slightly more work, but it gives so much more customization controls and looks better. The main problem is that two always open widget take up way more screen real estate than a single icon. Why can't we have the power of the Map Layers/Legend Widgets, but the compactness of the Layers Tool in the Map Widget? Take a look at the title. We are making this happen.

Today's recipe calls for a Widget Controller, a Fixed Panel or Card Widget, a Section Widget, a Map Layers Widget, a Legend Widget and a Views Navigation Widget.

1. Add a Widget Controller to your Experience. This will compact your final product down to a single button.
2. As I am working in ArcGIS Online, I will place a Fixed Panel Widget inside my Widget Controller. Enterprise users will need to wait for 11.3 to do this, but an empty Card Widget will work just as well.
3. Inside my Fixed Panel Widget, I will add a Section Widget leaving some space up top for the Views Navigation Widget. Section Widgets are super useful tools in Experience Builder that allow different stuff to occupy the same space on a page at different times. Think of them as mini-pages within your main page.
4. In the Section Settings Panel, I will add a New View. Then I will rename my first view Map Layers and the second one Legend. Look for the three dot menu on the right to find the rename option.
5. Now, I will add the Map Layers and Legend Widgets into the appropriate views and connect them to my Map Widget.
6. Next, add a View Navigation Widget in that space we left earlier above the Section Widget and connect it to the section. If you would like some more control on the appearance, you could use Button Widgets instead.
7. Finally, you will want to change the icon and title of the Fixed Panel Widget. Instructions on how to do that here. The map layers icon is for some reason not one of the standard icons pre-loaded in the icon chooser, so I would need to find an icon I could download and then upload back into Experience Builder, and this is the step that caused me the most hassle.  First, I tried going to the Calcite icon library, where ESRI keeps all their icons. But the Figma links are broken, so there is currently no way to download an icon. Then I tried some developer tricks, looking through the assets in Developer Edition and using the Dev Tools in the browser to inspect the icon, but these assets are in .svg, a format the icon uploader won't accept. So I turned to Google, specifically Google's Material UI Icon Library, where you will find all of the icons Google has made, free-to-use for any purpose without attribution. This includes the icons in Google Maps and I was able to download their map layer icon in .png.
8. Optionally, bake your computer at 350°F for 15 minutes. (I didn't say it was a good option.)

Here's my final product, a combined Map Layers and Legend Widget that collapses to a single button when not in use.

Edit: Alternatively, you could use a Grid Widget. Placing multiple widgets in the center of a Grid Widget will cause them to automatically stack into tabs. It's easier and faster than the Section Widget method described above and more similar in appearance to the map layer tool built into the map. However, you will get some more optionality with the Section based method.

I've done many tips for the people making stuff in Experience Builder, but what about the people using that stuff. Here's one for you.

A number of widgets in Experience Builder, at least Query, List and Table, have a Show on Map option. 

I've done a query and hit this Show on Map button and my map is covered in a yellow indicating I should drink more water. This highlighting should probably be automatic when I run the query, but isn't.

I've finished with the stuff I need to do with this query and I want to move on to the next one, so I hit the Clear Results trashcan in the Query Widget, but the highlights are still there. I go to the bottom of the Query Widget and hit the Reset Button. That clears my search radius graphic, but the highlights are still there.

How do I get rid of this dehydration yellow? Look carefully at your map. Do you see something that wasn't there before? Keep looking... It's there. Down in the lower-right of your map... Where did that trashcan come from?

This is the button to clear the map highlights. No, it won't delete anything. It just makes the yellow go away.

Is any of this good design? Nope. Sorry ESRI, I can't defend every choice you've made and you've made a bunch of bad choices with this one. Here are some suggestions:

• Query results should automatically highlight when run.
• Designers should have an option for what highlighting color to use.*
• Clearing the results or hitting the Reset button on the Query Widget should also clear any highlighting or Drawn Graphics from the Query Widget.
• The Clear Highlighting button should be located within the widget that creates the highlights.
• The Clear Highlighting button should not be a trashcan or, even better, there should be icon options.

I'm sure there are Ideas for each of these suggestions already (I know I've posted one that covers two of them before.), so I'm not going to post this on the Ideas Board again. I know there are ESRI people reading this, so please make these changes, your application will be better for it.

Reminder: suggestions for product improvements, go on the Ideas Board, not here. Finding this button is a common user problem and there is just no way to talk about without it turning into an Idea post. Sorry for breaking my own rules.

*Edit: I owe Experience Builder a bit of an apology for this one. This option to change the highlight color does exist, at least in the most recent versions. In the Settings Panel Action Tab, go the Data Action Tab then expand the Show On Map option. Now select Use Custom Symbols and click the type of feature you would like to change.

Since I just had to track down one of my old answers to make sure I'm doing it right, I'm throwing a link to it here.

Upgrading to a new version of Experience Builder Developer Edition.

Developer 1.14, here I come.

Once upon a time, this blog had a YouTube video by @MichaelGaigg describing how to hack a Sidebar Widget into a dropdown menu. Sadly, that video has been lost to the sands of time. Here is my attempt to recreate the method (and create a new variant) having seen the video once about six months ago.

1. Add a Sidebar Widget. In the Style Tab, switch to px and set the width and height, as you'll get better results if the Sidebar stays a consistent size. You'll want the width to be about equal to the length of text. You want to set the height as low as you can. (This is a design decision. Do you need to display all your options at once or not? How much interactive space can you give up to this menu?) Then add about 20px to your number.
2. In the Content Tab, set the Dock Side to open down (third choice from left), Size to the number you picked above, Overlay and Resizable to off, and Default State to Collapsed.

    

3. In the collapsible side of the Sidebar (should be labeled First, if you have set the Dock Position as shown above), add a List Widget and connect it to the data you want in your menu. (Depending on what you are doing, you might also use a Text Widget containing a set of links or a set of Button Widgets*. You may also need to use a Column Widget to help with the styling.) If you are using a List widget, you will want to go to the Action Tab > Data Action and disable data actions.
4. Go back to the Sidebar Settings Panel under the Content Tab and style the collapse button. This part is pretty subjective, so play around with the options till it looks right. I think setting the Style to the more rectangular option looks better for this application. I set the Width to the entire width of my Sidebar and the Position to Center. Using a Width about 1/5th the width of the Sidebar and Position Right is also a good choice. 
5. Finally, add a Text Widget to the always open side of the Sidebar with some text to describe why the user should press that arrow. Here's my result.

Closed     Open

Note: I've given my Text Widget a blue background, not because I think it looks good but as a reminder that you should be aware of The Sidebar Problem. All that area is not interactive.

Alternate Method

Here is another way to do this that is slightly easier to pull off. Currently, it is not possible to do in any version of ArcGIS Enterprise, but it is coming soon in Enterprise 11.3.

1. Follow steps 1-3 as above.
2. In the Sidebar Settings Panel under the Content Tab, turn the Collapse Button off.
3. In the always open side of the Sidebar, drop in a Button Widget and give it some explanation text. Also give it an arrow icon with Position Right.
4. In the Action Tab, select Add A Trigger > Button Click > Your Sidebar > Toggle Sidebar.

Here's how this looks.  

Closed    Open

If you wanted to get real fancy with it. Maybe you could put your button in a Section Widget and have your button change itself to a different button with different text and an up arrow.

*Oh and if you are going to make a set of Buttons inside your dropdown menu, maybe make them also close the Sidebar.

Confused about how to use the ArcGIS Experience Builder "builder"?  In this blog, we'll examine the builder user interface to guide you in how best to create and navigate your first experience!

This article will walk you through creating a widget in Experience Builder describing the different map tools, similar to what you could create using the About widget in WAB.

As I'm sure readers of this article are already aware, WebAppBuilder is on the way out and many of you are currently working on re-building your old applications in Experience Builder. One very useful bit of documentation, for those of you making the transition, is the WebAppBuilder to Experience Builder Functionality Matrix. On this page, you can see what widget in Experience Builder is equivalent to a WebAppBuilder widget and what version you need to get it. 

The Public Notification Widget from WebAppBuilder is a very popular tool for finding residents in an area that might be impacted by some sort of event or regulatory change. Let's look it up in the table and see what we should use in Experience Builder...

Oh, no. Some of the widgets in WebAppBuilder aren't making the transition and Public Notification is one of them. But don't give up, unless you are on a truly ancient version of Enterprise, everyone with Experience Builder has a way to build a Public Notification tool in Experience Builder, right now. There are three potential methods...

Use the Public Notification Instant App

If you look at the Migration Path for Unplanned Widgets link in the functionality matrix, the official ESRI recommendation is to use the Public Notification Instant App, so let's do that.

1. Configure a Public Notification Instant App.
2. In Experience Builder, use an Embed Widget to drop in the application.
3. Ask your boss for a raise because you just put a robust public notification tool in Experience Builder in like 20 minutes.

Ok, it's a bit silly to make an Experience Builder project that just embeds another application and the embedded application won't really be able to interact with the rest of the project, but as part of a multi-page project, this could be an excellent option. But, this instant app is only currently available in ArcGIS Online and Enterprise 11.2 and is there a native Experience Builder method?

Use The Near Me Widget

The Near Me Widget is the best choice for a native Experience Builder Public Notification Widget. Here's how to set it up.

1. Add a Near Me Widget to your Experience and connect it to your Map Widget.
2. In the Analysis settings, you will want to choose Specify A Location and under Inputs you probably want to turn on Distance Settings and the Sketch Tools.
3. Now click Add Analysis to open the Edit Analysis menu. Use Select Layer to select your parcel layer and set the Analysis Type to Proximity.
4. In the Action Tab, go to the Data Action Tab and Enable Data Action, so that we can export our results.
5. In the Data Panel on the left side of the screen, find your parcel layer and make sure Allow Export is turned on.

    

6. Add a Search Widget and set your search source to be your parcel layer. You could also use a locator source, but be aware that if you do, your search radius will be based on a single point and not the geometry of the parcel.
7. In the Action Tab, hit Add A Trigger and select Record Selection Changes > Near Me > Set Location. If you don't want to use a Search Widget, you can alternatively set this action in the Map Widget to trigger Near Me from a mouse click. Or do both, you could do both.

Following these instructions, your end-user should be able to either search for a parcel with the search bar or clicking or drawing on the map and find the parcels within a given area then export the results to a csv.

Sometimes I forget how new Near Me is, this widget will make its first appearance in Enterprise 11.3, so for right now you will need ArcGIS Online or Developer Edition to do this method. Can we do Public Notification in Enterprise?

Use The Query Widget

There is one last method that will cover us all the way back to Enterprise 10.9.1. Honestly, I don't fully understand why Near Me was created as a separate independent widget when its functionality is almost all reproducible in the Query Widget. I suspect the product team made some choice early on that made it difficult to use the Query Widget as an output data source, thus necessitating the development of the Near Me Widget. (But that's just a theory, a he's retired now, we can retire the meme theory.)  

1. Add a Query Widget and select your parcels as the Data source.
2. Turn off the Attribute Filters.
3. Click Selected Features From Data Source and choose your parcel layer again as the Data source. (If you are on anything but Enterprise 10.9.1, you can also use the output from the Search Widget as above.)
4. Select which Spatial Relationship Rules you want for your end-user. You'll almost certainly want Intersect, all the rest are up to you.
5. Then turn on Enable buffer and set a default distance and unit.
6. Follow steps 4 and 5 from the Near Me method above to make sure your results are downloadable.

To see these steps in action and a few other refinements to this method, watch this video.

Ok, but what if you are on Enterprise 10.8.1, the very first version of Enterprise with Experience Builder, what can you do? Upgrade, it's really time to upgrade.

Here are some helpful resources that will help you create interactive and immersive web apps using ArcGIS Experience Builder.

The February 2024 ArcGIS Online update just dropped and I'm excited. It's got some big changes to Experience Builder. Select Widget! URL Parameters! Big improvements to Map Layers and Near Me! And perhaps most exciting of all, Group Filters! (And if you are on a 10.X version of Enterprise with SSO authentication, you will actually be able to use Developer Edition 1.14, unlike the cursed version 1.13.)

Let's go through the steps to make a Group Filter. During my testing, I discovered a neat (new?) option that also filters the filters, but there was a trick to setting it up, so we will go over that, too.

For this demonstration, I will be using a map with two copies of the same data, a polygon layer of the parks of Arlington, TX. We will make filters for Zip Codes and Golf Courses. Four of these parks are golf courses and the city of Arlington has 12 zip codes, so not every zip code has a golf course.

First, we'll do zip codes. I will start by dragging a Filter Widget into my project. And hit this carot to make a Group Filter.

Press the Select Data button, then highlight all the data sources you want to filter, Orange Stripe and Blue Stripe for me. You'll need to press the X up top when you're done.

Now click the Group SQL Expression Button and select Zip Code in the Main field. Next, I will need to select Zip Code in my other layer.

Under Operator & Values, I will use the Select Source Type Button to switch to Unique values. And hit the Ask for Values option.

This Choose Input Style Button lets you choose between a dropdown menu or a set of buttons. I generally favor buttons as they are better for user experience and accessibility.

I'll set the label to Zip Code to clarify to the user what these buttons are. Then, I'll go to the List Values Based On dropdown. This is how I'll filter my filter.

There are three options here All Unique Values of this Field will always show all of the zip codes in the layer. I have not found a functional difference between the other two options, but they will reduce the number of possible zip codes when other filters are used.

Here is the trick to making the filtered filters work: the other filters must be on a seperate Filter Widget.

So I drag in a new Filter Widget and set it up to filter Golf Courses.

As my application opens, I see 87 parks in two data layers and twelve zip codes.

I turn on my golf filter and both data layers filter down to four parks and my zip code filters also reduce to the four zip codes with golf courses.

Annoyingly, 12 zip codes, 4 golf courses and 2 data layers are all the right number of syllables to fit into the Twelve Days of Christmas, so now that's stuck in my head and in yours now, too.