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