Print widget javascript api4.4

Anonymous User · ‎08-02-2017

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

KellyHutchins · ‎08-03-2017

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");‍

View solution in original post

DavidColey · ‎08-02-2017

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?

Anonymous User · ‎08-02-2017

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);‍‍‍

DavidColey · ‎08-02-2017

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.

Anonymous User · ‎08-02-2017

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

DavidColey · ‎08-02-2017

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?

KellyHutchins · ‎08-03-2017

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");‍

Anonymous User · ‎08-04-2017

That was it! Thank you Kelly

SangHyouk_Oum · ‎09-15-2017

Hi Kelly,

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

Thanks.