Need a way to show Feature Layer Attributes on side bar.

Question

I am building a web application which include a feature layer. I am thinking of building a function that when I click a polygon, the attributes can be formatted and shown on a sidebar. There are many attributes so I don't want to use info window.

Anyone has an idea how to accomplish this? (using v3.3)

DianaBenedict · Answer

You could look at this sample

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_attributeInspectorPane/index.html

The attribute inspector automatically shows when you have records selected using the featureLayer.SelectFeatures. You may want to add a "clear selected" so that the records can get cleared. If you want this to be readonly then you can set that as part of your layerInfos but setting the property isEditable to false...otherwise isEditable is set to what your featureLayer service indicates.

As you can see, there are many options (as indicated below by others) it just depends on your intent with the featureLayer and your preference of UI.

LukePhilips · Answer

You could start with this example: http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/fl_dgrid
Once you "click" (query/select) a feature you have a "result" object that can be added to anything, a table or an info window for example.

ReneRubalcava · Answer

I have a module that I use to accomplish this kind of thing for an InfoTemplate, but you could easily modify it to use in any DOM element. You just need to pass it the feature you want to display the attributes for. https://github.com/odoe/AGSModularDemo/blob/master/app/src/js/helpers/templateBuilder.js The meat is in iterating over the attributes. // get the dom element for my infotemplate as a string var content = []; content[content.length] = ''; if (feature.layerName) { content[content.length] = ''; } /** * Iterate over attributes to get field names. * Ignore certain fields not needing to be displayed * Order matters, so loop forward over keys. **/ var keys = Object.keys(feature.attributes); for (var i = 0, len = keys.length; i < len; i++) { var _key = keys.toLowerCase(); if (!(_key.indexOf('shape') > -1 || _key === 'layername'|| _key === 'objectid' || _key === 'fid')) { var name = keys; content[content.length]= ''; } } content[content.length] = '

SOURCE:	' + feature.layerName + '
' + name + '	${' + name + '}

'; Replace the InfoTemplate style ${} with the actual values and you can place the HTML into your DOM somewhere. I got a lot of this from somewhere and can't remember where. I think it was one of the samples.