How to prevent adding/editing with AttachmentEditor?

PavelVeselský1 · ‎06-05-2016

I have a WAB (for developers, version 1.4, JS API 3.16) widget with an AttachmentEditor. Depending on the user's privileges (managed through MVC), I want to prevent some of the users from modifying the attachments (this I can do by hiding the editor) and still showing them the attachments, but I found no way to let the editor show the attachments without permitting the user to add/delete them. Do I need to hack the editor code and use the tweaked version, or is there any clean option to do this? Bypassing AttachmentEditor completely seems to be the hardest way, so I hope it is not necessary.

This is reposted from GIS.stackexchange.com.

YousefQuran · ‎06-09-2016

Hi, Pavel Veselský

I think this workaround using JQuery is acting fine ..

Step 1: add CSS ..

 .deleteAttachment{display:none;}

Step 2: add JS in the featureLayer.on("click"){ ... }

var element = $(".esriPopupWrapper >.sizer.content > .contentPane > .attachmentEditor > div > form");
            element.remove();
  setTimeout(function(){ 
            element = $(".deleteAttachment");
  element.remove();
  }, 1000);

So, the result will be like below ..

<!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>SanFrancisco311 - Incidents</title>


   
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; }
      #map { height: 100%; padding: 0;}
      #footer { height: 2em; text-align: center; font-size: 1.1em; padding: 0.5em; }
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
   .deleteAttachment{display:none;}
    </style>
    <script src="jquery-1.12.2.min.js"></script>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map;
      
      require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/dijit/editing/AttachmentEditor",


        "dojo/parser", "dojo/dom",


        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, AttachmentEditor,
        parser, dom
      ) {
        parser.parse();


        map = new Map("map", { 
          basemap: "gray",
          center: [-95, 40],
          zoom: 4
        });
        map.on("load", mapLoaded);


        function mapLoaded() {
          var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_attach/FeatureServ...",{
            mode: FeatureLayer.MODE_ONDEMAND
          });


          map.infoWindow.setContent("<div id='content' style='width:100%'></div>");
          map.infoWindow.resize(350,200);
          var attachmentEditor = new AttachmentEditor({}, dom.byId("content"));
          attachmentEditor.startup();


          featureLayer.on("click", function(evt) {
            var objectId = evt.graphic.attributes[featureLayer.objectIdField];
            map.infoWindow.setTitle(objectId);
            attachmentEditor.showAttachments(evt.graphic,featureLayer);
            map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

  var element = $(".esriPopupWrapper >.sizer.content > .contentPane > .attachmentEditor > div > form");
            element.remove();
  setTimeout(function(){ 
            element = $(".deleteAttachment");
  element.remove();
  }, 1000);

            
          });
          map.addLayer(featureLayer);
        }
      });
    </script>
  </head>


  <body>
    <div data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline'" 
         style="width:100%;height:100%;">


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


      <div id="footer"
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'bottom'">
        Click point to view/create/delete attachments.
      </div>
   
   
    </div>

  </body>
</html>

Hope this help you.
Regards

View solution in original post

YousefQuran · ‎06-09-2016

Hi, Pavel Veselský

I think this workaround using JQuery is acting fine ..

Step 1: add CSS ..

 .deleteAttachment{display:none;}

Step 2: add JS in the featureLayer.on("click"){ ... }

var element = $(".esriPopupWrapper >.sizer.content > .contentPane > .attachmentEditor > div > form");
            element.remove();
  setTimeout(function(){ 
            element = $(".deleteAttachment");
  element.remove();
  }, 1000);

So, the result will be like below ..

<!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>SanFrancisco311 - Incidents</title>


   
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; }
      #map { height: 100%; padding: 0;}
      #footer { height: 2em; text-align: center; font-size: 1.1em; padding: 0.5em; }
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
   .deleteAttachment{display:none;}
    </style>
    <script src="jquery-1.12.2.min.js"></script>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map;
      
      require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/dijit/editing/AttachmentEditor",


        "dojo/parser", "dojo/dom",


        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, AttachmentEditor,
        parser, dom
      ) {
        parser.parse();


        map = new Map("map", { 
          basemap: "gray",
          center: [-95, 40],
          zoom: 4
        });
        map.on("load", mapLoaded);


        function mapLoaded() {
          var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_attach/FeatureServ...",{
            mode: FeatureLayer.MODE_ONDEMAND
          });


          map.infoWindow.setContent("<div id='content' style='width:100%'></div>");
          map.infoWindow.resize(350,200);
          var attachmentEditor = new AttachmentEditor({}, dom.byId("content"));
          attachmentEditor.startup();


          featureLayer.on("click", function(evt) {
            var objectId = evt.graphic.attributes[featureLayer.objectIdField];
            map.infoWindow.setTitle(objectId);
            attachmentEditor.showAttachments(evt.graphic,featureLayer);
            map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

  var element = $(".esriPopupWrapper >.sizer.content > .contentPane > .attachmentEditor > div > form");
            element.remove();
  setTimeout(function(){ 
            element = $(".deleteAttachment");
  element.remove();
  }, 1000);

            
          });
          map.addLayer(featureLayer);
        }
      });
    </script>
  </head>


  <body>
    <div data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline'" 
         style="width:100%;height:100%;">


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


      <div id="footer"
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'bottom'">
        Click point to view/create/delete attachments.
      </div>
   
   
    </div>

  </body>
</html>

Hope this help you.
Regards

PavelVeselský1 · ‎06-09-2016

I used your way, but did it in Dojo instead:

dojo.query('> div > form', dojo.byId("attachment-editor-container")).style('display', 'none');

dojo.byId is important, dijit.byId or data-dojo-attach-point doesn't work when non-dijit nodes are involved. Hiding is enough for me, and at least I can show the same editor again if the user has editing privileges for other features.

The last remaining issue is that after hiding the delete icons parentheses remain, but I think I will be able to handle it.

EDIT: Parentheses issue solved!

       var spans = dojo.query('> div > span > span', dojo.byId("attachment-editor-container"));
                    for(var i = 0, sl = spans.length; i < sl; i++) {
                        spans.innerHTML = spans.innerHTML.replace(/[()]/g, '');
                    }

I have the regex from StackOverflow, thanks to Vitim.us!