Has ArcGIS Online Caught Up To Developer Edition? Recreating A Custom Widget Heavy Application Without Custom Widgets
My first real, released to the world Experience Builder project was called Park Finder. It was designed for the citizens of Arlington to go in click some filters and find out what parks meet their criteria. Let me give you a quick tour and explain a little about how I made it.
In the lower right of the map, is a custom widget for switching between two basemaps made by importing the Basemap Toggle Widget from the Javascript API. At the time I was working on this project, the Experience Builder Basemap Gallery Widget did not exist and the Basemap Tool had too many choices. Plus, there is a simple elegance to how the Basemap Toggle works. Could I have used multiple maps within my Map Widget to achieve the same effect? Yeah, I guess so, but it was easier to just make my own Widget than to configure multiple maps and all the Actions to make it all work. All in all, I'd rate this custom widget as technically reproducible in Online, but it would be nice if it was a standard widget.
Now, let's look at the right side of the screen. Up at the top, there's a search bar, but it's not actually a Search Widget. It's a List Widget, but I've used CSS to hide everything but the search bar. I don't entirely remember why I did it this way, but I think it was mostly about that annoying Results Panel that wouldn't go away after a search. As of a few days ago, that Results Panel is now optional. So, I'll mark that design as functionally replicated in ArcGIS Online.
Moving down the right-hand column, we get to the filters. The first set of filters are tied together with an OR statement and are using geographic labels in the data to filter by area. Down below, we have filters tied together with an AND statement that allow the users to filter by the amenities the parks have. So of course, I needed to use a custom widget to make such complicated filters, right? No, those are just OOTB Filter Widgets. Ok, not quite. I did use some CSS to make the buttons closer together and change the highlighting color when they are selected. But, functionally they are just two Filter Widgets.
Shortly before we went live with this application, someone in the Parks Department asked if the filters could filter themselves as the user made their choices. At the time, the answer was no. And it was deemed too much work for me to make my own filter widget and re-build the entire application around it, so that idea didn't happen. But now, yes, filters can filter themselves. So all-in-all, I wish the Filter Widget had some more design options, but it's at least advanced functionally.
Now, let's look over at the left side of the screen. That List Widget is not a List Widget. It is a built from scratch custom job. Mostly so I could make those little icons that show what amenities each park has. Until we get an option to put a List Widget inside another List Widget, an idea that is never going to happen because it would be an absolute nightmare to code with a billion possible unintended consequences, that isn't going to be possible in ArcGIS Online.
Across the top of the custom list are a set of buttons that sort the list in several different ways. And finally, after all that introduction, we are finally getting to what this post is really about. While I was working on this application, the first version of Near Me was released. The release of this application was actually delayed so I could incorporate Near Me into the design. And then, I didn't. It just didn't work in this design. Instead, I built my own geographic sort, an incredibly complicated process that I never fully got all the bugs out of.
I've written about what I really wanted out of Near Me before and how with later updates, it became possible. If you haven't read that post before, I'm going to need you to do it now. The rest of this post is going to start where that one left off and won't make much since without that context. Go on...I'll be here when you get back.
Ok, you're back. So at the end, I said:
The big downside is that I can't find a way to make my List Widget a list of all parks in absence of a Near Me search.
Well, there is sort of a way around that now. We can put our Near Me Output List into a Sidebar and have it open when the Search Widget is used. The Sidebar would physically cover a second List Widget that contains all the parks. This second List Widget would have been the one displayed when the app opens. The net effect is that the app appears to have one List that handles both all parks and nearby parks. Hey, why did I use the past conditional grammatical tense back there? Did it not work? No, it works. It's a viable build, but it's not exactly the one I stuck with. See after making the one List over the other, I couldn't stop there. I had to test out the filtering filters which exposed a flaw in that design. If the user changes the filters after Near Me does its thing, it won't trigger Near Me again and the List will not match the filtering criteria. So in my final proof-of-concept application, I made it so my Near Me Output List covered the Filter Widgets instead and I have an always displayed "All Parks" (But Not Really All Parks Because Its Affected By Filters) List Widget and a "Closest Parks" List Widget that only shows up when Near Me is triggered. So if you want that single List feel, it will be similar to, but not exactly what I'm about to describe building. And now, after all that secondary introduction, we can get to what you really want, the how to part...
I've already put my Output List into a Sidebar. We'll call this the Output Sidebar. I've also previously wired up a Near Me Widget in an unopenable Sidebar (We'll call this the Near Me Sidebar.) and set it up so Near Me is triggered by the Search Widget.
We'll start making our changes in the Search Widget. In the Action Tab, I have added a Open Sidebar Action to my existing Record Selection Changes Action to open the Output Sidebar. I also deleted the Zoom To Action I previously configured. Apparently, in the last update, a default zoom action was added to Near Me. Having a zoom action on the Search Widget and Near Me was causing a nauseating bouncing effect as the Search Widget first zoomed in then Near Me zoomed back out a bit. In the Content Panel, I scrolled down and opened up the Search Result options to use the new option to turn off the Result Panel. I will be putting the Search Widget under the Output Sidebar later and turning off the Result Panel prevents a visual glitch where the Result Panel clips through the Sidebar.
In the Map Widget, I went to the Style Tab and added 400px spacing from the left and right side of the screen. My map is now centered with space on each side for more stuff. Into the empty area on the right, I dragged a Column Widget. I used the Full Height option and manually set the Width to 400px and gave it a Background color to match my Theme. Then, I hit the Snap To Right button. Next, I used the Duplicate button to copy my Column and used Snap To Left on the new Column. In the right Column, I added a Text Widget to make a heading and a new List Widget to display a list of all the parks.
In the left Column, I assemble a delicious parfait with Text Widgets to make headings, my previously configured Search Widget and two Filter Widgets.
I set up some filters using our filtering filters trick. And at this point, I must ask you not to judge my "final" application too harshly. This is a proof-of-concept, not a real application. There are design choices I would not make in a real application. I haven't even looked at anything but the Desktop view. And most glaringly, my data isn't really configured to take advantage of the filtering filters properly.
Almost done, I promise. Go to the Output Sidebar and set the Size to 400px, Overlay on, Resizable off, Default State Collapsed and Collapse Button off. I also gave the Left Panel a Fill color to match our Theme. This prevents the Output Sidebar from being see-through and showing the filters below. With these options set, there will be no way for the user to interact with the filters while looking at the Output List, preventing the inaccurate data issue discussed above.
Ok, so the user has set their filters and typed their address in the search bar. The nearby parks have been found by Near Me and sent to the Output Sidebar that is no preventing them from changing any more filters and now what? They're stuck. There's nothing more they can do with this application. So, let's give them a Button to close the Output Sidebar and get back to the controls.
Temporarily drag the Output List out of the Left Panel of the Sidebar Widget and drop a Column Widget in its place. Make the Column Widget Full Size. Add a Button Widget and another Text Widget for a heading into the new empty Column and drag the List Widget back inside. In the Button Widget, go to the Action Tab and Add A Trigger > Button Click > Output Sidebar > Toggle Sidebar. You'll also want to give your Button a meaningful Text value.
All this is to say, Experience Builder has come a long way in the last 18 months. Maybe it's not easy or intuitive, but there is a viable no-code path to re-creating an application that took some serious coding not that long ago. So, has ArcGIS Online caught up to Developer Edition? No, not really and it never really will, but the fact that it's a question is seriously impressive.
