topic Multiple layer attribute inspector in ArcGIS JavaScript Maps SDK Questions

Multiple layer attribute inspector

williamcarr — Sun, 10 Aug 2014 18:12:14 GMT

I'm trying to get the attribute inspector to work with multiple layers, but I'm unsure of how to go about the layInfos.

var layerInfos = [{

'featureLayer': petroFieldsFL,

'showAttachments': false,

'isEditable': true,

'fieldInfos': [

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

]

}];

var attInspector = new AttributeInspector({

layerInfos:layerInfos

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

Do I need to create an attribute inspector for each layer?

Re: Multiple layer attribute inspector

OwenEarley — Sun, 10 Aug 2014 22:43:44 GMT

The documentation states that layerInfos is an object array so your should be able to pass them in using a modified version of your code:

var layerInfos = [ 
     { 
          'featureLayer': petroFieldsFL, 
          'showAttachments': false, 
          'isEditable': true, 
          'fieldInfos': [ {'fieldName': 'SERVICE_ID', 'isEditable':true, 'tooltip': 'Current Status', 'label':'Status:'} ]
      },
      { 
          'featureLayer': otherFL, 
          'showAttachments': false, 
          'isEditable': true, 
          'fieldInfos': [ {'fieldName': 'OTHER_ID', 'isEditable':true, 'tooltip': 'Some Tooltip', 'label':'Some Label:'} ] 
     }
 ];           

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

Also, this Multiple Attribute Inspectors | ArcGIS API for JavaScript sample connects each layer to a new attribute inspector dynamically which is possibly an alternate approach to your problem.

Owen

Spatial XP

Re: Multiple layer attribute inspector

williamcarr — Mon, 11 Aug 2014 16:06:20 GMT

Paydirt! Thanks Owen.

Re: Multiple layer attribute inspector

williamcarr — Mon, 15 Sep 2014 21:51:53 GMT

Owen,

I ran into a couple other issues with the apply edits passing. Not sure how but only select layers are passing(usually the first one listed), or if multiple points are selected at a time. I think it is the loading of layers into initSelectToolbar array.

The rest of the code is just like the sample, but I think these are the trouble areas. It throws a TypeError: updateFeature is undefined upon trying to apply edits with the save button.

Could you take another look to see how I am failing at life?

Thanks in advance.

function initSelectToolbar(evt) {

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

var selectQuery = new Query();

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

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

var tol = map.extent.getWidth()/map.width * 5;

var x = evt.mapPoint.x;

var y = evt.mapPoint.y;

var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

selectionQuery.geometry = queryExtent;

asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {

//store the current feature

updateFeature = features[0]; console.log("adf");

map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");

map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");

var layerInfos = [{

'featureLayer': petroFieldsFL,

'showAttachments': false,

'isEditable': true

{ 'featureLayer': petroFieldsFL1,

'showAttachments': false,

'isEditable': true}];

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,[feature]);

map.infoWindow.hide();

});

map.infoWindow.setContent(attInspector.domNode);

map.infoWindow.resize(350, 240);

}