Hello there, Robert Scheitlin, GISP
Any tips for my problem please, if you have any code example and share i will appreciate, here is what i do: i have three editable layer on my webmap and custom HTML form for editing, in form i have dropdown list for my three layer to chose which of them to edit, but i can not edit my layers added on map, using drop down i create additional featurelayer for editing and then edit it.
Questionis: how can i use my layers which i have on map to edit without creating new layer? using drop down or just clicking on layer on map.
Code:
$(function xaxvi() {
$("#DropSearch").on("change", function () {
switch ($(this).val()) {
case "1":
$("#divText").html("");
break;
case "Wa":
$("#divText").html("localhost:6080/arcgis/rest/services/test/aragvi_service/FeatureServer/2");
break;
case "urduli":
$("#divText").html("localhost:6080/arcgis/rest/services/test/aragvi_service/FeatureServer/4");
break;
case "vantuzi":
$("#divText").html("localhost:6080/arcgis/rest/services/test/aragvi_service/FeatureServer/3");
}
console.log($("#divText").html()) // აქ გავუშვა ლინკი
//console.log($(this).val()) // აქ გავუშვა Expression
lrpopup = {
title: "ჭა კამერა",
lastEditInfoEnabled: false,
content: [{
type: "fields",
fieldInfos: [{
fieldName: "mdgomareoba",
label: "მდგომარეობა",
visible: true
}
]
}],
actions: [measureThisAction, openFileList, uploadFileList, saveFileList]
}
var myURLO = $("#divText").html()
const lr = new FeatureLayer({url: myURLO,
outFields: ["*"],
listMode: "hide",
popupEnabled: true,
popupTemplate: lrpopup,
id: "xaxvi",
symbol:{
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "#8A2BE2",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3
}
},
})
lr.opacity = 0;
map.add(lr);
const featureForm = new FeatureForm({
container: "formDiv",
layer: lr,
fieldConfig: [
{
name: "komentari",
label: "komentari",
}
]
});
Thanks in advance.
Solved! Go to Solution.
Vakhtang,
Your code logic is pretty mixed up. You have to many view click event handlers. Se my comments in the code below.
view.on("click", function(event) {
view.hitTest(event)
.then(getGraphics);
})
function getGraphics(response) {
var graphic = response.results[0].graphic;
//right here you have the feature that was clicked
//so why are you not setting the FeatureForm feature attribute?
var attributes = graphic.attributes;
var ido = graphic.layer;
console.log(ido)
const featureForm = new FeatureForm({
container: "formDiv",
layer: ido,
fieldConfig: [
{
name: "komentari",
label:"komentari",
}
]
});
//Not sure what this next line is for
document.getElementById(formDiv)
//What you need is something like this.
featureForm.feature = graphic;
Forget your whole selectExistingFeature where you add another view click handler (this is the reason you have to click twice).
If the layers are added to the webmap using the "FeatureServer" url from the start then there is no need to add then as a featurelayer again. Just get a reference to the layer object from the map layers property and set that to the FeatureForm layer property.
yes, but how can i point selected featurelayer (one from three editable layer) here?:
const featureForm = new FeatureForm({
container: "formDiv",
layer: lr,
fieldConfig: [
{
name: "komentari",
label: "komentari",
}
]
});
attributes are same for all three featurelayer, but when i click on e.g. RED featurelayer i want get attribute info from RED, when i click GRAY get Gray info and same for YELLOW.
Do all three layers use the same url?... If not then you have the ability to determine which one to set to the FeatureForm based on the url or id.
Ok, let me try and keep in touch.
Hi Robert,
I tried different ways and now i can get my layer, but still some problem. When i click ones it returns layer, but in my form it does not appear and when i click second time it appears in form, but when i change text it returns error :
---- Uncaught TypeError: Cannot convert undefined or null to object
Here is a screen shot and code (Code is a standard Applyedits, just to show you where featutreLayer goes) for review:
view.on("click", function(event) {
view.hitTest(event)
.then(getGraphics);
})
function getGraphics(response) {
var graphic = response.results[0].graphic;
var attributes = graphic.attributes;
var ido = graphic.layer;
console.log(ido)
const featureForm = new FeatureForm({
container: "formDiv",
layer: ido,
fieldConfig: [
{
name: "komentari",
label:"komentari",
}
]
});
document.getElementById(formDiv)
featureForm.on("submit", function() {
if (editFeature) {
const updated = featureForm.getValues();
Object.keys(updated).forEach(function(name) {
editFeature.attributes.komentari =
document.getElementById("Req_Code").value;
});
const edits = {
updateFeatures: [editFeature]
};
applyEditsToIncidents(edits);
document.getElementById("viewDiv").style.cursor = "auto";
}
});
selectExistingFeature();
function applyEditsToIncidents(params) {
unselectFeature();
ido
.applyEdits(params)
.then(function(editsResult) {
if (
editsResult.addFeatureResults.length > 0 ||
editsResult.updateFeatureResults.length > 0
) {
unselectFeature();
let objectId;
if (editsResult.addFeatureResults.length > 0) {
objectId = editsResult.addFeatureResults[0].objectId;
} else {
featureForm.feature = null;
objectId = editsResult.updateFeatureResults[0].objectId;
}
selectFeature(objectId);
if (addFeatureDiv.style.display === "block") {
toggleEditingDivs("none", "block");
}
}
else if (editsResult.deleteFeatureResults.length > 0) {
toggleEditingDivs("block", "none");
}
})
.catch(function(error) {
console.log("===============================================");
console.error(
"[ applyEdits ] FAILURE: ",
error.code,
error.name,
error.message
);
console.log("error = ", error);
});
}
function selectExistingFeature() {
view.on("click", function(event) {
// clear previous feature selection
unselectFeature();
if (
document.getElementById("viewDiv").style.cursor != "crosshair"
) {
view.hitTest(event).then(function(response) {
// If a user clicks on an incident feature, select the feature.
if (response.results.length === 0) {
toggleEditingDivs("block", "none");
} else if (
response.results[0].graphic &&
response.results[0].graphic.layer == ido
) {
if (addFeatureDiv.style.display === "block") {
toggleEditingDivs("none", "block");
}
selectFeature(
response.results[0].graphic.attributes[
ido.objectIdField
]
);
}
});
}
});
}
function selectFeature(objectId) {
// query feature from the server
ido
.queryFeatures({
objectIds: [objectId],
outFields: ["*"],
returnGeometry: true
})
.then(function(results) {
if (results.features.length > 0) {
editFeature = results.features[0];
// display the attributes of selected feature in the form
featureForm.feature = editFeature;
console.log(editFeature.attributes.komentari)
document.getElementById("Req_Code").value = editFeature.attributes.komentari;
view.whenLayerView(editFeature.layer).then(function(layerView) {
highlight = layerView.highlight(editFeature);
});
}
});
}
const addFeatureDiv = document.getElementById("addFeatureDiv");
const attributeEditing = document.getElementById("featureUpdateDiv");
function unselectFeature() {
if (highlight) {
highlight.remove();
}
}
document.getElementById("btnUpdate").onclick = function() {
// Fires feature form's submit event.
featureForm.submit();
//removeLR()
};
};
Vakhtang,
Your code logic is pretty mixed up. You have to many view click event handlers. Se my comments in the code below.
view.on("click", function(event) {
view.hitTest(event)
.then(getGraphics);
})
function getGraphics(response) {
var graphic = response.results[0].graphic;
//right here you have the feature that was clicked
//so why are you not setting the FeatureForm feature attribute?
var attributes = graphic.attributes;
var ido = graphic.layer;
console.log(ido)
const featureForm = new FeatureForm({
container: "formDiv",
layer: ido,
fieldConfig: [
{
name: "komentari",
label:"komentari",
}
]
});
//Not sure what this next line is for
document.getElementById(formDiv)
//What you need is something like this.
featureForm.feature = graphic;
Forget your whole selectExistingFeature where you add another view click handler (this is the reason you have to click twice).
Thanks Robert, i guessed what was my problem. Great!