I need to wrap an Editor widget from a newer release of the JavaScript SDK in a widget targeting an older version of Experience Builder so my org can migrate from Web Appbuilder to Experience Builder before we upgrade to Enterprise 12.1. Unfortunately, I'm at my wit's ends here, I can't even get a simple map component working in a widget!
Attached is my current widget folder, run npm update to grab the dependencies and then combine it with Experience Builder Developer Edition 1.17. I've aliased the npm packages as @arcgis434/map-components, @arcgis434/core and @esri434/calcite-components to avoid grabbing the default packages, not sure if that works under ExB. The settings files are all copy-pasted from the built-in Editor widget just to get something working, the meat is in this minimal widget that tries to load a hardcoded map as a test:
export default function EditWidget(props: AllWidgetProps<IMConfig>) {
const [jmv, setJmv] = React.useState<JimuMapView>(null);
const mapId = props.useMapWidgetIds?.[0];
const onActiveViewChange = (jmv: JimuMapView) => {
setJmv(jmv)
}
return (
<div className="widget-editor-434" style={{height: "100%", width: "100%"}}>
{mapId != undefined ?
<JimuMapViewComponent useMapWidgetId={mapId} onActiveViewChange={onActiveViewChange} />
: <p>No map selected.</p>}
{jmv != null ?
<arcgis-map item-id="f2e9b762544945f390ca4ac3671cfa72"></arcgis-map>
: <p>Map not loaded.</p>}
</div>
)
}
On my end this renders the placeholder elements if a map isn't selected, but renders an empty map component otherwise. Am I missing something small? Am I barking up the wrong tree? Will trying to mix JavaScript SDK components like this even work??
