How can I add the attachment values as a part of the popup description?

5370
8
Jump to solution
05-28-2015 11:32 AM
MichaelStranovsky
Occasional Contributor

For instance, i have a published service that includes a featurelayer with attachments.  I would like to show the attachment id in the description of the popup.  See below:

var plyRequests = new PopupTemplate({

    title: "Citizen Request",

    description: "<b>Issue Type:</b> {IssueType}" +

    "<br><b>Reported Date:</b> {ReportedDate}" +

    "<br><b>Status:</b> {Status}" +

    "<br><b>Status Date:</b> {StatusDate}" +

    "<br><b>Attachment ID:</b> {?}"

  });

How can I grab the AttachmentID from the related attachment table?

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
Esri Esteemed Contributor

You can continue to use the PopupTemplate.  Here is an update to the code using this class, and how to include the photo in the popup:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>
    <!--<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">-->
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/Color",
        "esri/symbols/SimpleMarkerSymbol", "dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, InfoTemplate,Popup, PopupTemplate, Color,
        SimpleMarkerSymbol, domConstruct, dom, on, array
      ) {
          
        var popupOptions = {
            markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
              new Color([0, 0, 0, 0.25])),
            marginLeft: "20",
            marginTop: "20"
          };
          //create a popup to replace the map's info window
        var popup = new Popup(popupOptions, domConstruct.create("div"));
                    
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-75.1652, 39.9468],
          zoom: 15,
          infoWindow: popup
        });    
                
        var infoTemplate = new PopupTemplate();    
      
        var featureLayer = new FeatureLayer("http://agsServer-lap/arcgis/rest/services/Graffiti/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["Structure", "Address"],
            infoTemplate: infoTemplate
        });  
        
        map.addLayer(featureLayer); 
        
        on(featureLayer, "query-attachment-infos-complete", function(response){  
            image = response.results[0].url;          
            id = (response.results[0].id); 
            var content =  "<tr>Attachment Id:  <td>" + id + "</tr></td><br><img src=\'" + image + "' style='width:128px;height:128px;'> ";            
            infoTemplate.setContent(content);
        })
        
        on(featureLayer, "click", function(response){
            OID = (response.graphic.attributes.OBJECTID);
            featureLayer.queryAttachmentInfos(OID);
        })    

      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>

View solution in original post

8 Replies
ToddBlanchette
Occasional Contributor II

You can use the FeatureLayer.queryAttachmentInfos() method to return information about a feature layer's attachments, including the AttachmentID.  I would probably stick this under a FeatureLayer.hasattachments() call (boolean true/false) to make sure it has attachments first.

More info can be found here FeatureLayer | API Reference | ArcGIS API for JavaScript

MichaelStranovsky
Occasional Contributor

I have tried that without success.

var getId = function (e){

     lyrRequest.queryAttachmentInfos(e, function(response){

          return response[0].id;

     });

};

var plyRequests = new PopupTemplate({

    title: "Citizen Request",

    description: "<b>Issue Type:</b> {IssueType}" +

    "<br><b>Reported Date:</b> {ReportedDate}" +

    "<br><b>Status:</b> {Status}" +

    "<br><b>Status Date:</b> {StatusDate}" +

    "<br><b>Attachment ID:</b> {OBJECTID:getId}"

  });

The "return" is undefined outside of the function(response) but does have a value in the function.  I cannot figure out how to assign the getID variable the value of response[0].id

0 Kudos
MichaelStranovsky
Occasional Contributor

I have another thought on the same subject.  Within the popuptemplate contructor i know that you can access fields in a related table using the relationship property.   Since attachments are essentially a related table can you access the fileds in a similar fashion.  Iknow it will not be the same because when you look at a featurelayer in the rest that has a related table, there is a relationship property.  When you look at a featurelayer that has attachments in the rest, there is not a relationship property.  Does anyone have any thoughts?

0 Kudos
JakeSkinner
Esri Esteemed Contributor

Hi Michael,

One way you can do this is to query the OBJECTID of the feature layer when clicked, and then pass this to the feature layer's queryAttachmentInfos method.  Next, use the query-attachment-infos-complete event to return the attachment id to the infoTemplate.  Ex:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", 
        "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, InfoTemplate, 
        dom, on, array
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-75.1652, 39.9468],
          zoom: 15
        });    
                
        var infoTemplate = new InfoTemplate();    
      
        var featureLayer = new FeatureLayer("http://agsServer-lap/arcgis/rest/services/Graffiti/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["Structure", "Address"],
            infoTemplate: infoTemplate
        });  
        
        map.addLayer(featureLayer); 
        
        on(featureLayer, "query-attachment-infos-complete", function(response){            
            var id = (response.results[0].id);            
            infoTemplate.setContent("<tr>Attachment Id:  <td>" + id + "</tr></td>")
        })
        
        on(featureLayer, "click", function(response){
            OID = (response.graphic.attributes.OBJECTID);
            featureLayer.queryAttachmentInfos(OID);
        })    

      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>
MichaelStranovsky
Occasional Contributor

Hi Robert,

Thanks for the help. I am actually using popuptemplate with mediainfos property and not infotemplate. If I were to switch to info template would I need to use an inner html image tag to get the photos to appear in the popup?

Michael

Sent from my T-Mobile 4G LTE Device

0 Kudos
JakeSkinner
Esri Esteemed Contributor

You can continue to use the PopupTemplate.  Here is an update to the code using this class, and how to include the photo in the popup:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>
    <!--<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">-->
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/Color",
        "esri/symbols/SimpleMarkerSymbol", "dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, InfoTemplate,Popup, PopupTemplate, Color,
        SimpleMarkerSymbol, domConstruct, dom, on, array
      ) {
          
        var popupOptions = {
            markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
              new Color([0, 0, 0, 0.25])),
            marginLeft: "20",
            marginTop: "20"
          };
          //create a popup to replace the map's info window
        var popup = new Popup(popupOptions, domConstruct.create("div"));
                    
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-75.1652, 39.9468],
          zoom: 15,
          infoWindow: popup
        });    
                
        var infoTemplate = new PopupTemplate();    
      
        var featureLayer = new FeatureLayer("http://agsServer-lap/arcgis/rest/services/Graffiti/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["Structure", "Address"],
            infoTemplate: infoTemplate
        });  
        
        map.addLayer(featureLayer); 
        
        on(featureLayer, "query-attachment-infos-complete", function(response){  
            image = response.results[0].url;          
            id = (response.results[0].id); 
            var content =  "<tr>Attachment Id:  <td>" + id + "</tr></td><br><img src=\'" + image + "' style='width:128px;height:128px;'> ";            
            infoTemplate.setContent(content);
        })
        
        on(featureLayer, "click", function(response){
            OID = (response.graphic.attributes.OBJECTID);
            featureLayer.queryAttachmentInfos(OID);
        })    

      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>
MichaelStranovsky
Occasional Contributor

Thank you, I will try that.

0 Kudos
TracySchloss
Frequent Contributor

It seems to me like once you have the response from "query-attachments-infos-complete", then you are only have the values of the image to use as content.  Where are the rest of the attributes coming from or are they?