topic Re: Print task example with attribute table on printout in ArcGIS JavaScript Maps SDK Questions

Print task example with attribute table on printout

KevinMacLeod1 — Mon, 15 Dec 2014 16:06:08 GMT

Anyone have an example that is clean-cut and/or documented, that has a print task or print dijit that includes an Attribute table in the printout?

We're looking to include parcel info on the printout. So, if a user selects a parcel, then click a special print tool button, it fires the print task and includes the attribute table with the info for that parcel (that polygon). Anyone have a good example? I looked and oddly enough couldn't find one. I hope too that it's a fairly simple thing and perhaps works with the print Dijit which I currently have working. Or, perhaps this involves working on the Print Template MXDs? We have our own 10.2 ArcGIS Server if that helps and I can edit the print templates if I need to.

Re: Print task example with attribute table on printout

YungKaiChin — Tue, 16 Dec 2014 21:31:47 GMT

You could simply use JS to to create a HTML table on fly, append the table, and print the table or map w/ the table. The table can be on the second page.

Re: Print task example with attribute table on printout

Anonymous User — Wed, 31 Dec 2014 18:55:33 GMT

ykchin thank you for your reply.

I was thinking of this too. That would ok as a backup plan but we would like to get it all one one page if possible.

In fact have you done this, put the table onto a second page? Or does anyone know if there's an example even just doing that, creating a second page in the Print Dijit output PDF? what about jpg?

