Can you use a points feature class in attribute inspector? Mine are not working.

RobertKirkwood · ‎12-05-2014

<!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>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%; 
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #mapDiv{
        margin: 0;
        padding:0;
      }
      #detailPane{
        height:20px;
        color:#570026;
        font-size:12pt;
        font-weight:600;
        overflow:hidden;
      }
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}


      .esriAttributeInspector {height:100px;}
      .esriAttributeInspector .atiLayerName {display:none;}
      .saveButton {
        padding-left:45px;
         margin:0px;width:16px; height:16px;
       }
    </style>
    
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
      var map;
      var updateFeature;
      
      require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/dijit/AttributeInspector",
         "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/Color",


        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/config",


        "esri/tasks/query",


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


        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, AttributeInspector, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, Color,
        ArcGISDynamicMapServiceLayer, esriConfig,
        Query,
        parser, domConstruct, Button
      ) {
        parser.parse();


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


        map = new Map("mapDiv", {
          basemap: "topo",
                    center: [-107.646372, 43.433484],
                    zoom: 7
        });


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


        var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/MapServer");
        petroFieldsMSL.setDisableClientCaching(true);
        map.addLayer(petroFieldsMSL);


        var petroFieldsFL = new FeatureLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/FeatureServer/0",
                        {
                            mode: FeatureLayer.MODE_SELECTION,
                            
                            outFields: ["*"]
                        });
        var selectionSymbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
                "solid",
                new Color("yellow"),
                2
            ),
            null
        );
        petroFieldsFL.setSelectionSymbol(selectionSymbol);


        petroFieldsFL.on("edits-complete", function() {
          petroFieldsMSL.refresh();
        });


        map.addLayers([petroFieldsFL]);


        function initSelectToolbar(evt) {
          var petroFieldsFL = evt.layers[0].layer;
          var selectQuery = new Query();


          map.on("click", function(evt) {
            selectQuery.geometry = evt.mapPoint;
            petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function(features) {
              if (features.length > 0) {
                //store the current feature
                updateFeature = features[0];
                map.infoWindow.setTitle(features[0].getLayer().name);
                map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
              }
              else {
                map.infoWindow.hide();
              }
            });
          });


          map.infoWindow.on("hide", function() {
            petroFieldsFL.clearSelection();
          });


          var layerInfos = [
            {
              'featureLayer': petroFieldsFL,
              'showAttachments': true,
              'isEditable': true,
              'fieldInfos': [
                {'fieldName': 'HabDesc_', 'isEditable': true, 'tooltip': 'Current Status', 'label': 'Status:'},
                {'fieldName': 'WeatherConditions_', 'isEditable': true, 'tooltip': 'The name of this oil field', 'label': 'Field Name:'}
                
              ]
            }
          ];


          var attInspector = new AttributeInspector({
            layerInfos: layerInfos
          }, domConstruct.create("div"));


          //add a save button next to the delete button
          var saveButton = new Button({ label: "Save", "class": "saveButton"});
          domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");


          saveButton.on("click", function() {
            updateFeature.getLayer().applyEdits(null, [updateFeature], null);
          });


          attInspector.on("attribute-change", function(evt) {
            //store the updates to apply when the save button is clicked 
            updateFeature.attributes[evt.fieldName] = evt.fieldValue;
          });


          attInspector.on("next", function(evt) {
            updateFeature = evt.feature;
            console.log("Next " + updateFeature.attributes.objectid);
          });


          attInspector.on("delete", function(evt) {
            evt.feature.getLayer().applyEdits(null, null, [evt.feature]);
            map.infoWindow.hide();
          });


          map.infoWindow.setContent(attInspector.domNode);
          map.infoWindow.resize(350, 240);
        }
      });
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
      <div id="detailPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        Click a field to display the attribute inspector with customized fields.
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="mapDiv"></div>
    </div>
  </body>
</html>

KellyHutchins · ‎12-08-2014

Robert,

The sample you are using uses the clicked location to query for a geometry in the feature layer. This works fine for polygons but for points or lines you'll need to buffer the click point a bit in order to use it as the query geometry. Here's a revised version of your sample that includes additional logic in the map click event to create a buffer around the click point.

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

<style>

html, body {

height: 100%; width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#mapDiv{

margin: 0;

padding:0;

}

