topic Re: Formatting Custom Text Elements in Print Task in ArcGIS JavaScript Maps SDK Questions

Formatting Custom Text Elements in Print Task

MichaelVolz — Thu, 19 Jun 2014 17:35:30 GMT

I am creating a parcel search app where the selected parcel's information is added to a print-out with a custom print task. I am using customTextElements to achieve this goal. For the layout I have a field alias name and then I want the value next to it and then a carriage return for the next field alias and its value and so forth for all the parcel fields that I would like to display.

I have 2 issues with this setup.
1.) I would want the starting point of the values to line up vertically. I started out with a few spaces between the alias and the value, but aliases are different lengths so the start of the values did not line up vertically. I tried some formatting (<p> </p>, %nbsp;,<blockquote> </blockquote>), but none of them worked.

2.) I want the value to wrap if it can not fit in the row provided, but I want it to continue to be lined up with the values. Currently, it wraps to the beginning of the next line which where the field alias is displayed.

Any help or hints to solve these issues are greatly appreciated.

Re: Formatting Custom Text Elements in Print Task

TracySchloss — Thu, 19 Jun 2014 19:23:30 GMT

Have you tried formatting the string as an HTML table? Typically I would use that when trying to line things up the way you're describing.

Re: Formatting Custom Text Elements in Print Task

MichaelVolz — Thu, 19 Jun 2014 22:03:09 GMT

Tracy:

Can you add an add HTML table to the customTextElements for the print task? If so, do you know where I would find documentation on how to do this? Thanks.

My customTextElements look like below before trying the table:

"customTextElements": [{custTextCV3: "PIN_COMM   " + resultsPIN_COMM + "\r\nOwner1   " + resultsLegal1}],

which I changed to:

"customTextElements": [{custTextCV3:
       <TABLE>
      <TR>
        <TD>"PIN_COMM"</TD>
        <TD>resultsPIN_COMM</TD>
      </TR>
       </TABLE>
     }],

but I get a syntax error when the code hits <TABLE>.

I'm just not sure if customTextElements allow the creation of an HTML table.

Re: Formatting Custom Text Elements in Print Task

TracySchloss — Fri, 20 Jun 2014 13:40:38 GMT

I don't know if you can or not. It's the common mechanism used when you're trying to align data the way you're describing. It's been quite a while since I did anything with customTextElements. Once I had mine set up, I haven't needed to get back into it again. What if you rethought how you're using your added text elements in your layout? If you need to have the data aligned, could you not manage that somehow by having your custom elements aligned the way you want to start? You'd have to play with it a bit to see if you could get away with that as a workaround or not.

I'm not sure why sort of behavior you'd get with your longer text string. But you're trying to do something very specific with a limited set of tools at your disposal.

Re: Formatting Custom Text Elements in Print Task

Anonymous User — Fri, 13 Mar 2015 12:23:31 GMT

I can confirm, formatting this custom element object does not work.

ESRI should definitely consider allowing this ASAP as of next API release or so. And allow formatting from the ArcMap MXD print template. Which would be even easier than coding: So we can set up dynamic text in ArcMap, and perhaps link it to an attribute table that way, for example, to display an attribute table on the Print result based on what the user selects. or something else with dynamic text and Data Driven Pa

Re: Formatting Custom Text Elements in Print Task

ChrisSmith7 — Fri, 13 Mar 2015 14:00:21 GMT

I would like to second this!

Re: Formatting Custom Text Elements in Print Task

Anonymous User — Thu, 19 Mar 2015 15:22:45 GMT

I have not been able to get a text string of variable to appear. I followed your example above exactly. version 3.11 and 3.13 of API. Note that if I explicitly set the variable, such as resultsPIN_COMM, to be a text string, e.g. "Teststring" then it appears on the printout in my customTextElements element i Created in ArcMap. However once I try to use a variable and pass a string into it, it doesn't. In other words if I have a line of code:

resultsPIN_COMM = "Teststring"

and then a code block similar to yours to pass everything into the printout, it works.

if I have an object somewhere else in the code, let's say parcelObject and I pass

resultsPIN_COMM = parcelObject.attributes.COMMID

