Select to view content in your preferred language

Print widget javascript api4.4

1850
8
Jump to solution
08-02-2017 10:30 AM
by Anonymous User
Not applicable

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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

8 Replies
DavidColey
Frequent Contributor

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?

0 Kudos
by Anonymous User
Not applicable

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);
0 Kudos
DavidColey
Frequent Contributor

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.

0 Kudos
by Anonymous User
Not applicable

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

0 Kudos
DavidColey
Frequent Contributor

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?

0 Kudos
KellyHutchins
Esri Frequent Contributor

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");
by Anonymous User
Not applicable

That was it! Thank you Kelly

0 Kudos
SangHyouk_Oum
New Contributor III

Hi Kelly, 

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

Thanks.

0 Kudos