printTemplate - customTextElememts

[TracySchloss]

I have created a custom print service, but I'm a little confused on the syntax for adding custom text elements. I added two additional pieces of text and gave them element names of subTitleText and descripText.

I added these into my printTemplate definition.  I also need to change the values dynamically.  From other thread, I got the syntax for changing the title by doing a dojo.connect on the printer's "onPrintStart" event. I've attempted to add a few more lines to populate the custom text elements in a similar way. 

I have print dijit in a floating pane, but I think that part is OK.  I could generate output when I was using the original out of the box webmaptemplates. 

    //functions for printing     function openPrint(){         var layoutTemplate, templateNames, mapOnlyIndex;         var fp = dijit.byId('floater_print');         if ((fp.style == "visibility: hidden;") || (fp.style = "VISIBILITY:hidden;")) {             fp.style.visibility = "visible";             fp.show();         }     }     function setupPrinting(subHeaderTitle){      //   var layoutTemplate, templateNames, mapOnlyIndex;                  // create an array of objects that will be used to create print templates         // create an array of objects that will be used to create print templates         var layouts = [{             "name": "customExport_FMDC_Landscape",             "label": "Landscape - PDF",             "format": "pdf",             "options": {                 "legendLayers": [], // empty array means no legend                 "scalebarUnit": "Miles",                 "titleText": subHeaderTitle,                 "customTextElements": {                     "descripText": fullLegalString,                      "subTitleText": subHeaderTitle }                        }         }                ,{             "name": "customExport_FMDC_Landscape",             "label": "Portrait do not use",             "format": "pdf",             "options": {                 "legendLayers": [], // empty array means no legend                 "scalebarUnit": "Miles",                 "titleText": subHeaderTitle,                 "customTextElements": {                     "descripText": fullLegalString,                      "subTitleText": subHeaderTitle }                        }          }         ];                  // create the print templates, could also use dojo.map         dojo.forEach(layouts, function(lo){             var t = new esri.tasks.PrintTemplate();             t.layout = lo.name;             t.label = lo.label;             t.format = lo.format;             t.layoutOptions = lo.options;             templates.push(t);         });                  var printer = new esri.dijit.Print({             "map": map,             "templates": templates,             url: printUrl         }, dojo.byId("PrintDiv2"));                  printer.startup();         dojo.connect(printer, "onPrintStart", function(){             var printTitle = dojo.byId("txtTitle").value;             for (var i = 0; i < templates.length; i++) {                 this.templates.layoutOptions.titleText = printTitle;                 this.templates.layoutOptions.customTextElements.descripText = fullLegalString;                 this.templates.layoutOptions.customTextElements.subTitleText = print_subTitle;                // this.templates.layoutOptions.customTextElements[0] = fullLegalString;               //  this.templates.layoutOptions.subTitleText = print_subTitle;                 console.log("onPrintStart: fullLegalString = " + fullLegalString + "print_subTitle = " + print_subTitle);             }          });     }

When I run this, I get one of those syntax errors that you can't ever figure out what it goes with.  I can see the POST call in Firebug.  If I copy the entire JSON statement and paste it into the print service rest endpoint, it does generate output.  But it doesn't have my custom elements.  I'm wondering if it's because I'm not using the right syntax when I'm defining these within my layoutOptions.

[TracySchloss]

Just an update, but no answer.  I can't believe no one else is struggling with these custom layouts! I did have a few issues in how I was formatting my custom text elements, which I think I've gotten straightened out. 

I have gotten so far as to see that the request is getting made to the print service.  If I take the webmap as JSON from the POST and put it in the the rest endpoint, I get a properly rendered page.  I was excited to see it would work there, but calling it from within in my code, I immediately get a 'Syntax error'.  It seems to have something to do with the dojo.deferred.  I assume this is because these are asynchronous requests? 

Here's my printing functions.

    //functions for printing
    function openPrint(){
        var layoutTemplate, templateNames, mapOnlyIndex;
        var fp = dijit.byId('floater_print');
        if ((fp.style == "visibility: hidden;") || (fp.style = "VISIBILITY:hidden;")) {
            fp.style.visibility = "visible";
            fp.show();
        }
    }
    function setupPrinting(subHeaderTitle){     
        //  array of objects that will be used to create print templates
        var layouts = [{
            "name": "FMDC_Landscape",
            "label": "Landscape - PDF",
            "format": "PDF",
            "options": {
                "legendLayers": [], // empty array means no legend
                "scalebarUnit": "Miles",
                "titleText": subHeaderTitle,
                "customTextElements": [
                   {"legalDescriptionText": fullLegalString}, 
                    {"subTitleText": print_subTitle} ]           
            }
        }       
        ,{
            "name": "FMDC_Landscape",
            "label": "Portrait do not use",
            "format": "PDF",
            "options": {
                "legendLayers": [], // empty array means no legend
                "scalebarUnit": "Miles",
                "titleText": subHeaderTitle,
                "customTextElements":[
                    {"legalDescriptionText": fullLegalString}, 
                    {"subTitleText": print_subTitle} ]          
            }
        }
        ];
        
        // create the print templates, could also use dojo.map
        dojo.forEach(layouts, function(lo){
            var t = new esri.tasks.PrintTemplate();
            t.layout = lo.name;
            t.label = lo.label;
            t.format = lo.format;
            t.layoutOptions = lo.options;
            templates.push(t);
        });
        
        var printer = new esri.dijit.Print({
            "map": map,
            "templates": templates,
            url: printUrl
        }, dojo.byId("PrintDiv2"));
        
        printer.startup();
        dojo.connect(printer, "onPrintStart", function(){
            var printTitle = dojo.byId("txtTitle").value;
            for (var i = 0; i < templates.length; i++) {
               this.templates.layoutOptions.titleText = printTitle;
             this.templates.layoutOptions.customTextElements =[
                    {"legalDescriptionText": fullLegalString}, 
                    {"subTitleText": print_subTitle} ];
                console.log("onPrintStart: fullLegalString = " + fullLegalString + "print_subTitle = " + print_subTitle);
            } 
        });
    }

