topic Re: How to Wrap a Newer Widget/Component in an Older Framework in Experience Builder Custom Widgets

How to Wrap a Newer Widget/Component in an Older Framework

DavidSolari — Wed, 22 Apr 2026 20:33:55 GMT

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??

Re: How to Wrap a Newer Widget/Component in an Older Framework

JeffreyThompson2 — Wed, 22 Apr 2026 21:10:20 GMT

I feel like I need a bit more information to fully answer this question. What version of Enterprise are you on and what are you trying to get from importing an Editor that you can't get already?

If you need the Editor Component, then you should just import the Editor Component (or Widget), there is no need to import a Map Component. Looking at your code, I see two potential issues with the Map Component you are importing.

You may need to use CSS to give it a height and width.
You might need to use OAuth 2.0 so that the Portal authorizes you.

Here's my primer on using a SDK Component in an EXB Widget. https://community.esri.com/t5/experience-builder-tips-and-tricks/making-a-basemap-toggle-widget-using-components/ba-p/1620831

Re: How to Wrap a Newer Widget/Component in an Older Framework

DavidSolari — Wed, 22 Apr 2026 22:19:35 GMT

Enterprise 11.5
The multiple feature editing workflows from the newer SDKs. We have dozens of apps with the WAB batch editing widget that we'd have to panic-port when we move to 12.1 so I want to provide a workaround.
The map component is just for testing if anything will render, the final product will wrap the editor widget/component. I figured I'd start with the component used in nearly every code sample, just to avoid editor-specific issues for the time being.
The map component I'm trying to import is the standard map component from all the SDK demos. The item id I'm providing is from a sample so it's publicly available. I've never seen a demo where the map component's CSS must be overridden to display properly, and when I check devtools the computed width and height are "auto" which means it should fill my parent div if there's anything to render.
Your linked post looks fantastic (I can't believe none of my Google searches pulled it up) and I'll try and get your example implemented on my end just to see if there's any build/env issues. I did notice it's pulling in the bundled SDK's widgets and components, have you tried anything that involves using another version of the SDK like I'll need to do?

Re: How to Wrap a Newer Widget/Component in an Older Framework

JeffreyThompson2 — Thu, 23 Apr 2026 12:39:50 GMT

I really don't know if it's possible to import a Component from a newer version of the SDK and get it to work in Experience Builder. Even if you do, the compatibility issues would be unpredictable. The Editor Component in particular probably won't work because the SDK will still need to be able to receive the edits.

The Map Component is actually one of the more difficult Components to work with because it needs Portal authentication and it has no inherit height. This little block of CSS or something like it is actually necessary for it to render. https://developers.arcgis.com/javascript/latest/get-started/#configure-css

I am currently writing a blog post about a hack I found. Look for more details later today, but the short version is if you put an html page in the src/runtime/assets folder. You have a clean sheet of HTML you can do whatever you want with. Maybe you could build around that concept. Although at that point, you may be better just using a separate webpage outside Experience Builder entirely.

Also, consider if the Web Editor could meet your needs.

Re: How to Wrap a Newer Widget/Component in an Older Framework

DavidSolari — Thu, 23 Apr 2026 21:15:49 GMT

After beating my head against this wall for a while, I consistently get runtime import errors when I try to load something as simple as the basemap toggle widget from another version of the SDK. I'll leave this open just in case some brave soul ever figures this out, but I'll stick to making simpler widgets and maybe work myself up to a dead-simple bulk editing widget that uses the bundled SDK. Thanks again for all your help Jeff!