Print widget javascript api4.4

Anonymous User — Sat, 11 Dec 2021 16:48:13 GMT

Hi all,

I am copying the value I entered in my search box into my title box in the print widget

However when I hit export, I get "untitled.pdf". Why isn't it showing the number as it is in the title?

<!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.4</title>
  <!-- Latest compiled and minified CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    #search {
        width: 400px;
        z-index: 1;
        position: absolute;
        left: 80px;
        top: 15px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://js.arcgis.com/4.4/"></script>
  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Print",
        "esri/tasks/QueryTask", "esri/tasks/support/Query",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/geometryEngine",
        "esri/Graphic",
        "esri/widgets/BasemapGallery",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/layers/MapImageLayer",

        "dojo/on",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/domReady!"
      ],
      function(
        Map, MapView, Print, QueryTask, Query, FeatureLayer, GraphicsLayer,
        geometryEngine,
        Graphic,
        BasemapGallery,
        SimpleFillSymbol,
        SimpleMarkerSymbol,
        MapImageLayer,
        on, dom, domConstruct
      ) {
        var map = new Map();
        //Layers to add
        
        
        var lakes = new FeatureLayer({
            url: "http://gem.edcgov.us/arcgis/rest/services/water/water2SQL_WAB/MapServer/1"
        });

        var rivers = new FeatureLayer({
            url: "http://gem.edcgov.us/arcgis/rest/services/water/water2SQL_WAB/MapServer/0"
        });

        var roads = new MapImageLayer({
            url: "http://gem.edcgov.us/arcgis/rest/services/transpt/Roads/MapServer"
        });

        var Parcels = new MapImageLayer({
    url: "http://gem.edcgov.us/arcgis/rest/services/Sheriff/Parcels/MapServer"
  });
  var image = new MapImageLayer({
    url: "http://gem.edcgov.us/arcgis/rest/services/surface/Aerials_2011_mercator_WAB/MapServer"
  });
  

  var contours = new FeatureLayer({
    url: "http://gem.edcgov.us/arcgis/rest/services/mixed/surface2SQL_WAB/MapServer/16"
  });
  
        
        
        $("#execute").click(function (){
            var value = $( "#searchtext" ).val();
            $(".esri-print__input-text").val(value);
         
            
           
            
            console.log(value);

            var queryparcelTask  = new QueryTask({url: "http://gem.edcgov.us/arcgis/rest/services/Sheriff/Parcels/MapServer/0"});
            var query = new Query();
            query.returnGeometry = true;
            query.where = "PRCL_ID = '" +   value + "'";
           queryparcelTask.execute(query).then(zoomparcel);
            
            
        });

        map.addMany([image, Parcels, lakes, rivers ]);

        var view = new MapView({
          container: "viewDiv",
          map: map,
          extent: { // autocasts as new Extent()
            "xmin": -121.11087086999999, "ymin": 38.517479534000074, "xmax": -119.95226375799996, "ymax": 39.068026806000034,
            "spatialReference": { "wkid": 4326 }
          }
        });

        // typical usage
        var basemapGallery = new BasemapGallery({
        view: view
        });

        view.then(function() {
          var print = new Print({
            view: view,
            // specify your own print service
            printServiceUrl: "http://gem.edcgov.us/arcgis/rest/services/Alex_test/ExportWebMapAlex6/GPServer/Export%20Web%20Map"
          });

          // Add widget to the top right corner of the view
          view.ui.add(print, "top-right");
          view.ui.add(basemapGallery, {
        position: "bottom-left"
      });
        });

        function zoomparcel(result){
              var AOI = result.features;
              view.goTo(AOI);
        }
      });
  </script>
</head>

<body class="calcite">
 <div class="row">
    <div class="col-lg-6">
    <div class="input-group" id="search">
      <input type="text" id="searchtext" class="form-control" placeholder="Enter APN">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button" id="execute"><i class="fa fa-search" aria-hidden="true"></i></button>
      </span>
    </div>
  </div>
</div>

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

Thanks,

Alex

Re: Print widget javascript api4.4

DavidColey — Wed, 02 Aug 2017 20:19:46 GMT

Hi Alex-

I get the correct file name at 4.4 when I physically perform a copy-past from my search input to my print widgets title box and then click print How are you trying to copy the value? From like the "select-result" event?

Re: Print widget javascript api4.4

Anonymous User — Sat, 11 Dec 2021 16:48:15 GMT

David,

Here is the way I am trying to copy value from the "searchtext" box (search by apn) and input text box esri javascrit print input. It does the copy but when I export, I get "untitled"

$("#execute").click(function (){
            var value = $( "#searchtext" ).val();
            $(".esri-print__input-text").val(value);‍‍‍

Re: Print widget javascript api4.4

DavidColey — Wed, 02 Aug 2017 20:51:48 GMT

It looks to me like since you are trying to pass in value from your search input into the print title input, to me that says you need to force some kind of refresh or set some kind of event listener on the print widget as it's clearly not recognizing that it's title input contains text. I'm not using jQuery so I can't really test that.

Re: Print widget javascript api4.4

Anonymous User — Wed, 02 Aug 2017 21:01:52 GMT

Thanks anyway. I am not quite sure a refresh is needed though as if you type it the title will work. It might be that there is some kind of keystroke listener in the JS API though. Not sure

Re: Print widget javascript api4.4

DavidColey — Wed, 02 Aug 2017 21:20:04 GMT

Yeah something like that, there's no property changes to watch for or events. I just found this in the .tsx for the widget:

exportedFilesTitle: "esri-print__export-title",‍

maybe this is the class you need?

Re: Print widget javascript api4.4

KellyHutchins — Fri, 04 Aug 2017 00:09:48 GMT

We'll look at providing an easier way to set the title in a future release but for now updating the code to the following should work:

$(".esri-print__input-text").val(value).trigger("input");‍

Re: Print widget javascript api4.4

Anonymous User — Fri, 04 Aug 2017 19:59:53 GMT

That was it! Thank you Kelly

Re: Print widget javascript api4.4

SangHyouk_Oum — Fri, 15 Sep 2017 21:50:31 GMT

Hi Kelly,

Is there a way to implement this without Jquery but Dojo? I tried to use on.emit but didn't work.

Thanks.

topic Re: Print widget javascript api4.4 in ArcGIS JavaScript Maps SDK Questions

Print widget javascript api4.4

Re: Print widget javascript api4.4

Re: Print widget javascript api4.4

Re: Print widget javascript api4.4

Re: Print widget javascript api4.4

Re: Print widget javascript api4.4

Re: Print widget javascript api4.4

Re: Print widget javascript api4.4

Re: Print widget javascript api4.4