then it doesn't work. I've noticed it's simply a blank in the JSON, it never makes it into there. And yet, if I log resultsPIN_COMM into the Console on a print_start event, it will give its value just fine. For example, Jimmy Dean. Would be a text string. (this is a field of names for us)

Thoughts?

Here is a complete working example you can paste into the ESRI Sandbox and it works. Except that it doesn't. Until you explicitly set a value. Notice I have a commented out line "vPIN" that you can uncomment to expliclity set and see what I mean. Any thoughts anyone? Support is saying variables are not supported in the customTextElements but it seems like you got it to work? All it is doing is passing a string, it seems like it should work, no? I was thinking that phrase from the API Docs meant that dynamicText from ArcMap in the MXD would not work. Nothing API related. i.e. you couldn't use Data-driven pages or something... but I would think variables in Javascript should work right?

/////////

<!DOCTYPE html>

<html>

<head>

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

var getWebData = {};

// Web endpoints to user friendly names

//////// -- utilities

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

//getWebData.GeometryServerAmazon = "http://sampleserver5.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer";

// ESRI provided data

//getWebData.ESRIWorldStreetMap = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";

//getWebData.ESRIWorldImagery = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";

//getWebData.ESRIWorldTopoMap = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";

//getWebData.ESRIWorldBlackWhite = "http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer";

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

findTask,

findParams,

navToolbar,

esriConfig,

center,

zoom,

grid,

store,

content,

selectionToolbar,

imageServiceParams,

SAGIS2013Imagery,

SAGIS2011Imagery,

SAGIS2008Imagery,

SagisOrgLayers,

initialExtentWS,

initialExtentIS,

initialExtentDT,

initialExtentTI,

initialExtentSS,

bookmark,

storageName,

useLocalStorage,

bmJSON,

legend,

addressLocator,

addressLocatorUrl,

pinLocator,

pinLocatorUrl,

SAGISCenterlineLocator,

SAGISToC,

overview,

scalebar,

geocoder,

measurement,

maponclick,

selectionLayer,

featureLayer,

ClearBox,

tb,

editToolbar,

myText,

tip,

tooltip,

ctxMenuForGraphics,

ctxMenuForMap,

ctxMenuForMapGoogleStreetview,

selected,

currentLocation,

PolyArea,

visible = [],

measureUnit,

Lat,

Long,

linelength,

selectedTrans,

areaParams,

evt,

labelPoints,

labelPoint,

eventHandlerIdentify,

handlerPictometry,

handlerStreetView,

arrowTest,

addText,

printParcel,

DrawToolbar;

var activetext = "off";

printParcel = [];

printParcel.attributes = [];

printParcel.attributes.OWNERNAME = "";

printParcel.attributes.COMMID = "";

printParcel.attributes.FLOODID = "";

printParcel.attributes.ZONEID = "";

printParcel.attributes.FULLADDRESS = "";

printParcel.attributes.PIN = "";

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;

var gridItems = [];

var memStore;

var toolbar;

function parcelSearchWidget() {

if (eventHandlerIdentify != null) {

eventHandlerIdentify.remove();

};

if (maponclick != undefined) maponclick.remove();

initializeSearchByAttributes();

}

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;

}

function searchByGeometry(geometry) {

cleanqParcels();

qParcels.geometry = geometry;

qtParcels.execute(qParcels, handleQueryResults);

}

// 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 = $.extend(true, {}, parcels[0]);

// printParcel.attributes.PIN = "222";

printParcel = parcels[0];

/// printParcel.attributes.PIN = "111";

console.log(printParcel);

});

} //end of handleClickQuery func

// End of parcel Widget

// Start of Print Widget

var templates = new PrintTemplate();

var layoutvar = {

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

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

// "legendLayers": [], /// put a array of visible layers here or do NOT specify this to include all "operational" layers per esri docs at https://developers.arcgis.com/javascript/jsapi/legendlayer-amd.html and https://developers.arcgis.com/javascript/jsapi/printtemplate-amd.html#layoutoptions

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

};

var Owner;

var PIN;

var PropertyAddress;

var Zoning;

var FloodZone;

var Alderman;

var Commissioner;

var VotingPrecinct;

var ElementarySchool;

var MiddleSchool;

var HighSchool;

var ZipCode;

