topic Re: attribute edit in ArcGIS JavaScript Maps SDK Questions

attribute edit

SatyanarayanaNarmala — Mon, 31 Aug 2015 10:08:35 GMT

Hi all,

I am trying to implement attribute edit using attribute inspector, the service is displaying but pop up info not getting displayed.

If the problem is with the proxy setting, can anybody help with it. i am using IIS server.

here is the code

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

<style>

html, body {

height: 100%; width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#mapDiv{

margin: 0;

padding:0;

}

#detailPane{

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 {height:100px;}

.esriAttributeInspector .atiLayerName {display:none;}

.esriAttributeInspector .atiButton{

margin-top:1px;

margin-right:45px;

}

</style>

var map;

var updateFeature;

require([

"esri/map",

"esri/layers/FeatureLayer",

"esri/dijit/AttributeInspector",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/Color",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/config",

"esri/tasks/query",

"dojo/query",

"dojo/parser",

"dojo/dom-construct",

"dijit/form/Button",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, FeatureLayer, AttributeInspector,

SimpleLineSymbol, SimpleFillSymbol, Color,

ArcGISDynamicMapServiceLayer, esriConfig,

Query,dojoQuery,

parser, 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: "streets",

center: [78.20, 19.00],

zoom: 11

});

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

var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/IRR/srsp_canal_WRK1/MapServer");

petroFieldsMSL.setDisableClientCaching(true);

map.addLayer(petroFieldsMSL);

var petroFieldsFL = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/IRR/srsp_canal_WRK1/FeatureServer/1", {

mode: FeatureLayer.MODE_SELECTION,

outFields: ["objectid","code", "codename", "length", "description", "status_work", "la_status", "ip_status"]

});

var selectionSymbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

"solid",

new Color("yellow"),

null

);

petroFieldsFL.setSelectionSymbol(selectionSymbol);

petroFieldsFL.on("edits-complete", function() {

petroFieldsMSL.refresh();

});

map.addLayers([petroFieldsFL]);

function initSelectToolbar(evt) {

var petroFieldsFL = evt.layers[1].layer;

var selectQuery = new Query();

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

selectQuery.geometry = evt.mapPoint;

petroFieldsFL.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() {

petroFieldsFL.clearSelection();

});

var layerInfos = [

{

'featureLayer': petroFieldsFL,

'showAttachments': false,

'isEditable': true,

'fieldInfos': [

{'fieldName': 'objectid', 'isEditable': false, 'objectid': 'objectid:'},

{'fieldName': 'code', 'isEditable': false, 'CANAL CODE': 'Acreage:'},

{'fieldName': 'codename', 'isEditable': false, 'label': 'CANAL NAME:'},

{'fieldName': 'length', 'isEditable': false, 'label': 'LENGTH IN METERS:'},

{'fieldName': 'description', 'isEditable': false, 'label': 'CANAL DESCRIPTION:'},

{'fieldName': 'status_work', 'isEditable': true, 'tooltip': 'WORK PROGRESS', 'label': 'WORK PROGRESS STATUS:'},

{'fieldName': 'la_status', 'isEditable': true, 'tooltip': 'LAND AQUISITION', 'label': 'LAND AQUISITION STATUS:'},

{'fieldName': 'ip_status', 'isEditable': true, 'tooltip': 'IP CREATED', 'label': 'IP CREATED STATUS:'}

]

}

];

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 a field to display the attribute inspector with customized fields.

</div>

</div>

</body>

</html>

Re: attribute edit

HerdisGudbrandsdottir — Mon, 31 Aug 2015 12:40:21 GMT

Hi Narmala,

Try fiddling with the geometry in the query - the mapPoint is very distinct, so to return features from a mapPoint you would have to be very precis [read lucky] to hit a feature. If you create a buffer around your point, you will get much better results:

Select with Feature Layer | ArcGIS API for JavaScript

require ([

"esri/graphic",

"esri/geometry/Circle",

...

var circleSymb = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

new Color([105, 105, 105]),

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

);

var circle;

....

function initSelectToolbar(evt) {

var petroFieldsFL = evt.layers[1].layer;

var selectQuery = new Query();

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

circle = new Circle({

center: evt.mapPoint,

geodesic: true,

radius: 0.2,

radiusUnit: "esriMiles"

});

map.graphics.clear();

map.infoWindow.hide();

var graphic = new Graphic(circle, circleSymb);

map.graphics.add(graphic);

selectQuery.geometry = circle.getExtent();

....

Re: attribute edit

SatyanarayanaNarmala — Tue, 01 Sep 2015 07:13:46 GMT

Hi Herdis,

I am wondering how you get the info display.

I am not good in programming. can You help me in solving this.

Regards,

Satyanarayana

Re: attribute edit

HerdisGudbrandsdottir — Tue, 01 Sep 2015 07:19:05 GMT

I've just added the circle buffer to your code - then when you click a point, the inspector opens:

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

<style>

html, body {

height: 100%; width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#mapDiv{

margin: 0;

padding:0;

}

#detailPane{

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 {height:100px;}

.esriAttributeInspector .atiLayerName {display:none;}

.esriAttributeInspector .atiButton{

margin-top:1px;

margin-right:45px;

}

</style>

var map;

var updateFeature;

require([

"esri/map",

"esri/layers/FeatureLayer",

"esri/dijit/AttributeInspector",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/Color",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/config",

"esri/tasks/query",

"dojo/query",

"dojo/parser",

"dojo/dom-construct",

"dijit/form/Button",

"esri/graphic",

"esri/geometry/Circle",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, FeatureLayer, AttributeInspector,

SimpleLineSymbol, SimpleFillSymbol, Color,

ArcGISDynamicMapServiceLayer, esriConfig,

Query,dojoQuery,

parser, domConstruct, Button, Graphic, Circle

) {

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: "streets",

center: [78.20, 19.00],

zoom: 11

});

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

var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/IRR/srsp_canal_WRK1/MapServer");

petroFieldsMSL.setDisableClientCaching(true);

map.addLayer(petroFieldsMSL);

var petroFieldsFL = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/IRR/srsp_canal_WRK1/FeatureServer/1", {

mode: FeatureLayer.MODE_SELECTION,

outFields: ["objectid","code", "codename", "length", "description", "status_work", "la_status", "ip_status"]

});

var selectionSymbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

"solid",

new Color("yellow"),

null

);

petroFieldsFL.setSelectionSymbol(selectionSymbol);

var circleSymb = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

new Color([105, 105, 105]),

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

);

var circle;

petroFieldsFL.on("edits-complete", function() {

petroFieldsMSL.refresh();

});

map.addLayers([petroFieldsFL]);

function initSelectToolbar(evt) {

//var petroFieldsFL = evt.layers[1].layer;

var selectQuery = new Query();

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

circle = new Circle({

center: evt.mapPoint,

geodesic: true,

radius: 0.2,

radiusUnit: "esriMiles"

});

map.graphics.clear();

map.infoWindow.hide();

var graphic = new Graphic(circle, circleSymb);

map.graphics.add(graphic);

selectQuery.geometry =circle.getExtent();;

//selectQuery.geometry = evt.mapPoint;