API 4.32 with web components, combining 2 portals issue.

[Wimvan_Dijk]

Busy with the transformation to API 4.32 which requires a lot of code changes and headache. I managed to get almost everything working, except for one issue. I have 2 webMaps, one from portal 1, and one from another portal, portal 2. The user sees  2 representations of the webMaps by a thumbnail-button of the map. Depending on which thumbnail the user selects, the correct initialisation is done and the portal is set. So:

Button 1 -> portal 1 gets initialised and the mapView is displayed

Button 2 -> portal 2 gets iniitalised and the mapView is displayed

The web map is dynamically created in JavaScript by creating a <arcgis-map> element. The portal is set: esriConfig.portalUrl = <portalurl>;

 It works for the first selection, mapMap from portal 1 or it works for the first selection, webMap from portal 2.

The issue:

The user must be able to change the web map by selecting the other button. I remove the <arcgis-map> element. and create everything from scratch dynamically in Javascript, but this second time I get this error:  

message: "Failed to load portal item"

name: "webmap:load-portal-item"

AI gives a hint why this is not working: 

Even when you set esriConfig.portalUrl before creating the <arcgis-map> element, the custom element internally uses the default portal unless it's fully re-imported or instantiated in a new JavaScript execution context. The component's internal API initialization only happens once per page. So once it's loaded (and bound to Portal A), changing esriConfig.portalUrl afterward doesn't affect it anymore.

This is a limitation of the ArcGIS Maps SDK Web Components (<arcgis-map>) — not the core ArcGIS JS API.

MY QUESTIONS:

Is this true?  Is there a way to work around this?

[ReneRubalcava]

By default, when you use item ids on the components, we can only support a single portal. However, if you need to support multiple portals in your app, you can omit the item-id attribute and assign the element.map property with your own webmap and portal url. This will allow you to work with maps from multiple portals.

[Wimvan_Dijk]

Thank you Rene, appreciated! I think this throws me back to a previous issue I had: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/how-to-combine-the-new-component-...

By assigning my own webmap and portal url, I loose the new Widget web components functionality, and I am stuck with deprecated Widgets. I figured out you need to assign a <arcgis-map> with an item-id attribute in order to have the web components widgets working. Does this mean I cannot support multiple portals and Widgets in 4.32? This would be a setback in comparison to API 4.31. Or is there way to get the Widget web components working in combination with my own webmap and portal url?

[ReneRubalcava]

You can listen to the "arcgisViewReadyChange" event of the map/scene components and when that event fires, you can create Widgets using the readonly `element.view` of the components. The `view` property provided for users migrating apps from widgets to components.

https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#arcgisViewRead...

[Wimvan_Dijk]

Thank you Rene. I figured out myself that I need to listen to the arcgisViewReadyChange event. But when I initialise an <arcgis-map> element with the standard 'classic' webMap and view initialisation, this event does not fire. It only fires when I assign an "item-id" with: 

mapDiv.setAttribute("item-id", id); 

The second issue is that I cannot add, for example, The BasemapGallery web component using this code:

basemapGallery = document.createElement('arcgis-basemap-gallery'); 
basemapGallery.position = "bottom-right";
mapDiv.appendChild(basemapGallery); 

This code only works if I assign the "item-id".

If I go completely back to classic: assign webMap and view initialisation and add Widgets :

basemapGallery = new BasemapGallery({ 
view: view 
}); 
view.ui.add(basemapGallery,"top-right");

Then I have the Widget but it is deprecated.

So I am still in the dark how this stuff is supposed to work, that I can use classic' webMap and view initialisation on a <arcgis-map> or <div>element, and use the classic Widget web components, without deprecated issues, or use the new web component Widgets. I do not think there is a solution in using deprecated stuff.

[ReneRubalcava]

That arcgisViewReadyChange event will only fire after you provide a map, so you need to wait for the events of each one to finish and then use it. 

Here is a demo

https://codepen.io/odoe/pen/LEEmMoG?editors=1000

[Wimvan_Dijk]

Thank you Rene for all the help,. but the issue is not solved. I took the html file you provided and put it outside codepen. Just a regular server. Your code has an HTML error in line 12 (for those who struggle with the same issue and use this as an example). Line 12 should be removed (extra </script> tag). When this example is loaded, the map and Basemapgallery displays, so fine so good. Butthe Inspector from the browser shows a deprecated warning:

Again, I think it is bad practise to start rebuilding all our pages (hundreds) with deprecated code. So I am back with the original question: How can I use the new <arcgis-map> component with classic Widget initialisation and combining 2 portals, without deprecated warnings? Or is it just impossible?

[ReneRubalcava]

There is no way to remove the depreciation warning if that's what you're asking. You will need to eventually migrate to components, as widgets will go away in a future release. 

[Wimvan_Dijk]

Hello Rene. No I am not asking that. I need an honest answer. I think ESRI developers have not the slightest idea how many webpage we serve in our company with an ArcGIS Javascript functionality build in. They don't realise what impact this deprecation means to our company. Without a solution it appears we are loosing functionality and flexibility migrating to components. The migration will cost hundreds of hours in our company and we end up with less flexibility. Our users will experience a downgrade instead of improved functionality. I want to avoid that at all costs. It appears the solutions you bring up, which I truly appreciate, switch between going to components, and on the other hand go back to classic widgets but there is no solution that we can achieve all functionality in 4.32 as with the 4.31 API. I am willing to spend a lot of time for a solution, but if there is no solution than I rather know, because it is a waste of time. Then we have to deal with the shortcomings of this new technology and inform our users.