#detailPane{

height:20px;

color:#570026;

font-size:12pt;

font-weight:600;

overflow:hidden;

}

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

.dj_ie .simpleInfoWindow .content {position: relative;}

.esriAttributeInspector {height:100px;}

.esriAttributeInspector .atiLayerName {display:none;}

.saveButton {

padding-left:45px;

margin:0px;width:16px; height:16px;

}

</style>

var map;

var updateFeature;

require([

"esri/map",

"esri/layers/FeatureLayer",

"esri/dijit/AttributeInspector",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/Color",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/config",

"esri/tasks/query",

"esri/geometry/Extent",

"dojo/parser",

"dojo/dom-construct",

"dijit/form/Button",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, FeatureLayer, AttributeInspector, SimpleMarkerSymbol,

SimpleLineSymbol, SimpleFillSymbol, Color,

ArcGISDynamicMapServiceLayer, esriConfig,

Query,Extent,

parser, domConstruct, Button

) {

parser.parse();

map = new Map("mapDiv", {

basemap: "topo",

center: [-107.646372, 43.433484],

zoom: 7

});

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

var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/MapServer");

petroFieldsMSL.setDisableClientCaching(true);

map.addLayer(petroFieldsMSL);

var petroFieldsFL = new FeatureLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/FeatureServer/0",

{

mode: FeatureLayer.MODE_SELECTION,

outFields: ["*"]

});

var selectionSymbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

"solid",

new Color("yellow"),

2

),

null

);

petroFieldsFL.setSelectionSymbol(selectionSymbol);

petroFieldsFL.on("edits-complete", function() {

petroFieldsMSL.refresh();

});

map.addLayers([petroFieldsFL]);

function initSelectToolbar(evt) {

var petroFieldsFL = evt.layers[0].layer;

var selectQuery = new Query();

map.on("click", function(evt) {

var mapWidth = map.extent.getWidth();

//Divide width in map units by width in pixels

var pixelWidth = mapWidth/map.width;

//Calculate a 10 pixel envelope width (5 pixel tolerance on each side)

var tolerance = 10 * pixelWidth;

//Build tolerance envelope and set it as the query geometry

var queryExtent = new esri.geometry.Extent

(1,1,tolerance,tolerance,evt.mapPoint.spatialReference);

selectQuery.geometry = queryExtent.centerAt(evt.mapPoint);

//selectQuery.geometry = evt.mapPoint.extent.expand(2);

petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function(features) {

if (features.length > 0) {

//store the current feature

updateFeature = features[0];

map.infoWindow.setTitle(features[0].getLayer().name);

map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

}

else {

map.infoWindow.hide();

}

});

map.infoWindow.on("hide", function() {

petroFieldsFL.clearSelection();

});

var layerInfos = [

{

'featureLayer': petroFieldsFL,

'showAttachments': true,

'isEditable': true,

'fieldInfos': [

{'fieldName': 'HabDesc_', 'isEditable': true, 'tooltip': 'Current Status', 'label': 'Status:'},

{'fieldName': 'WeatherConditions_', 'isEditable': true, 'tooltip': 'The name of this oil field', 'label': 'Field Name:'}

]

}

];

var attInspector = new AttributeInspector({

layerInfos: layerInfos

}, domConstruct.create("div"));

console.log("Att");

attInspector.on("attribute-change", function(evt) {

//store the updates to apply when the save button is clicked

updateFeature.attributes[evt.fieldName] = evt.fieldValue;

});

attInspector.on("next", function(evt) {

updateFeature = evt.feature;

console.log("Next " + updateFeature.attributes.objectid);

});

attInspector.on("delete", function(evt) {

evt.feature.getLayer().applyEdits(null, null, [evt.feature]);

map.infoWindow.hide();

});

map.infoWindow.setContent(attInspector.domNode);

map.infoWindow.resize(350, 240);

}

});

</script>

</head>

Click a field to display the attribute inspector with customized fields.

</div>

</div>

</body>

</html>

View solution in original post

KellyHutchins · ‎12-05-2014

Yes points are supported with the attribute inspector. Do you get any errors when you run your application? If you haven't done so already try running your application with browser debugging tools (like Chrome Developer Tools) open and see if any error messages are written to the console.

RobertKirkwood · ‎12-08-2014

