How to add Clear Prints button in Print widget 4.13

ImtiyazPasha — Sun, 17 Nov 2019 06:50:13 GMT

I am trying to add "Clear or delete" button beside every print item and also one "Clear Prints" button at the end to clear all prints in Print widget 4.13 of below sample code, please help me.

Print widget | ArcGIS API for JavaScript 4.13

Re: How to add Clear Prints button in Print widget 4.13

RobertScheitlin__GISP — Sat, 11 Dec 2021 17:03:20 GMT

Imtiyaz,

Here is a sample for that:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>Print widget - 4.13</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <script src="https://js.arcgis.com/4.13/"></script>
    <script>
      require([
        "esri/views/MapView",
        "esri/widgets/Print",
        "esri/WebMap"
      ], function(MapView, Print, WebMap) {
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "d6d830a7184f4971b8a2f42cd774d9a7"
          }
        });

        var view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(function() {
          var print = new Print({
            view: view,
            // specify your own print service
            printServiceUrl:
              "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
          });

          // Add widget to the top right corner of the view
          view.ui.add(print, "top-right");
          
          print.viewModel.watch('state', function(state){
            if(state === 'ready'){
              setTimeout(() => {
                var button = document.createElement('button');
                button.setAttribute('ID', 'btnClearPrints');
                button.innerText = 'Clear Prints...';
                button.className = 'esri-button';
                button.addEventListener('click', clearPrints);
                var pc = document.getElementsByClassName('esri-print__container')[0]
                pc.appendChild(button);
              }, 500);
            }
          });

          function clearPrints(){
            var prints = document.getElementsByClassName('esri-print__exported-file')
            while (prints.length > 0) prints[0].remove();
          }
        });
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to add Clear Prints button in Print widget 4.13

ImtiyazPasha — Sun, 24 Nov 2019 11:30:47 GMT

Thanks a lot.

topic Re: How to add Clear Prints button in Print widget 4.13 in ArcGIS JavaScript Maps SDK Questions

How to add Clear Prints button in Print widget 4.13

Re: How to add Clear Prints button in Print widget 4.13

Re: How to add Clear Prints button in Print widget 4.13