Edit available types in attribute inspector controls?

DanDeneau — Wed, 04 Apr 2012 16:48:31 GMT

Hi all,

I have an editing application that points to a few feature layers. These feature layers have 100 symbols (value renderer) in the MXD. These get carried over automatically in the javascript api application...and I'm able to change the attribute and the map refreshes and changes the symbology. That's all good.

But...I want to restrict how many of those 100 symbols are available in the select box in the attribute inspector/info window. The map's definition expression on the feature layers doesn't seem to carry over to the available values in the attribute fields...so...I thought I would try to hack the attribute inspector and remove all options except the ones each particular user is allowed to use.

Anyone have thoughts on this? Seems easy-ish, but i'm new to the javascript API...and obviously I'd rather not hack things, but after all the searching around...and creating my own infoWindow...this still seems like the most least-intrusive way to go about it (cuz when I roll my own attribute inspector...much of the auto-wiring that is setup...gets broken).

In the code below, I can see in the debugger each available value for each type...but not sure how to remove them safely.

var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv');             myEditor.startup();              var attInspector = myEditor.attributeInspector;             var layerInfos = attInspector.layerInfos;             var pointTypes = layerInfos[0].types;

Re: Edit available types in attribute inspector controls?

derekswingley1 — Fri, 06 Apr 2012 16:23:47 GMT

It's tempting to modify the attribute inspector directly but I wouldn't go that route. Since you're using the editor, you can modify your layer's definition before passing it to the editor.

I modified our default editor sample to show only two types for the point layer. Here's all the code (note that if you want to run this locally you need to specify your own proxy):

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>      <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />     <title>       Default Editor     </title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <script type="text/javascript">       dojoConfig = {         parseOnLoad: true       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">     </script>     <style type="text/css">       html,body {         height:100%;         width:100%;         margin:0;       }        body {         background-color:#fff;         overflow:hidden;         font-family:Helvetica;       }        #templatePickerPane {         width:225px;         overflow:hidden;       }        #panelHeader{         background-color:#92A661;         border-bottom: solid 1px #92A860;         color:#FFF;         font-size:18px;         height:24px;         line-height:22px;         margin:0;         overflow:hidden;         padding:10px 10px 10px 10px;       }       #map {         margin-right:5px;         padding:0;       }        .esriEditor .templatePicker {         padding-bottom:5px;         padding-top:5px;         height:500px;         border-radius:0px 0px 4px 4px;         border:solid 1px #92A661;       }        .dj_ie .infowindow .window .top .right .user .content,.dj_ie .simpleInfoWindow .content {       position:relative;       }     </style>     <script type="text/javascript">       dojo.require("esri.dijit.editing.Editor-all");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.SnappingManager");        var map;       // array of types we want to be available in the app       // these correspond to values in a coded value domain       // taken from the layer's REST endpoint:       // http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0       var types = ['11001', '11201'];        function init() {         //snapping is enabled for this sample - change the tooltip to reflect this         esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start +  "<br/>Press <b>CTRL</b> to enable snapping";         esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint +  "<br/>Press <b>CTRL</b> to enable snapping";                     esri.config.defaults.io.proxyUrl = "/your/proxy/proxy.php";          //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications         esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");          var extent = new esri.geometry.Extent({"xmin": -8576501, "ymin": 4705377, "xmax": -8574612, "ymax": 4706867, "spatialReference": {"wkid": 102100}});                  map = new esri.Map("map", {           extent: extent         });         dojo.connect(map, "onLoad", function() {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });         dojo.connect(map, "onLayersAddResult", initEditing);         var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");         map.addLayer(basemap);           var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,           outFields: ["*"]         });         operationsPointLayer.setDefinitionExpression("ftype in ('" + types.join("','") + "')");          map.addLayers([operationsPointLayer]);         map.infoWindow.resize(400, 300);       }        function initEditing(results) {         var featureLayerInfos = dojo.map(results, function(result) {           return {             'featureLayer': result.layer           };         });         // find the type definitions we're interested in         var filteredTypes = dojo.filter(featureLayerInfos[0].featureLayer.types, function(type) {           return (dojo.indexOf(types, type.id) > -1)         });         // console.log("filtered types: ", filteredTypes);         // update the feature layer's types so that the editor components only show the types we want         featureLayerInfos[0].featureLayer.types = filteredTypes;          var settings = {           map: map,           layerInfos: featureLayerInfos         };          var params = {           settings: settings         };          var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');                  var options = {snapKey:dojo.keys.copyKey};         map.enableSnapping(options);                  editorWidget.startup();       }        dojo.ready(init);     </script>   </head>      <body class="claro">     <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">       </div>       <div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">         <div id="panelHeader">           Default Editor         </div>         <div style="padding:10px;" id="editorDiv">         </div>       </div>     </div>   </body>  </html>

The relevant bits are in the onLayersAddResult callback:

 var featureLayerInfos = dojo.map(results, function(result) {   return {     'featureLayer': result.layer   }; }); // find the type definitions we're interested in // types is an array of the different types of features we want to show/create/edit var filteredTypes = dojo.filter(featureLayerInfos[0].featureLayer.types, function(type) {   return (dojo.indexOf(types, type.id) > -1) }); // update the feature layer's types so that the editor components only show the types we want featureLayerInfos[0].featureLayer.types = filteredTypes;  var settings = {   map: map,   layerInfos: featureLayerInfos };  var params = {   settings: settings };  var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');

Re: Edit available types in attribute inspector controls?

DanDeneau — Fri, 06 Apr 2012 17:45:49 GMT

Hi Derek,

Thanks, that's what I was looking for.

Will mark this as answered, but maybe you could give me some tips.

The scenario:

I have my featureLayers on selection mode, so when I click on a feature, it automatically pops up an infoWindow...but, I've now decided I want to use the AttributeInspector someplace else....so that when the user clicks a feature, I don't want an infoWindow to come up, but rather I want to just populate my AttributeInspector in my left hand pane....AND...in addition to clicking a feature, I don't want them to be able to edit the verticies by just clicking the selected feature.

The idea is that I want them to be able to click a feature, click a button that 'enables' editing...which would enable the attribute inspector as well as enable the 'move/edit vertices' mode on the selected graphic/feature. Then, the user could save the feature ONLY by hitting a SAVE button...and NOT just by changing attributes/moving vertices. Any tips?

thanks,
Dan

USDA/Forest Service (Contractor)

topic Edit available types in attribute inspector controls? in ArcGIS JavaScript Maps SDK Questions

Edit available types in attribute inspector controls?

Re: Edit available types in attribute inspector controls?

Re: Edit available types in attribute inspector controls?