Parks Finder - Print Functionality?

[CraigMcDade]

Looking to add printing capabilities to the Parks Finder Web application. Specifically, a printout that shows the map as well as the directions and amenities information in the left tab panel.

Looking through the API it looks like the PrintTask is the most likely solution. Am I on the right track? I can't seem to find any samples that show how the PrintTask works together.

[derekswingley1]

The print task is a good way to go, but, relative to the print widget, it takes a little more work from the developer.

The print task is essentially a geoprocessing service that requires a print parameters passed to it. A print template also needs to be a part of your print parameters.

The Portal API "Web Map Viewer" sample shows how to use the print task.

[CraigMcDade]

Thanks for your response. So would I be able to use either the printTask or the Print Widget? Essentially I am trying to configure a WYSIWYG print option.

Right now I have placed a print icon inbetween the Share and Help Icons on the ParksFinder app. Right now it just calls the basic windows print function. Obviously, I want it to call the printTask or Widget.

<td align="center" style="width: 40px;" valign="middle">
<button dojotype="dijit.form.ToggleButton" id="imgprint" title="Print Map" onclick="window.print();">
<img style="border:none;" src="images/print.png" alt="Print Map"/>
</td>

I've attempted to assemble the code that relates to the printTask from the sample you provided, but it causes my map to fail. The header draws, but the map does not.

[CraigMcDade]

I was missing a pesky ;

Used:

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


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

        layoutTemplate = dojo.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 = dojo.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 = dojo.map(templateNames, function(ch) {
          var plate = new esri.tasks.PrintTemplate();
          plate.layout = plate.label = ch;
          plate.format = "PDF";
          plate.layoutOptions = { 
            "authorText": "Made by: Marion County Information Technology",
            "copyrightText": "Maps are for display purposes only",
            "legendLayers": [], 
            "titleText": "Marion County Parks", 
            "scalebarUnit": "Miles" 
          };
          return plate;
        });

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

      function handleError(err) {
   alert(err);
   
        console.log("Something broke: ", err);
      }
    
    }

and now want to call it using the button I placed in the header:

<td align="center" style="width: 40px;" valign="middle">
<button dojotype="dijit.form.ToggleButton" id="imgprint" title="Print Map" onclick="window.print();">
<img style="border:none;" src="images/print.png" alt="Print Map"/>
</td>

Should I change the html to reference "print_button" since that is what it is expecting?

[derekswingley1]

I'm having trouble following you. Where was the missing semi-colon? And did adding it fix anything?

In your code, you're referencing window.print. That is the browser's native print function and will not print everything on a map (if it did, we wouldn't need the print task/print widget and print service from ArcGIS Server).

How about trying to get your app working with the print widget first?

[CraigMcDade]

please forgive me if I'm unclear.

it was at the end of the code I added. I'm not sure if it fixed anything aside from the map now draws. I have tried using the sample html code provided in the sample:

<div id="print_button"></div>

            <div id="info">
              <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/printtemplate.htm">Print templates</a> are generated 
              from the Export Web Map Task's <a href="http://servicesbeta2.esri.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="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/namespace_esri.htm#request">esri.request</a>. 
            </div>

          </div>

However, when added, the block of text and print button does not show.

I understand that the window.print() is the native print function and that it will need to be changed. That is what my end question is, assuming the print widget code I added actually works, what should be entered in the html area so that when I click on the icon, it triggers the print...

[derekswingley1]

What is the value for your printURL variable?

The way the code works is that once print template info is retrieved from your print service, print templates are built and then passed to the print widget. The print widget is inserted in the page in the DOM node returned by dojo.byId. In this case, it's the div with an ID of "print_button".

[CraigMcDade]

I've set it to:

var app = {};
app.printUrl = "http://gisprod2/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

[derekswingley1]

Next step:  have you configured a proxy?

[CraigMcDade]

Yes, Proxy is configured.