topic Re: How can I add the attachment values as a part of the popup description? in ArcGIS JavaScript Maps SDK Questions

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

MichaelStranovsky — Thu, 28 May 2015 18:32:52 GMT

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?

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

ToddBlanchette — Thu, 28 May 2015 18:52:19 GMT

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

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

MichaelStranovsky — Thu, 28 May 2015 19:26:27 GMT

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

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

MichaelStranovsky — Fri, 29 May 2015 19:04:20 GMT

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?

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

JakeSkinner — Sun, 12 Dec 2021 07:37:06 GMT

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>

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

MichaelStranovsky — Mon, 01 Jun 2015 12:10:56 GMT

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

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

JakeSkinner — Sun, 12 Dec 2021 07:37:09 GMT

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>

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

MichaelStranovsky — Mon, 01 Jun 2015 19:06:45 GMT

Thank you, I will try that.

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

TracySchloss — Tue, 20 Oct 2015 20:26:17 GMT

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?