ArcGIS JavaScript 4.x Add New Print Component inside Custom Container

dimesv — Fri, 08 Aug 2025 00:23:34 GMT

Hi guys,

According to the documentation Esri is migrating from widgets to components. This is further detailed here:

https://developers.arcgis.com/javascript/latest/components-transition-plan/

How do we move a widget to a component when the container is not inside arcgis-map? In the widgets approach, we could define what the container for the print widget would be and set the view.

Widgets

import Print from "@arcgis/core/widgets/Print"; const print = new Print({ container: "my-custom-print-container", view: view, printServiceUrl: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" });

In the component approach, we cannot specify what the container should be or set the view. This means that the only way to use the Print component is by placing it inside the map which is not where we want it to be.

<arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa"> <arcgis-print position="top-right"></arcgis-print> </arcgis-map>

Let's say I have an application built using Calcite Components, for example something like what is described below. How do I place the Print component inside the calcite-shell-panel? If I do the below, I will throw an error stating that An assigned view is required to print.

https://developers.arcgis.com/javascript/latest/tutorials/create-a-web-app-using-components/

<calcite-shell content-behind> <calcite-shell-panel slot="panel-start" display-mode="float-content"> // How do I put the print component here? <arcgis-print></arcgis-print> </calcite-shell-panel> <arcgis-map id="mapEl" item-id="210c5b77056846808c7a5ce93920be81"> <arcgis-zoom position="top-right"></arcgis-zoom> </arcgis-map> </calcite-shell>

Can these components be used outside the map component? If not, this is highly restrictive. Note that in the Portal for ArcGIS Map Viewer the Print and Layer List are outside the map component. We also have Side Panels outside the map in a similar manner.

Thanks,

Jose De Sousa

Re: ArcGIS JavaScript 4.x Add New Print Component inside Custom Container

JonathanDawe_BAS — Fri, 08 Aug 2025 11:33:41 GMT

You will just need to include a reference-element id to link the component to the id of your arcgis-map component. This documentation gives an example.

Re: ArcGIS JavaScript 4.x Add New Print Component inside Custom Container

Noah-Sager — Fri, 08 Aug 2025 16:22:33 GMT

Thanks for posting your question here @dimesv. I think @JonathanDawe_BAS gave the correct answer and linked to the doc. Here is a simple example using the print component:
https://codepen.io/noash/pen/LEpjbeq?editors=1000

Re: ArcGIS JavaScript 4.x Add New Print Component inside Custom Container

dimesv — Mon, 11 Aug 2025 04:10:45 GMT

Thank you Jonathan. That's exactly what i was looking for.

Cheers,

Jose

topic Re: ArcGIS JavaScript 4.x Add New Print Component inside Custom Container in ArcGIS JavaScript Maps SDK Questions

ArcGIS JavaScript 4.x Add New Print Component inside Custom Container

Re: ArcGIS JavaScript 4.x Add New Print Component inside Custom Container

Re: ArcGIS JavaScript 4.x Add New Print Component inside Custom Container

Re: ArcGIS JavaScript 4.x Add New Print Component inside Custom Container