topic Re: ChangeWebMap Widget in Experience Builder Custom Widgets

ChangeWebMap Widget

LanceCole — Fri, 21 Mar 2025 15:43:31 GMT

I am looking for some direction on creating a custom widget in Experience Builder. I have worked with Application Builder for years but never ventured into the ExB arena. About 6-7 years ago I created a Load Map widget based on the City of Garland, Texas ChangeWebMap Widget. I have kept the widget updated; however, now must move on to ExB to continue its use.

I believe I can start with:

ESRI List or Fixed Panel widget
Add code to query the enterprise portal for a list of Maps, map IDs, name, etc. from a particular group
Use the data to dynamically populate the list or add cards to the fixed panel
Add code to change the application/Map webmap ID and refresh on click of a list item or card

I am able to accomplish this using the application ID and webmap ID as URL parameters but I am struggling find how to programmatically achieve this in ExB.

Can anyone point me to where in ExB and/or examples to:

query a portal for the maps in a designated group
dynamical add items to a list or fixed panel
change or set the wedmap ID on on the app and refresh

If we only had a few maps they could just be added to the app map references and toggle them from the application using available widgets. However, we currently have 10-15 maps we want to have available and this number is going increase. We also have periodic maps that need to be quickly added and removed.

Any help would be appreciated. I feel as though I am facing a vertical learning curve at the moment as ExB custom widgets are a totally different beast.

Re: ChangeWebMap Widget

JeffreyThompson2 — Fri, 21 Mar 2025 15:48:43 GMT

https://developers.arcgis.com/experience-builder/storybook/?path=/docs/components-jimu-ui-basic-item-selector-itemselector--docs

The Item Selector in the Storybook might get you most of the way done.

Re: ChangeWebMap Widget

LanceCole — Fri, 21 Mar 2025 17:58:46 GMT

@JeffreyThompson2 ,

Thanks for the quick reply and that does look promising for dynamically populating a list of maps from a group. Still working on where the loaded map would be changed and how to refresh.

We can generate a URL with the application and webmap IDs and use it as a link in the Item Selector cards, but I really would like to do that within the widget to hide the ID information. The URLs are not pretty:

https://my.gis.com/portal/apps/experiencebuilder/experience/?

id=fc4f1eb6a36342c9b0264a02109024a7&

webmap=1cf42d227f4d34a08cacfed55918f966

The first part of the URL can be cleaned up using a proxy but the rest would need to added in the request header by the widget.

Re: ChangeWebMap Widget

MattiasEkström — Wed, 26 Mar 2025 11:13:18 GMT

@LanceCole
I've been thinking about this a bit too. In our current WAB solution we have different applications for the different web maps and I created a simple widget to switch between them and keep the current map scope. In our upcoming ExB solution I would prefer to have just one application to maintain and be able to switch web maps, but I've just started looking at the dev edition and have no idea yet.

But I've worked a bit with OOTB ExB and one of the big differences is that you can have multiple web maps and you have to configure which map to use in map centric widgets. I'm afraid this could be a problem, and all map centric widgets break when you change the web map. Do you have any experience with this so far?

Re: ChangeWebMap Widget

Vara_PrasadM_S — Wed, 26 Mar 2025 13:52:27 GMT

Hi,

I am also trying for similar requirement. I tried below approach and could able to create a new instance for JimuMapView with new web map id. However, the new instance is not sent to all widgets and app. I am unable to identify how can we do this. I used 'getAppStore().dispatch(appActions.jimuMapViewUpdated' but it did not work. Any guidance would be very much helpful.

Re: ChangeWebMap Widget

Vara_PrasadM_S — Sun, 30 Mar 2025 17:39:51 GMT

Hi @JeffreyThompson2 , Could you please throw some light on this. How can I make my code work?

Thanks in advance.