Printing Popup Contents

8621
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
ÇankayaBelediyesi
New Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

this.map.infoWindow.clearFeatures()

0 Kudos
ÇankayaBelediyesi
New Contributor III

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();
});
0 Kudos
ÇankayaBelediyesi
New Contributor III

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
New Contributor III
  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
New Contributor III

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

0 Kudos
ÇankayaBelediyesi
New Contributor III

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.

0 Kudos
KipoKipo
New Contributor III

Thanks for your reply Cankaya.

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

KP

0 Kudos
RichBell
Occasional Contributor

Robert,

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

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
0 Kudos