Printing Popup Contents

15897
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
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   What browser and version are you using?

0 Kudos
ÇankayaBelediyesi
New Contributor III

Robert,

Chrome: 54.0.2840.71 m

Firefox: 49.0.2

Testing in both.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   I am at a loss here. I don't know why you are getting "Get Layout Templates Info Error".

0 Kudos
ÇankayaBelediyesi
New Contributor III

Robert,

I managed to get rid of the error. Also, method #1 working fine now, so I can manually add values to the printout. The only problem is to make it automatically.

Can you tell me if there is something missing from the code below? (The rest of Print.js is unchanged v2.2)

  • On ArcMap, "Element Name" of the text field = DistrictName
  • On eSearch widget, "Layer Name" = Parcels, included field = NAME

  • template.showAttribution = false;
    
  • //See if there is a parcel search layer added to the map
       var plyr;
       array.some(this.map.graphicsLayerIds, lang.hitch(this, function (layerId) {
         var lyr = this.map.getLayer(layerId);
         if(lyr.name === "Search Results: Parcels"){
           plyr = lyr;
           return true;
         }
       }));
       if(plyr){
         var xppins = "", obj, cTextElements = [];
         array.map(plyr.graphics, lang.hitch(this, function(gra, index){
           if (plyr.graphics.length === 1){
             obj = {DistrictName: "District Name: " + gra.attributes.NAME};
             cTextElements.push(obj);
           } else if (plyr.graphics.length > 1){
          
           }
           template.layoutOptions.customTextElements = cTextElements;
         }));
       }
      //end my change
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   Do you have more than one parcel selected? I don't see anything wrong with that code.

0 Kudos
ÇankayaBelediyesi
New Contributor III

Nope, I just select 1 feature, popup shows up, then I use print widget.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   Try updating to this code and then check you browsers web console for the messages:

   //See if there is a parcel search layer added to the map
   var plyr;
   array.some(this.map.graphicsLayerIds, lang.hitch(this, function (layerId) {
     var lyr = this.map.getLayer(layerId);
     if(lyr.name === "Search Results: Parcels"){
       plyr = lyr;
       return true;
     }
   }));
   if(plyr){
     console.info("we found the layer");
     var xppins = "", obj, cTextElements = [];
     array.map(plyr.graphics, lang.hitch(this, function(gra, index){
       if (plyr.graphics.length === 1){
         console.info("there is only one feature in the layer");
         obj = {DistrictName: "District Name: " + gra.attributes.NAME};
         cTextElements.push(obj);
         console.info(obj);
       } else if (plyr.graphics.length > 1){
      
       }
       template.layoutOptions.customTextElements = cTextElements;
     }));
   }
  //end my change

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

  Make sure you are adding the eSeach layer as an operational layer.

0 Kudos
ÇankayaBelediyesi
New Contributor III

Hello Robert,

I placed some console messages here and there as you asked. 

var plyr;
array.some(this.map.graphicsLayerIds, lang.hitch(this, function (layerId) {
    console.info("layerId: ", layerId);
    var lyr = this.map.getLayer(layerId);
    console.info("layer name: ", lyr.name);
    if (lyr.name === "Search Results: Parcels") {
        plyr = lyr;
        return true;
    }
}));

I get my layer names & ids first, then;

layerId: labels

layer name: undefined
layerId: graphicsLayer3
layer name: undefined

Any idea why the name is passed as undefined?

Thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

 

  Please use the advanced editor to attach your eSearch widget config_Enhanced Search Widget.json

0 Kudos