Experience Builder Tips and Tricks

Before we get into the meat of today's post, let's clarify some terms. Both Experience Builder and the Maps SDK for JavaScript (or JavaScript API, if like me, you refuse to accept the name change) have things called Widgets. In both platforms, Widgets are blocks of reusable code designed to do some task that can be easily called in to an application by Builders. We will be discussing both types of Widgets today, so to make things a bit clearer Widgets in Experience Builder will be referred to as ExB Widgets and Widgets in the JavaScript API will be called JS Widgets.

In my opinion, one of the greatest selling points of Experience Builder Developer Edition is that anything in the JavaScript API, including JS Widgets, are readily available. So by firing up Experience Builder, I instantly get access to all the code that the Experience Builder team has made for me and, with a little more effort, all the code the JavaScript API team made for me. If, for example, I was disappointed that Experience Builder does not have a simple, cleanly designed, user-friendly way to switch between exactly two basemaps, I could create a Custom ExB Widget and call in the JS Widget that does the job. Calling in JS Widgets from ExB Widgets is a common programming pattern. In fact, if you look into the code, many of the OOTB ExB Widgets are little more than loaders of JS Widgets. It sure would be a problem for people making Custom ExB Widgets, if JS Widgets went away...

Hey, did you click that last link? Did you see that red rectangle?

It's deprecated. Every JS Widget is either already deprecated or is about to be. Starting next year, JS Widgets are going to start being Thanos snapped out of existence.

Way back in the second most popular post on this Blog, my React primer, I noted that Experience Builder 1.13 would include Components, a new part of the JavaScript API better designed for working with frameworks like React that use a Virtual DOM, and that you should probably prefer to use Components over JS Widgets. Have I done that? Nope. And now it is official, Components are coming to kill JS Widgets. Better learn how to use Components. Hey, that's what this post is about. Are we finally getting to the point?

And now that I've wasted enough words that this post becomes legally copyrightable, like an online recipe, let's build a Basemap Toggle ExB Widget using a JavaScript API Component. I will start with some boilerplate code in widget.tsx:

import { React } from 'jimu-core'
import { MapViewManager, JimuMapView, JimuMapViewComponent } from 'jimu-arcgis'
import { Loading } from 'jimu-ui'
import reactiveUtils from 'esri/core/reactiveUtils'

const { useEffect, useState } = React

const Widget = (props) => {
	const viewManager = MapViewManager.getInstance()
	const mapView = viewManager.getJimuMapViewById(viewManager.getAllJimuMapViewIds()[0])
	const [jimuMapView, setJimuMapView] = useState<JimuMapView>(mapView)
	const [mapReady, setMapReady] = useState(false)

	useEffect(() => {
		if (jimuMapView) {
			reactiveUtils.whenOnce(() => jimuMapView.view.ready)
				.then(() => {
					setMapReady(true)
				}
			)
		}
	}, [jimuMapView])

	const activeViewChangeHandler = (jmv: JimuMapView) => {
		if (jmv) {
			setJimuMapView(jmv)
		}
	}	

	return (
		<div className='jimu-widget' >
			{
				props.useMapWidgetIds &&
				props.useMapWidgetIds.length === 1 && (
					<JimuMapViewComponent
						useMapWidgetId={props.useMapWidgetIds?.[0]}
						onActiveViewChange={activeViewChangeHandler}
					/>
				)
			}

			{mapReady ? 'map ready' : <Loading />}
		</div>
	)
}

export default Widget

 On it's own, this code doesn't really do anything. The net effect is to wait for JimuMapView to load, then save it to a variable and display the 'map ready' text. Let's breakdown exactly how we accomplish nothing with this code.

On the first render, the mapView is captured by the viewManager and stored into state as jimuMapView. It's actually a null value at this point. mapReady is given a default value of false. Somewhere about this point, the map starts to load, triggering the onActiveViewChange property of the JimuMapViewComponent.

One thing that frequently confuses developers is that the onActiveViewChange property only fires when the entire mapView object changes. As in, the Map Widget contains two maps and the user switches between them. For an example of someone not quite getting this concept, you can look at the official using map components example, which requires having two maps in the Map Widget and the end-user to swap between them before the Legend and Map Layers will actually load.

The onActiveViewChange property calls the activeViewChangeHandler function that sets jimuMapView to the actual mapView object and triggers render number two. Because jimuMapView has changed from null to a truthy object, the useEffect function fires on the second render. useEffect and the activeViewChangeHandler functions also started on the first render but their if clauses prevented them from doing anything. At this point, jimuMapView is truthy, but it is a very complex object and may not actually be fully loaded, so reactiveUtils is called to wait a little bit for the map to actually be ready. And when jimuMapView says it's really, actually ready this time, the mapReady value is set to true, triggering render number three.

Theoretically, the ExB Widget has been showing a loading graphic through the first two renders, but they have actually happened faster than Loading can load and now that mapReady is true the ExB Widget should be showing text saying 'map ready'. And that was a Shakespearian amount of ado about nothing. Isn't React fun? Now that we've got the code to load the map without crashing, we can start adding the functional bits.

In the import statements, I'll add this:

import { ArcgisBasemapToggle } from '@arcgis/map-components-react'
import Basemap from 'esri/Basemap'

I change the ternary in the return statement to this:

{mapReady ? <ArcgisBasemapToggle id='basemapToggle' /> : <Loading />}

And add this block between the activeViewChangeHandler and the return:

const toggle = document.getElementById('basemapToggle')
if (toggle) {
	toggle.componentOnReady().then(() => {
		toggle.referenceElement = jimuMapView
		toggle.nextBasemap = new Basemap({
			portalItem: {
				id: 'id'
			},
            thumbnailUrl: 'url'
		})
	})
}	

Assuming I have entered the correct values for id and thumbnailUrl, this Widget should now be fully functional. Let's talk about what this code does.

The code asks the browser to find the Basemap Toggle Component by the id we gave it. On the first two renders, the browser won't be able to find it because it doesn't exist yet. On render three, it will exist, toggle will become truthy and we will enter the if statement. If you console log toggle, you will find it is a DOM node, but it can also be treated as a JavaScript Object, functionally the same as a JS Widget. I don't really understand what quantum mechanics trickery is going on here, but it does work and you will see many examples like this if you look at the Components documentation. We will choose to believe that the cat is alive and collapse the waveform with toggle as a JavaScript Object.

TypeScript will claim everything inside this if statement is impossible. TypeScript is often right about things, but not today. You can just ignore TypeScript if you don't like what it says, if the Widget doesn't crash, then you were probably doing something legal after all. The first thing TypeScript doesn't believe in is the componentOnReady() method. This method is on every Component and it tells the code to wait for the Component to fully load before proceeding with the rest of the function. By my count, this is the fourth time we have asked the browser to slow down and wait in the past 100 micro-seconds, making it only slightly more patient than my four-year-old.

Now inside the then() statement, toggle is ready to receive further instruction. We will set the referenceElement property to jimuMapView. This tells the toggle what map to toggle. The nextBasemap property is the basemap it should toggle to. The toggle also has an activeBasemap property, but we don't need to worry about setting that, toggle will pull it from jimuMapView automatically. For ease creating a Settings Panel, I am making my nextBasemap from a Portal Item. In testing, I found that the thumbnail image will not load until the toggle is clicked, unless a thumbnailUrl is specifically added, so I'm doing that as well.

If I was making this Widget as a one-off, I could stop here, but I want to make this re-usable, so we'll build a Settings Panel next. Here is some boilerplate for setting.tsx:

import { React } from 'jimu-core'
import { AllWidgetSettingProps } from 'jimu-for-builder'
import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components'

