nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PrintTemplate: change map title dynamically?

DavidChrest

Is there a straightforward way for a user to change the map title text when printing a map instead of having it hard coded in the layoutOptions of the PrintTemplate?

I tried the following but did not work.

HTML:

<div id="print_button"></div> Title:
  <input type="text" id="mapTitle" size="5" value="title" style="height: 18px; width:200px; border: 1px solid #759DC0;" />

JS:

var MT = dom.byId("mapTitle").value


  // create a print template for each choice
  templates = array.map(templateNames, function (ch) {
  var plate = new PrintTemplate();
  plate.layout = plate.label = ch;
  plate.format = "PDF";
  plate.showAttribution = false;
  plate.exportOptions = {
  dpi: 150
  };
  plate.layoutOptions = {

  "titleText": MT,
  "scalebarUnit": "Miles"
  };
  return plate;
  });


  // create the print dijit
  printer = new Print({
  "map": map,
  "templates": templates,
  url: printUrl
  }, dom.byId("print_button"));
  printer.startup();
  }

Any help is very much appreciated.

Find more posts tagged with

Accepted answers

ChrisSergent

You can edit the map title in my print task: csergent45/gisTemplate · GitHub

All comments

ClintonBallandis1

Chris thanks for posting this code. The print task is still very useful.

DavidChrest

Yes, it certainly looks like his code is mostly utilizing printTask and printParameters. Have a look at his link on GitHub. You will want to look at https://github.com/csergent45/gisTemplate/blob/master/simpleMap.html and https://github.com/csergent45/gisTemplate/blob/master/js/reactor.js.

The print code is not that much, really. This does all I need for now. Having the PDF open automatically is one step better, but for now, I'm just glad this works. We use Server 10.3. I will definitely look at your code above. Looks like we have things covered.

Thanks so much!

TracySchloss

Just to be clear, this still doesn't use Print widget, correct? You're using code that looks like it, but is based on printTask and printParameters? That's the only kind of solution I could ever figure out.

I've had good luck with a deferred, since I wanted the PDF the open automatically when it was done generating (I had complaints from users when I offered a 'view printout' button). Without the deferred, the PDF tried to open before it's was done generating.

I've also had some problems with the print service returning old output. It turns out the same few names are recycled and the print cache on the server cleared every xyz minutes (don't remember the time). You'll see this especially in your testing, since you're likely to be hitting your print button frequently. If you append the date to the name, it will also incorporate a timestamp so that doesn't happen.

 <!DOCTYPE html>
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>Basic Print with Print Task</title> 
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.13/dijit/themes/claro/claro.css"/> 
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css"/> 
    <link type="text/css" rel="stylesheet" href="css/style.css">


   <script type="text/javascript">
     var dojoConfig = { 
      parseOnLoad: false,
      async:true
      };
  </script>


  <script type="text/javascript" src="https://js.arcgis.com/3.13compact/"></script>
  </head>
  
<body class="claro">
    <script type="text/javascript">
      var printServiceUrl = "/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"; 
      var pathName = "https://ourserver.mo.gov";
      var layouts = [];
      var templates = [];
      var template;
      
     require([ 
      "dojo/on",
      "dojo/dom",
      "dojo/parser",
      "esri/map", 
      "esri/config",
      "esri/urlUtils",
      "esri/tasks/PrintTask",
      "esri/tasks/PrintTemplate", 
      "esri/tasks/PrintParameters",
      "dojo/_base/array", 
      "dijit/form/Button",
      "dijit/form/Select",
      "dijit/registry",
      "dojo/domReady!" ], 
      function(
        on, dom,parser,Map, esriConfig,urlUtils, PrintTask,PrintTemplate,PrintParameters,arrayUtils,Button,Select,registry ) {
  
      parser.parse();
  
  esriConfig.defaults.io.proxyUrl = pathName+"/proxy/proxy.ashx";//using proxy in [HOME] folder on server
  

   var map = new Map("mapDiv", { 
      center: [-92.593, 38.5],
      zoom: 7,
      basemap:'topo'
    });   


 on(map,'load', setUpPrinting);


//---- functions for printing ----
function setUpPrinting() {
    layouts = [{
            "layoutName": "Letter ANSI A Landscape",
            "label": "Landscape",
            "format": "PDF",
            "options": {
                "legendLayers": [], // empty array for no legend
                "scalebarUnit": "Miles",
                "authorText": "Missouri Office of Geospatial Information",
                "titleText": ""
            }
        }, {
            "layoutName": "Letter ANSI A Portrait",
            "label": "Portrait",
            "format": "PDF",
            "options": {
                "legendLayers": [], // empty array for no legend
                "scalebarUnit": "Miles",
                "authorText": "Missouri Office of Geospatial Information",
                "titleText": ""
              }
            }, {
            "layoutName": "MAP_ONLY",
            "label": "Map Only",
            "format": "JPG",
            "options": {
                "legendLayers": [], // empty array for no legend
                "scalebarUnit": "Miles",
                "titleText": "" 
             }
            }];
     var templateList = registry.byId('templateSelect');
     
       arrayUtils.forEach(layouts, function(layout){
            var pTemplate = new PrintTemplate();
            pTemplate.layout = layout.layoutName;
            pTemplate.label = layout.label;
            pTemplate.format = layout.format;
            pTemplate.layoutOptions = layout.options;
            pTemplate.showAttribution = false;
            templates.push(pTemplate);
                       
            templateList.addOption({
             label: layout.label,
             value: layout.label
           });            
        });   
  registry.byId("btnPrintSubmit").on("click", submitPrint); 
}


   function submitPrint(){
    var deferred;
    var printTitle = registry.byId("txtTitle").get("value");
    if (printTitle.length < 1) {
      printTitle = "Sample Map";
    }
    var printParams = new PrintParameters();
    printParams.map = map;
    var status = dom.byId("printStatus");
    status.innerHTML = "Generating ...";
    var e = registry.byId("templateSelect");
    var choice = e.value;
    template = templates[0];
    switch (e.value) {
      case "Portrait":
        template = templates[1];
        break;
      case "Landscape":
        template = templates[0];
        break;
      default:
        template = templates[0];
    }
    printParams.template = template;
    template.layoutOptions.titleText = printTitle;
  
    var printTask = new PrintTask(pathName+printServiceUrl, printParams);
    deferred = printTask.execute(printParams);
    deferred.addCallback(function(response){
      var d = new Date();
      var dateTime = d.getTime();
      var outputUrl = response.url + '?time=' + dateTime;
      status.innerHTML = "";
   //   console.log("outputURL: " + outputUrl);
      var select = registry.byId("templateSelect");
      var selectOptions = select.getOptions();
      select.set("value", "Choose Page Format");
      window.open(outputUrl, "_blank");
    });
    deferred.addErrback(function(error){
      console.log("Print Task Error = " + error);
      status.innerHTML = "Error generating printout, try again";
    });
  }
});
</script> 


