Accessing AttributeInspector of Editor widget

779
2
Jump to solution
10-05-2017 12:07 PM
NaciDilekli
Occasional Contributor

I have been trying to add a save button to the AttributeInspector (just like here without the editor widget) of the Editor widget since our users don't find it intuitive to close the inspector to save edits. This approach requires accessing the AttributeInspector within the Editor widget, at which I have been unsuccessful. I have seen a few approaches such as:

attInspector = editor.attributeInspector; (here and here)

and 

attInspector = editor._attributeInspector; (here)

The documentation says: "The Editor widget provides out-of-the-box editing capabilities using an editable layer in a Feature Service. It combines the out-of-the-box TemplatePicker, AttachmentEditor, AttributeInspector and GeometryService to provide feature and attribute editing.". Is there a way to modify the AttributeInspector within the Editor widget?

Thanks

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Naci,

   Not sure what problem you are having but here is a full working 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>Edit rivers and waterbodies</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.22/esri/css/esri.css" />
    <style>
      html,body{height:100%;width:100%;margin:0;overflow:hidden;}
      #map{
        padding:0;
      }
      #header{
        font-size: 1.1em;
        font-family: sans-serif;
        padding-left: 1em;
        padding-top:4px;
        color:#660000;
      }
      .templatePicker {
        border: none;
      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}

      .esriAttributeInspector .atiButton{
        margin-top:1px;
        margin-right:45px;
       }
    </style>

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

      require([
        "esri/map",
        "esri/tasks/GeometryService",
        "esri/toolbars/edit",
        "esri/dijit/AttributeInspector",

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dojo/dom-construct",
        "dijit/form/Button",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, GeometryService, Edit, AttributeInspector,
        ArcGISTiledMapServiceLayer, FeatureLayer,
        Color, SimpleMarkerSymbol, SimpleLineSymbol,
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,
        domConstruct, Button
      ) {
        parser.parse();

        // snapping is enabled for this sample - change the tooltip to reflect this
        jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy/";

        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
        esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        map = new Map("map", {
          basemap: "satellite",
          center: [-96.541, 38.351],
          zoom: 14,
          slider: false
        });

        map.on("layers-add-result", initEditor);

        //add boundaries and place names
        var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
        map.addLayer(labels);

        var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        map.addLayers([waterbodies,rivers]);

        function initEditor(evt) {
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
          });
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true
            }
          };

          var params = {settings: settings};
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS,
            15,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0, 0.5]),
              5
            ),
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });

          myEditor.startup();

          var attInspector = myEditor.attributeInspector;
          //console.info(attInspector);
          var saveButton = new Button({label:"save","class":"atiButton, atiDeleteButton"});
          dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "before");
          arrayUtils.forEach(attInspector.layerInfos, function(layerInfo){
            if(layerInfo.featureLayer === waterbodies){
              layerInfo.fieldInfos = [
               {fieldName: 'elevation', isEditable: true, tooltip: 'Elev', label: 'Elevation'},
               {fieldName: 'reachcode', isEditable: true, tooltip: 'Code', label: 'Code'}
              ];
            }
            console.info(layerInfo);
          });
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
        Edit Hydrography
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
  </body>
</html>

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Naci,

   Not sure what problem you are having but here is a full working 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>Edit rivers and waterbodies</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.22/esri/css/esri.css" />
    <style>
      html,body{height:100%;width:100%;margin:0;overflow:hidden;}
      #map{
        padding:0;
      }
      #header{
        font-size: 1.1em;
        font-family: sans-serif;
        padding-left: 1em;
        padding-top:4px;
        color:#660000;
      }
      .templatePicker {
        border: none;
      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}

      .esriAttributeInspector .atiButton{
        margin-top:1px;
        margin-right:45px;
       }
    </style>

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

      require([
        "esri/map",
        "esri/tasks/GeometryService",
        "esri/toolbars/edit",
        "esri/dijit/AttributeInspector",

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dojo/dom-construct",
        "dijit/form/Button",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, GeometryService, Edit, AttributeInspector,
        ArcGISTiledMapServiceLayer, FeatureLayer,
        Color, SimpleMarkerSymbol, SimpleLineSymbol,
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,
        domConstruct, Button
      ) {
        parser.parse();

        // snapping is enabled for this sample - change the tooltip to reflect this
        jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy/";

        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
        esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        map = new Map("map", {
          basemap: "satellite",
          center: [-96.541, 38.351],
          zoom: 14,
          slider: false
        });

        map.on("layers-add-result", initEditor);

        //add boundaries and place names
        var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
        map.addLayer(labels);

        var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

        map.addLayers([waterbodies,rivers]);

        function initEditor(evt) {
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
          });
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true
            }
          };

          var params = {settings: settings};
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS,
            15,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0, 0.5]),
              5
            ),
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });

          myEditor.startup();

          var attInspector = myEditor.attributeInspector;
          //console.info(attInspector);
          var saveButton = new Button({label:"save","class":"atiButton, atiDeleteButton"});
          dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "before");
          arrayUtils.forEach(attInspector.layerInfos, function(layerInfo){
            if(layerInfo.featureLayer === waterbodies){
              layerInfo.fieldInfos = [
               {fieldName: 'elevation', isEditable: true, tooltip: 'Elev', label: 'Elevation'},
               {fieldName: 'reachcode', isEditable: true, tooltip: 'Code', label: 'Code'}
              ];
            }
            console.info(layerInfo);
          });
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
        Edit Hydrography
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
  </body>
</html>
NaciDilekli
Occasional Contributor

I see what I was doing wrong. I wrote

var attInspector = myEditor.attributeInspector;

before myEditor.startup().

Thanks!!

0 Kudos