nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

mstranovsky

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: "Issue Type: {IssueType}" +

" Reported Date: {ReportedDate}" +

" Status: {Status}" +

" Status Date: {StatusDate}" +

" Attachment ID: {?}"

});

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

Find more posts tagged with

Accepted answers

JakeSkinner

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>

All comments

ToddBlanchette

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

mstranovsky

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: "Issue Type: {IssueType}" +

" Reported Date: {ReportedDate}" +

" Status: {Status}" +

" Status Date: {StatusDate}" +

" Attachment ID: {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

mstranovsky

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?

JakeSkinner

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>

mstranovsky

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

JakeSkinner

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>

TracySchloss

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.