Printing Popup Contents

[ÇankayaBelediyesi]

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:

Popup window:

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.

[ÇankayaBelediyesi]

Hello again Robert,

var gra = this.map.infoWindow.getSelectedFeature();
var obj = { TXT1: "Name: " + gra.attributes.NAME };

Once a feature is selected, Popup Window is displayed. When Popup Window is closed, feature is no longer selected but the above code still uses the last selected feature.

How can I clear getSelectedFeature() when Popup Window is closed?

[RobertScheitlin__GISP]

this.map.infoWindow.clearFeatures()

[ÇankayaBelediyesi]

Thank you, but I meant where and can I handle the event when the Popup Window is closed.

I tried the ones below but didn't work.

map.infoWindow.on('hide', function(){
   console.info("infoWindow hide event");
   this.map.infoWindow.clearResults();
});

====================================

dojo.connect(map.infoWindow.hide, "onclick", function () {
   console.info("infoWindow hide event");
   this.map.infoWindow.clearResults();
 });

[ÇankayaBelediyesi]

Mission accomplished.

this.map.infoWindow.on('hide', function(){
   console.info("infoWindow hide event");
   this.map.infoWindow.clearFeatures();
});

I am going to prepare a tutorial for printing popup contents soon.

Thank you Robert

[ÇankayaBelediyesi]

1. Create a new folder
2. Copy layout files from C:\Program Files (x86)\ArcGIS\Desktop10.4\Templates\ExportWebMapTemplates to your new folder
3. Go to your new folder and open mxd files on ArcMap
4. Insert menu > Text
5. Right click on Text > Properties > Size and Position > type "TXT1" for "Element Name"
6. Geoprocessing menu > Search For Tools > type "printing" and search > select Printing (Toolset)
7. Get Layout Templates Info (Server) (Tool) > select your new folder > OK
8. Export Web Map (Tool) > "Web Map as JSON" leave it blank > "Output File" leave it as it is > "Format" select a format > "Layout Templates Folder" select your new folder > "Layout Template" select "A4 Landscape" > OK
9. Geoprocessing menu > Results > Current Session > right click on Export Web Map > Share As Geoprocessing Service
10. Add Result > Get Layout Templates Info
11. Publish a service > > > > Publish (it may copy some files to the server)
12. Go to WebAppBuilderForArcGIS/client/stemapp/widgets/Print/Print.js
13. Make the following changes (TXT1 is the element name used in ArcMap, NAME is the field name)
    

    // edit start
    var cTextElements = [];
    var gra = this.map.infoWindow.getSelectedFeature();
    var obj = { TXT1: "Name: " + gra.attributes.NAME };
    cTextElements.push(obj);
    template.layoutOptions.customTextElements = cTextElements;
    // edit end
    
    this.printparams.template = template;

14. Make the following changes (to clear selected features when popup window is closed)
    

    utils.combineRadioCheckBoxWithLabel(extentRadio, this.printWidgetMapExtentLabel);
    
    // edit start
    this.map.infoWindow.on('hide', function () {
      this.map.infoWindow.clearFeatures();
    });
    // end edit

15. ArcGIS Server Manager > Capabilities > URLs > REST URL > Export Web Map > get URL
16. Create a new app > add Print widget > use Export Web Map URL

[KipoKipo]

Hi Çankaya,

Thanks for your helpful write-up. I was able to publish GP service and set up the template and ready to populate attributes fields to the print outs.

However I always got field value as "undefined". I was wondering if you could share your Print.js and eSearch files if they have been customized so I can take a better look at the customization.

I am not a big JS user so kinda of trying to picking up things by self-learning.

Thanks in advance!

KP

[ÇankayaBelediyesi]

Hello Kipo,

Sorry for the delay.

I have only made changes on Print.js and they are shown on the list above. Please check again. If you can't make it work, feel free to send me with your print.js so I can have a look.

Take care.

[KipoKipo]

Thanks for your reply Cankaya.

I finally got it to work although I moved to other projects these days.

KP

[RichBell]

Robert,

This method works great but how do I format the date and numeric fields?

See attached for fields "SALEDATE" AND "ACRES".

[RobertScheitlin__GISP]

Rich,

  You would use dojo formatters.

dojo/number — The Dojo Toolkit - Reference Guide 

dojo/date/locale::format() — The Dojo Toolkit - Reference Guide