Printing Popup Contents

16305
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

Robert,

Normally I am modifying the files on the client side. The file you mentioned "config_eSearch.json" is located under:

server>apps>9>configs>eSearch

I am not sure what to do with config_eSearch.json file, it already contains a layer named Parcels.

"layers": [
  {
    "name": "Parcels",
    "url": "https://blah.blah.blah/arcgis/rest/services/blah/blah/MapServer/0",
    "definitionexpression": "",
    "spatialsearchlayer": false,
    "export2Csv": false,
    "export2Geo": false,
    "export2FC": false,
    "zoomScale": 10000,
    "forceZoomScale": false,
    "shareResult": true,
    "addToAttrib": false,
    "expressions": {
      "expression": []
    },
    "titlefield": null,
    "fields": {
      "all": false,
      "field": [
        {
          "name": "ID",
          "alias": "ID"
        },
        {
          "name": "NAME",
          "alias": "NAME"
        },
...
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

  FYI, when I am editing code, I first create a new app and that copies the client/stemapp contents or to the new app (i.e. server\apps\9) and t in that apps files is where I make all my changes. If you make you changes in the stemapp then you have to create a new app or ad and remove the widget to get the code changes into your app.

So on immediate thing that strikes me as off from the portion of the json you posted above is that you have no expressions defined. You need some search expression.

ÇankayaBelediyesi
New Contributor III

Hello again Robert,

Thanks for the recommendation. That's exactly what I'm doing. Everytime I make changes on the code, I create a new app. Read about this on one of your other posts.

After many modifications on eSearch parameters, Print layout still remains unchanged. 

First I changed Search Layer parameters from the UI, tried different Search Expressions, didn't work. Then I manually edited config.json to make my Search Layer parameters similar to the others.

{
  "name": "Parcels",
    "url": "https://.../server/rest/.../.../MapServer/0",
    "definitionexpression": "",
    "spatialsearchlayer": true,
    "export2Csv": false,
    "export2Geo": false,
    "export2FC": false,
    "zoomScale": 10000,
    "forceZoomScale": false,
    "shareResult": true,
    "addToAttrib": true,
    "expressions": {
  "expression": [
    {
      "alias": "Parcel Name",
      "textsearchlabel": "Search label",
      "values": {
        "value": [
          {
            "fieldObj": {
              "name": "NAME",
              "label": "NAME",
              "shortType": "string",
              "type": "esriFieldTypeString"
            },
            "valueObj": {},
            "prompt": "NAME starts with",
            "textsearchhint": "hint",
            "sqltext": "NAME LIKE '[value]%'",
            "operation": "stringOperatorStartsWith",
            "userlist": ""
          }
        ]
      }
    }
  ]
},
  "titlefield": "NAME",
    "fields": {
  "all": false,
      "field": [
    {
      "name": "NAME",
      "alias": "NAME"
    },
    {
      "name": "ID",
      "alias": "ID"
    },
    {
      "name": "NUMBER1",
      "alias": "NUMBER1",
      "isnumber": true
    },
    {
      "name": "NUMBER2",
      "alias": "NUMBER2",
      "isnumber": true
    },
    {
      "name": "SHAPE.AREA",
      "alias": "SHAPE.AREA",
      "isnumber": true
    },
    {
      "name": "SHAPE.LEN",
      "alias": "SHAPE.LEN",
      "isnumber": true
    }
  ]
},
  "links": {
  "link": []
},
  "orderByFields": [],
    "layersymbolfrom": "config"
},
{
  "name": "Traffic Cameras",
    "url": "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/...",
    "definitionexpression": "",
    "spatialsearchlayer": true,
    "zoomScale": 5000,
    "shareResult": true,
    "addToAttrib": true,
    "expressions": {
  "expression": [
    {
      "alias": "Traffic Camera Description",
      "textsearchlabel": "Search Traffic Cameras by Location...",
      "values": {
        "value": [
          {
            "fieldObj": {
              "name": "DESCRIPTION",
              "label": "DESCRIPTION",
              "shortType": "string",
              "type": "esriFieldTypeString"
            },
            "valueObj": {},
            "prompt": "DESCRIPTION starts with",
            "textsearchhint": "Example: I-71",
            "sqltext": "DESCRIPTION LIKE '[value]%'",
            "operation": "stringOperatorStartsWith",
            "userlist": "I-71,I-64"
          }
        ]
      }
    }
  ]
},
  "titlefield": "DESCRIPTION",
    "fields": {
  "all": false,
      "field": [
    {
      "name": "DESCRIPTION",
      "alias": "Description"
    },
    {
      "name": "URL",
      "alias": "Show Image",
      "visible": false
    },
    {
      "name": "ONLINE",
      "alias": "Online"
    },
    {
      "name": "LAST_UPDATED",
      "alias": "Last Updated",
      "dateformat": "MM/dd/yyyy",
      "useutc": true,
      "isdate": true
    }
  ]
},
  "links": {
  "link": [
    {
      "alias": "View Traffic Photo",
      "content": "{URL}",
      "icon": "http://resources.arcgis.com/en/help/flex-viewer/live/assets/images/i_camera.png",
      "disablelinksifnull": true,
      "popuptype": "image"
    }
  ]
},
  "layersymbolfrom": "server"
},

Enhanced Search Widget's search function on "Parcels" is working pretty good. Finding and zooming on to the parcels starting with 'value'. However, when using Print Widget, layer name returns as undefined.

0 Kudos
ÇankayaBelediyesi
New Contributor III

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

   I don't remember If I asked this already but what version of WAB and the eSearch widget are you using?

0 Kudos
ÇankayaBelediyesi
New Contributor III

Robert,

WAB 2.2

eSearch 2.1

Chrome: 54.0.2840.87 m

Firefox: 49.0.2

0 Kudos
ÇankayaBelediyesi
New Contributor III

Robert,

Here is the latest situation.

When I search a parcel from Enhanced Search Widget's Parcels layer, the result is selected and highlighted in red. If I use print widget at this time, NAME attribute of the highlighted parcel is included in the printout.

I would like the printout to have the attributes in the popup window when a parcel is selected via mouse click.

Any idea how I can achieve this?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Çankaya,

  For that you will have to change the code in the Print.js to get the popups selected feature:

var gra = this.map.infoWindow.getSelectedFeature();
var obj = {DistrictName: "District Name: " + gra.attributes.NAME};
cTextElements.push(obj);
template.layoutOptions.customTextElements = cTextElements;
deleted-user-Z_OeT-WY_0pI
New Contributor II

Hey Robert, I was wondering if you could help me? Where would you put this in the Print.js.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rich,

  In the Print function. if you go back to my very first reply there is a link to another forum post.

0 Kudos