var NeighborhoodCode;

var Neighborhood;

var LegalDescription;

var CalculatedAcreage;

var LandValue;

var BuildingValue;

var RealEstateValue;

var SalePrice;

var SalesDate;

Owner = "Owner:";

PIN = "PIN:";

PropertyAddress = "PropertyAddress:";

Zoning = "Zoning:";

FloodZone = "FloodZone:";

Alderman = "Alderman:";

Commissioner = "Commissioner:";

VotingPrecinct = "VotingPrecinct:";

ElementarySchool = "ElementarySchool:";

MiddleSchool = "MiddleSchool:";

HighSchool = "HighSchool:";

ZipCode = "ZipCode:";

NeighborhoodCode = "NeighborhoodCode:";

Neighborhood = "Neighborhood:";

LegalDescription = "LegalDescription:";

CalculatedAcreage = "CalculatedAcreage:";

LandValue = "LandValue:";

BuildingValue = "BuildingValue:";

RealEstateValue = "RealEstateValue:";

SalePrice = "SalePrice:";

SalesDate = "SalesDate:";

// printParcel.attributes.PIN = "text";

vPIN = printParcel.attributes.COMMID;

console.log(printParcel);

console.log(printParcel.attributes.COMMID);

//alert(vPIN);

// vPIN = "2-0165 -01-001";

//alert(vPIN);

var layoutvar2 = {

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

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

"customTextElements": [{

"infoDetails":

//"PARCEL INFORMATION" + "\n" +

//vPIN

"PARCEL INFORMATION" + "\n" +

Owner + printParcel.attributes.OWNERNAME

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

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

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

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

+ "\n" + Alderman +

"\n" + Commissioner + vPIN + "\n"

+ "\n" + VotingPrecinct + "\n" + ElementarySchool

+ "\n" + MiddleSchool + "\n" + HighSchool

+ "\n" + ZipCode + "\n" + NeighborhoodCode

+ "\n" + Neighborhood

+ "\n" + LegalDescription

+ "\n" + CalculatedAcreage

+ "\n" + LandValue + "\n" + BuildingValue + "\n" + RealEstateValue + "\n" + SalePrice + "\n" + SalesDate + "\n"

}],

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

};

templates = [

{

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

format: "PDF",

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

layoutOptions: layoutvar2

{

label: "PDF Landscape 8.5 x 11",

format: "PDF",

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

layoutOptions: layoutvar

{

label: "PDF Portrait 8.5 x 11",

format: "PDF",

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

layoutOptions: layoutvar

{

label: "JPG Landscape 8.5 x 11",

format: "JPG",

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

layoutOptions: layoutvar

{

label: "JPG Portrait 8.5 x 11",

format: "JPG",

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

layoutOptions: layoutvar

}

];

var printTitlep;

// create the print dijit

printer = new Print({

"map": map,

"templates": templates,

url: getWebData.SAGISPrintServiceAmazon

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

//add the class with the print icon

query(".esriPrint").addClass("esriPrint");

printer.startup();

function handleError(err) {

console.log("Something broke: ", err);

}

printer.on('print-start', function (evt) {

console.log("printstart....");

console.log(printParcel);

console.log(printParcel.attributes.COMMID);

});

printer.on('print-complete', function (evt) {

window.open(evt.result.url); //auto open new window after clicking print

esri.show(printer); // hide printout link, show printer icon again

});

// End of Print Widget

});

</script>

</head>

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

<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: Formatting Custom Text Elements in Print Task

MichaelVolz — Tue, 24 Mar 2015 18:03:04 GMT

Kevin:

I can try to help you get the attribute information passed to the print service (I was able to accomplish this), but the process, as I created it, was very clunky. Just let me know what information you need.

Re: Formatting Custom Text Elements in Print Task

Anonymous User — Tue, 24 Mar 2015 18:08:45 GMT

Michael,

I just got it working. wrapped the printing widget inside a function and trigger on click of parcel. I will post a working example today or tomorrow. Thank you though! I based it off of your work. But now it's extended. I'll post a full working sample in a bit.

Re: Formatting Custom Text Elements in Print Task

Anonymous User — Thu, 26 Mar 2015 15:28:50 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";

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