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
Solved! Go to Solution.
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");
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?
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);
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.
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
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?
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");
That was it! Thank you Kelly
Hi Kelly,
Is there a way to implement this without Jquery but Dojo? I tried to use on.emit but didn't work.
Thanks.