Create Friendly Labels for ArcGIS Print Service Options with JS API

Question

How can I change the print options received from an ArcGIS print service to be more friendly and descriptive using the Esri sample print service?

Answer 1

Example uses the sample print service from arcgisonline. Note the find and replace on the layoutTemplate[0].choiceList; I added the dimensions of the templates from wikipedia, in particular for A4 / A3 paper sizes that are international/european so that it would be more obvious what they refer to. Apologize, I'm switching back and forth between dojo and jquery because I use some jquery plugins elsewhere. http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task

<!-- html for print dijit -->
<div id='divDefaultPrint' style='text-align: center;'></div>
dojo.require("esri.dijit.Print");
dojo.require("esri.tasks.PrintTask");
function start() {
 // get print templates from the export web map task
 var printInfo = esri.request({
 "url": "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
 "content": { "f": "json" }
 });
 printInfo.then(handlePrintInfo, handleError);
}
function end() {
 printDijit.destroy(); // this destroys the divToAttachTo
 $parentDiv.append("<div id='divDefaultPrint' style='text-align:center;'></div>");
}
function handlePrintInfo(resp) {
 var layoutTemplate, templateLayouts, templateLabels, mapOnlyIndex, templates;
 layoutTemplate = dojo.filter(resp.parameters, function (param, idx) {
 return param.name === "Layout_Template";
 });
 templateLayouts = layoutTemplate[0].choiceList;
 templateLabels = dojo.clone(layoutTemplate[0].choiceList);
 //create two arrays with 1. layout labels to find, and 2. the replace text. Use corresponding index values.
 var f = ["A3 Landscape", "A3 Portrait", "A4 Landscape", "A4 Portrait", "Letter ANSI A Landscape", "Letter ANSI A Portrait", "Tabloid ANSI B Landscape", "Tabloid ANSI B Portrait", "MAP_ONLY"];
 var r = ["A3 Landscape - 16.54 x 11.69 (in)", "A3 Portrait - 11.69 x 16.54 (in)", "A4 Landscape - 11.7 x 8.3 (in)", "A4 Portrait - 8.3 x 11.7 (in)", "ANSI A Landscape 11 x 8.5 (in)", "ANSI A Portrait - 8.5 x 11 (in)", "ANSI B Landscape 17 x 11 (in)", "ANSI B Portrait 11 x 17 (in)", "Map Image (No Text) 8.3 x 11.46 (in)"];
 //create an array of regular expressions from find array
 var re = $.map(f, function (v, i) {
 return new RegExp('\\b' + v + '\\b', 'g');
 });
 //find and replace text
 $.each(templateLabels, function (i, val) {
 $.each(f, function (j, v) {
 val = val.replace(re[j], r[j]);
 });
 templateLabels[i] = val;
 });
 // create a print template for each choice
 templates = dojo.map(templateLayouts, function (ch, index) {
 var plate = new esri.tasks.PrintTemplate();
 plate.layout = ch;
 plate.label = templateLabels[index];
 plate.format = "PDF";
 plate.layoutOptions = {
 "authorText": "ORGANIZATION_NAME",
 "copyrightText": "COPYRIGHT",
 "legendLayers": [],
 "titleText": "APP_NAME",
 "scalebarUnit": "Miles"
 };
 return plate;
 });
 // create the print dijit with the templates
 printDijit = new esri.dijit.Print({
 map: vgis.app.map(),
 templates: templates,
 url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
 }, dojo.byId("divDefaultPrint"));
 printDijit.startup();
}
function handleError(err) {
 console.log("Printing failed: ", err);
}

Answer 2

You can set your custom values in the onPrintStart event (http://developers.arcgis.com/en/javascript/jsapi/print.html#onPrintStart)

for example:

 dojo.connect(printer, 'onPrintStart', function () {
 templates[0].layoutOptions.titleText = textBox.value;
 });

• awesomo: Yes, that would be another prior event during which you could change the values.