AttributeInspector "No features selected"

JohnCorrea · ‎08-28-2013

Hello All,

I am trying to follow along some ArcGIS JavaScript API samples for my app. I have replaced their layers with mine along with some of the attribute info for the AttributeInspector widget. Everything works except the most essential part of my app, the AttributeInspector window. I cannot figure out why my fields don't display on the right pane of my page. The text in the details pane will actually change its title which indicates that it listens to the click event. However no attributes show. The legend, shows, but not the attribute inspector. I've debugged and every object is stable, including the attributeinspector which contains the featurelayer object it should correspond with. Why doesn't this work?

ESRI, doesn't really explain much of this widget. Their documentation lacks detail. There are no best practices for different implementations of building a map (via esri.Map or esri.arcgis.utils.createMap) and using specific widgets for a particular implementation. Anyway, here is a photo before and after result with code.

[ATTACH=CONFIG]27051[/ATTACH]
[ATTACH=CONFIG]27052[/ATTACH]
Here is the relevant javascript code:

-------------------------------------------------------------------------------------------------------------

/**
* Created with IntelliJ IDEA.
* User: jcorrea
* Date: 8/1/13
* Time: 1:18 PM
* To change this template use File | Settings | File Templates.
*/

/* require statements */
dojo.require("esri.map");
dojo.require("esri.tasks.query");
dojo.require("esri.tasks.QueryTask");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.AttributeInspector-all");
dojo.require("esri.arcgis.utils");

dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.layers.Field");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.dijit");
dojo.require("dijit.dijit-all");
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");

/* proxy workaround */
esri.config.defaults.io.proxyUrl = location.protocol.toString() +
    "//" + location.host.toString() +
    location.pathname.toString().replace('index.html', '') + "proxy.ashx";

/* variables */
var townshipLayer;
var map;
var currentState = "ND";
var activeCounty;
var ndOperationalLayer;
var attInspector;

/**
* All functions for map
* interaction and data loading **/
function init() {

    map = new esri.Map("map", {
        basemap:"topo",
        center :[-98.882818, 48.116371],
        zoom   :13
    });

    ndOperationalLayer = new esri.layers.FeatureLayer("http://xyz-services.esri.com/arcgis/rest/services/AFOLDER/PATracking/FeatureServer/1", {
        mode     :esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
    });



   dojo.connect(map, 'onLayersAddResult', function (results) {
        //add the legend
        var legend = new esri.dijit.Legend({
            map       :map,
            layerInfos:[
                {layer:ndOperationalLayer, title:""}
            ]
        }, "legendDiv");
        legend.startup();

        attInspector = new esri.dijit.AttributeInspector({layerInfos:[{'featureLayer':ndOperationalLayer}]}, "attributeEdit" );

        attInspector.on("attribute-change", function(evt) {
            var feature = evt.feature;
            feature.attributes[evt.fieldName] = evt.newFieldValue;
            feature.getLayer().applyEdits(null, [feature], null);
        });

        attInspector.startup();

    });

    var selectQuery = new esri.tasks.Query();

    dojo.connect(map, "onClick", function (evt) {
        dojo.byId('details').innerHTML = 'Map Site';
        selectQuery.geometry = evt.mapPoint;
        ndOperationalLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, null);
        //attInspector.startup();

    });

    map.addeLayers([ndOperationalLayer]);

}
/* init() */

-----------------------------------------------------------------------------------------------------------------

Here is the html
-----------------------------------------------------------------------------------------------------------------
<%--
Created by IntelliJ IDEA.
User: jcorrea
Date: 8/12/13
Time: 3:12 PM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Region VIII PA Tracker</title>
    <link rel="stylesheet" type="text/css" media="all" href="styles/main.css"/>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"/>

    <script type="text/javascript">djConfig = { parseOnLoad: true };</script>

    <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/esri/css/esri.css" data-dojo-config="parseOnLoad: true"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/dojo/dijit/themes/claro/claro.css"
            data-dojo-config="parseOnLoad: true">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5"
            data-dojo-config="parseOnLoad: true"></script>
    <script type="text/javascript" src="/scripts/arcscripts1.js"></script>
</head>

<style>
    html, body {
        height: 97%;
        width: 98%;
        margin: 1%;
        font-family: Verdana;
    }

    #rightPane {
        width: 250px;
    }

    .esriAttributeInspector .dijitTextBox {
        width: 10em;
    }

    .esriAttributeInspector .atiLayerName {
        display: none;
    }

    .esriAttributeInspector .atiLabel {
        font-weight: bold;
        color: #705B35;
    }

    .esriAttributeInspector .atiField {
        background: #FFF6D9;
    }

    .esriAttributeInspector .atiButtons {
        color: #705B35;
    }
</style>

<body class="claro">

