Printing Popup Contents

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

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   My method to get this done is to use method 1 in the blog post but also automatically feed those custom text fields in the print widget using a feature from a custom GraphicsLayer in the map.

So I have a custom search widget that selects my parcel and that widget creates a graphics layer in the map with all the attributes I need. The WAB print widget (which has been customized) then looks for that graphics layer and if it finds it it takes those attributes and adds then to the print layout customTextElements array.

Here is one thread:

Pushing Data From eSearch to Custom Print Template 

Here is a thread where I show my code changes to the print widget for this:

https://community.esri.com/thread/184166-how-to-print-selected-attributes-on-parcels-in-wab-applicat... 

View solution in original post

75 Replies
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   My method to get this done is to use method 1 in the blog post but also automatically feed those custom text fields in the print widget using a feature from a custom GraphicsLayer in the map.

So I have a custom search widget that selects my parcel and that widget creates a graphics layer in the map with all the attributes I need. The WAB print widget (which has been customized) then looks for that graphics layer and if it finds it it takes those attributes and adds then to the print layout customTextElements array.

Here is one thread:

Pushing Data From eSearch to Custom Print Template 

Here is a thread where I show my code changes to the print widget for this:

https://community.esri.com/thread/184166-how-to-print-selected-attributes-on-parcels-in-wab-applicat... 

ÇankayaBelediyesi
New Contributor III

Robert, thank you for your response

Let me go through what I've been doing:

  1. Insert text to "A4 Landscape.mxd", change their Element Names to cte_1 & cte_2
  2. Use "Get Layout Templates Info (Server)" tool and point to the folder of "A4 Landscape.mxd"
  3. Use "Export Web Map" tool,
    • Format: PDF
    • Layout Templates Folder: folder of "A4 Landscape.mxd"
    • Layout Template: A4 Landscape
  4. Publish "Export Web Map" as Geoprocessing Server
  5. C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets\Print\Print.js
    • make changes as in link
    • 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);
               // obj = {PPIN: "PPIN: " + gra.attributes.PPIN};
               // cTextElements.push(obj);
               obj = {DistrictId: "District Id: " + gra.attributes.ID};
               cTextElements.push(obj);
               // obj = {StreetAdd: "Street Address: " + gra.attributes.STREET_ADDRESS};
               // cTextElements.push(obj);
             }else if (plyr.graphics.length > 1){
               // if (xppins === ""){
               //   xppins = gra.attributes.PPIN;
               // } else {
               //   if([7,16,25,34,43,52,61,70,79,88,97].indexOf(index) > -1){
               //     xppins = xppins + ",\r\n" + gra.attributes.PPIN;
               //   }else{
               //     xppins = xppins + ", " + gra.attributes.PPIN;
               //   }
               // }
               // obj = {OwnerName: "Selected PPINs: " + xppins};
               // cTextElements.push(obj);
             }
             template.layoutOptions.customTextElements = cTextElements;
           }));
         }
        //end my change
      
  6. Server Manager: Get Task URL for Export Web Map
  7. WAB Print Widget: Use URL here

Am I missing anything? And how can I include eSearch in this procedure?

Thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

  You are setting a custom text element called "DistrictId" and "DistrictName", but from your step one you only say you have custom text elements called cte_1 and cte_2. Your names need to match.

To include the eSearch (which is a must for the way you are doing the code) you just need to have a search layer called "Parcels" added to the eSearch search layers or you need to change:

if(lyr.name === "Search Results: Parcels"){
ÇankayaBelediyesi
New Contributor III

Robert,

Thank you for the information.

I changed Element Names to "DistrictId" and "DistrictName", added eSearch widget and added a search layer titled "Parcels". As Search URL, corresponding layer's MapServer URL is used. Included All Fields. However, text fields in the prinout remain unchanged. 

0 Kudos
ÇankayaBelediyesi
New Contributor III
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

So your Parcels search layer does have a "NAME" and a "ID" field (with the field name being all uppercase)?

0 Kudos
ÇankayaBelediyesi
New Contributor III

Robert,

Yes the layer have those fields. 

Layer fields: NAME & ID

Text element names: DistrictId & DistrictName

Print.js: 

obj = {DistrictName: "District Name: " + gra.attributes.NAME};
obj = {DistrictId: "District Id: " + gra.attributes.ID};

eSearch:

Add a Search Layer

Title: Parcels

URL: Layer's MapServer URL

Included Fields: Name & ID

I am selecting a feature, popup is shown, then I print. In the printout the feature is selected but text fields are unchanged.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   you need to do some debugging then place some console.info("something"); statements into the code to see if you are getting to those functions

0 Kudos
ÇankayaBelediyesi
New Contributor III

Robert,

Print.js console warning

"Get Layout Templates Info Error"

LayerInfos.getInstance(this.map, this.map.itemInfo)
  .then(lang.hitch(this, function(layerInfosObj) {
    this.layerInfosObj = layerInfosObj;
    return all([this._getPrintTaskInfo(), this._getLayerTemplatesInfo()])
      .then(lang.hitch(this, function(results) {
        var taksInfo = results[0],
          templatesInfo = results[1];
        if (templatesInfo && !templatesInfo.error) {
          var parameters = templatesInfo && templatesInfo.results;
          if (parameters && parameters.length > 0) {
            array.some(parameters, lang.hitch(this, function(p) {
              return p && p.paramName === 'Output_JSON' ?
                this.templateInfos = p.value : false;
            }));
            if (this.templateInfos && this.templateInfos.length > 0) {
              this.templateNames = array.map(this.templateInfos, function(ti) {
                return ti.layoutTemplate;
              });
            }
          }
        } else {
          console.warn('Get Layout Templates Info Error',
            templatesInfo && templatesInfo.error);
        }
        if (!esriLang.isDefined(taksInfo) || (taksInfo && taksInfo.error)) {
          this._handleError(taksInfo.error);
        } else {
          this._handlePrintInfo(taksInfo);
        }
      }));
  })).always(lang.hitch(this, function() {
    this.shelter.hide();
  }));

I am using "A4 Landscape.mxd" which is located under 

C:\Program Files (x86)\ArcGIS\Desktop10.4\Templates\ExportWebMapTemplates

The only modification I made is; Insert Text and change Element Name.

Any ideas?

0 Kudos