this seems like it could somehow be rigged to do this phantasm/README.md at master · apollolm/phantasm · GitHub But... just snapshotting the viewport as an image file seems too simple. There must be a reason ESRI does backend processing, in order to... preserver scale? (my users often ask me why the Print output is slightly different size/extent that what's on the screen, and I presume this is so the scale gets output to the pdf correctly for some reason? dpi? someone let me know how this works if there is a simple explanation) Anyway this example seems a bit overkill by bringing in node.js etc. I would think someone else has created a Print output with attrib. tables on it or included on a second page??

Re: Print task example with attribute table on printout

Anonymous User — Wed, 31 Dec 2014 18:58:02 GMT

also silly question but is there some way to do it from the MXD? Like if we put some dynamic kind of table that points to the attribute table, and will populate itself, in the Layout view of the Print Template MXDs on the server would that work?

Re: Print task example with attribute table on printout

Anonymous User — Mon, 09 Mar 2015 11:51:46 GMT

I am back researching this topic. I have found no examples or sites that have anything like this surprisingly. Has anyone else seen any sites like this?

I had hoped perhaps the Production Mapping extension might achieve this. Create a Dynamic Table in your Map Layout | ArcGIS Blog It can certainly put a table with attribute values into a map MXD in layout view that updates itself based on user selection. However the support team did not think it would carry though to the Web APIs, meaning that if I were to use this product and put a table into the Print Template MXDs it would not work.

I will now be attempting this through javascript. And perhaps backend code. One thing as suggested may just be to have the information on a second page. I am not sure how to make the Print Task have a second page or if this is possible either. I will post back results.

Re: Print task example with attribute table on printout

Anonymous User — Mon, 09 Mar 2015 15:00:19 GMT

I think "customTextElements" property of printTemplate might work, although it will be a matter of formatting a bunch of value pairs to make it look like a table. Currently working on ideas from these threads.... will keep this updated..

Formatting Custom Text Elements in Print Task

Example of how to use the PrintTask's customTextElements property

Printing with Custom Text Elements

Print Task API3 AGS 10.1 Layout Option CustomTextElements

Re: Print task example with attribute table on printout

Anonymous User — Mon, 23 Mar 2015 19:14:09 GMT

I have it almost figured out actually. I will post a solution when it's cleaned up, for everyone here, hopefully it helps someone. Will post soon.

Re: Print task example with attribute table on printout

Anonymous User — Thu, 26 Mar 2015 15:32:46 GMT

///This works perfectly for the first time you click a parcel. Only thing left to do is fix one thing. It works for the first parcel clicked. but that parcel sticks in memory and the second, third etc click all point back to the first printParcel object. So it only works the first time. I will work on this today, and probably have the complete solution. once done I will post it here (edit and just stick it into this post)//////////

///I tried putting the following code block below inside the printWidget() function but it doesn't seem to work. My idea is that I need to destroy the printParcel widget after the infowindow is hidden. Conceptually that should work. but it's not, yet.

//map.infoWindow.on("hide", function (evt) {

// if (printerParcel) {

// printerParcel.destroy();

// };

//});

///past into ESRI Sandbox....

<!DOCTYPE html>

<html>

<head>

<style>

html, body {

height: 100%;

margin: 0;

padding: 0;

width: 100%;

}

h3 {

border-bottom: 1px solid #444;

margin: 0 0 5px 0;

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;

font-family: arial;

height: auto;

margin: 5px;

padding: 10px;

position: absolute;

right: 20px;

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>

var getWebData = {};

getWebData.SAGISPrintServiceAmazon = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/ExportWebMapSAGISparcel/GPServer/Export%20Web%20Map";

getWebData.ArcGISCOMPrintServiceESRI = "http://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

getWebData.GeometryServer = "http://sagisservices.thempc.org/saint/rest/services/Geometry/Geometry/GeometryServer";

getWebData.GeometryServerAmazon = "http://sagiscloud.thempc.org/arcgis/rest/services/Utilities/Geometry/GeometryServer";

// SAGIS provided data

getWebData.SagisOrgLayers = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGIS1_TEST/MapServer";

getWebData.BlankBasemap = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGIS1/MapServer/37";

getWebData.Imagery2008 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Imagery_Tiles/MapServer";

getWebData.Imagery2011 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Imagery_2011/MapServer";

getWebData.Imagery2013 = "http://sagisservices.thempc.org/saint/rest/services/Imagery/Chatham2013/ImageServer";

getWebData.Elevation = "http://sagisservices.thempc.org/saint/rest/services/Imagery/ElevationDEM/MapServer";

getWebData.SAGISCenterlineLocator = "http://sagisservices.thempc.org/saint/rest/services/Locator/CENTERLINES/GeocodeServer";

getWebData.ParcelAnnos = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGISAnnotation/MapServer";

getWebData.ParcelAnnosMapNumb = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGISMapAnnotation/MapServer";

getWebData.StreetsAnnosMapNumb = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGISROADAnnotation_TEST/MapServer";

// External Data

getWebData.BOA_URL_Source = "http://boa.chathamcounty.org/Home/Property-Record-Cards/PIN/";

</script>

require([

"esri/map", "esri/layers/FeatureLayer",

"esri/dijit/Popup",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/Color",

"esri/layers/GraphicsLayer",

"esri/graphic",

"dojo/query",

"esri/tasks/query",

"esri/tasks/QueryTask",

"esri/InfoTemplate",

"esri/geometry/Extent",

"esri/geometry/Multipoint",

"esri/geometry/Point",

"esri/geometry/webMercatorUtils",

"dojo/on",

"dojo/promise/all",

"esri/tasks/IdentifyTask",

"esri/layers/ArcGISDynamicMapServiceLayer",

"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,

Popup,

SimpleFillSymbol,

SimpleLineSymbol,

Color,

GraphicsLayer,

Graphic,

query,

Query,

QueryTask,

InfoTemplate,

Extent,

Multipoint,

Point,

webMercatorUtils,

on,

all,

IdentifyTask,

ArcGISDynamicMapServiceLayer,

Print, PrintTemplate,

esriRequest, esriConfig,

arrayUtils, dom, parser

) {

parser.parse();

var

esriConfig,

SagisOrgLayers,

maponclick,

selectionLayer,

eventHandlerIdentify,

printParcel = [];

printUrl = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/ExportWebMapSAGISparcel/GPServer/Export%20Web%20Map";

var popup = new Popup({ highlight: true, marginTop: 150, visibleWhenEmpty: true, fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.2])) }, dojo.create("div"));

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

map = new esri.Map("map", {

basemap: "streets",

center: [-81.11, 32.06],

zoom: 14,

slider: false

});

//Selection layer for parcel widget

selectionLayer = new GraphicsLayer();

SagisOrgLayers = new ArcGISDynamicMapServiceLayer(getWebData.SagisOrgLayers, {

"opacity": 0.8,

});

var parcelData = SagisOrgLayers.url + "/24";

// add graphics for pools with permits

var permitUrl = "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org_TEST/SAGIS1_TEST/MapServer";

var poolFeatureLayer = new ArcGISDynamicMapServiceLayer(permitUrl);

map.addLayer(poolFeatureLayer);

poolFeatureLayer.setVisibleLayers([24]);

map.addLayer(selectionLayer);

// Start of parcel widget

// Declare variables for this widget

var parcelData = SagisOrgLayers.url + "/24";

var infoTemplate = new InfoTemplate();

var qtParcels = new QueryTask(parcelData);

var qParcels = new Query();

var parcels;

infoTemplate.setTitle("Property ID: ${PIN}");

infoTemplate.setContent("<div class='col-md-12'>" +

"<div class='row'><div class='col-md-5'>Owner:</div><div class='col-md-7'>${OWNERNAME}</div></div>" +

"<div class='row'><div class='col-md-5'>PIN:</div><div class='col-md-7'><a target='_blank' href='http://boa.chathamcounty.org/home/propertyrecordcards.aspx?pin=${PIN}'>${PIN}</a></div></div>" +

"<div class='row'><div class='col-md-5'>Property Address:</div><div class='col-md-7'>${FULLADDRESS}</div></div>" +

"<div class='row'><div class='col-md-5'>Zoning:</div><div class='col-md-7'><a target='_blank' href='${ZoningLink}'>${ZONEID}</a></div></div>" +

"<div class='row'><div class='col-md-5'>Flood Zone:</div><div class='col-md-7'><a target=_blank' href='http://www.sagis.org/Content/floodzonedefinitions.pdf'>${FLOODID}</a></div></div>" +

"<div class='row'><div class='col-md-5'>Alderman:</div><div class='col-md-7'>${ALDER_TXT}</div></div>" +

"<div class='row'><div class='col-md-5'>Commissioner:</div><div class='col-md-7'>${COMMID}</div></div>" +

"<div class='row'><div class='col-md-5'>Voting Precinct:</div><div class='col-md-7'>${VOT_PRECINCT}</div></div>" +

"<div class='row'><div class='col-md-5'>Elementary School:</div><div class='col-md-7'>${ELEMENTARY}</div></div>" +

"<div class='row'><div class='col-md-5'>Middle School:</div><div class='col-md-7'>${MIDDLE}</div></div>" +

"<div class='row'><div class='col-md-5'>High School:</div><div class='col-md-7'>${HIGH}</div></div>" +

"<div class='row'><div class='col-md-5'>Zip Code:</div><div class='col-md-7'>${ZIP_CODE}</div></div>" +

"<div class='row'><div class='col-md-5'>Neighborhood Code:</div><div class='col-md-7'>${NBHD_CODE}</div></div>" +

"<div class='row'><div class='col-md-5'>Neighborhood:</div><div class='col-md-7'>${NBHD_DESC}</div></div>" +

"<div class='row'><div class='col-md-5'>Legal Description:</div><div class='col-md-7'>${LEGAL_1}</div></div>" +

"<div class='row'><div class='col-md-5'>Calculated Acreage:</div><div class='col-md-7'>${CALCAC}</div></div>" +

"<div class='row'><div class='col-md-5'>Land Value:</div><div class='col-md-7'>${LAND_VALUE}</div></div>" +

"<div class='row'><div class='col-md-5'>Building Value:</div><div class='col-md-7'>${BUILDING_VALUE}</div></div>" +

"<div class='row'><div class='col-md-5'>Real Estate Value:</div><div class='col-md-7'>${REAL_ESTATE_VALUE}</div></div>" +

"<div class='row'><div class='col-md-5'>Sale Price:</div><div class='col-md-7'>${SALE_PRICE}</div></div>" +

"<div class='row'><div class='col-md-5'>Sales Date:</div><div class='col-md-7'>${SALE_MM}/${SALE_DD}/${SALE_YY}</div></div>" +

"<div class='row'><div class='col-md-5'>Property Card:</div><div class='col-md-7'><a target='_blank' href='http://boa.chathamcounty.org/home/propertyrecordcards.aspx?pin=${PIN}'>Board of Assessors</a></div></div>" +

"</div>");

var outFields = [

"OWNERNAME", "PIN", "FULLADDRESS", "ZONEID", "FLOODID", "ALDER_TXT", "COMMID", "VOT_PRECINCT", "ELEMENTARY", "MIDDLE", "HIGH", "ZIP_CODE", "NBHD_DESC",

"CALCAC", "LAND_VALUE", "BUILDING_VALUE", "REAL_ESTATE_VALUE", "SALE_PRICE", "SALE_YY", "SALE_MM", "SALE_DD", "LEGAL_1", "OBJECTID", "Shape", "Shape_Length", "Shape_Area"

];

qParcels.outSpatialReference = { wkid: 102100 };

qParcels.returnGeometry = true;

qParcels.outFields = outFields;

function cleanqParcels() {

if (qParcels.hasOwnProperty("text")) delete qParcels.text;

if (qParcels.hasOwnProperty("geometry")) delete qParcels.geometry;

}

// click on map

maponclick = map.on("click", executeMapParcelQuery); //

function executeMapParcelQuery(e) {

var promises, qGeom, point, pxWidth, padding;

point = e.mapPoint;

pxWidth = map.extent.getWidth() / map.width;

padding = 3 * pxWidth;

qGeom = new Extent({

"xmin": point.x - padding,

"ymin": point.y - padding,

"xmax": point.x + padding,

"ymax": point.y + padding,

"spatialReference": point.spatialReference

});

cleanqParcels();

qParcels.geometry = qGeom;

qParcels.outFields = outFields;

parcels = qtParcels.execute(qParcels);

promises = new all([parcels]);

promises.then(handleClickQueryResults);

}

function handleClickQueryResults(results) {

if (!results[0].hasOwnProperty("features")) {

console.debug("Parcels query failed");

}

parcels = results[0].features;

arrayUtils.forEach(parcels, function (feat) {

// add data before adding to map.

if (feat.attributes.PIN != undefined) {

switch (feat.attributes.PIN.substring(0, 1)) {

case "1":

feat.attributes.ZoningLink = "http://www.thempc.org/Administrative/ChathamCountyZoning.htm";

break;

case "2":

feat.attributes.ZoningLink = "http://www.thempc.org/Administrative/SavannahZoning.htm";

break;

default:

break;

}

if (feat.attributes.ALDER_TXT != undefined) {

switch (feat.attributes.ALDER_TXT.substring(4, 5)) {

case "1":

feat.attributes.ALDER_TXT = "Van R. Johnson";

break;

case "2":

feat.attributes.ALDER_TXT = "Mary Osborne";

break;

case "3":

feat.attributes.ALDER_TXT = "John Hall";

break;

case "4":

feat.attributes.ALDER_TXT = "Mary Ellen Sprague";

break;

case "5":

feat.attributes.ALDER_TXT = "Dr. Estella Shabazz";

break;

case "6":

feat.attributes.ALDER_TXT = "Tony Thomas";

break;

default:

break;

}

if (feat.attributes.COMMID != undefined) {

// alert("success");

switch (feat.attributes.COMMID) {

case 1:

feat.attributes.COMMID = "Van R. Johnson";

break;

case 2:

feat.attributes.COMMID = "James J. Holmes";

break;

case 3:

feat.attributes.COMMID = "Tony Center";

break;

case 4:

feat.attributes.COMMID = "Patrick K. Farrell";

break;

case 5:

feat.attributes.COMMID = "Yusuf Shabazz";

break;

case 6:

feat.attributes.COMMID = "Lori L. Brady";

break;

case 7:

feat.attributes.COMMID = "Dean Kicklighter";

break;

case 8:

feat.attributes.COMMID = "Priscilla D. Thomas";

break;

default:

break;

}

}); /// end of adding data to feature for infowindow section...///

map.graphics.clear(); // consider disabling this after maponclick is no longer the default map click handler (which noel wants).. becaues otherwise if user has created drawings, closes Draw dialolog, and then clicks map, they will disapper.

arrayUtils.forEach(parcels, function (feat) {

feat.infoTemplate = infoTemplate;

feat.setSymbol(new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])).setOutline(null));

map.graphics.add(feat);

printParcel = parcels[0];

printWidget();

});

} //end of handleClickQuery func

// End of parcel Widget

function printWidget() {

// Start of Print Widget

templates = new PrintTemplate();

//attribute table field title strings

Owner = "Owner: \n";

PIN = "PIN: ";

PropertyAddress = "PropertyAddress: \n";

Zoning = "Zoning: ";

FloodZone = "FloodZone: ";

Alderman = "Alderman: ";

Commissioner = "Commissioner: ";

VotingPrecinct = "Voting Precinct: ";

ElementarySchool = "Elementary School: ";

MiddleSchool = "Middle School: ";

HighSchool = "High School: ";

ZipCode = "Zip Code: ";

Neighborhood = "Neighborhood: \n";

LegalDescription = "Legal Description: \n";

CalculatedAcreage = "CalculatedAcreage: ";

LandValue = "LandValue: ";

BuildingValue = "Building Value: ";

RealEstateValue = "Real Estate Value: ";

SalePrice = "Sale Price: ";

SalesDate = "Sales Date: ";

layoutvar2 = {

"authorText": "Savannah Area Geographic Information System (SAGIS)",

"copyrightText": "www.SAGIS.org",

"customTextElements": [

{

"infoDetails":

"PARCEL INFORMATION \r\n" + "___________________" +

"\r\n" + "\n" + " " + "\n" + PIN + printParcel.attributes.PIN +

"\r\n" + "\n" + " " + "\n" + PropertyAddress + printParcel.attributes.FULLADDRESS +

"\r\n" + "\n" + " " + "\n" + Zoning + printParcel.attributes.ZONEID +

"\r\n" + "\n" + " " + "\n" + FloodZone + printParcel.attributes.FLOODID +

"\r\n" + "\n" + " " + "\n" + Alderman + printParcel.attributes.ALDERID +

"\r\n" + "\n" + " " + "\n" + Commissioner + printParcel.attributes.COMMID +

"\r\n" + "\n" + " " + "\n" + VotingPrecinct + printParcel.attributes.VOT_PRECINCT +

"\r\n" + "\n" + " " + "\n" + ElementarySchool + printParcel.attributes.ELEMENTARY +

"\r\n" + "\n" + " " + "\n" + MiddleSchool + printParcel.attributes.MIDDLE +

"\r\n" + "\n" + " " + "\n" + HighSchool + printParcel.attributes.HIGH +

"\r\n" + "\n" + " " + "\n" + ZipCode + printParcel.attributes.ZIPCODE +

"\r\n" + "\n" + " " + "\n" + Neighborhood + printParcel.attributes.NBHD_DESC +

"\r\n" + "\n" + " " + "\n" + LegalDescription + printParcel.attributes.LEGAL_1 +

"\r\n" + "\n" + " " + "\n" + CalculatedAcreage + printParcel.attributes.LCALCAC +

"\r\n" + "\n" + " " + "\n" + LandValue + printParcel.attributes.LAND_VALUE +

"\r\n" + "\n" + " " + "\n" + BuildingValue + printParcel.attributes.BUILDING_VALUE +

"\r\n" + "\n" + " " + "\n" + RealEstateValue + printParcel.attributes.REAL_ESTATE_VALUE +

"\r\n" + "\n" + " " + "\n" + SalePrice + printParcel.attributes.SALE_PRICE +

"\r\n" + "\n" + " " + "\n" + SalesDate + printParcel.attributes.SALE_DD + "/" + printParcel.attributes.SALE_MM + "/" + printParcel.attributes.SALE_YY

}

"titleText": "www.SAGIS.org Map Viewer"

};

templates = [

{

label: "PDF 8.5 x 11 with Parcel Information",

format: "PDF",

layout: "test",

exportOptions: { "dpi": "300" },

layoutOptions: layoutvar2

}

];

if (typeof printer == 'undefined') {

// create the print dijit

printer = new Print({

"map": map,

"templates": templates,

url: getWebData.SAGISPrintServiceAmazon

}, dom.byId("print_button"));

printer.startup();

}

};

// End of Print Widget

});

</script>

</head>

<div data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline',gutters:false"

style="height: 100%; margin: 0; width: 100%;">

<div id="map"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'">

<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>

Note: This sample uses an ArcGIS Server version 10.1 export web map task.

</div>

<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>

</body>

</html>

Re: Print task example with attribute table on printout

SeanDoig — Fri, 28 Aug 2015 14:42:49 GMT

Kevin,

Thanks for all your posts on this topic. Did you finally get it working?

Thanks!

Sean