<div id="master" class="claro">
    <header>

        <h1>FEMA - Region 8 PA Tracker</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Devil's Lake Viewer</a></li>
            <li><a href="#">Tutorials</a></li>
        </ul>
    </nav>

    <form class="claro">

        <b>State:</b>
        <select id="state" data-dojo-type="dijit.form.ComboBox" name="state" onchange="callStateCounties(this.value)">
            <option selected></option>
            <option>North Dakota</option>
            <option>South Dakota</option>
        </select>

        <b>County:</b>
        <select id="cbCounty" data-dojo-type="dijit.form.ComboBox"
                onchange="queryTownship(this.value)"
                fetchProperties="{sort:[{attribute:'name', descending:false}]}">
        </select>

        <b>Township:</b>
        <select id="township" data-dojo-type="dijit.form.ComboBox" name="township"
                fetchProperties="{sort:[{attribute:'name', descending:false}]}"
                onchange="zoomToTownship(this.value)">
        </select>

    </form>

    <div id="wrap"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline', gutters:true">

        <div id="rightPane"
             data-dojo-type="dijit.layout.ContentPane"
             data-dojo-props="region:'right'">

            <div data-dojo-type="dijit.layout.AccordionContainer">
                <div data-dojo-type="dijit.layout.ContentPane"
                     data-dojo-props="title:'Details', selected:true">
                    <span id="details">Click a point to edit attributes.</span>
                    <div id="attributeEdit"></div>

                </div>
                <div data-dojo-type="dijit.layout.ContentPane" id="legendPane"
                     data-dojo-props="title:'Legend'">
                    <div id="legendDiv"></div>
                </div>
            </div>
        </div>
        <div id="map"
             data-dojo-type="dijit.layout.ContentPane"
             data-dojo-props="region:'center'"
             style="overflow:hidden;">
        </div>
    </div>

</div>

</body>
</html>
----------------------------------------------------------------------------------------------------------------------

KellyHutchins · ‎08-28-2013

John,

Looks like you have a typo in your code when adding the operational layer.

map.addeLayers([ndOperationalLayer]);

I took a quick look at your code and it looks ok. Here's a fiddle showing a working example of the attribute inspector. Can you test this code with your service and see if it works?

http://jsfiddle.net/xBDKb/

Anonymous User · ‎08-28-2013

Original User: correaj

Kelly,

Thanks for the reply. I got really excited for a moment thinking that maybe the addLayer method was misspelled. Unfortunately it was already correct and not the issue. I plugged in the endpoint with your nifty jsFiddle tool and while it rendered the points, it didn't prompt the fields on the right.

I think it may have to do with some settings on the EC2 side. I'm going to look into it. Do you have any other ideas? I'm going to send you the endpoint via private message.

BTW discovering the jsFiddle tool alone makes it worth the post, much better than redeploying or using jsbin.

KellyHutchins · ‎08-28-2013

Ok so your operational layer is points and the sample was querying by geometry. When using geometry to query for point locations we need to expand it a bit so it can find the location. Looking at the sample your code was based on I noted that we listen for the map click then select features. I think a better option is to listen for the layer click and then get the object id and select the corresponding feature. Using this approach will work for points too. Here's what you'll need to modify in your app:


      var selectQuery = new esri.tasks.Query();

    operationalLayer.on("click", function(e){
      dojo.byId("details").innerHTML = "";
      selectQuery.objectIds = [e.graphic.attributes.ID];
      operationalLayer.selectFeatures(selectQuery);

    });

Anonymous User · ‎08-28-2013

Original User: correaj

Money! That did the trick.

So are saying that I should have used the layer's event listener instead of the map's to activate the AttributeInspector?

Sounds like I need to watch some more of your video tutorials.

Thanks Kelly!!

KellyHutchins · ‎08-28-2013

Money! That did the trick.

So are saying that I should have used the layer's event listener instead of the map's to activate the AttributeInspector?

Sounds like I need to watch some more of your video tutorials.

Thanks Kelly!!

Right instead of using a map click to find and select a feature in the feature layer we use the layer click. This lets us easily select features in the layer which then triggers the attribute inspector display.

Anonymous User · ‎08-28-2013

Original User: SmithPeterA

I've got a similar issue with the AttributeInspector and no features selected for points. In jsFiddle, I tried adding the code to watch for the layer click.

          operationalLayer.on("click", function (e) {
              dojo.byId("details").innerHTML = "";
              selectQuery.objectIds = [e.graphic.attributes.ID];
              operationalLayer.selectFeatures(selectQuery);
          });

and removing the code to watch for the map click

         dojo.connect(map, "onClick", function (evt) {
              dojo.byId('details').innerHTML = '';
              selectQuery.geometry = evt.mapPoint;
              operationalLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, null);
          });

and keeping everything else the same. The application would then not select the geology polygon. Is there something else that I need to do to make the click event for the layer to work.

Thanks

KellyHutchins · ‎08-28-2013

Peter,

If you have multiple layers you'll need to setup listeners for each layers click event. So you'll have to do the same for the geology layer as you do for your point layer.

Anonymous User · ‎08-28-2013

Original User: SmithPeterA

Peter,

If you have multiple layers you'll need to setup listeners for each layers click event. So you'll have to do the same for the geology layer as you do for your point layer.

Kelly, thanks for the advice on multiple listeners. Right now I am just trying it with the geology layer from the jsFiddle session given in the thread. I wanted to make sure it worked on that before I reset it to my point layer. I'm new to this, so I wanted to see if there was anything else I needed to do besides swap out the code segments.

KellyHutchins · ‎08-28-2013

Peter,

The code snippet has the objectid field hard-coded into it. In the earlier snippet the objectid field was named ID. For the geology layer its objectid. Here's a fiddle showing the code working with the geology layer.
http://jsfiddle.net/xBDKb/13/