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; } } }

Will showAttachments work if the rest endpoint is a map service?

KenCarrier

I have been trying to get attachments to work against a map service and I am having no luck.

In Flex this was really easy but in JS it is proving difficult.

Based on how the documentation reads it appears JS only support viewing attachments on FeatureLayers and not MapServer services?

Format Popup Content | Guide | ArcGIS API for JavaScript‌

I am not sure why this would be the case as the map service I am working with shows at the REST endpoint show

Has Attachments: true

So why would JS not support attachments with a map service, is this really true? How are they getting around this in AGOL then?

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Ken,

Yes you can do it here is a sample:

<!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>
      San Francisco
    </title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .esriScalebar {
        padding: 20px 20px;
      }

      #map {
        padding: 0;
      }
    </style>

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

      require([
        "esri/config",
        "esri/map",
        "esri/dijit/Popup",
        "esri/dijit/PopupTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService",
        "dojo/dom-construct",
        "dojo/parser",
        "esri/Color",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
        function (
          esriConfig, Map, Popup, PopupTemplate, ArcGISDynamicMapServiceLayer,
          SimpleMarkerSymbol, GeometryService, domConstruct, parser, Color
        ) {

          parser.parse();

          esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

          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("map", {
            basemap: "topo",
            center: [-122.448, 37.788],
            zoom: 17,
            infoWindow: popup
          });

          var popupTemplate = new PopupTemplate({
            title: "{address}",
            fieldInfos: [
              {
                fieldName: "req_type",
                visible: true,
                label: "Type"
              },
              {
                fieldName: "req_date",
                visible: true,
                label: "Date",
                format: {
                  dateFormat: 'shortDateShortTime'
                }
              }
            ],
            showAttachments: true
          });
           
          var demographicsLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer");
          demographicsLayer.setInfoTemplates({
            0: { infoTemplate: popupTemplate }
          });
          demographicsLayer.setVisibleLayers([0]);
          var layerDefinitions = [];
          layerDefinitions[0] = "address != ''";
          demographicsLayer.setLayerDefinitions(layerDefinitions);
          map.addLayer(demographicsLayer);
        });
    </script>
  </head>

  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
        style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"
          style="border:1px solid #000;padding:0;">
      </div>
    </div>
  </body>

</html>

All comments

RobertScheitlin__GISP

Ken,

Yes you can do it here is a sample:

<!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>
      San Francisco
    </title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .esriScalebar {
        padding: 20px 20px;
      }

      #map {
        padding: 0;
      }
    </style>

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

      require([
        "esri/config",
        "esri/map",
        "esri/dijit/Popup",
        "esri/dijit/PopupTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService",
        "dojo/dom-construct",
        "dojo/parser",
        "esri/Color",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
        function (
          esriConfig, Map, Popup, PopupTemplate, ArcGISDynamicMapServiceLayer,
          SimpleMarkerSymbol, GeometryService, domConstruct, parser, Color
        ) {

          parser.parse();

          esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

          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("map", {
            basemap: "topo",
            center: [-122.448, 37.788],
            zoom: 17,
            infoWindow: popup
          });

          var popupTemplate = new PopupTemplate({
            title: "{address}",
            fieldInfos: [
              {
                fieldName: "req_type",
                visible: true,
                label: "Type"
              },
              {
                fieldName: "req_date",
                visible: true,
                label: "Date",
                format: {
                  dateFormat: 'shortDateShortTime'
                }
              }
            ],
            showAttachments: true
          });
           
          var demographicsLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer");
          demographicsLayer.setInfoTemplates({
            0: { infoTemplate: popupTemplate }
          });
          demographicsLayer.setVisibleLayers([0]);
          var layerDefinitions = [];
          layerDefinitions[0] = "address != ''";
          demographicsLayer.setLayerDefinitions(layerDefinitions);
          map.addLayer(demographicsLayer);
        });
    </script>
  </head>

  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
        style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"
          style="border:1px solid #000;padding:0;">
      </div>
    </div>
  </body>

</html>

KenCarrier

Robert once again you are correct, in talking with Esri support they said it was not possible, looking over the ArcGIS JavaScript API documentation it leads one to believe this can only be done for feature service and not dynamic services. I am working with a template and I think this might be an opportunity to tweak the code to make it work for dynamic services. I am curious if you plan on developing anything like a template or if you plan on building widgets for WAB when it is released.

Here is the final product I was able to come up with.


!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





<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">





<title>





</title>





<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">





<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">





<style>





html, body {





height: 100%;





width: 100%;





margin: 0;





padding: 0;





.esriScalebar {





padding: 20px 20px;





#map {





padding: 0;





</style>





<script src="http://js.arcgis.com/3.10/"></script>





<script>





var map;





"esri/config",





"esri/map",





"esri/dijit/Popup",





"esri/dijit/PopupTemplate",





"esri/layers/ArcGISDynamicMapServiceLayer",





"esri/symbols/SimpleMarkerSymbol",





"esri/tasks/GeometryService",





"dojo/dom-construct",





"dojo/parser",





"esri/Color",





"dijit/layout/BorderContainer",





"dijit/layout/ContentPane",





"dojo/domReady!"





function (





new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");





var popupOptions = {





new SimpleMarkerSymbol("circle", 32, null,





new Color([0, 0, 0, 0.25])),





"20",





"20"





//create a popup to replace the map's info window





var popup = new Popup(popupOptions, domConstruct.create("div"));





new Map("map", {





"topo",





var popupTemplate = new PopupTemplate({


"TEST",


"STR_NAME",


true,


"Type"



"HyperLink",


true,


"Hyperlink"



true



var demographicsLayer = new ArcGISDynamicMapServiceLayer("http://engineer05.gomvo.org/arcgis/rest/services/SP/RoadRecords/MapServer");


</script>


head>



body class="claro">



<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"



style="width: 100%; height: 100%; margin: 0;">



<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"



style="border:1px solid #000;padding:0;">



</div>



</div>


body>



html>

RobertScheitlin__GISP

Ken,

I have already begun developing widgets for WAB.

KenCarrier

Awesome looking forward to seeing what you come up with.

StevenGraf1

Is this something they added in version 3.10? I have been trying to accomplish this in earlier versions with no success.

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.