<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" design="headline" style="width:100%; height:100%;">
    <div id="banner" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="header">
            <b> Enter a Title for Your Map:</b>
            <div id="printContent">
                <input id="txtTitle" data-dojo-type="dijit/form/TextBox" placeHolder="Enter a map title" />
            </div>
            <select id='templateSelect' data-dojo-type='dijit/form/Select'>
                <option value="choose">Choose Page Format</option>
            </select>
            <button id="btnPrintSubmit" data-dojo-type="dijit/form/Button">
                Submit
            </button>
            <div id="printStatus">
            </div>
        </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" id="centerPane" data-dojo-props="region:'center'">
        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane">
        </div>
    </div>
</div>
   </body>
  </html>

DavidChrest

Got it! I tool a closer look at Chris' code in the link he mentions above. https://github.com/csergent45/gisTemplate.

I commented out my JS and HTML portions related to my print widget, placed in his print HTML and JS segments, and everything worked wonderfully. I did some HTML fine tuning and I can now pop in any map title I want. His setup was also more concisely organized than mine.

Here is what I have:

DavidChrest

Thanks so much Chris. Looks like you solved this popular problem. Much appreciated. Since, I am about out of time, I need to move on but I'll try your code in my next app, which I need to start soon.

TracySchloss

I know it's a more code, but I've found that the functions I use for printing are pretty universal. I haven't had to rework them from one project to the next, I just copy/paste the same few set of functions and make sure I have the divs, input for title etc.

The other benefit is that you can put breakpoints in the code and see exactly what's happening and when. With the Print widget, there's not a place for those, or you would see what's happening in the sequence of template creation, print submittal etc. It helped me to understand what we going on under the hood.

The only thing I can think of to try it to not create any print template or widget until after the user specifies a title. Then you wouldn't be creating any templates/widgets using input from a field that was initially blank. You'd have to destroy them or something after each print job, to continue to have the ability to change titles. That sounds even clunkier than building your own set of printTask functions.

DavidChrest

Chris,

Yes, I see your code but at his point in my project I can't afford the time to completely rework my printing functionality. Your code looks good but looks like a heck of a lot just to be able to enter a map title.

Sure would be nice if I can just pop in a textarea/input, etc:

HTML:

<textarea id="MapTitle" style="width: 200px; height: 18px; border: 1px solid #759DC0;"> </textarea>

Then in JS, simply have:

var MT = document.getElementById("MapTitle").value;

Then in the PrintTemplate layoutOptions:

"titleText": MT

But that "titleText" element simply will not read a variable based on user input, which is easily done when, for example, setting buffer distances.

If MT = "Same Title for Every Single Map," then it appears in the map, but otherwise, nothing appears. Sure would be nice if there were some kind of quick fix for this.

ChrisSergent

The link I provided above has the print task modified where you can change the title. Kelly Hutchins feel free to add my code; which I had a lot of help with if you want to add it to any samples. All code I post on here is up for grabs by users or Esri.

TracySchloss

Yes, I know you can download them, but in practice, going back into the folder where I have it is a pain. I dowloaded SDK 3.11, which isn't too far back, but still contains the dropped examples, which I need to go back to periodically.

I'm surprised that the Print widget doesn't have the functionality built in to allow the user to change a title. I agree a whole bunch of print outs all titled the same, but with different content, isn't that useful. It doesn't look like there is an event in Print that deals with the act of printing. It's all just for the creation/destruction of the widget itself.

ChrisSergent

You can edit the map title in my print task: csergent45/gisTemplate · GitHub

DavidChrest

Yes, I came across your earlier post. Not sure why examples are being dropped. All the past examples can be found at SDK Downloads | ArcGIS for Developers . Under ArcGIS JS API, select version dropdown on the right, then select "Documentation."

Would be really nice to be able to easily set things up for a user to input a map title. Otherwise, may be better off just having no title at all to prevent a bunch of maps made all with the same title.

TracySchloss

I'm not using the Print digit, I'm using PrintTask and PrintParameters instead. It's been a while, but I think I started down that path specifically for increased flexibility like allowing the user to specify a title before printing. I think the print templates are already created before any print is ever submitted. Initially, the input field is still blank, and it doesn't allow you to modify the print templates with a new title value when you the print job is submitted.

There used to be some decent examples using PrintTask and PrintParameters, but so many things have been dropped out of the documentation lately I can say what you might find.

Here is a map I published that has printing based on PrintTask/PrintParameters. Maybe it will help:

Missouri Legislative Districts

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.