Here is my webMap as JSON, which works if I use it directly in my print service endpoint

{"mapOptions":{"showAttribution":true,"extent":{"xmin":-10390744.997201268,"ymin":4458069.554368013,"xmax":-10388884.233293902,"ymax":4459572.019705283,"spatialReference":{"wkid":102100}},"spatialReference":{"wkid":102100},"scale":9027.977410996222},"operationalLayers":[{"id":"basic","title":"basic","opacity":1,"minScale":591657527.591555,"maxScale":9027.977411,"url":"http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"},{"id":"countyLayer","title":"countyLayer","opacity":1,"minScale":0,"maxScale":0,"url":"https://ogitest.oa.mo.gov/ArcGIS/rest/services/BaseMap/county_simple/MapServer","visibleLayers":null,"layers":[]},{"id":"status_stateOwnParcelLayer","title":"status_stateOwnParcelLayer","opacity":1,"minScale":0,"maxScale":0,"url":"https://ogitest.oa.mo.gov/ArcGIS/rest/services/StateOwnedParcels/MapServer","visibleLayers":null,"layers":[]},{"id":"allParcelLayer","title":"allParcelLayer","opacity":1,"minScale":0,"maxScale":0,"url":"https://ogitest.oa.mo.gov/ArcGIS/rest/services/allParcels/MapServer","visibleLayers":null,"layers":[]},{"id":"stateOwnFeaturelayer","minScale":1155581,"maxScale":0,"featureCollection":{"layers":[{"layerDefinition":{"name":"State Owned Property","geometryType":"esriGeometryPolygon","drawingInfo":{"renderer":{"type":"simple","label":"","description":"","symbol":{"color":[255,211,127,255],"outline":{"color":[110,110,110,255],"width":0.4,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}},"fields":[{"name":"OBJECTID","type":"esriFieldTypeOID","alias":"OBJECTID"},{"name":"PID","type":"esriFieldTypeString","alias":"PID","length":50},{"name":"NAME1","type":"esriFieldTypeString","alias":"NAME1","length":75},{"name":"NAME2","type":"esriFieldTypeString","alias":"NAME2","length":50},{"name":"NAME3","type":"esriFieldTypeString","alias":"NAME3","length":50},{"name":"ADDRESS1","type":"esriFieldTypeString","alias":"ADDRESS1","length":50},{"name":"ADDRESS2","type":"esriFieldTypeString","alias":"ADDRESS2","length":50},{"name":"CITY","type":"esriFieldTypeString","alias":"CITY","length":50},{"name":"STATE","type":"esriFieldTypeString","alias":"STATE","length":50},{"name":"ZIP","type":"esriFieldTypeString","alias":"ZIP","length":50},{"name":"SITEADDRESS","type":"esriFieldTypeString","alias":"SITEADDRESS","length":50},{"name":"BUILDING_NAME","type":"esriFieldTypeString","alias":"BUILDING_NAME","length":50},{"name":"LEGAL1","type":"esriFieldTypeString","alias":"LEGAL1","length":254},{"name":"LEGAL2","type":"esriFieldTypeString","alias":"LEGAL2","length":254},{"name":"LEGAL3","type":"esriFieldTypeString","alias":"LEGAL3","length":254},{"name":"LEGAL4","type":"esriFieldTypeString","alias":"LEGAL4","length":254},{"name":"Shape","type":"esriFieldTypeGeometry","alias":"Shape"}]},"featureSet":{"geometryType":"esriGeometryPolygon","features":[{"geometry":{"rings":[[[-10389810.460295089,4458839.911896453],[-10389811.133267196,4458797.473784225],[-10389818.770200083,4458797.587831773],[-10389818.034399852,4458843.986241523],[-10389810.460295089,4458839.911896453]]],"spatialReference":{"wkid":102100}},"attributes":{"OBJECTID":466,"PID":"881809406098","NAME1":"MO HIGHWAY & TRANSPORTATION COMMISSION","NAME2":"","NAME3":"","ADDRESS1":"-----","ADDRESS2":"","CITY":"XXXXX","STATE":"XX","ZIP":"00000","SITEADDRESS":"W MAPLEWOOD ST","BUILDING_NAME":"","LEGAL1":"WILD BRIAR LOTS 31 & 32 (EX BEG SE COR LOT 32 W 146.94 FT N 114.64 FT SELY163.28 FT S TO BEG)","LEGAL2":"","LEGAL3":"","LEGAL4":"","COUNTY":"Greene","SECTION":"","TOWNSHIP":"","RANGE":"","ACRES":0,"DBACRES":0,"GIS_ACRES":0.0531387,"BOOK1":"","PAGE1":"","DATE1":"","BOOK2":"","PAGE2":"","DATE2":"","BOOK3":"","PAGE3":"","DATE3":""}}]}}]}},{"id":"mapDiv_graphics","minScale":0,"maxScale":0,"featureCollection":{"layers":[{"layerDefinition":{"name":"polygonLayer","geometryType":"esriGeometryPolygon"},"featureSet":{"geometryType":"esriGeometryPolygon","features":[{"geometry":{"rings":[[[-10389810.460295089,4458839.911896453],[-10389818.770200083,4458797.587831773],[-10389818.034399852,4458843.986241523],[-10389810.460295089,4458839.911896453]]],"spatialReference":{"wkid":102100}},"symbol":{"color":[33,237,254,13],"outline":{"color":[33,237,254,255],"width":2.25,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}]}}]}}],"exportOptions":{"outputSize":[800,1100],"dpi":96},"layoutOptions":{"titleText":"doremi","customTextElements":[{"legalDescriptionText":"WILD BRIAR LOTS 31 & 32 (EX BEG SE COR LOT 32 W 146.94 FT N 114.64 FT SELY163.28 FT S TO BEG)"},{"subTitleText":" W MAPLEWOOD ST"}],"scaleBarOptions":{"metricUnit":"Kilometers","metricLabel":"km","nonMetricUnit":"Miles","nonMetricLabel":"mi"},"legendOptions":{"operationalLayers":[]}}}

[BenFousek]

var titleText = dijit.byId('tasks-print-title-text');
var authorText = dijit.byId('tasks-print-author-text');
var title = 'My Map';
if (titleText.get('value') != '') {
 title = titleText.get('value')
}
var author = 'Me';
if (authorText.get('value') != '') {
 author = authorText.get('value')
}
var params = new esri.tasks.PrintParameters();
params.map = app.map;
var template = esri.tasks.PrintTemplate();
template.exportOptions = {};
legendLayers = [];
dojo.forEach(app.map.layerIds, function(id) {
 var l = app.map.getLayer(id);
 if (l.visible && l.id !== 've' && l.id !== 'esriworldimagery' && l.layer_params.legend) {
  var layer = new esri.tasks.LegendLayer();
  layer.layerId = l.id;
  legendLayers.push(layer);
 }
});
template.layoutOptions = {
 'legendLayers': legendLayers,
 'customTextElements': [{ 'Title': title }, { 'Author': author}]
};
template.format = 'PDF';
template.layout = 'Letter Landscape';
params.template = template;

[TracySchloss · Accepted solution]

What seems to have made a difference for me is to change my custom print service from asynchronous to synchronous.  In the documentation, it says in step 13 of the Tutorial Publishing additional services for printing:

Click Parameters and ensure the Execution Mode of the service is set to Synchronous.  You can alternatively choose Asynchronous if you expect the request to take more than a few seconds.

Since I expected the print generation to take several seconds (it does), I switched to Asynchronous. 

Once I switched my service to Synchronous, it seems to be working fine.  I believe the samples I was working with were written for Synchronous, and that was at the heart of my problem. 

I did also switch my code for the onPrintStart to define the customTextElements based on variables I'd set earlier (from my Identify).

        dojo.connect(printer, "onPrintStart", function(){             var printTitle = dojo.byId("txtTitle").value;             var customElementString = [                 {"legalDescriptionText": fullLegalString},              { "subTitleText": print_subTitle}             ];             console.log("customElementString = "+customElementString);             for (var i = 0; i < templates.length; i++) {                 this.templates.layoutOptions.titleText = printTitle;                 this.templates.layoutOptions.customTextElements = customElementString;                 console.log("layoutOptions = " + this.templates.layoutOptions);             }                          dojo.connect(printer, "onError", function(err){                 console.log("Printer Error: " + err);             });             dojo.connect(printer, 'onPrintComplete', function(value){                 console.log('The url to the print image is : ' + value.url);             });         });

[TracySchloss]

I had an open ticket with them, but the issue of synchronous vs. asynchronous didn't come up as a possible solution to my problem.

[MichaelVolz]

Tracy:

Would you be willing to share all the code for your web app (with sensitive information commented out), so I could see how you got the Identify to work with the Print template to pass the information from the Identify method to the Print template?