topic How do I get the selected value of combo box and a text box for my layout and format in print settings? in ArcGIS JavaScript Maps SDK Questions

How do I get the selected value of combo box and a text box for my layout and format in print settings?

ChrisSergent — Tue, 25 Nov 2014 21:28:38 GMT

I have a working print task, but I want the user to be able to select the layout and format independently. How do I get the values of the title, layout and format before the user selects print?

Here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Print a Map</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

width:100%;

position:absolute;

z-index:0;

}

/* Printer CSS Begin */

h3 { margin: 0 0 5px 0;

border-bottom: 1px solid #444;

padding: 0 0 5px 0;

text-align: center;

}

.shadow

{

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px #888;

box-shadow: 0 0 5px #888;

}

#feedback

{

background: #fff;

border: 2px solid #666;

border-radius: 5px;

bottom: 20px;

color: #666;

font-family: arial;

height: auto;

left: 20px;

margin: 5px;

padding: 10px;

position: absolute;

width: 300px;

z-index: 40;

/*visibility:hidden; */

}

#feedback a

{

border-bottom: 1px solid #888;

color: #666;

text-decoration: none;

}

#feedback a:hover, #feedback a:active, #feedback a:visited {

border: none;

color: #666;

text-decoration: none;

}

#note

{

padding: 0 0 10px 0;

}

#info, #information

{

padding: 10px 0 0 0;

}

/* Printer CSS End */

#showTools

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:visible;

}

#hideTools

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

#printer

