Is there a way to keep a custom widget from loading until the map and layers finish loading?

DanielWebb

We just upgraded to ArcGIS Enterprise 11.1 and I am playing with custom experience builder widgets.

I have a widget that loads, but only if the map and layers finish loading first. If the user clicks the button too soon the widget errors with a message

“Cannot read properties of null (reading 'view')”

(See screenshot attached).

I figured out that it happens because the app isn’t fully finished loading so the mapView is null.

const viewManager = MapViewManager.getInstance();
console.log(viewManager); // is not null if widget loaded too soon
const mapView = viewManager.getJimuMapViewById(viewManager.getAllJimuMapViewIds()[0]);
console.log(mapView); // returns null if widget loaded too soon

As long as the user waits long enough, mapView will not be null. But if pressed too quickly it is null.

In an Experience Builder React widget, is there a way to only load the widget after the map and layers finish loading? (Kind of like how the Esri JS SDK has the view.when, or something like that). Or is there some other way of getting the same result? That way, even if the user clicks the button too soon to open the widget, it will still load only after the map and layers finish and won’t error.

Thanks!

FYI: I am an extreme newbie with React and Experience Builder custom widgets.

exb-widget-load-error.PNG

IMG_3628.jpg

JeffreyThompson2

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

	}, [jimuMapView])

Almost all of my widgets contain a block of code like this. This useEffect function fires everytime the value of jimuMapView changes. If jimuMapView is truthy, it use the reactiveUtils from the API to wait for the mapView to be ready and that sets the value of my mapReady piece of state to true. All of my functional parts of my widget are usually down a level on the React tree waiting for mapReady to be true before loading.