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

[dimesv]

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

[JonathanDawe_BAS · Accepted solution]

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. 

[dimesv]

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

Cheers,

Jose

[Noah-Sager]

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