topic Re: Printing Popup Contents in Web AppBuilder Custom Widgets Questions

Printing Popup Contents

ÇankayaBelediyesi — Wed, 26 Oct 2016 07:42:20 GMT

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-from-a-coded-value-domain

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.

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

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

Thanks in advance.

Re: Printing Popup Contents

RobertScheitlin__GISP — Wed, 26 Oct 2016 13:18:37 GMT

Ç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-application

Re: Printing Popup Contents

ÇankayaBelediyesi — Sun, 12 Dec 2021 08:19:50 GMT

Robert, thank you for your response

Let me go through what I've been doing:

Insert text to "A4 Landscape.mxd", change their Element Names to cte_1 & cte_2
Use "Get Layout Templates Info (Server)" tool and point to the folder of "A4 Landscape.mxd"
Use "Export Web Map" tool,
- Format: PDF
- Layout Templates Folder: folder of "A4 Landscape.mxd"
- Layout Template: A4 Landscape
Publish "Export Web Map" as Geoprocessing Server

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

Server Manager: Get Task URL for Export Web Map
WAB Print Widget: Use URL here

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

Thanks

Re: Printing Popup Contents

RobertScheitlin__GISP — Thu, 27 Oct 2016 13:11:07 GMT

Ç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"){‍

Re: Printing Popup Contents

ÇankayaBelediyesi — Thu, 27 Oct 2016 13:39:40 GMT

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.

Re: Printing Popup Contents

ÇankayaBelediyesi — Thu, 27 Oct 2016 13:41:24 GMT

By the way, I am using Web AppBuilder for ArcGIS (Developer Edition) 2.2

Re: Printing Popup Contents

RobertScheitlin__GISP — Thu, 27 Oct 2016 13:43:44 GMT

Çankaya,

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

Re: Printing Popup Contents

ÇankayaBelediyesi — Sun, 12 Dec 2021 08:19:52 GMT

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.

Re: Printing Popup Contents

RobertScheitlin__GISP — Thu, 27 Oct 2016 14:41:10 GMT

Ç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

Re: Printing Popup Contents

ÇankayaBelediyesi — Sun, 12 Dec 2021 08:19:55 GMT

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?

Re: Printing Popup Contents

RobertScheitlin__GISP — Mon, 31 Oct 2016 14:12:05 GMT

Çankaya,

What browser and version are you using?

Re: Printing Popup Contents

ÇankayaBelediyesi — Tue, 01 Nov 2016 05:27:06 GMT

Robert,

Chrome: 54.0.2840.71 m

Firefox: 49.0.2

Testing in both.

Re: Printing Popup Contents

RobertScheitlin__GISP — Tue, 01 Nov 2016 13:17:09 GMT

Çankaya,

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

Re: Printing Popup Contents

ÇankayaBelediyesi — Sun, 12 Dec 2021 08:19:58 GMT

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

Re: Printing Popup Contents

RobertScheitlin__GISP — Thu, 03 Nov 2016 13:49:46 GMT

Çankaya,

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

Re: Printing Popup Contents

ÇankayaBelediyesi — Thu, 03 Nov 2016 13:51:38 GMT

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

Re: Printing Popup Contents

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:20:01 GMT

Ç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‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Printing Popup Contents

RobertScheitlin__GISP — Thu, 03 Nov 2016 19:54:26 GMT

Çankaya,

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

Re: Printing Popup Contents

ÇankayaBelediyesi — Sun, 12 Dec 2021 08:20:03 GMT

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

Re: Printing Popup Contents

RobertScheitlin__GISP — Fri, 04 Nov 2016 11:56:40 GMT

Çankaya,

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