const Setting = (props: AllWidgetSettingProps<any>) => {

    const onMapWidgetSelected = (useMapWidgetIds: string[]) => {
        props.onSettingChange({
            id: props.id,
            useMapWidgetIds: useMapWidgetIds
        })
    }

    return (
        <div className="widget-setting">
            <MapWidgetSelector
                useMapWidgetIds={props.useMapWidgetIds}
                onSelect={onMapWidgetSelected}
            />
            <p>This widget id: {props.widgetId}</p>
        </div>
    )
}

export default Setting

Not much to say about this code, it just lets Builders tell this Widget what Map Widget it should work with. I also like to show props.widgetId in the Settings Panel of all my Widgets. I don't have any specific need for it in this Widget, but it's useful information that ESRI doesn't want you to have. I have been known to temporarily add one of my Widgets to a project, just so I can figure out the id of an ESRI Widget, usually a Sidebar.

Now the functional bits, in the imports:

import { TextInput, Label, TextArea } from 'jimu-ui'

Between onMapWidgetSelected and return:

const handleBasemapId = (e) => {
    props.onSettingChange({
        id: props.id,
        config: props.config.set('basemapId', e.target.value)
    })
}

const handleThumbnailUrl = (e) => {
    props.onSettingChange({
         id: props.id,
         config: props.config.set('thumbnailUrl', e.target.value)
    })
}

In the return statement:

<Label
    className='w-100'
>
    Portal Item Id Of Other Basemap:
    <TextArea
        defaultValue={props.config.basemapId}
        onChange={(e) => handleBasemapId(e)}
    />
</Label>
<Label
    className='w-100'
>
    Thumbnail Url Of Other Basemap:
    <TextInput
        defaultValue={props.config.thumbnailUrl}
        onChange={(e) => handleThumbnailUrl(e)}
    />
</Label>

I also need to change config.json to this:

{
  "basemapId": "",
  "thumbnailUrl":  ""
}

 I also need to go back to widget.tsx and change that if statement we looked at earlier to this:

if (toggle) {
	toggle.componentOnReady().then(() => {
		toggle.referenceElement = jimuMapView
		if (props.config.basemapId) {
			toggle.nextBasemap = new Basemap({
				portalItem: {
					id: props.config.basemapId
				}
			})
			if (props.config.thumbnailUrl) {
			        toggle.nextBasemap.thumbnailUrl = props.config.thumbnailUrl
		        }
		}
	})
}

The settings.tsx allows Builders to enter an id and thumbnailUrl for the basemap they want to add. With onSettingsChange() being a built-in method for turning typing in the Settings Panel into data stored in the config.json in the server files. The changes in widget.tsx are designed to grab the stored values from the config.json file and use them in the Widget and the if statements are designed to prevent the Widget from crashing when/if the data is missing.

That pretty much does it. We built an ExB Widget using Components instead of JS Widgets, but since you all waited patiently through my story, how about a treat? Here's a Basemap Toggle Widget that probably won't crash next year.

Hello everyone,