Kelly,

I am not getting any errors. I thought i posted my code above but do not see it...I will try again.

RobertKirkwood · ‎12-08-2014

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

<style>

html, body {

height: 100%; width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#mapDiv{

margin: 0;

padding:0;

}

#detailPane{

height:20px;

color:#570026;

font-size:12pt;

font-weight:600;

overflow:hidden;

}

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

.dj_ie .simpleInfoWindow .content {position: relative;}

.esriAttributeInspector {height:100px;}

.esriAttributeInspector .atiLayerName {display:none;}

.saveButton {

padding-left:45px;

margin:0px;width:16px; height:16px;

}

</style>

var map;

var updateFeature;

require([

"esri/map",

"esri/layers/FeatureLayer",

"esri/dijit/AttributeInspector",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/Color",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/config",

"esri/tasks/query",

"dojo/parser",

"dojo/dom-construct",

"dijit/form/Button",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, FeatureLayer, AttributeInspector, SimpleMarkerSymbol,

SimpleLineSymbol, SimpleFillSymbol, Color,

ArcGISDynamicMapServiceLayer, esriConfig,

Query,

parser, domConstruct, Button

) {

parser.parse();

// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/jshelp/ags_proxy.html

//esriConfig.defaults.io.proxyUrl = "/proxy/";

map = new Map("mapDiv", {

basemap: "topo",

center: [-107.646372, 43.433484],

zoom: 7

});

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

var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/MapServer");

petroFieldsMSL.setDisableClientCaching(true);

map.addLayer(petroFieldsMSL);

var petroFieldsFL = new FeatureLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/FeatureServer/0",

{

mode: FeatureLayer.MODE_SELECTION,

outFields: ["*"]

});

var selectionSymbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

"solid",

new Color("yellow"),

2

),

null

);

petroFieldsFL.setSelectionSymbol(selectionSymbol);

petroFieldsFL.on("edits-complete", function() {

petroFieldsMSL.refresh();

});

map.addLayers([petroFieldsFL]);

function initSelectToolbar(evt) {

var petroFieldsFL = evt.layers[0].layer;

var selectQuery = new Query();

map.on("click", function(evt) {

selectQuery.geometry = evt.mapPoint;

petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function(features) {

if (features.length > 0) {

//store the current feature

updateFeature = features[0];

map.infoWindow.setTitle(features[0].getLayer().name);

map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

}

else {

map.infoWindow.hide();

}

});

map.infoWindow.on("hide", function() {

petroFieldsFL.clearSelection();

});

var layerInfos = [

{

'featureLayer': petroFieldsFL,

'showAttachments': true,

'isEditable': true,

'fieldInfos': [

{'fieldName': 'HabDesc_', 'isEditable': true, 'tooltip': 'Current Status', 'label': 'Status:'},

{'fieldName': 'WeatherConditions_', 'isEditable': true, 'tooltip': 'The name of this oil field', 'label': 'Field Name:'}

]

}

];

var attInspector = new AttributeInspector({

layerInfos: layerInfos

}, domConstruct.create("div"));

//add a save button next to the delete button

var saveButton = new Button({ label: "Save", "class": "saveButton"});

domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

saveButton.on("click", function() {

updateFeature.getLayer().applyEdits(null, [updateFeature], null);

});

attInspector.on("attribute-change", function(evt) {

//store the updates to apply when the save button is clicked

updateFeature.attributes[evt.fieldName] = evt.fieldValue;

});

attInspector.on("next", function(evt) {

updateFeature = evt.feature;

console.log("Next " + updateFeature.attributes.objectid);

});

attInspector.on("delete", function(evt) {

evt.feature.getLayer().applyEdits(null, null, [evt.feature]);

map.infoWindow.hide();

});

map.infoWindow.setContent(attInspector.domNode);

map.infoWindow.resize(350, 240);

}

});

</script>

</head>

Click a field to display the attribute inspector with customized fields.

</div>

</div>

</body>

</html>

KellyHutchins · ‎12-08-2014

Robert,

The sample you are using uses the clicked location to query for a geometry in the feature layer. This works fine for polygons but for points or lines you'll need to buffer the click point a bit in order to use it as the query geometry. Here's a revised version of your sample that includes additional logic in the map click event to create a buffer around the click point.

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