{

height:20px;

width:20px;

position:absolute;

top:240px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

#printButton

{

visibility:visible;

}

</style>

var app = {};

require(["esri/map", "esri/config",

"esri/dijit/Print",

"esri/geometry/Extent",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/tasks/GeometryService",

"esri/tasks/PrintTemplate",

"dojo/_base/array",

"dojo/dom",

"dojo/on",

"dojo/parser",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"], function (Map, esriConfig, Print, Extent,

ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,

FeatureLayer, GeometryService, PrintTemplate, arrayUtils, dom, on, parser

) {

parser.parse();

/* The proxy comes before all references to web services */

/* Files required for security are proxy.config, web.config and proxy.ashx

- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

(Roles are not required)

The proxy section is defined on the ESRI sample. I have included it as

part of the documentation reads that the measuring will not work.

I thought that might be important.

// Proxy Definition Begin

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

//If this null or not available the project and lengths operation will not work.

// Otherwise it will do a http post to the proxy.

esriConfig.defaults.io.proxyUrl = "proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = false;

// Proxy Definition End

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

var map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

// add point feature layer

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");

map.addLayer(pointFeatureLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// begin print widget

app.printUrl = "http://maps.decaturil.gov/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

createPrintDijit(document.getElementById("printTitle").value);

function createPrintDijit(printTitle) {

var layoutTemplate, templateNames, mapOnlyIndex, templates;

// create an array of objects that will be used to create print templates

var layouts = [{

//name: "Letter ANSI A Landscape",

label: "Landscape (PDF)",

//format: "pdf",

options: {

legendLayers: [], // empty array means no legend

scalebarUnit: "Miles",

titleText: printTitle

}

}];

// create print templates

var templates = arrayUtils.map(layouts, function (lo) {

var t = new PrintTemplate();

t.layout = document.getElementById("printLayoutId").value;

t.label = lo.label;

t.format = document.getElementById("printFormatId").value;

t.layoutOptions = lo.options;

return t;

});

app.printer = new Print({

map: map,

templates: templates,

url: app.printUrl

}, dom.byId("print_button"));

app.printer.startup();

}

// end of print widget

// Hides print widget

on(dom.byId("closePrint"), "click", function () {

document.getElementById("feedback").style.visibility = 'hidden';

});

// Shows tools

on(dom.byId("showTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'hidden';

document.getElementById("hideToolsButton").style.visibility = 'visible';

document.getElementById("printer").style.visibility = 'visible';

});

// Hide tools

on(dom.byId("hideTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'visible';

document.getElementById("hideToolsButton").style.visibility = 'hidden';

document.getElementById("printer").style.visibility = 'hidden';

document.getElementById("feedback").style.visibility = 'hidden';

});

// Show print widget

on(dom.byId("showPrintWidget"), "click", function () {

document.getElementById("feedback").style.visibility = 'visible';

});

}

);

</script>

</head>

</div>

</div>

</div>

<h3>

City of Decatur Print Service

</h3>

Note: Select the format that you would like to print your map from the dropdowns below.

</div>

<label id="lblPrintTitle">Enter a print title</label><br />

<option value="A3 Landscape" selected>A3 Landscape</option>

<option value="A3 Portrait">A3 Portrait</option>

<option value="A4 Landscape">A4 Landscape</option>

<option value="A4 Portrait">A4 Portrait</option>

<option value="Letter ANSI A Landscape">Letter ANSI A Landscape</option>

<option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option>

<option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option>

<option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option>

</select>

</select>

This print service is to be used for City business only.

</div>

</form>

</div>

</body>

</html>

Re: How do I get the selected value of combo box and a text box for my layout and format in print settings?

ReneRubalcava — Wed, 26 Nov 2014 16:04:50 GMT

Normally you can just provide the templates and everything to the Print dijit and it handles that for you like this Print templates with esri.request | ArcGIS API for JavaScript . I think to get more fine-grained control you have 2 choices.

Capture the request using esri/request#setRequestPreCallback and edit the parameters.
Use the PrintTask and send request manually. I have an older example doing that in this widget esri-print-widget/printdialog.js at master · odoe/esri-print-widget · GitHub .

As far as I can see the Print dijit doesn't have any hooks or events you can tie into to pass those parameters yourself after it has been created. If there is, it would be cool to see.

Re: How do I get the selected value of combo box and a text box for my layout and format in print settings?

ChrisSergent — Wed, 26 Nov 2014 17:48:04 GMT

I got it to work. There is one small glitch; it duplicates the button with each printout:

<!DOCTYPE html>

<html>

<head>

<title>Print a Map</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

width:100%;

position:absolute;

z-index:0;

}

/* Printer CSS Begin */

h3 { margin: 0 0 5px 0;

border-bottom: 1px solid #444;

padding: 0 0 5px 0;

text-align: center;

}

.shadow

{

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px #888;

box-shadow: 0 0 5px #888;

}

#feedback

{

background: #fff;

border: 2px solid #666;

border-radius: 5px;

bottom: 20px;

color: #666;

font-family: arial;

height: auto;

left: 20px;

margin: 5px;

padding: 10px;

position: absolute;

width: 300px;

z-index: 40;

visibility:hidden;

}

#feedback a

{

border-bottom: 1px solid #888;

color: #666;

text-decoration: none;

}

#feedback a:hover, #feedback a:active, #feedback a:visited {

border: none;

color: #666;

text-decoration: none;

}

#note

{

padding: 0 0 10px 0;

}

#info, #information

{

padding: 10px 0 0 0;

}

/* Printer CSS End */

#showTools

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:visible;

}

#hideTools

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

#printer

{

height:20px;

width:20px;

position:absolute;

top:240px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

</style>

var app = {};

require(["esri/map", "esri/config",

"esri/dijit/Print",

"esri/geometry/Extent",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/tasks/GeometryService",

"esri/tasks/PrintTemplate",

"dojo/_base/array",

"dojo/dom",

"dojo/on",

"dojo/parser",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"], function (Map, esriConfig, Print, Extent,

ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,

FeatureLayer, GeometryService, PrintTemplate, arrayUtils, dom, on, parser

) {

parser.parse();

/* The proxy comes before all references to web services */

/* Files required for security are proxy.config, web.config and proxy.ashx

- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

(Roles are not required)

The proxy section is defined on the ESRI sample. I have included it as

part of the documentation reads that the measuring will not work.

I thought that might be important.

// Proxy Definition Begin

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

//If this null or not available the project and lengths operation will not work.

// Otherwise it will do a http post to the proxy.

esriConfig.defaults.io.proxyUrl = "proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = false;

// Proxy Definition End

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

var map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

// add point feature layer

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");

map.addLayer(pointFeatureLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// begin print widget

app.printUrl = "http://maps.decaturil.gov/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

function createPrintDijit(printTitle) {

var layoutTemplate, templateNames, mapOnlyIndex, templates;

// create an array of objects that will be used to create print templates

var layouts = [{

//name: "Letter ANSI A Landscape",

label: "Landscape (PDF)",

//format: "pdf",

options: {

legendLayers: [], // empty array means no legend

scalebarUnit: "Miles",

titleText: printTitle

}

}];

// create print templates

var templates = arrayUtils.map(layouts, function (lo) {

var t = new PrintTemplate();

t.layout = document.getElementById("printLayoutId").value;

t.label = lo.label;

t.format = document.getElementById("printFormatId").value;

t.layoutOptions = lo.options;

return t;

});

app.printer = new Print({

map: map,

templates: templates,

url: app.printUrl

}, dom.byId("print_button"));

}

// end of print widget

on(dom.byId("btnPrintReady"), "click", function () {

createPrintDijit(document.getElementById("printTitle").value);

app.printer.startup();

});

// Hides print button after printout complete

// app.printer.on('print-complete',function(evt){

// document.getElementById("print_button").style.visibility = 'hidden';

// });

// Hides print widget

on(dom.byId("closePrint"), "click", function () {

document.getElementById("feedback").style.visibility = 'hidden';

});

// Shows tools

on(dom.byId("showTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'hidden';

document.getElementById("hideToolsButton").style.visibility = 'visible';

document.getElementById("printer").style.visibility = 'visible';

});

// Hide tools

on(dom.byId("hideTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'visible';

document.getElementById("hideToolsButton").style.visibility = 'hidden';

document.getElementById("printer").style.visibility = 'hidden';

document.getElementById("feedback").style.visibility = 'hidden';

});

// Show print widget

on(dom.byId("showPrintWidget"), "click", function () {

document.getElementById("feedback").style.visibility = 'visible';

});

}

);

</script>

</head>

</div>

</div>

</div>

<h3>

City of Decatur Print Service

</h3>

Note: Select the format that you would like to print your map from the dropdowns below.

</div>

<label id="lblPrintTitle">Enter a print title</label><br />

<option value="A3 Landscape" selected>A3 Landscape</option>

<option value="A3 Portrait">A3 Portrait</option>

<option value="A4 Landscape">A4 Landscape</option>

<option value="A4 Portrait">A4 Portrait</option>

<option value="Letter ANSI A Landscape">Letter ANSI A Landscape</option>

<option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option>

<option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option>

<option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option>

</select>

</select>

<button type="button" id="btnPrintReady">Print Ready</button>

This print service is to be used for City business only.

</div>

</form>

</div>

</body>

</html>