Printing Popup Contents

15909
75
Jump to solution
10-26-2016 12:42 AM
ÇankayaBelediyesi
New Contributor III

I have a Web Mapping Application with a standard Print Widget. I would like to include the contents of the popup window in the printout.

Here is an example:

GIS Portal for the City of Abilene, TX

Standard printout:

Standard printout

Popup window:

Popup window

Desired printout:

Desired printout

My research so far:

There is a BLOG POST by esri explaining how to do this. This post shows 2 methods. The first method is not suitable for my purposes cause it requires manual data entries for each printout. The second method seems incomplete, Format & Layout_Template parameters are missing. Print does not work even if I add those parameters manually before publishing the service. If the second method worked properly, I would have modified it to match my needs, unfortunately it doesn't.

http://stackoverflow.com/questions/32363943/arcgis-javascript-web-map-printout-with-popup-shown

dojoOn(map.infoWindow, "selection-change", function(){ //build custom text here }

My knowledge on JavaScript is limited, so I couldn't manage what he explained here. Where am I supposed to add this and what should I include in the function?

http://gis.stackexchange.com/questions/111360/populate-a-layout-text-element-with-the-description-fr...

We have the print button generating an html page that pulls data from the database and formats it in pretty much an exact replica of the .mxd we were using. For the map it uses a function on the rest endpoint to generate an image from the map service.

This seems even more complicated than the others.

Either one the above solutions works for me.

  1. add popup contents at the bottom of the print layout
  2. make use of "selection-change" event
  3. generate a new html page
  4. any other suggestion

TL;DR I want to include popup window or it's contents in the printout.

Thanks in advance.

75 Replies
DeniseTingstad1
New Contributor III

Thank you for the quick reply, I appreciate it. 

I put the code in the print.js file of the Print widget, I believe in the correct spots, however, the print widget does not do anything now, just shows a blank panel (see code below).  If this is of any help, this information is going to a custom print service and the map window in the printout is small, 2.5in x 3.5in.  Am I missing something else?

Thanks again.

print: function() {
	  	//DT edit
	    var myExtent = this.map.infoWindow.getSelectedFeature()._extent;
        this.map.setExtent(myExtent.expand(1.25), true);
	    //DT end edit	
			setTimeout(function(){	//DT edit
			  if (this.printSettingsFormDijit.isValid()) {
				var form = this.printSettingsFormDijit.get('value');
				lang.mixin(form, this.layoutMetadataDijit.get('value'));
				lang.mixin(form, this.forceAttributesFormDijit.get('value'));
				lang.mixin(form, this.labelsFormDijit.get('value'));
				this.preserve = this.preserveFormDijit.get('value');
				lang.mixin(form, this.preserve);
				this.layoutForm = this.layoutFormDijit.get('value');
				var mapQualityForm = this.mapQualityFormDijit.get('value');
				var mapOnlyForm = this.mapOnlyFormDijit.get('value');
				lang.mixin(mapOnlyForm, mapQualityForm);

				var elementsObj = this.customTextElementsDijit.get('value');
				var cteArray = [], hasDate = false, locale = dojoConfig.locale || 'en';
				for (var p in elementsObj) {
				  var cte = {};
				  if (p === 'Date') {
					hasDate = true;
				  }
				  cte[p] = elementsObj[p];
				  cteArray.push(cte);
				}
				if(!hasDate) {
				  cteArray.push({ Date: new Date().toLocaleString(locale) });
				}

				var templateInfo = this._currentTemplateInfo;
				var hasAuthorText = lang.getObject('layoutOptions.hasAuthorText', false, templateInfo);
				var hasCopyrightText = lang.getObject('layoutOptions.hasCopyrightText',
				  false, templateInfo);
				var hasTitleText = lang.getObject('layoutOptions.hasTitleText', false, templateInfo);

				var template = new PrintTemplate();
				template.format = form.format;
				template.layout = form.layout;
				template.preserveScale = (form.preserveScale === 'true' || form.preserveScale === 'force');
				template.forceFeatureAttributes = form.forceFeatureAttributes && form.forceFeatureAttributes[0];
				template.label = form.title;
				template.exportOptions = mapOnlyForm;
				template.showLabels = form.showLabels && form.showLabels[0];
				template.layoutOptions = {
				  authorText: hasAuthorText ? form.author : "",
				  copyrightText: hasCopyrightText ? (form.copyright || this._getMapAttribution()) : "",
				  legendLayers: this._getLegendLayers(), // fix issue 7744
				  titleText: hasTitleText ? form.title : "",
				  customTextElements: cteArray,
				  scalebarUnit: this.layoutForm.scalebarUnit
				};
				
				
				
				// DT print attribute information of the selected feature
				var cTextElements = [];
				var gra = this.map.infoWindow.getSelectedFeature();
				
				var obj1 = { val_ADDRESS: gra.attributes.ADDRESS };
				cTextElements.push(obj1);
				var obj2 = { val_NEIGHBORHOOD: gra.attributes.NEIGHBORHOOD };
				cTextElements.push(obj2);
				var obj3 = { val_POLLING_PLACE_ZIP: gra.attributes.POLLING_PLACE_ZIP };
				cTextElements.push(obj3);
				var obj3 = { val_ZONING: gra.attributes.ZONING };
				cTextElements.push(obj3);
				var obj4 = { val_ZONEDESC: gra.attributes.ZONEDESC };
				cTextElements.push(obj4);
				var obj5 = { val_SCHOOL_DIST: gra.attributes.SCHOOL_DIST };
				cTextElements.push(obj5);
				var obj6 = { val_ELEM_SCHOOL: gra.attributes.ELEM_SCHOOL };
				cTextElements.push(obj6);
				var obj7 = { val_MIDDLE_SCHOOL: gra.attributes.MIDDLE_SCHOOL };
				cTextElements.push(obj7);
				var obj8 = { val_HIGH_SCHOOL: gra.attributes.HIGH_SCHOOL };
				cTextElements.push(obj8);
				var obj9 = { val_FEMA_FLDZN: gra.attributes.FEMA_FLDZN };
				cTextElements.push(obj9);
				var obj10 = { val_PARK_COUNT: gra.attributes.PARK_COUNT };
				cTextElements.push(obj10);
				var obj11 = { val_NEAREST_PARK: gra.attributes.NEAREST_PARK };
				cTextElements.push(obj11);
				var obj12 = { val_ELECTION_DISTRICT: gra.attributes.ELECTION_DISTRICT };
				cTextElements.push(obj12);
				var obj13 = { val_POLLING_PLACE: gra.attributes.POLLING_PLACE };
				cTextElements.push(obj13);
				var obj14 = { val_POLLING_PLACE_ADD: gra.attributes.POLLING_PLACE_ADD };
				cTextElements.push(obj14);
				var obj15 = { val_RECYCLEDAY: gra.attributes.RECYCLEDAY };
				cTextElements.push(obj15);
				var obj16 = { val_ELEC_COMP: gra.attributes.ELEC_COMP };
				cTextElements.push(obj16);
				var obj17 = { val_ELEC_LINK: gra.attributes.ELEC_LINK };
				cTextElements.push(obj17);
				var obj18 = { val_MNSENATE: gra.attributes.MNSENATE };
				cTextElements.push(obj18);
				var obj19 = { val_MNHOUSE: gra.attributes.MNHOUSE };
				cTextElements.push(obj19);
				var obj20 = { val_CP_OFFICER: gra.attributes.CP_OFFICER };
				cTextElements.push(obj20);
				var obj21 = { val_MAYOR: gra.attributes.MAYOR };
				cTextElements.push(obj21);
				var obj22 = { val_COUNCIL1: gra.attributes.COUNCIL1 };
				cTextElements.push(obj22);
				var obj23 = { val_COUNCIL2: gra.attributes.COUNCIL2 };
				cTextElements.push(obj23);
				var obj24 = { val_COUNCIL3: gra.attributes.COUNCIL3 };
				cTextElements.push(obj24);
				var obj25 = { val_COUNCIL4: gra.attributes.COUNCIL4 };
				cTextElements.push(obj25);
				var obj26 = { val_CITYCLEANUP: gra.attributes.CITYCLEANUP };
				cTextElements.push(obj26);
				var obj27 = { val_GAS_COMP: gra.attributes.GAS_COMP };
				cTextElements.push(obj27);
				var obj28 = { val_GAS_LINK: gra.attributes.GAS_LINK };
				cTextElements.push(obj28);
				var obj29 = { val_ASSESS_PHOTO: gra.attributes.ASSESS_PHOTO };
				cTextElements.push(obj29);
				var obj30 = { val_BUS_ROUTE: gra.attributes.BUS_ROUTE };
				cTextElements.push(obj30);
				var obj31 = { val_UTILITYBILLING: gra.attributes.UTILITYBILLING };
				cTextElements.push(obj31);
				var obj32 = { val_FEMA_FLDZN_DESC: gra.attributes.FEMA_FLDZN_DESC };
				cTextElements.push(obj32);
				
				
				template.layoutOptions.customTextElements = cTextElements;
				// DT end print attribute of selected feature
				
				
				this.printparams.template = template;
				this.printparams.extraParameters = { // come from source code of jsapi
				  printFlag: true
				};
				// reset outSpatialReference
				this.printparams.outSpatialReference = undefined;
				var outWkid = +this.wkidInput.get('value');
				if (srUtils.isValidWkid(outWkid) && outWkid !== this.map.spatialReference.wkid) {
				  this.printparams.outSpatialReference = new SpatialReference(outWkid);
				}
				var fileHandel = this.printTask.execute(this.printparams);

				var result = new printResultDijit({
				  count: this.count.toString(),
				  icon: (form.format === "PDF") ? this.pdfIcon : this.imageIcon,
				  docName: form.title,
				  title: form.format + ', ' + form.layout,
				  fileHandle: fileHandel,
				  nls: this.nls
				}).placeAt(this.printResultsNode, 'last');
				result.startup();
				domStyle.set(this.clearActionBarNode, 'display', 'block');
				this.count++;
			  } else {
				this.printSettingsFormDijit.validate();
			  }
			}.bind(this, 1000); //DT edit
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
ÇankayaBelediyesi
New Contributor III

Did it work before the final modification to the code? 

Please post screenshots of the problem areas.

0 Kudos
DeniseTingstad1
New Contributor III

Yes, the print worked before.  When I comment out the following lines

   setTimeout(function(){
   and
   }.bind(this, 1000);
the print widget works and it centers on the parcel and does the expand to 25% extent around the
selected parcel, within the application, but does not carry over to the printout. The printout keeps the zoom level set in the search
widget or if I happen to zoom in/out on the map.

extent of search widget

--------------------------------------------

extent after clicking the print button

-----------------------------------------------

extent on printout, keeps the same scale that is set in the search function or if I zoom in/out on the map

0 Kudos
ÇankayaBelediyesi
New Contributor III

Sorry Denise, I made a typo in the earlier post.

print: function () {
    var myExtent = this.map.infoWindow.getSelectedFeature()._extent;
    this.map.setExtent(myExtent.expand(1.25), true);
 
       setTimeout(function(){
          if (this.printSettingsFormDijit.isValid()) {
             ...
          } else {
             this.printSettingsFormDijit.validate();
          }
       }.bind(this), 1000); // should be like this
},

This should work.

DeniseTingstad1
New Contributor III

Thank you so much.  I appreciate all of your help.  It seems to be working now the way I would like it to.  I did have to adjust the expand factor to 4.5 from 1.25 and so far any size selected parcels are fulling shown in the printout.

0 Kudos
ÇankayaBelediyesi
New Contributor III

Glad to be of help.

0 Kudos