Hi,
I am using a webmap from the portal and generating map. And I am using ItemInfo operational layers for the attribute Inspector to get the textboxes, save and delete button . However, I am unable to see any attribute data in the Attribute table tag.
Here I am not using WAB its just a java script application. I am using the same code in the below URL:
ArcGIS API for JavaScript Sandbox
If I am using WebMaps, don't I get the attribute table in the Attribute Inspector widget?
Cheers,
Srikanth Dasari
Solved! Go to Solution.
Srikanth,
OK here is a sample for that. The important part is on line 77 below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Editable FeatureLayer with Attribute Inspector</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<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;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var map, updateFeature;
var teamsFL;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/AttributeInspector",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/renderers/UniqueValueRenderer",
"esri/config",
"esri/arcgis/utils",
"esri/tasks/query",
"dojo/dom-construct",
"dijit/form/Button",
"dojo/domReady!"
], function(
Map, FeatureLayer, AttributeInspector,
SimpleLineSymbol, SimpleMarkerSymbol, Color, UniqueValueRenderer,
esriConfig, arcgisUtils,
Query, domConstruct, Button
) {
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx";
arcgisUtils.createMap("3cca027bf7f447589a8ae9dac253056c", "mapDiv", {
//!!!!!This is the important part!!!!!///
ignorePopups: true
}).then(function(response) {
var map = response.map;
map.setInfoWindowOnClick(false);
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 = map.getLayer(map.graphicsLayerIds[0]);
//teamsFL.setInfoTemplate(null);
teamsFL.setSelectionSymbol(selectionSymbol);
//Symbolize features by W/L record
var recordRenderer = new UniqueValueRenderer(defaultSymbol, "Rd_64_Result");
recordRenderer.addValue("W", new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7, null, new Color([93, 240, 79])));
recordRenderer.addValue("L", new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7, null, new Color([240, 146, 79])));
teamsFL.setRenderer(recordRenderer);
setTimeout(function(){
var selectQuery = new Query();
map.on("click", function(evt) {
selectQuery.geometry = evt.mapPoint;
selectQuery.distance = 50;
selectQuery.units = "miles"
selectQuery.returnGeometry = true;
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();
}
});
});
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);
}, 800);
});
});
</script>
</head>
<body class="claro">
<div id="detailPane">
Click to display the attribute inspector for all NCAA men's basketball tournament teams within 50 miles of click.
</div>
<div id="mapDiv"></div>
</body>
</html>
Srikanth,
If you are using the same code as the link you provided above then what you see in that link is what you will see in your app. The fact that you are using a web map will not change how the code/app will work. So bottom line is No you will not get an attribute table just because you are using a web map.
So do I need to customise the code for the attribute Inspector widget??
The only code I am using from the link is related to AttributeInspector... I am using operational layers not creating FeatureLayers...
Here is the code I am using..
Looping through response.ItemInfo.itemData.operationalLayers
checking if it is a FeatureLayer
creating an editable layers array response.ItemInfo.itemData.operationalLayers
var layerInfos = [ { 'featureLayer': editableLayers[0], 'isEditable': true, 'disableAttributeUpdate': false, 'fieldInfos': editableLayers[1].popupInfo.fieldInfos }, { 'featureLayer': editableLayers[1], 'isEditable': true, 'disableAttributeUpdate': false, 'fieldInfos': editableLayers[1].popupInfo.fieldInfos } ]; attInspector = new AttributeInspector({ layerInfos: layerInfos }, '<div></div>'); attInspector.startup(); var validFeatures=[]; imgEditorElement.on("click",function(){ angular.element('#editorContainer').css('display','block'); btnBack.on("click",function(evt){ angular.element('#templatePickerContainer').css('display','block'); angular.element('#attributeEditorContainer').css('display','none'); }); var templatePicker = new TemplatePicker({ featureLayers: layers, grouping: true, rows: "auto", columns: 3, showTooltip: true }, $attrs.templatePickerTargetId); templatePicker.startup(); var _mapClick; if (map) { _mapClickHandler(true); } function _mapClickHandler(create) { _attrInspIsCurrentlyDisplayed=false; if (create === true && _attrInspIsCurrentlyDisplayed === false) { map.setInfoWindowOnClick(false); if (_mapClick === undefined || _mapClick === null) { _mapClick = map.on("click", lang.hitch(this,function(evt){ map.infoWindow.hide(); angular.element('#templatePickerContainer').css('display','none'); angular.element('#attributeEditorContainer').css('display','block'); //var layers=map.getLayersVisibleAtScale(); var EditlayerInfos=[]; var deferreds=[]; array.forEach(layers,lang.hitch(this,function(layer){ if(!(layer.allowGeometryUpdates && layer.allowGeometryUpdates==true)) return; var line = new SimpleLineSymbol(); line.setColor(new Color([36, 36, 36, 1])); var fill = new SimpleFillSymbol(); fill.setColor(new Color([0, 168, 132, 0.25])); fill.setOutline(line); layer.setSelectionSymbol(fill); //EditlayerInfos.push(layer); var selectQuery = new Query(); //selectQuery.geometry = editUtils.pointToExtent(this.map, evt.mapPoint, 20); var pixelWidth = map.extent.getWidth() / map.width; var toleranceInMapCoords = 20 * pixelWidth; selectQuery.geometry=new Extent(evt.mapPoint.x - toleranceInMapCoords, evt.mapPoint.y - toleranceInMapCoords, evt.mapPoint.x + toleranceInMapCoords, evt.mapPoint.y + toleranceInMapCoords, map.spatialReference); var deferred = layer.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, lang.hitch(this, function (features) { array.forEach(features, function (feature) { //map.graphics.add(new graphic(feature.geometry,feature.symbol)); validFeatures.push(feature); }); })); deferreds.push(deferred); }));
Srikanth,
So help me understand you issue. Are you just having trouble getting that sample code to work with layers coming from a web map verses a FeatureLayer?
Exactly.
Srikanth,
OK here is a sample for that. The important part is on line 77 below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Editable FeatureLayer with Attribute Inspector</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<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;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var map, updateFeature;
var teamsFL;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/AttributeInspector",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/renderers/UniqueValueRenderer",
"esri/config",
"esri/arcgis/utils",
"esri/tasks/query",
"dojo/dom-construct",
"dijit/form/Button",
"dojo/domReady!"
], function(
Map, FeatureLayer, AttributeInspector,
SimpleLineSymbol, SimpleMarkerSymbol, Color, UniqueValueRenderer,
esriConfig, arcgisUtils,
Query, domConstruct, Button
) {
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx";
arcgisUtils.createMap("3cca027bf7f447589a8ae9dac253056c", "mapDiv", {
//!!!!!This is the important part!!!!!///
ignorePopups: true
}).then(function(response) {
var map = response.map;
map.setInfoWindowOnClick(false);
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 = map.getLayer(map.graphicsLayerIds[0]);
//teamsFL.setInfoTemplate(null);
teamsFL.setSelectionSymbol(selectionSymbol);
//Symbolize features by W/L record
var recordRenderer = new UniqueValueRenderer(defaultSymbol, "Rd_64_Result");
recordRenderer.addValue("W", new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7, null, new Color([93, 240, 79])));
recordRenderer.addValue("L", new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7, null, new Color([240, 146, 79])));
teamsFL.setRenderer(recordRenderer);
setTimeout(function(){
var selectQuery = new Query();
map.on("click", function(evt) {
selectQuery.geometry = evt.mapPoint;
selectQuery.distance = 50;
selectQuery.units = "miles"
selectQuery.returnGeometry = true;
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();
}
});
});
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);
}, 800);
});
});
</script>
</head>
<body class="claro">
<div id="detailPane">
Click to display the attribute inspector for all NCAA men's basketball tournament teams within 50 miles of click.
</div>
<div id="mapDiv"></div>
</body>
</html>
These are the Important things are IgnorePopups and map.getLayer().. that resolved the issue... Happy Monday
Thanks,
Srikanth Dasari