Community

Print widget implementation : TypeError issue with PrintTask.js

1412
3
10-15-2016 04:47 PM
NhuMai
by
New Contributor II
‎10-15-2016 04:47 PM

This print widget is blocked before creating an output. The combobox properly retrieves the print task url, but the console shows "TypeError: b is undefined" for http://js.arcgis.com/3.17/esri/tasks/PrintTask.js:25:13.

Map is created in Map.js

var map;
var baseMapLayerWorld;

require([
 "esri/map", "esri/dijit/Search", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"
], function (Map, Search, DynamicMapServiceLayer, FeatureLayer, InfoTemplate) {

baseMapLayerWorld = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer");
 
 map = new Map("map", {
 center: [-150, -17], // lon, lat
 zoom: 8
 });

map.addLayers([baseMapLayerWorld);
});

The print widget is implemented in Print.js:

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 = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

esriConfig.defaults.io.proxyUrl = "http://our-server/Java/proxy.jsp";

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

They come together in the index.html:

<!DOCTYPE html>
<html dir="ltr">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
 <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
 <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
 <link rel="stylesheet" href="https://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css">
 <link rel="stylesheet" href="css/widget_styles.css">

<script src="https://js.arcgis.com/3.17/"></script>

<script type="text/javascript">
 dojo.require("dojox.layout.ExpandoPane");
 </script>

<script src="js/Map.js"></script>
<script src="js/Legend.js"></script>
<script src="js/Search.js"></script>
<script src="js/Print.js"></script>


</head>

<body class="claro">

<div id="content"
 data-dojo-type="dijit/layout/BorderContainer"
 data-dojo-props="design:'headline', gutters:true"
 style="width: 100%; height: 100%; margin: 0;">

<div id="rightPane"
 data-dojo-type="dojox/layout/ExpandoPane"
 data-dojo-props="region:'right',title:'Widgets',startExpanded:false">

<div data-dojo-type="dijit/layout/AccordionContainer">
 <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
 data-dojo-props="title:'Légende', selected:true">
 <div id="legendDiv"></div>
 </div>
 <div data-dojo-type="dijit/layout/ContentPane"
 data-dojo-props="title:'Pane 2'">
 </div>
 </div>
 </div>

<div id="map"
 data-dojo-type="dijit/layout/ContentPane"
 data-dojo-props="region:'center'"
 style="overflow: hidden;width: 100%; height: 100%; margin: 0;">

<div id="feedback" class="shadow">
 <h3>
 Print Templates Created from Info Returned by the Print Service using
 <a href="https://developers.arcgis.com/javascript/3/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>


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

<div id="info">
 <a href="https://developers.arcgis.com/javascript/3/jsapi/printtemplate.html">Print templates</a> are generated
 from the Export Web Map Task's <a href="https://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/3/jsapi/esri.request-amd.html">esri.request</a>.
 </div>

</div>
 </div>
 </div>
 <div id="search"></div>
 </div>

</body>

</html>
0 Kudos
3 Replies
MiriamBrockmann
by
Occasional Contributor
‎10-17-2016 01:47 AM

You forgot to declare

"dijit/layout/BorderContainer", "dijit/layout/ContentPane"

in your require. Maybe to complete your require is all that you need.

Also you made a mistake when setup your DynamicMapServiceLayer.

Instead of
baseMapLayerWorld = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer");

you should use the require for the ArcGISTiledMapServiceLayer you load above :
baseMapLayerWorld = new DynamicMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer");




0 Kudos
NhuMai
by
New Contributor II
‎10-18-2016 01:12 PM

Hi Miriam,

The baseMapLayerWorld was intended to be a tiled map service layer to act as the map's basemap. I'm hesitating to do what you suggest by adding this layer as a dynamic map service--should this make a difference for map loading? 

I've added the other requirements, but still get a TypeError related to PrintTask.js

0 Kudos
MiriamBrockmann
by
Occasional Contributor
‎10-18-2016 11:25 PM

Good Morning Nhu,

If your basemapLayerWorld is Tiled, then you should use certainly ArcGISTiledMapServiceLayer

but you haven't load the Module in your require.

You mix up legacy module definitions like "new esri.layers.ArcGISTiledMapServiceLayer"

with AMD-Style by using require.

This was what i meant.

So your Project loads, you can choose the Layout, but when you want to Print by using the Button, you get an error, right?

Have you check your console, if the Print is sent correctly?

0 Kudos