AnsweredAssumed Answered

Display attachments in popup

Question asked by mai_quynhnhu on Oct 3, 2017
Latest reply on Oct 18, 2017 by rscheitlin

I am trying to display an attachment (originally added using the attachment tool in Desktop) in a arcgis jsapi 3.17 Popup. I am unable, however, to query the attachment infos and receive an IO error.

 

Running the code below, the 'infos' printed to the console returns the image information, but the popup does not display an image nor hyperlink.

 


var identifyTask, identifyParams, idPoint;
var identifyResults;
window.idHandler;

require([
  "esri/dijit/Popup",
  "esri/dijit/PopupTemplate",
  "esri/tasks/IdentifyTask",
  "esri/tasks/IdentifyParameters",
  "esri/layers/FeatureLayer",
  "dijit/form/CheckBox",
  "dijit/form/Select",
  "dijit/form/ToggleButton",
  "dijit/registry",
  "dojo/on",
  "dojo/query",
  "dojo/dom-construct",
  "dojo/promise/all",
  "dojo/domReady!"
], function (
  Popup, PopupTemplate, IdentifyTask, IdentifyParameters, FeatureLayer, CheckBox, Select, ToggleButton, registry, on, query, domConstruct, All)
  {
    var popup = new Popup({
      fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
    }, dojo.create("div"));
   
   
    var idButton = new ToggleButton({
      label: "Identifier les entités",
      showLabel: false,
      iconClass: "identifyIcon",
      checked: false,
      onChange: function (val) {
        //alert("test button clicked")
        if (val) {
          window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
          toggleButtonIcon(this);
          console.log("Identify started");
        }
        else {
          window.idHandler.pause();
          console.log("Identify paused");
        }
        //toggleButtonIcon(this);
      }
    }, "id_button");
    idButton.startup();
   
    function mapReady(map) {
      //window.connect = dojo.connect(window.myMap, "onClick", runIdentifies);
      window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
    }
   
    function runIdentifies(evt) {
      identifyResults = [];
      idPoint = evt.mapPoint;
      var layers = dojo.map(window.myMap.layerIds, function (layerId) {
        return window.myMap.getLayer(layerId);
      });
      layers = dojo.filter(layers, function (layer) {
        //console.log(layer.layerInfos[0].name);
        if (layer.visibleLayers[0] !== -1) {
          return layer.getImageUrl && layer.visible
        }
      }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
      var tasks = dojo.map(layers, function (layer) {
        return new IdentifyTask(layer.url);
      }); //map each visible dynamic layer to a new identify task, using the layer url
      var defTasks = dojo.map(tasks, function (task) {
        return new dojo.Deferred();
      }); //map each identify task to a new dojo.Deferred
      var params = createIdentifyParams(layers, evt);
     
      var promises = [];
     
      for (i = 0; i < tasks.length; i++) {
        promises.push(tasks[i].execute(params[i])); //Execute each task
      }
     
      var allPromises = new All(promises);
      allPromises.then(function (r) { showIdentifyResults(r, tasks); });
    }
   
    function showIdentifyResults(r, tasks) {
      var results = [];
      var taskUrls = [];
      var resultNames = [];
      var identifySelect;
     
     
      r = dojo.filter(r, function (result) {
        return r[0];
      });
      for (i = 0; i < r.length; i++) {
        results = results.concat(r[i]);
        for (j = 0; j < r[i].length; j++) {
          taskUrls = taskUrls.concat(tasks[i].url);
        }
      }
     
      var idx = 0;
      results = dojo.map(results, function (result, index) {
        if (!result.layerName == "CADRILLAGE"
      )) {
        var feature = result.feature;
        var layerName = result.layerName;
        var serviceUrl = taskUrls[index];
        //resultNames[index] = result.layerName;
        resultNames.push({
          value: idx,
          label: result.layerName
        });
        idx++;
        feature.attributes.layerName = result.layerName;
       
      
       
       
        identifySelect = dijit.byId("id_select");
       
        identifySelect.removeOption(identifySelect.getOptions());
        identifySelect.addOption(resultNames);
        //var identifiedList = getIdentifiedList(resultNames);
        //console.log(identifiedList);
       
       
        if (layerName === 'E_HYDRAN') {
         
         
          var template = new PopupTemplate({
            title: "My Title",
            fieldInfos: [
              {fieldName: "Address", label: "<b>Address:</b>", visible: true},
              {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
              showAttachments:true,
            });
           
            var featureLayer = new FeatureLayer("http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3",{
              mode: FeatureLayer.MODE_ONDEMAND,
              infoTemplate: template,
              outFields: ["*"]
            });
           
            var objectId, el;
           
            objectId = feature.attributes.objectid;
           
            featureLayer.queryAttachmentInfos(objectId, function (infos) {
              //map.infoWindow.setTitle(objectId);
              el = document.createElement('img');
              if (infos[0].url) {
                el.setAttribute('src', infos[0].url);
                template.setContent(el);
                //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
              }
            });
           
           
            //var template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
            feature.setInfoTemplate(template);
          }
          else {
            template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
            feature.setInfoTemplate(template);
          }
           
           
           
            var resultGeometry = feature.geometry;
            var resultType = resultGeometry.type;
            return feature;
          }
         
        });
       
        results = results.filter(function(n){
          return n != undefined
        });
       
        if (results.length === 0) {
          window.myMap.infoWindow.clearFeatures();
        } else {
          window.myMap.infoWindow.setFeatures(results);
        }
       
       
       
        window.myMap.infoWindow.show(idPoint);
       
        if (typeof identifySelect != 'undefined') {
          identifySelect.on('change', function(evt) {
            var identIndex = identifySelect.get("value");
            console.log(identIndex);
            window.myMap.infoWindow.select(identIndex);
          });
        }
       
       
        return results;
      }
     
      function getIdentifiedList(options) {
        identifySelect = new Select({
          name: "identifySelect",
          id: "id_select",
          options: options
        }, domConstruct.create("select"));
        return identifySelect.domNode;
      }
     
      function createIdentifyParams(layers, evt) {
        var identifyParamsList = [];
        identifyParamsList.length = 0;
        dojo.forEach(layers, function (layer) {
          var idParams = new esri.tasks.IdentifyParameters();
          idParams.width = window.myMap.width;
          idParams.height = window.myMap.height;
          idParams.geometry = evt.mapPoint;
          idParams.mapExtent = window.myMap.extent;
          idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
          var visLayers = layer.visibleLayers;
          if (visLayers !== -1) {
            var subLayers = [];
            for (var i = 0; i < layer.layerInfos.length; i++) {
              if (layer.layerInfos[i].subLayerIds == null)
              subLayers.push(layer.layerInfos[i].id);
            }
            idParams.layerIds = subLayers;
          } else {
            idParams.layerIds = [];
          }
          idParams.tolerance = 7;
          idParams.returnGeometry = true;
          identifyParamsList.push(idParams);
        });
        return identifyParamsList;
      }
     
      function toggleButtonIcon(tool) {
        //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
       
        var domNodes = query('.dijitToggleButton', this.domNode);
        //var measureDivNodes = dojo.byId("measurementDiv");
        //var measureNodes = query('.dijitButtonNode', measureDivNodes);
       
        domNodes.forEach(function(domNode){
          var togbtn = registry.getEnclosingWidget(domNode);
          if (togbtn == tool) {
            togbtn.attr("checked", true);
            //console.log("Checked is true");
          }
          else {
            togbtn.attr("checked", false);
            //console.log("Checked is false");
          }
        });
       
       
       
      
      }
     
     
    });

 

Should I be looking for something in particular relative to the template for the feature?

 

**UPDATE** Still not working, but am now trying to use the mediaInfos property to see if it works. Here's how that looks:

 

 

 

var identifyTask, identifyParams, idPoint;
var identifyResults;
window.idHandler;
require([
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/layers/FeatureLayer",
"dijit/form/CheckBox",
"dijit/form/Select",
"dijit/form/ToggleButton",
"dijit/registry",
"dojo/on",
"dojo/query",
"dojo/dom-construct",
"dojo/promise/all",
"dojo/domReady!"
], function (
Popup, PopupTemplate, IdentifyTask, IdentifyParameters, FeatureLayer, CheckBox, Select, ToggleButton, registry, on, query, domConstruct, All)
{
var popup = new Popup({
fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
}, dojo.create("div"));
var idButton = new ToggleButton({
label: "Identifier les entités",
showLabel: false,
iconClass: "identifyIcon",
checked: false,
onChange: function (val) {
//alert("test button clicked")
if (val) {
window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
toggleButtonIcon(this);
console.log("Identify started");
// measurementActiveButton = dojo.query(".esriMeasurement .esriButton.esriButtonChecked .dijitButtonNode")[0]
// if(measurementActiveButton){
// measurementActiveButton.click();
// }
}
else {
window.idHandler.pause();
console.log("Identify paused");
}
//toggleButtonIcon(this);
}
}, "id_button");
idButton.startup();
function mapReady(map) {
//window.connect = dojo.connect(window.myMap, "onClick", runIdentifies);
window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
}
function runIdentifies(evt) {
identifyResults = [];
idPoint = evt.mapPoint;
var layers = dojo.map(window.myMap.layerIds, function (layerId) {
return window.myMap.getLayer(layerId);
});
layers = dojo.filter(layers, function (layer) {
//console.log(layer.layerInfos[0].name);
if (layer.visibleLayers[0] !== -1) {
return layer.getImageUrl && layer.visible
}
}); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
var tasks = dojo.map(layers, function (layer) {
return new IdentifyTask(layer.url);
}); //map each visible dynamic layer to a new identify task, using the layer url
var defTasks = dojo.map(tasks, function (task) {
return new dojo.Deferred();
}); //map each identify task to a new dojo.Deferred
var params = createIdentifyParams(layers, evt);
var promises = [];
for (i = 0; i < tasks.length; i++) {
promises.push(tasks[i].execute(params[i])); //Execute each task
}
var allPromises = new All(promises);
allPromises.then(function (r) { showIdentifyResults(r, tasks); });
}
function showIdentifyResults(r, tasks) {
var results = [];
var taskUrls = [];
var resultNames = [];
var identifySelect;

r = dojo.filter(r, function (result) {
return r[0];
});
for (i = 0; i < r.length; i++) {
results = results.concat(r[i]);
for (j = 0; j < r[i].length; j++) {
taskUrls = taskUrls.concat(tasks[i].url);
}
}
var idx = 0;
results = dojo.map(results, function (result, index) {
if (!result.layerName == "CADRILLAGE") {
var feature = result.feature;
var layerName = result.layerName;
var serviceUrl = taskUrls[index];
//resultNames[index] = result.layerName;
resultNames.push({
value: idx,
label: result.layerName
});
idx++;
feature.attributes.layerName = result.layerName;


identifySelect = dijit.byId("id_select");
identifySelect.removeOption(identifySelect.getOptions());
identifySelect.addOption(resultNames);
//var identifiedList = getIdentifiedList(resultNames);
//console.log(identifiedList);

if (layerName === 'E_HYDRAN') {

// var template = new PopupTemplate({
// title: "My Title",
// fieldInfos: [
// {fieldName: "Address", label: "<b>Address:</b>", visible: true},
// {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
// showAttachments:true,
// });
var featureLayer = new FeatureLayer("http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3",{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: template,
outFields: ["*"]
});
var objectId, el;
var pminfos = [];
var popUpMediaInfo;
objectId = feature.attributes.objectid;
featureLayer.queryAttachmentInfos(objectId, function (infos) {
var popUpInfo = {
title: "Attachment images",
description: "",
showAttachments: false
};
arrayUtils.window.myMap(infos, function(info)) {
if (!!info.url) {
popUpMediaInfo = {};
popUpMediaInfo.type = 'image';
popUpMediaInfo.value = {};
popUpMediaInfo.value.sourceURL = info.url;
popUpMediaInfo.value.linkURL = info.url;
popUpMediaInfo.caption = info.name;
pminfos.push(popUpMediaInfo);
}
});
popUpInfo.mediaInfos = pminfos;
var template = new PopupTemplate(popUpInfo);
//map.infoWindow.setTitle(objectId);
// el = document.createElement('img');
// if (infos[0].url) {
// el.setAttribute('src', infos[0].url);
// template.setContent(el);
// //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
// }
});

//var template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
feature.setInfoTemplate(template);
}
else {
// var template = new esri.InfoTemplate(layerName,
// "${*}");
//template.setTitle(identifiedList);
var template = new PopupTemplate({
title: "My Title",
fieldInfos: [
{fieldName: "Address", label: "<b>Address:</b>", visible: true},
{fieldName: "City_1", label: "<b>City:</b>", visible: true}],
showAttachments:true,
});
feature.setInfoTemplate(template);
}

var resultGeometry = feature.geometry;
var resultType = resultGeometry.type;
return feature;
}
});
results = results.filter(function(n){
return n != undefined
});
if (results.length === 0) {
window.myMap.infoWindow.clearFeatures();
} else {
window.myMap.infoWindow.setFeatures(results);
}

window.myMap.infoWindow.show(idPoint);
if (typeof identifySelect != 'undefined') {
identifySelect.on('change', function(evt) {
var identIndex = identifySelect.get("value");
console.log(identIndex);
window.myMap.infoWindow.select(identIndex);
});
}

return results;
}
function getIdentifiedList(options) {
identifySelect = new Select({
name: "identifySelect",
id: "id_select",
options: options
}, domConstruct.create("select"));
return identifySelect.domNode;
}
function createIdentifyParams(layers, evt) {
var identifyParamsList = [];
identifyParamsList.length = 0;
dojo.forEach(layers, function (layer) {
var idParams = new esri.tasks.IdentifyParameters();
idParams.width = window.myMap.width;
idParams.height = window.myMap.height;
idParams.geometry = evt.mapPoint;
idParams.mapExtent = window.myMap.extent;
idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
var visLayers = layer.visibleLayers;
if (visLayers !== -1) {
var subLayers = [];
for (var i = 0; i < layer.layerInfos.length; i++) {
if (layer.layerInfos[i].subLayerIds == null)
subLayers.push(layer.layerInfos[i].id);
}
idParams.layerIds = subLayers;
} else {
idParams.layerIds = [];
}
idParams.tolerance = 7;
idParams.returnGeometry = true;
identifyParamsList.push(idParams);
});
return identifyParamsList;
}
function toggleButtonIcon(tool) {
//only the tools in the toolbar are dijit togglebuttons so can iterate thru them
var domNodes = query('.dijitToggleButton', this.domNode);
//var measureDivNodes = dojo.byId("measurementDiv");
//var measureNodes = query('.dijitButtonNode', measureDivNodes);
domNodes.forEach(function(domNode){
var togbtn = registry.getEnclosingWidget(domNode);
if (togbtn == tool) {
togbtn.attr("checked", true);
//console.log("Checked is true");
}
else {
togbtn.attr("checked", false);
//console.log("Checked is false");
}
});


}

});

Attachments

Outcomes