arcgis atribute editor empty

aubinmaynard · ‎04-22-2016

I'm trying to modify the attribute editor sample (Using the attribute inspector | ArcGIS API for JavaScript ) to remove the query and simply open clicked points for editing. I think it has something to do with how I call the selected feature, but I cannot pin point it. Can someone point me in the right direction on how to populate the attribute inspector. code below.

<!DOCTYPE html>

<html>

<head>

<title>Editable FeatureLayer with Attribute Inspector</title>

<style>

html, body, #mapDiv{

height: 100%;

width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#detailPane{

padding: 6px;

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 .atiLayerName {display:none;}

#testFloatingPane {

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

position: absolute;

top: 35px;

left: 60px;

width: 200px;

height: 300px;

z-index: 90;

}

.dojoxFloatingPaneContent {

font-family: Arial, Helvetica, sans-serif;

font-size: 8pt;

font-weight: bold;

overflow: auto;

}

.dojoxFloatingPaneTitle, .reportTitlePane {

color: white;

background-color: #76a2c5;

font-family: Arial, Helvetica, sans-serif;

font-size: 12pt;

font-weight: bold;

overflow: auto;

}

</style>

var map, updateFeature;

require([

"esri/map",

"esri/layers/FeatureLayer",

"dojox/layout/FloatingPane",

"esri/dijit/AttributeInspector",

"dojo/parser",

"esri/dijit/editing/TemplatePicker",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol",

"esri/Color",

"esri/config",

"esri/tasks/query",

"dojo/dom-construct",

"dijit/form/Button",

"dojo/domReady!"

], function(

Map, FeatureLayer, FloatingPane, AttributeInspector, parser, TemplatePicker,

SimpleLineSymbol, SimpleMarkerSymbol, Color,

esriConfig,

Query, 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: "dark-gray",

center: [-97.395, 37.537],

zoom: 5

});

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

//Feature Layer representing 2015 men's NCAA basketball tournament teams

var teamsFL = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NCAA_Tourney_2015/FeatureServer/1", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["University", "WINPER", "Rd_64_Venue", "Rd_64_Result", "Rd_64_Margin"]

});

var selectionSymbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE, 6,

new SimpleLineSymbol(

"solid",

new Color([255,0,0,0.5]),

4

),

new Color("ED3939")

);

var defaultSymbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE, 7,

null,

new Color([255,255,255])

);

teamsFL.setSelectionSymbol(selectionSymbol);

map.addLayers([teamsFL]);

function initSelectToolbar(evt) {

console.log("initSelectToolbar started", evt);

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

console.log("teamsFL started", teamsFL);

var selectQuery = new Query();

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

console.log("start select");

updateFeature = teamsFL[0];

map.infoWindow.setTitle("cleanup site");

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

});

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

teamsFL.clearSelection();

});

var layerInfos = [

{

'featureLayer': teamsFL,

'showAttachments': false,

'isEditable': true,

'fieldInfos': [

{'fieldName': 'University', 'isEditable': false, 'label': 'School:'},

{'fieldName': 'WINPER', 'isEditable': true, 'tooltip': 'Win percentage', 'label': 'Win percentage:'},

{'fieldName': 'Rd_64_Venue', 'isEditable': false, 'label': 'Rd 1 Venue:'},

{'fieldName': 'Rd_64_Result', 'isEditable': true, 'tooltip': 'First round result (W/L)', 'label': 'Rd 1 Result:'},

{'fieldName': 'Rd_64_Margin', 'isEditable': true, 'tooltip': 'First round margin of victory/loss', 'label': 'Rd 1 Margin:'}

]

}

];

//Initialize Attribute Inspector

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.create("div"));

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 to display the attribute inspector for all NCAA men's basketball tournament teams within 50 miles of click.

</div>

<div id="testFloatingPane" data-dojo-type="dojox/layout/FloatingPane"

data-dojo-props="title:'Add Cleanup', closable:false, resizable:false, dockable:true, movable:false">

test

</div>

</div>

</div>

</body>

</html>

thejuskambi · ‎04-22-2016

For the AttributeInspector to work you need the feature to be selected within the FeatureLayer. See the documentation

The AttributeInspector displays the attributes of selected features from one or more feature layers.

You could do one thing. use the ObjectID from the graphic returned from onclick and user query.objectIds instead of whereClause. But you must use FeatureLayer.selectFeatures to show the details in the AttributeInspector.

View solution in original post

thejuskambi · ‎04-22-2016

For the AttributeInspector to work you need the feature to be selected within the FeatureLayer. See the documentation

The AttributeInspector displays the attributes of selected features from one or more feature layers.

You could do one thing. use the ObjectID from the graphic returned from onclick and user query.objectIds instead of whereClause. But you must use FeatureLayer.selectFeatures to show the details in the AttributeInspector.

aubinmaynard · ‎04-22-2016

Thanks. I should have seen that hours ago. Is there a way to simply select a point?

thejuskambi · ‎04-22-2016

Unfortunately no, the featureLayer needs to process and maintain the selected information. it has function to change the color it selection color is set. On the plus side, it will do a client side query as it already has the graphic with it.

aubinmaynard · ‎04-22-2016

I modified the code below (still needs to be cleaned up) and was able to open the infowin, thanks.

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

console.log("initSelectToolbar started", evt.graphic.attributes["OBJECTID"]);

var objectIds = evt.graphic.attributes["OBJECTID"];

var selectQuery = new Query();

var newID = [];

newID.push(objectIds);

console.log(newID);

selectQuery.objectIds = newID;

teamsFL.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();

}

});

console.log("query finished");

});