<style>

html, body {

height: 100%; width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#mapDiv{

margin: 0;

padding:0;

}

#detailPane{

height:20px;

color:#570026;

font-size:12pt;

font-weight:600;

overflow:hidden;

}

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

.dj_ie .simpleInfoWindow .content {position: relative;}

.esriAttributeInspector {height:100px;}

.esriAttributeInspector .atiLayerName {display:none;}

.saveButton {

padding-left:45px;

margin:0px;width:16px; height:16px;

}

</style>

var map;

var updateFeature;

require([

"esri/map",

"esri/layers/FeatureLayer",

"esri/dijit/AttributeInspector",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/Color",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/config",

"esri/tasks/query",

"esri/geometry/Extent",

"dojo/parser",

"dojo/dom-construct",

"dijit/form/Button",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, FeatureLayer, AttributeInspector, SimpleMarkerSymbol,

SimpleLineSymbol, SimpleFillSymbol, Color,

ArcGISDynamicMapServiceLayer, esriConfig,

Query,Extent,

parser, domConstruct, Button

) {

parser.parse();

map = new Map("mapDiv", {

basemap: "topo",

center: [-107.646372, 43.433484],

zoom: 7

});

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

var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/MapServer");

petroFieldsMSL.setDisableClientCaching(true);

map.addLayer(petroFieldsMSL);

var petroFieldsFL = new FeatureLayer("https://wygiscservices-dev.wygisc.org/arcgis/rest/services/WyoBio/WyoBioMobile/FeatureServer/0",

{

mode: FeatureLayer.MODE_SELECTION,

outFields: ["*"]

});

var selectionSymbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

"solid",

new Color("yellow"),

2

),

null

);

petroFieldsFL.setSelectionSymbol(selectionSymbol);

petroFieldsFL.on("edits-complete", function() {

petroFieldsMSL.refresh();

});

map.addLayers([petroFieldsFL]);

function initSelectToolbar(evt) {

var petroFieldsFL = evt.layers[0].layer;

var selectQuery = new Query();

map.on("click", function(evt) {

var mapWidth = map.extent.getWidth();

//Divide width in map units by width in pixels

var pixelWidth = mapWidth/map.width;

//Calculate a 10 pixel envelope width (5 pixel tolerance on each side)

var tolerance = 10 * pixelWidth;

//Build tolerance envelope and set it as the query geometry

var queryExtent = new esri.geometry.Extent

(1,1,tolerance,tolerance,evt.mapPoint.spatialReference);

selectQuery.geometry = queryExtent.centerAt(evt.mapPoint);

//selectQuery.geometry = evt.mapPoint.extent.expand(2);

petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function(features) {

if (features.length > 0) {

//store the current feature

updateFeature = features[0];

map.infoWindow.setTitle(features[0].getLayer().name);

map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

}

else {

map.infoWindow.hide();

}

});

map.infoWindow.on("hide", function() {

petroFieldsFL.clearSelection();

});

var layerInfos = [

{

'featureLayer': petroFieldsFL,

'showAttachments': true,

'isEditable': true,

'fieldInfos': [

{'fieldName': 'HabDesc_', 'isEditable': true, 'tooltip': 'Current Status', 'label': 'Status:'},

{'fieldName': 'WeatherConditions_', 'isEditable': true, 'tooltip': 'The name of this oil field', 'label': 'Field Name:'}

]

}

];

var attInspector = new AttributeInspector({

layerInfos: layerInfos

}, domConstruct.create("div"));

console.log("Att");

attInspector.on("attribute-change", function(evt) {

//store the updates to apply when the save button is clicked

updateFeature.attributes[evt.fieldName] = evt.fieldValue;

});

attInspector.on("next", function(evt) {

updateFeature = evt.feature;

console.log("Next " + updateFeature.attributes.objectid);

});

attInspector.on("delete", function(evt) {

evt.feature.getLayer().applyEdits(null, null, [evt.feature]);

map.infoWindow.hide();

});

map.infoWindow.setContent(attInspector.domNode);

map.infoWindow.resize(350, 240);

}

});

</script>

</head>

Click a field to display the attribute inspector with customized fields.

</div>

</div>

</body>

</html>

RobertKirkwood · ‎12-08-2014

Thanks so much again! This made my day!