ArcGIS JavaScript API Print Templates

HabG_ — Wed, 10 Sep 2014 10:04:52 GMT

Hi All,

I'm using the "Print templates with esri.request" by replacing the "app.printUrl" and "var permitUrl" values with my ArcGIS server 10.1 PrintTask and FeatureLayer services respectively. However, this is not working at all. I think one of the reasons is to do with the "esriConfig.defaults.io.proxyUrl = "/proxy";" (line 65). I have pasted the complete code of the "Print templates with esri.request" from Print templates with esri.request | ArcGIS API for JavaScript.‌ Can anyone show me which parts of the code I need to change with my own values in order for it to work properly?

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      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;
      }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        color: #000;
        position: absolute;
        font-family: arial;
        height: auto;
        right: 20px;
        margin: 5px;
        padding: 10px;
        top: 20px;
        width: 300px;
        z-index: 40;
      }
      #feedback a {
        border-bottom: 1px solid #888;
        color: #444;
        text-decoration: none;
      }
      #feedback a:hover, #feedback a:active, #feedback a:visited {
        border: none;
        color: #444;
        text-decoration: none;
      }
      #note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; }
      #info { padding: 10px 0 0 0; }
    </style>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var app = {};
      require([
        "esri/map", "esri/layers/FeatureLayer", 
        "esri/dijit/Print", "esri/tasks/PrintTemplate", 
        "esri/request", "esri/config",
        "dojo/_base/array", "dojo/dom", "dojo/parser",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, 
        Print, PrintTemplate, 
        esriRequest, esriConfig,
        arrayUtils, dom, parser
      ) {
        parser.parse();


        app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";


        esriConfig.defaults.io.proxyUrl = "/proxy";
        
        app.map = new esri.Map("map", {
          basemap: "hybrid",
          center: [-117.447, 33.906],
          zoom: 17,
          slider: false
        });


        // add graphics for pools with permits
        var permitUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/MapServer/1";
        var poolFeatureLayer = new FeatureLayer(permitUrl, {
          "mode": FeatureLayer.MODE_SNAPSHOT
        });
        app.map.addLayer(poolFeatureLayer);


        // get print templates from the export web map task
        var printInfo = esriRequest({
          "url": app.printUrl,
          "content": { "f": "json" }
        });
        printInfo.then(handlePrintInfo, handleError);


        function handlePrintInfo(resp) {
          var layoutTemplate, templateNames, mapOnlyIndex, templates;


          layoutTemplate = arrayUtils.filter(resp.parameters, function(param, idx) {
            return param.name === "Layout_Template";
          });
          
          if ( layoutTemplate.length == 0 ) {
            console.log("print service parameters name for templates must be \"Layout_Template\"");
            return;
          }
          templateNames = layoutTemplate[0].choiceList;


          // remove the MAP_ONLY template then add it to the end of the list of templates 
          mapOnlyIndex = arrayUtils.indexOf(templateNames, "MAP_ONLY");
          if ( mapOnlyIndex > -1 ) {
            var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];
            templateNames.push(mapOnly);
          }
          
          // create a print template for each choice
          templates = arrayUtils.map(templateNames, function(ch) {
            var plate = new PrintTemplate();
            plate.layout = plate.label = ch;
            plate.format = "PDF";
            plate.layoutOptions = { 
              "authorText": "Made by:  Esri's JS API Team",
              "copyrightText": "<copyright info here>",
              "legendLayers": [], 
              "titleText": "Pool Permits", 
              "scalebarUnit": "Miles" 
            };
            return plate;
          });


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


        function handleError(err) {
          console.log("Something broke: ", err);
        }
      });
    </script>
  </head>


  <body class="tundra">
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">


        <div id="feedback" class="shadow">
          <h3>
            Print Templates Created from Info Returned by the Print Service using 
            <a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>
          </h3>
          <div id="info">
            <div id="note">
              Note:  This sample uses an ArcGIS Server version 10.1 export web map task.
            </div>
            
            <!-- that will be used for the print dijit -->
            <div id="print_button"></div>


            <div id="info">
              <a href="https://developers.arcgis.com/javascript/jsapi/printtemplate.html">Print templates</a> are generated 
              from the Export Web Map Task's <a href="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task">Layout_Template parameter</a>. This info is retrieved from the service 
              using <a href="https://developers.arcgis.com/javascript/jsapi/esri.request-amd.html">esri.request</a>. 
            </div>


          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Re: ArcGIS JavaScript API Print Templates

KenBuja — Wed, 10 Sep 2014 14:40:59 GMT

You'll have to set up your own proxy on your server to make it work. The line

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

means the code expects the proxy to be in a directory relative to the code on your server. You could also put a URL in there instead.

Take a look at this page to see how to work with a proxy.

Finally, in my experience, this code generally doesn't work when running from http://localhost‌ You'll have to set it up on your server and run it from there.

Re: ArcGIS JavaScript API Print Templates

HabG_ — Thu, 11 Sep 2014 13:57:00 GMT

Thanks for your help Ken. I will do this and let you know it works.

Re: ArcGIS JavaScript API Print Templates

GabiVoicu — Tue, 20 Jan 2015 22:58:39 GMT

Have you been able to get it working - I'm trying o do the same !

What the whole URL for the proxy should look like if used ?

Thank you

topic Re: ArcGIS JavaScript API Print Templates in ArcGIS JavaScript Maps SDK Questions

ArcGIS JavaScript API Print Templates

Re: ArcGIS JavaScript API Print Templates

Re: ArcGIS JavaScript API Print Templates

Re: ArcGIS JavaScript API Print Templates