This post will follow on from the previous one I wrote. (https://community.esri.com/t5/experience-builder-tips-and-tricks/how-to-easily-connect-your-data-and...)

The aim is to be able to filter a first data source (transactions, for example) so that, thanks to a common identifier present in each of the tables, the other data sources (properties, offers, assignments) present in other widgets (Map, List, Table, Graph) are updated. All this without having to duplicate columns in each table concerned or select items on a map to bypass the system.

Last time, I mentioned the difficulty that ArcGIS Experience Builder had in offering dynamic rendering between several widgets with different data sources.
Indeed, if I want to filter my data according to criteria linked to transactions, and have a map rendering that shows me the buildings linked to these transactions, I must add the fields that I use to filter my transactions to my Building table.

In this way, the data I display in my application about buildings is updated according to the transactions I've filtered.
But this process isn't easy to set up and requires a lot of changes to be made to our databases that aren't normally necessary.

Since this post, there's been nothing new on the ESRI side, and no update along these lines, so I had to get my brain working at full speed to find a way of cobbling together something that would work.

So I concentrated on the way widgets currently work: it's possible to set actions on our data. For example, we can add an action when items are selected and only then can we give the order to filter the data records that have been selected. This filtering is done using action parameters, creating a link between two different data sources (one triggering, and one ‘undergoing’ the action) using a common identifier.
So let's suppose that we're filtering a ‘Transaction’ data layer according to the years in which the transactions were signed, and that I don't have a replica of the ‘Transaction year’ column in my ‘Building’ data layer. I want to see the transactions for 2021 and therefore the buildings associated with these transactions on a map.

If I'm doing things using a ‘Modification of record selection’ action and if you followed my first post, this means that once I've filtered my transactions, I have to make a selection on the map by hand in order to filter the buildings.
Otherwise, I need to have added the ‘Transaction Year’ column to my Building layer beforehand for the Group Filter to work, but this solution is not possible if we have an N-1 relationship between our data*.

*the Transaction-Building relationship is N-1, there are N transactions for 1 building, which means that if I add the ‘Transaction Year’ column to the Building table, I'll have to ‘clone’ each building for each transaction involving that building, otherwise I'll lose information. And clearly, cloning buildings sucks because in terms of cartographic rendering it means having N points superimposed...

With that in mind, I was left with only 2 solutions:

• Pray that ESRI will finally develop an action parameter that is triggered not when you SELECT something, but rather when you FILTER something
• Succeed in creating a SELECTION action, without the user having to do it himself.

As you can imagine, I had to focus on the second solution.

The idea was simple: what if I used the Selection tool to simulate a Selection action without the user realising?

So we're going to take a Selection Widget and choose ‘Select according to attributes’ as the source. Then click on ‘New data’. To follow my example, I'm going to choose my data source ‘Transactions’ (in my case it's a simple Table), thanks to the SQL expression generator, I'll be able to set up Filters that will be used to select the data according to attributes (I'm using several fields with the ‘AND’ condition).

Once that's done, all that's left is to set up actions when there's a Modification of record selections. This action is set up with ‘Structure’ as the target, then ‘Filter data records’ is selected and all that's left is to choose the Building source (or any other source) which has an identifier in common with the transactions (in my case we have an ID called ‘ID_LP’).

The final result is as follows:

As you can see, we ‘disguise’ this Selection widget as being a sort of Filter widget, and thanks to this, I can filter my transactions according to using fields that are not present in any other table or entity layer AND I manage to filter my other cascading data sources. Something that used to be impossible.
The other advantage is that, because we've set up our actions so that the data records are filtered, it doesn't show up, either on the map rendering or even in a Table or List Widget. There's no big highlight.

Of course, you have to bear in mind that this technique has its limits:

• Even if there aren't any lines highlighted in blue or Highlight points in neon yellow, you're still selecting data, so if you make a selection by hand in addition, or click on an item, the widget can quickly find itself no longer knowing who the source of the selection is. For optimum use, remember to click on ‘Delete selection’ if you wish to make another type of selection, to avoid conflicts.

• Let's say you want to offer a view of the contents of the Transactions table. You integrate a Table widget so that the user can see the contents of the table. Be very careful with this: if you don't set any filter actions, you will only select the transactions in the table that you have filtered (logically). But if you set up a filter action, you have to do so by setting the same source (i.e. transaction & transaction) as the action's trigger and target. Well, by doing this, you're going to bug the filters in the Selection widget, which will no longer be able to be modified without first deleting the current selection.
  Here's what I recommend to get round this little problem: if you want to display tables, maps or other widgets relating to the data source you've used in the Selection tool, duplicate this layer/table for the other widgets. By doing this, you're querying ANOTHER data source (which is actually the same one) and you can set up your filter action to filter the records without bugging the filters in the Selection tool.

I think I've come to the end of this tip, so I hope it's helped you. This solution is really in the ‘do-it-yourself’ category, but at least it has the merit of being able to resolve certain situations.
I'm still hoping that ESRI will one day come up with a solution for this, because I think it's a real shame that in such a powerful GIS tool you can't manage relationships between several data sources by simply using a common ID... something that's been done since the dawn of time in lots of other software.

Gone°

A creeping contagion is taking over the ESRI ecosystem. Every update it swallows a little more. Soon, it will devour everything leaving nothing in its wake. The name of this virus is Calcite and it is coming for your CSS. Once Calcite swallows something all your CSS hacks will break as the Shadow DOM and infinite wrappers surround and subsume your target. Calcite will infest everything. We are powerless to stop it. It is different and I am instinctually fearful of change. However, hope is not yet lost, we may not be able to stop Calcite, but we can adapt it. 

(Actually, there are two creeping contagions taking over ESRI, but Components are a problem for next year.) 

As I upgraded to Developer Edition 1.17, I found that the Map Layers Widget was the latest victim of Calcite and my custom font added in the Theme was no longer being respected. The Map Layers Widget occupies a very prominent space in my overall design, so the font change was very noticeable and distracting. And Calcite was blocking my typical CSS targeting attacks. So, I did something unthinkable. Something I hoped I would never have to do. I learned about Calcite and CSS variables.

First, I will show you my solution. Then, I will explain why it works. In the style.scss of my Theme, I added this...

:root {
    --calcite-font-family: Relish Pro Medium,"Avenir Next",Avenir,"Helvetica Neue",sans-serif;
}

The :root CSS selector is the default CSS settings of the page, so altering :root will change everything. Using -- is how you declare or alter a CSS variable. Calcite variables are written like --calcite-variableName, with font-family being the specific variable I am changing. After the colon is a list of fonts that the page will attempt to use in order. I've put my custom font, Relish Pro Medium, at the start of this list making it the default Calcite font for my application. For the rest of the list, I used my browser's Dev Tools to find and copy the Calcite defaults, so if Relish fails for some reason, it will follow the standard Calcite backups.

That's all it took. Fight Calcite with Calcite and change the Calcite variables to better fit your needs.

You turned off updating and deleting in a Feature Layer. You put an Edit Widget in Experience Builder and what's that Delete Button doing there? And it works, too?

Two important questions:

1. Do you own the data layer?
2. Are you an Admin on your ArcGIS Online/Enterprise Portal?

If you answered yes, to either of these questions, that's a quirk of the ESRI ecosystem. It's not just limited to Experience Builder. If you own a data layer or you're an Admin, you can always do whatever you want to the data even if it's not allowed for other users. It's on one hand a very sensible and on the other very poor design choice by ESRI. Afterall, if you are an Admin, you may need to delete some bad data maybe even against the will of the data owner, but being an Admin doesn't make you immune from "Oops, wrong button syndrome". Try logging in as some other user and the Delete Button should be gone.

If you're not an Admin or a data owner, contact ESRI Support. Something is very wrong.

Edit: Here's an official quote about this issue from the JavaScript API documentation.

Authenticated users that are layer owners, administrators or users with full editing privileges will have their elevated user privileges applied in regards to editing behavior and data access. This mimics the behavior available in Map Viewer. To opt out, set esriConfig.userPrivilegesApplied to false.

Note that last line. If you are on Developer Edition, there is a way to opt out of your elevated powers.

Last week, I traveled to the ESRI Developer and Technology Summit in Palm Springs, California. I learned/re-learned/experienced a lot of stuff between getting off the plane to the airport bar on the way back. Here are my notes. Some of them are about Experience Builder, some are more general web development stuff, some are about other ESRI products and some are about Palm Springs and the conference itself. This is just going to be a bunch of one liners and don't expect me to elaborate in the comments. I don't have many details on much of this stuff myself. Ordinarily I try to cite my sources on this blog, but for practical and confidentiality reasons, I'm keeping stuff anonymous this time. There were a number of improvements I spoke to ESRI staff about. I'll be tagging these with YCTML (you can thank me later), so you know I am solely and personally responsible for making this stuff happen when and if it does. Unless you don't like this stuff in which case I really had nothing to do with any of it. 

I can't do a post like this without showing my stupid face, so here you go. I'm on the right. My new bestie @SimonSchütte_ct is on the left. The guy in the middle is Jack "What the Internet Would Name a Volcano" Dangermond.

Experience Builder Stuff

• I successfully convinced with a rigorous intellectual argument the Build Team that the Clear Map Highlighting Button is in a very bad place, YCTML.
• I successfully emotionally manipulated the Build Team into getting the new Turn On/Off All Layers Buttons to respect the customization in the Map Layers Widget. YCTML, we're getting native support for thematic groups.
• If you want to allow your users to print an entire Page, for say creating a custom report, the Button Widget can link to Print Preview.
• Windows can be reused multiple times throughout an application and called from any Page.
• For best results, design based on multiples of 16px.
• Place a Column Widget inside a Sidebar Widget and add some Padding for a neat floaty effect.
• Having trouble navigating around a complicated layout? Use these carrot things at the bottom of the Builder.

   

• Need to add an npm package to a Custom Widget? Create a package.json within the file structure of the Widget and call npm i on that folder.
• Don't change the version number when upgrading a Custom Widget to a new version of Experience Builder.
• Stop and restart the client server when first creating a new Custom Widget.
• The Python API is capable of transferring an Experience Builder project between Portals.
  • It can handle remapping of Webmaps and Datasources.
  • But, as of now, it will break if you have any Custom Widgets.

General Web Stuff

• Plan before you build.
• User Testing
  • Make a scenario for your end-users to test. Write them a story. Give them a character. Dress in Elizabethan costume. Ok, maybe not that last one.
  • It doesn't take a lot of testing to find most problems.
    • If a user can successfully make the first click on a task, they will complete the task 86% of the time.
    • Five test users can find 80% of usability issues.
  • My notes say "question your end-user's goals." I'm pretty sure that means ask them what they want to accomplish, not belittle their worthless dreams, but you do you.
  • Watch and take notes as your users test stuff, but resist the urge to tell them how to do stuff.
    • If you can find a sneaky way to watch them work without telling them you made the app, even better.
    • Assure your users that you are testing the dumb application, not their dumb selves.
  • Classify your problems based on severity, not frequency and assume any issue will be worse on the live application than in testing.
• Some types of applications, like how to get help in an emergency, can instantly go from zero users to thousands. Make sure your servers can handle that kind of jump.
• Do you have a design with a list next to a map? (Something similar to the JewleryBox Template in Experience Builder.) That design doesn't work on a phone. Instead use a "two-page" list on one page, map on the other layout for phones.
• ESRI Webmaps will not pass accessibility testing, at least for now, but if you can convey the same information some other way, like a list, then the map becomes more "decorative, than functional."

Other ESRI Stuff

• Coming Soon to (or maybe already in) an ArcGIS Pro Near You
  • Create a Utility Network from a Feature Class.
  • Automatically turn a Geometric Network into a Utility Network.
  • Pre-trained AI models that tell you why they class stuff the way they did.
  • AI Arcade Coding Assistant.
  • Estimate Time To Event will tell you the exact day your bridge will fall down.
  • DIY-AI extensions to the AI Assistant.
• ArcGIS Online/Enterprise
  • I talked to several members of the Online staff about building a button to send an email to the members of a Group. I could put YCTML here, but it seems like they have been asked so many times that I was a few seconds away from a punch to the face.
  • Did you run a Credit report on your ArcGIS Online organization? Was your biggest user No Username? That's storage.
    • They say they are going to make the Credit Reports better, in a vague nebulus way.
  • ArcGIS Enterprise 11.6 will be released...never. The version after 11.5 will be called Enterprise 12.0.
    • The main reason for the new version number is the retirement of all the JavaScript 3.X stuff, like WebAppBuilder.
• ArcGIS JavaScript API
  • Take a look at this Demo to see how to make a shapefile into a FeatureLayer.
  • I spoke with one staff member who said the saveAs() function can be used to create a new Portal Item from a client-side FeatureLayer.
    • But the documentation disagrees.
    • I am following up on email about this. Update: I have confirmation that the documentation is correct. I have opened an Enhancement request and dropped a new Idea.
    • I guess, YCTML, if this isn't supported and it spirals into an actual function.
    • If it is a function, I may take a stab at a FeatureLayer Maker Widget.
  • The hitTest() function and the selectFeatures() function built on top of it will allow for developers to set the search radius rather than its current fixed 6px, YCTML.
  • I overheard some staff members discussing building an Interactive Legend Widget. Assuming those guys build it, expect it to flow into Experience Builder eventually. Which leads me to...
• Instant Apps
  • Instant Apps have their own Component Library out on a Public GitHub Repo that you can totally just use if you want.
    • That Interactive Legend Component looks fun.
    • The Instant Apps Team can't think of a reason you couldn't hack one of their Components into Experience Builder.
    • I think I may have to try that.
  • There is no Developer Edition for Instant Apps or Dashboards.
    • But if you ask the Instant Apps Team nicely, they will send you the code for any Instant App you want.
    • And if it becomes a thing, YCTML.
• ArcGIS Solutions
  • Solutions also has a Public GitHub Repo that you can totally just use if you want.

Other Stuff

• Palm Springs Tramway
  • When I stepped onto the Tram, it was 80 degrees in the desert.
  • When I stepped off the Tram 10 minutes later, it was 40 degrees with a foot of snow on the ground.
  • Closest thing to a closet to Narnia I have ever experienced.
  • No matter what Van Halen says, do not jump on the gondola.
• Chew thoroughly before swallowing.
• Congratulations to @RasterFan98 for getting the Custom Widgets Group into the Plenary Session.
• If you ask the ESRI Events staff for a telescope to view the lunar eclipse during the Summit Party a few days before the conference, they will be disappointed they could not make it happen.
• I attempted to fill my time attending every possible talk I could.
  • In retrospect, I wish I blocked out at least an hour a day to spend on the Expo floor, as most of the things I learned and accomplished happened outside of the tech sessions.
  • And many of the talks were also recorded.
• If you uncover a massive conspiracy that aligns with your values and goals, is it your moral duty to still expose the truth?
• NATO is investigating reports by German Intelligence that the Nord Stream Pipeline was sabotaged by ....
  • NATO apparently thinks they can show a lolz so random spot in the Baltic Sea to a room full of map nerds and no one would know what it was about.
• ESRI Events staff makes some pretty good food.
  • Thursday's lunch was probably the best meal I have ever had in a high volume cooking situation.
  • If someone can get me the recipe for that quinoa salad, I might eat some quinoa again. 
• Why didn't you Dooooooooooodge?
• Mapillary - Strap a camera on something and make your own version of Google StreetView, for free, according to my source.
• No one likes the sound of their own voice.
• @KenField gets to go to DevSummit, but not @JohnMNelson. Is it because Ken is a public figure?
• There is apparently a set music playlist that ESRI uses before the Plenary/Keynote Session everyday. Inexplicably, Maps by the Yeah Yeah Yeahs is not on it.
• Palm Springs is a pretty town. I see why the celebrities used to hang out there. Here's a sunrise rainbow on a mountain from the Conference Center.
• The Palm Springs Airport is mostly outdoors.
  • Neat when I swiftly walked through it on a perfect weather day.
  • Not so neat when I had to wait there for three hours in very bright sun with a strong, chilly wind.
  • Considering the length and intensity of the Palm Springs summer, I think there are probably more not so neat than neat days for this concept.
• The Big Kahuna Burger just sounds better with cheese. 
• The face of a vicious barbarian.

   

I made a map. Do you want to see it?

It's kind of pretty in a way, like a Jackson Pollock painting, and it's almost as informative. There's just too much stuff here. If only, I could group my data into logical categories that my end-users could easily turn on and off as they wanted. But that's just a dream...or is it? I don't actually know. I'm writing this as I go, but the February 2025 ArcGIS Online update should have made this dream come true. Let's find out together.

The first thing I will do is turn off the visibility for all the layers in my map, except Single People And Cheese. Why Single People And Cheese? Because someone at ESRI made a data layer about Single People And Cheese and how else can I tell you that exists? It's one of many delights you can find on this testing server, I will be getting my data from. I've grabbed basically every layer on that server that falls into these categories: Demographics, Natural Disasters, Animals and Cryptids, and I will try to make Experience Builder recognize these categories.

In Experience Builder, I am starting with the Pocket Template and I've added my webmap to the Map Widget. This Template has a big Placeholder Widget on the right side of the screen where I've added an Accordion Widget. If I was using a smaller number of categories, I would probably use a Section or Grid Widget instead, but somewhere around three or four an Accordion starts to make more sense.

And into the Accordion, I'll add a Map Layers Widget. I'll rename this Widget to Demographics. Then, I'll Customize Layers. I'll use the handy new layer toggle to turn off all the layers at once. Then, I'll turn back on just the demographic related data. For the other options in this Widget the most important thing is: Enable Layer Batch Options.

Hey, before we go any farther, let's take a moment to test this out.

In Preview Mode, I click on the lines and triangle and Turn On All Layers...

Oh, no. Pollock is back. Sorry folks, this isn't going to work. I really thought it would. I wouldn't have put so many layers into the map if I didn't think it would work.

Hey Dev Team, restrict the on/off all layers function to the Customized Layers within a Map Layers Widget and we would have something very great here.

Update Live From DevSummit: I told @Jianxia that this made me cry and she said this is not the intended behavior, it is now a priority fix that will be taken care of in the next update, or maybe even sooner...

Your company doesn't want anyone downloading your data and you've got a lot of data in your Experience Builder project, you stopped counting at fifty layers. Do you have to go through every one of them one-by-one and turn off data exports? If you're on ArcGIS Online, not anymore. Any other form of Experience Builder? Put on some music, you'll be clicking for awhile. There's a new magic button in Experience Builder and ESRI loves to hide them, so here's where to look.

1. Click on the Data Button in the Left Side Panel. It looks like a stack of pancakes.
2. Now click the gear by Export Settings.

    

3. Now, click the other gear next to Layers.
4. Next, click the Allow Export Switch.
5. Finally, click Apply. If you don't Apply, it doesn't count.

If you only want to turn off certain kinds of exports, you can use the checkboxes by the export types. Again, remember to Apply. If you want these options at a layer-by-layer basis, use the gears and switches by the layer names.

I go away for one day and everything is different... Yesterday, was ArcGIS Online update day and now we have a new version of Experience Builder to play with. This is Experience Builder 17 and its been going through big changes all through it's teens. Experience Builder is really becoming a mature program, which is good, because daddy WebAppBuilder is getting old and wants to retire and Experience Builder is going to have to start taking over the family business soon. We are going to talk about what's in this update soon, but first we need to talk about what's not in it. Batch editing has been pushed back again for another update, hopefully we finally get it next time.

This is the third edition of this series, but if you're new here's how this goes:

• I read the official What's New in Experience Builder Blog post.
• I maybe try a few things for a few minutes.
• I attempt to translate the What's New page from developer to English.
• If I don't think something is going to be very important to many people, I leave it out of my notes.
• I might make some guesses how the new stuff can be used.
• You don't get mad at me if you can't actually do those things.

Map Viewer Updates

Technically not Experience Builder so I make this quick, but the ArcGIS Online Map Viewer has a couple new tricks that should translate into Experience Builder: Animated Symbols, Multi-dimensional imagery popups, improved attachment pop-ups and Display Filters. 

Action Updates

• Select - You just ran a query and would like the results selected. There's an action for that now.
• Show Pop-up - Make a Pop-up pop up from another Widget.
• Statistics - The statistics are smarter about what they calculate and don't try to do math with OBJECTIDs.

Builder

If you Duplicate a Page, View, Section or Window, all the Widgets within should be copied exactly with all their settings configured.

Data Sources

• You create a List Widget and spend an hour setting it up just the way you want it, then you realize it should show Selected Features instead of the Default View. Now, you can switch to the other View without losing all that work.
• Dynamic Imagery without fields is now supported.
• The exports should be smarter about what fields to export.

Export Options

• These exist now. That's a big improvement.
• You can choose what formats are allowed for exports. Use this to prevent clutter on your Portal or to prevent unsufficitated users from wondering who JSON is and why he doesn't have an a in his name.
• You can turn the exports on/off for all layers at once. I know this was a major pain point for some users. It took me awhile to find the option, but it exists. There will probably be a follow up post with how to find this magic button.

Layer Selector Component

They are really underselling one of the most powerful and interesting features in this update. This is a set of options that appears in many Widgets, mostly in the Build Mode, that allows people to do stuff to every layer at once. Highly requested options to instantly expand/collapse Layer Groups and turn on/off multiple layers at once. We have previously discussed Five Ways To Handle Groups of Layers. The first one involved using multiple Map Layers Widgets. I hope that that method with this new function will result in the best way to manage Layer Groups without a Custom Widget. If it works, there will be a link here within the next few weeks. And if it doesn't work, there will be a link here.

Sharing

Open up your phone camera and scan a QR code to see your in-progress application on your phone. Potentially a faster, easier and more accurate way of seeing what your application really looks like than this developer's trick.

Templates

New templates called Poster, Booth, FAQ, Catalog and Prism.

Theme

By default the keyboard focus color is very similar to the Primary App color. For accessibility reasons, it would probably be best to make them very different. This tool by Adobe is very good for making color themes and checking for accessibility. I found the setting to change this, but I didn't actually see it do anything in my testing app. 

Updating

I feel like this quote requires some clarification from the product team.

In the builder, widgets now update to the latest available version when you open at least one of their type of widget. Opening a widget means switching to the page or view that contains the widget. When you open a specific type of widget in the builder, all widgets of that type upgrade simultaneously. For example opening one Map widget updates all Map widgets in an app.

Do Widgets not update when ArcGIS Online is updated? Is it possible to run old versions of a Widget if an update breaks something? Do deployed apps not change with an update?

New Widgets

• Flow Row - Old Row has got to go. New Row has better flow...I don't know...how to make this all rhyme. It's a new Layout Widget. In my brief testing, this version of the Row Widget is just easier to work with than the original flavor. Maybe there's enough room in this town for both of them, but this one is probably the one you should reach for first.
• Oriented Imagery Viewer - Wait, this is new? Didn't we already have this? Yes, we did. Old Oriented Imagery Viewer is now Classic Oriented Imagery Viewer. Why do we have two? I don't really know. I think this new Widget does more stuff? I assume there is some technical issue that the old version couldn't handle, so they rewrote it by machine with new technology and now I understand the problem you can see. Oh-a-oh, ESRI didn't kill the old version, so your apps would keep working.
• Processing Templates - A Widget for applying raster calculations to an imagery layer. Does this cost credits? I don't see anything saying it costs credits. Sure looks like something that costs credits. ESRI has been doing some shady stuff lately around credits, like ModelBuilder in the Online Map Viewer charging by time it takes to make a model. The Raster Function Editor looks a lot like ModelBuilder, too.

Updated Widgets

• Add Data - End users can resize it, sort their searches by relevance and upload up to 30 files at once.
• Analysis - If a parameter is not required, you can hide it from the end user. New tools: Tabulate Area and Zonal Geometry As Table. New layer types supported: Map Service Layers and Subtype Group Layers.
• Chart - Control your axis spacing better and make their labels easier to read. The No Data Message is now editable.
• Directions - Add stops and barriers to your route. The Optimize Order option solves the traveling salesman problem for you to make good routes. Choose between metric and freedom units. Point layers can be used as search sources. Limit your search results to the map area or a country.
• Draw - Use Tooltips and press Tab to precisely control your drawings. Good luck training your users to actually use this feature, but it exists. The draw tools optionally have snapping. Who's option? Both builders and end-users. (Maybe make snapping an option for the Measurement Widget as well, ESRI, as it appears to be a huge memory drain.) Make a grid appear on the map and snap to it. A few new freedom unit measurement options.
• Edit - Also, gets the grid and snapping options above. Warns you if you try to quit without saving.
• Elevation Profile - Use one or more line segments at a time to make your profile. Matches to the map highlight color. Selecting features actually selects them.
• Embed - Autoplay YouTube. Very important for effective Rickrolls. HTML in the Embed Widget is in the app theme font if anyone still knows how to write HTML. Didn't they outlaw it ten years ago?
• Feature Info - Has a Clear Selection button.
• List - Flow template based on the Flow Row, oh no, let's go. Cool, Bro. Don't ya know, Fargo was set almost entirely in Minnesota except for one scene and yet it defines North Dakotan culture in the popular perception.
• Map - Decide how far in and out the end user can zoom. The Zoom To Action of the Search Widget should be smarter about how far to zoom with a Locator Source.
• Map Layers - In addition to the stuff in the Layer Selector Component section, end users can now set the visibility range of map layers, tables can also appear in this Widget and run-time generated layers can be excluded from this Widget. Additionally, the transparency controller is now a slider offering more control and better visual feedback to the end user. 
• Near Me - The changes were big enough to warrant its own What's New post. Export your results to a PDF. Save your search inputs to a layer if you want.
• Print - Print dynamically generated stuff.
• Search - Builders can turn off the user's option to turn off search sources. Do you ever search for stuff and the World Geocoding Service helpfully suggests something from the wrong continent in a language you can't even recognize? Try Local Searches. The closer to the map center, the higher on the result list. Really great if you are near the Bight of Benin.  If Local Searches aren't restrictive enough, you can completely exclude results that aren't in the map area.
• Table - CRUDy Attachments. For those of you that don't speak programmer, CRUD is an acronym for Create, Read, Update, and Delete.
• Text - You can put an image inside a Text Widget, now. So, this hack is now Enterprise only.

Alright, that's it for this update. See you in the summer for Batch Editing and Arcade.

Last summer, I wrote a philosophical piece about how I use Experience Builder in which I discussed several apps I have built, one of which was an everything app. I explicitly said, "trying to build an everything app in Experience Builder is a very bad idea." Meanwhile, in the Custom Widgets Group, I've been releasing Custom Widgets developed for this everything app while dropping lessons learned in this group. Now, all the pieces are out there and maybe building an everything app isn't such a bad idea anymore. Experience Builder has been pretty much my full-time job for almost two years now and I am putting together almost everything I have learned into one post. 🎶Do you want to build any everything app?🎶

Maybe I should define what I mean by any everything app. Working in city government we want to have a central data repository where our employees can easily look up geographic information and do some light analysis. It needs to be flexible enough to handle data from many different departments without overwhelming the map visually or technologically. Advanced users should be able to make some complex queries, but it needs to be simple enough for users who are not technologically savvy. It must be everything to everyone. Is that Everclear? Does that sound like something you need or want to build? Then take a look at the Atlas Instant App. It's really good. But, maybe it's not quite what you need and it's also very new. I don't know if it made it into Enterprise 11.4, but it's not in 11.3. So, here's how to make one in Experience Builder...

To make this work, you are going to need Developer Edition 1.14 or 1.16, hopefully higher versions will also work, or Enterprise Edition 11.3 or higher, again hopefully. (You may have noticed that 1.15 is conspicuously absent. That is because that version contains a bug that is incompatible with my Add/Remove Layers Widget. Also as the release version chart has not been updated, I cannot confirm compatibility with Enterprise 11.4.) If you're not on one of the compatible versions, well, you don't need to be a developer to use Developer Edition. 

You will also need a handful of Custom Widgets:

• A Custom Font Loader (Optional)
• Add/Remove Layers Widget *
• Identify Widget and its associated Search Widget
• Identify Controller Widget (Optional) **
• Custom Draw Widget

*Before uploading the Add/Remove Layers Widget to your Enterprise, it is highly recommended to pre-load your layers and groups into the layers.ts file of the Widget.

**If your flavor of Experience Builder allows you to turn off Popups from the Map Layers Widget, you might not want to use that option instead.

We'll be building in Enterprise 11.3, so first I will register the Custom Widgets with my Enterprise Portal. Then, I will go to the Web Map Viewer and make seemingly blank map. I am making hybrid layers for my parcel and road layers. This will get me some advanced labeling features and I will also be able to use the secret Map Image Layers to set-up the Query Widget later on. I am using the Feature Layer With Map Image Layer Labeling flavor of hybridization, but I'm skipping the code enhancement in this build. At this point, I have all my Custom Widgets available in my Enterprise Portal and a Webmap that only visibly contains labels for a few layers. Now, it's time to boot up Experience Builder.

I will start by picking my favorite Template, Blank Fullscreen. We will be making a single-page application and, while this layout should be alright on a tablet in landscape mode, I will be making zero attempt at making this look good on a phone.

Oh, the tyranny of the blank page... How shall we start? Well, if you know my stuff, you know I'm probably going to use a Sidebar, actually this layout uses five Sidebars, each one in a slightly different way. The first one is to support our Hidden Widget Trick. I drag in a Sidebar and set it to Full Size. In the Collapsible side of the Sidebar, I drag in my Custom Font Widget. Back in the Settings Panel of the Sidebar Widget, I'm going to click on the Widget's title to change the name to something more descriptive. We're adding a lot of Sidebars and this will get confusing without some labels. Next, I'll set the Size to 0, turn off Resizable and the Collapse Button, and set the Default State to Collapsed. The Custom Font Widget is now hidden forever, but it's font changing powers will live on.

Next, we are going to add a "Header" and, since we are not planning to add another Page to this layout, we aren't going to use a Header. Instead of a real Header, we will use a previously unreleased trick by @MichaelGaigg: Sidebars make good Headers. I drag in a Sidebar and set it to Full Size. In the Settings Panel, I'll rename the Sidebar, set the Dock Side to the Top, Size to 80px, turn off Resizable and the Collapse Button, and set the Top Panel Fill to a dark blue. Our Sidebar is now a Header.

You know what we really need right now, ANOTHER SIDEBAR!!!!!!!!!! I'll drag this one in, but I won't go Full Size...for now. In fact, I'll make it smaller. I'll drag a Map Widget in the always open side of the Sidebar and set it to Full Size. I add the Webmap I set up earlier. I turn the Zoom, Home, Compass, Measure, Fullscreen, and Extent Navigate Tools on and the other Tools off. (If on a version with the Measure Widget, use that instead of the Measure Tool. If you don't understand the difference, click here.)  I will also turn off Enable Pop-up. The Map Widget is done, we'll circle back to the other side of the Sidebar later. For now, just rename this Sidebar to Map Sidebar.

The next Sidebar will hold the Identify Widget, which will handle auto-opening and closing it and will be named Identify Sidebar. I drag in a Sidebar, shrink it a bit, rename it, and switch the Dock Side to the Right. Before going any further, I'm going to drag in the Identify Widget to the Collapsible side of the Map Sidebar. It's not going to stay there, but it's a convenient spot for now. The Identify Widget needs the widget_id number of the Sidebar Widget it controls, but there is no way to see this information in ArcGIS Enterprise, so the easiest way to find this information is to add the Identify Widget immediately after the Sidebar and subtract one from the Identify Widget's number. If you've been following along, the Identify Sidebar should be widget_id number 6. I'll also set connect the Identify Widget to the Map Widget. Next, I drag the Map Sidebar as a whole into the Always Open Side of the Identify Sidebar. Don't worry about how this all looks now, we'll fix it once we have the final Sidebar, which we will add next.

Drag in another Sidebar and name it Table Sidebar. Set the Dock Side to Down. Click back on the Identify Sidebar and drag it to the Always Open Side of the Table Sidebar. Now, we'll start fixing the appearance of our app. Set the Table Sidebar to Full Size. Then do the same for the Identify Sidebar and again on the Map Sidebar. Using the Outline in the Page Settings Panel will be helpful for this bit. If you've done this correctly, you now have five Sidebars around a Map Widget and none of them have The Sidebar Problem™.

Ok, we are done adding Sidebars. But before we are done saying Sidebar every fifth word, let's style some Sidebars. We'll start with the Map Sidebar. This Sidebar is intended to contain data related to the map as a whole like the Map Layers and Legend Widgets and a few other Widgets with large vertical outputs. It will be Expanded when the app loads and rarely if ever closed, so the defaults of Overlay off and Default State Expanded are good. I want to make the Size a bit larger though, so I set it to 400px. I also want to make the Collapse Button more visible, so I will make it larger and color it. I set the Icon to the Solid Triangle and increase its size to 20. I set the Background Default color to blue and the Background Hover color to red in accordance with my branding guidelines. I set the Width to 20, the Height to 80, and the Offset X to 20 and now I am satisfied with the way this Sidebar looks. To the Identify Sidebar...

We will also set the Size of the Identify Sidebar to 400px, but as this will be primarily controlled by the Identify Widget, it will be less jarring with Overlay on, and as it will be blank on load, Default State Collapsed makes more sense with this Sidebar. Now that the Right Panel is overlaying the map, it needs a background Fill color, the standard Light color (it's a very light silvery-grey) works well here. For the Collapse Button, we will do everything the same as we did for the Map Sidebar, but the Offset X goes in the negative direction.

Let's go back to the Table Sidebar. Add a Table Widget to the Collapsible Side of the Table Sidebar. Set it to Full Size and done. The Table Widget is configured. Back to the Table Sidebar Settings, I'll turn the Overlay on and the Default State to Collapsed. This drawer can be manually operated by the user after they use the Add To Table Action. Ideally, there would be a configurable Action that would auto-open this drawer, but that doesn't exist yet. The Collapse Button needs to be even larger as it's location and orientation make it less obvious on the screen and we are relying on the end-user to be able to find it. So, I set the Icon size and Height 25, the Width to 120, and the Offset Y to -25 with the same colors as the other Collapse Buttons. We are done with the Table Sidebar. So, click the Collapse Button on the Map to get it out of the way for the next steps.

The Collapsible Side of the Identify Sidebar should be empty right now. Put a Grid Widget in it and make it Full Size. Next, grab the Identify Widget and drag it across into the Grid. Now, drag the Identify Controller Widget right on top of the Identify Widget. The Grid Widget should automatically make Tabs out of these Widgets. Connect the Identify Controller Widget to the Map Widget and it's good to go. In the Grid Widget Settings turn off Allow Resize and Allow Expansion. Maybe rename these Widgets to make the Tab titles a little more clear. If you've been following along, things should look like this now.

We are done working on the Identify Sidebar, so you can hit the Collapse Button on that as well.

Now, let's turn our attention to that empty Collapsible Side of the Map Sidebar. Put a Column Widget in it, set it to Full Size and the Gap to 0px. In the Column, add a Views Navigation Widget and pick a Quick Style. I'd recommend one of the top three as they show the View titles. Then add a Section Widget beneath it. It's a little backwards, but that's the easiest way to get the Section Widget to stack neatly under the View Navigation Widget in a Column. In the Section Widget Settings Panel, go to the Style Tab and set the Width and Height to Stretch, if necessary. And what should go inside the Section Widget? Another Column Widget, of course. I swear this isn't going to get out of hand like that Sidebar business earlier. Set the new Column Widget to Full Size and the Gap to 0px, as before.

So what should go inside this Column in a Section in a Column in a Sidebar in a Sidebar in a Sidebar in a Sidebar in a Sidebar? It's time for the Add/Remove Layers Widget. This is going to be the big time suck in building this application. Ideally, you took the time to pre-load all the layers and groups into the Widget before you uploaded it to your Enterprise. Sure, it is technically possible to use this Widget with just the Settings Panel, but adding or changing more than a handful of things in the Settings Panel is really going to suck. Honestly, changing things in the layers.ts file is going to suck too, but it will suck a little less. If you have everything pre-loaded as you like it, all you need to do is drop in the Widget and connect it to the Map Widget. If not, well here comes several hours to days of misery, depending on how many layers you need to put in. Setting up this Widget is not the most strait-forward thing either, so make sure to read the help text on the Widget's page.

If you are reading this, you presumably survived the last step. I commend you. Have a medal. 🏅  Now back to work, you slacker! We're not done, yet. The next thing to go in the Column in a Section in a Column in a Sidebar in a Sidebar in a Sidebar in a Sidebar in a Sidebar that swallowed the spider that swallowed the fly is a Map Layers Widget. Drop it in and connect it to the Map Widget. Turn on the Options as you see fit, I've got them all on except I'm sticking with the eyeballs for visibility and I'm not turning on the sub-option to show the legend by default. Enable Customize Layers and hide your hidden map layers. In the Style Tab, set the Height to Stretch.

This is a good time to go into Preview Mode and test. The Add/Remove Layers Widget should add and remove layers. You should be able to use the Add To Table Action in the Map Layers Widget and see the data in the Table Sidebar. Clicking on the map should open the Identify Sidebar and show results. The Identify Controller should be able to turn on and off Identify on a per layer level. There should be no Sidebar Problem™. Good luck.

...I'm going to assume that all worked fine. Don't know what to tell you if it didn't.  🙃

Add a New View to the Section Widget. Drop in a Basemap Gallery Widget. Set it to Full Size and connect it to the Map Widget. Repeat, but drop in a Legend Widget this time.

Do it again with a Select Widget, but now there are a few more settings to worry about. Turn on Allow Selection of Data Generated At Runtime. You can turn Attribute Selection on or off. It does not matter Attribute Selection will be on either way because the Select Widget operates very differently when data is loaded at runtime and the runtime layers are way more powerful. Go into the Customize Layer options and remove the Webmap loaded layers and open up the Interactive Selection dropdown and turn on all the Select By options.

Add a New View. Then, drop in a Query Widget and make it Full Size. How exactly you configure this is just between you and your data, but I've got a Spatial Query for parcel data based on one of the videos in this series and a couple attribute queries set up on OR clauses (using OR clauses means that users only need to search in one field) for road and parcel data using the hidden layers from the Webmap. I know these layers are the ones my users are most likely to want to search through. I am using the Query Widget to make it easy to search questions I know my users are likely to ask, while the Select Widget and the Set Filter option in the Map Layers Widget allows the users to make arbitrary and more esoteric queries. In this way, I can satisfy both my low-end and high-end users. My pre-built queries look something like this.

I've also gone to the Action Tab and set up a Record Selection Changes > Map > Zoom To Action.

That's all I plan on putting in this Section Widget, if you want to add something with a lengthy output like the Near Me Widget or perhaps you want a List Widget, I would recommend adding them as a View in this space. Since I'm done adding content here, I'm going back to the Section Widget Settings Panel to rename my Views to reflect the Widgets they contain. I will also put them in a order I find more logical. I can rename my Views by clicking the three dots to the right of the current titles and I can re-order by dragging and dropping. Let's check-in on how this is all looking in Preview Mode.

Hey, the "Header" is blank. Are we going to do anything with that? Yep, we're doing that next. We'll start by adding our Custom Search Widget. It's just a lightly modified version of the official ESRI Widget.  Drop the Custom Search Widget into the Header and then use the Horizontal and Vertical Center options. You'll need to go back to the Identify Widget Settings Panel and to see it's id number (7 in my layout) and add it to the box in the Custom Search Widget Settings Panel. (Wow, ESRI, that's so much easier when the data isn't hidden.) This modified Search Widget is designed to trigger the Identify Widget we added earlier and is only designed for use with a Locator Source (it might work with a point-type Layer Source). The rest of the options under the Content Tab are up to you except Result Panel, which must remain on, but I highly recommend turning on Recent Searches and Auto Select The First Result. Another restriction with this Search Widget is that it must be used with a Map Widget and have a Record Selection Changes > Map > Zoom To Action set up, so I set up such an Action.

At this point, go to Preview Mode and test. Does it trigger the Identify Widget? Do you find all the data you expect? I needed to set a Custom Zoom Scale to 2000 to find my parcel data. Smaller numbers = closer zoom.

Now, I add a Widget Controller to my Header. Snap to Right and Vertically Center. I'm using a Floating Widget Panel Arrangement with the Icon Size set to Large. (I'd go extra-large if I could.)  I turned off Indicator, as I don't really like how it looks and we'll handle it's function by turning on Advanced. After turning on Advanced, I set the Default Icon color to blue and the Selected and Hover color to red. The same blue and red I used for the Collapse Buttons on the Sidebars.

What goes in this Widget Controller? That's again in the up to you category. But I see these buttons as a menu, things that the user may not use everyday, but are useful to have access to. Widgets that don't have a large output and Widgets that encourage map interaction are also good candidates to go in here. My must haves up here are the Add Data, Bookmark, Custom Draw and Print Widgets. If you're on a version of Experience Builder with the Measure Widget, I'd put it here, too. Let's configure these.

In the Add Data Widget, go to the Action Tab and add a Data Added > Map > Add To Map Action. For the Bookmark Widget, I'm going with the simplest of the Simple Templates (the second one). Connect it to the Map Widget and turn on Allow To Add Bookmarks In Widget. This Bookmark Widget is here to help support our flexibility goal. It's up to the user to decide how they want to use it. If you want to add some points of interest as Bookmarks, go ahead, I'm not pre-loading any Bookmarks in my version.

Connect the Draw Widget to the Map and change the title. No one needs to know, it's a custom widget. Why the Custom Draw and not the OOTB Draw? Well, here in Enterprise 11.3, there is no text support, so that's a big factor, but I'm sticking with this @RobertScheitlin__GISP masterpiece in Developer Edition 1.16 because of the freehand draw options and the ability for users to edit their sketches after drawing. The latest versions OOTB Draw Widget has text support with more text options than the Custom Draw Widget, so if text is your primary need and you can, maybe pick the default option instead.

In the Print Widget, I connect it to the Map Widget and add a Print Service. The main problem with this Widget now is it's scrunched up in box that's too small and looks awful. Fortunately, that's a really easy fix. Just drag that little black right angle in the lower left of the Widget until it's the right size. 

Other stuff that I've got in the real version of this application in this Widget Controller:

• A text box with helpful links
• A text box with help text
• This What3Words Widget
• This NearMap Widget by ESRI Australia that I strongly endorse. Note: NearMap is working on an official Experience Builder product that will include Oriented Imagery support. They are Beta testing now. Talk to your NearMap representative, if you want to take part. But, it better be good to catch up with this Widget that's been out for years now. 
• This Rain Radar Widget by the same ESRI Australia team that I weakly endorse.

Let's add one more functional Widget before we finish the design. In the lower-left of the Map Widget, I drop in a Coordinates Widget and connect it to the Map Widget. By default, this Widget has a lot of blank space around it, if we don't do something about that we are going to get a variation on The Sidebar Problem™. In the Style Tab, set the Width and Height to Auto to prevent this issue. I also hit Snap To Left. I've seen some weird issues trying to set the default Output Coordinate System option. I haven't tested to see if they have been resolved in more recent versions, so if you want something other than Web Mercator in your Coordinates Widget, it might have to be as a secondary option.

Ok, last thing, I promise. We need a title and some iconography to a make it all look good. I throw an Image Widget in the Header and pick an image. I set the Width to Auto and the Height to 90% and use the Vertical Center option. Then, I use that target box thing to give it a 1% margin from the left of the screen.

Next to the Image Widget goes a Text Widget for a title. I'm using Vertical Center again with Width and Height on Auto. I want a title and a subtitle with my subtitle about half the font size of my title, white text to stand out on the dark background and I'll use Right Justification because I'm cool. And yeah, it's done.

Look, I won't say it's perfect, but it is an everything app you can build right now, with no-code in less time than it took me to write up how to build it. So maybe you want to build it or maybe just do the Atlas Instant App?

Hello everyone, thanks to @JeffreyThompson2 for all the posts in this group. Today it's my turn to add my contribution, which, although it may seem basic to some, will surely help many users to better manage the interaction between several data sources in ArcGIS Experience Builder.

That tips is avaiable for Online Users and Enterprise User (i'm on ArcGis Enterprise 11.1) by using an ArcGIS Experience Builder Developer Edition (more detail here : https://developers.arcgis.com/experience-builder/guide/install-guide/)

ArcGIS Experience Builder is perfect for creating applications that combine maps, charts, tables, lists and more. Layout and production of a user application is really very simple. You'd be tempted to throw your entire database into it, and with just a couple of clicks you'd be able to interact in all directions, resulting in an ergonomic and efficient application. But despite its power, Expérience Builder does have its limitations, particularly when it comes to managing multiple data sources simultaneously.

When I started with version 1.10 of Experience Builder, the Filter widget could only manage a single data source, which made it difficult to cross-analyze several themes.

In my business, I need to cross-reference five types of data:

• Buildings
• Current offers (e.g.: 1000 m² available out of 15,000 m²)
• Past transactions (e.g.: 5000 m² leased, 15,000 m² sold)
• Completed assignments (customer history)
• Property owners

If I can enter all this information for a given building, I've won.

In a conventional information system (IS), each theme is a table linked by identifiers (IDs).

Here's a simple example of what cleanly processed tables look like in a database. Primary and foreign keys to link everything together.

A simple query on the “Buildings” table would update all the others.

But in Experience Builder version 1.10, it was impossible to apply a filter on multiple data source. Filtering buildings didn't update the other data.

My only solution was to set up selection actions between all the data and explain to my users that they had to manually select the buildings after filtering to update the other elements contained in other widgets (offers & transactions being listed in Table widgets for example) ... a method that wasn't very user-friendly.

A second method, if all our data were geographical (which is not necessarily the case), would have been to make all the Feature Layers linked to the buildings invisible and, via a selection on the map, to make everything “dynamic” via the selection, but the principle remains the same.

Then, version 1.14 introduced group filters, enabling multiple sources to be filtered at the same time. Progress, but with a limit: if I filter buildings by surface area (>5000 m²), how can I apply the same filter to other tables/layers if, for example, the “Missions” table doesn't contain this information?

The solution: add the fields required for filtering to each table. This works, but it forces you to store useless data in tables that weren't designed to hold it, just to get around the system's limitations.

So first tip: be sufficiently friendly with your Data Manager, and he'll accept that you ask him for a column to count strawberries in a table that details the quality of bananas. (in a real world you just joined the strawberries ID on the banana table and use a join function to see all data about these delicious strawberries).

Even if, from an IS point of view, this method is clearly contrary to the creation of a solid model, at least you'll be bringing a good dose of dynamism into your application.

Continuing my research, I discovered another cool feature: relationship classes.

In ArcGIS Pro, the “Create Relationship Class” tool enables you to link two sources via a common ID. By exporting the main layer with its relationships to Portal/ArcGIS Online, you can retrieve all linked data directly in a tooltip via Arcade.

var transactions = FeatureSetByRelationshipName($feature,"SDE.TRANSACTIONS_UTILISATEURS")

All the Arcade functions you'll need to call another data source connected to your main Feature Layer need to use the FeatureSetByRelationshipName function to works.

In my Arcade exemple i called the user's transactions table and write some code below to see the information about these transactions when i clicked on one of my buildings on the map.

var info = ''
for (var f in transactions){
    info += `<div style='text-align: left;'><span style='font-size: 16px; font-family: Calibri, sans-serif; color: rgb(1, 42, 132);'>
        <b>Date : </b>${iif(f.TRA_TRIMESTRE == '#VALUE!','', f.TRA_TRIMESTRE)} ${DefaultValue(Text(f.TRA_DATE,'Y'), 'Pas de date de transaction recensée')}<br>
        <b>Preneur : </b>${iif(isEmpty(f.TRA_ACQUEREUR), "Pas de preneur recensé", f.TRA_ACQUEREUR)}<br>
        <b>Surface : </b>${iif(IsEmpty(f.TRA_SURFACE),"Pas de surface rencensée", Text(Round(f.TRA_SURFACE,0),'#,###')+" m²")}<br>
        <b>Valeur au m² : </b> ${iif(isempty(f.tra_valeur__m_),'Pas de valeur recensée',Round(f.tra_valeur__m_,0)+" €/m²")}<br>
        
       <br></div>`
}

However, this solution has one drawback: the data you're going to retrieve via the relationship class can only be accessed via Arcade (or you may be able to develop widgets to call these classes, in which case you don't need this post). So it's impossible to integrate this data into a Table or Chart widget after the fact, because Experience Builder doesn't handle relationship classes at all (and I hope that one day it will be able to.

However, Arcade is quite magical, and with third-party APIs it's easy to integrate graphs, tables and the like.

Here's an example of a graphic integrated into an Arcade tooltip using the Quickchart.io application. The other amazing thing is that graphs can be generated using connected data, thanks to our relationship classes.

With this method, we're able to display all the information related to a building without complicating the database or the Data Manager's work. A clean, efficient approach to filtering multiple sources simultaneously!

Last tip, very simple : combine the two methods  !

1st Method (Group Filter) :  Filter 25,000 buildings down to a short-list of 25, with access to the mass of information behind thanks to the group filters and our manipulation on the database. Result : your Table widget with all the transactions is updated and shows you the batch of transactions associated of your 25 final buildings selected by filter. You have not to made a manual selection.

2nd Method (Relationship Class) : Click on one of the 25 final buildings selected by filter. At the level of the individual building, you can see precisely each type of information (offers, transactions, etc) concerning THAT specific building. 

With these two methods combined, you can offer both massive and individual analysis of your data.

I'd like to finish with a few words for the future: a few days ago, I wrote an idea proposal in the “Ideas” section of the ArcGIS Experience Builder board : https://community.esri.com/t5/arcgis-experience-builder-ideas/improve-filter-widget-to-bring-more-dy... (you can support this idea if you like it).
The idea is to propose an ultimate evolution of the Filter widget to bring more dynamism and fluidity to the application, but above all, to its users/developers.
To achieve this, the tool would need to be capable, in the same way as the relationship classes, of detecting, when an entity is selected or filtered, all the other entities, from all the other data sources selected/filtered, which also have this identifier in their data table.

I hope this post has provided you with some useful information for your work. A year ago, when I was stuck trying to get dynamism in my application, I was running out of answers and this is the kind of solution I was hoping to find.

Gone°