Dynamically fill drop down list

AprilSummers · ‎03-16-2020

I am using this as an example to achieve what I want

The code dynamically retrieves the list in the dropdown from the feature layer. How do I modify i so that I can dynamically retrieve values for the next dropdown based on the previous one. Basically, I want to retrieve values of another field using select by attribute and populate the next dropdown with the same.

I tried whatever I could but I could not get it to work.

Requesting for some pointers

RobertScheitlin__GISP · ‎03-17-2020

April,

In that case then when the user select an option from the first select element it has an event listener that calls the setWellsDefinitionExpression function. You need to take that SQL statement (i.e. "STATUS2 = '" + newValue + "'") and query the featurelayer.

var Select2 = document.getElementById("the id of your second select");

var query2 = wellsLayer.createQuery();
//get the layer exisiting definitionExpression (the first dropdowns value)
query2.where = wellsLayer.definitionExpression;
wellsLayer.queryFeatures(query2)
.then(getValues2)
.then(getUniqueValues)
.then(addToSelect2);

function addToSelect2(values) {
  values.sort();
  values.forEach(function(value) {
    var option = document.createElement("option");
    option.text = value;
    Select2.add(option);
  });

  //return setWellsDefinitionExpression(Select2.value);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

// return an array of all the values in the
// your field
function getValues2(response) {
  var features = response.features;
  var values = features.map(function(feature) {
   return feature.attributes.YOURSECONDFIELD;
  });
  return values;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎03-17-2020

April,

In that case then when the user select an option from the first select element it has an event listener that calls the setWellsDefinitionExpression function. You need to take that SQL statement (i.e. "STATUS2 = '" + newValue + "'") and query the featurelayer.

var Select2 = document.getElementById("the id of your second select");

var query2 = wellsLayer.createQuery();
//get the layer exisiting definitionExpression (the first dropdowns value)
query2.where = wellsLayer.definitionExpression;
wellsLayer.queryFeatures(query2)
.then(getValues2)
.then(getUniqueValues)
.then(addToSelect2);

function addToSelect2(values) {
  values.sort();
  values.forEach(function(value) {
    var option = document.createElement("option");
    option.text = value;
    Select2.add(option);
  });

  //return setWellsDefinitionExpression(Select2.value);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

// return an array of all the values in the
// your field
function getValues2(response) {
  var features = response.features;
  var values = features.map(function(feature) {
   return feature.attributes.YOURSECONDFIELD;
  });
  return values;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AprilSummers · ‎03-21-2020

Hi Robert Scheitlin, GISP‌

Thank you very much! I adapted your script to get my code working the way I wanted. I am able to get the other drop-down to dynamically populate values. I need to tweak it a bit more because when I change the first dropdown, the second dropdown just appends the values to the second dropdown from the previous selection.

Having made this work (though not ideal way), when I run the QueryForWellsGeometries function (I want this as my final geometry return function and not the CreateBuffer()), I get an error that I am unable to understand how to decode. Any pointers?

I haven't changed anything in that function because when I run the create query, I assume that in considers the query using the SetDefinitionExpressionQuery where the definition expression is taking into consideration values of both dropdowns

AprilSummers · ‎03-21-2020

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Query features from a FeatureLayer - 4.14</title>

#infoDiv {
background-color: white;
color: black;
padding: 6px;
width: 400px;
}

#results {
font-weight: bolder;
padding-top: 10px;
}
.slider {
width: 100%;
height: 60px;
}
#drop-downs {
padding-bottom: 15px;
}
</style>

var wellTypeSelect = document.getElementById("well-type");
var wellTypeTwoSelect = document.getElementById("well-typetwo");

var queryWellsButton = document.getElementById("query-wells");

// oil and gas wells
var wellsLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "8af8dc98e75049bda6811b0cdf9450ee"
},
outFields: ["*"],
visible: false
});

// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();

var map = new Map({
basemap: "dark-gray",
layers: [wellsLayer, resultsLayer]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-97.75188, 37.23308],
zoom: 10
});
view.ui.add("infoDiv", "top-right");

// query all features from the wells layer
view
.when(function() {
return wellsLayer.when(function() {
console.log("map loads");
var query = wellsLayer.createQuery();
return wellsLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);

function getValues(response) {
var features = response.features;
var values = features.map(function(feature) {
return feature.attributes.STATUS2;
});
console.log("Get Well status values");
return values;
}

function getUniqueValues(values) {
console.log(start function);
var uniqueValues = [];

values.forEach(function(item, i) {
if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) && item !== "") {
uniqueValues.push(item);
}
});
console.log("Get Well status unique values ");
return uniqueValues;
}

function addToSelect(values) {
values.sort();
values.forEach(function(value) {
var option = document.createElement("option");
option.text = value;
wellTypeSelect.add(option);
});
console.log("Add well status values to dropdown");
//return setWellsDefinitionExpression(wellTypeSelect.value);
}

function setWellsStatusExpression(newValue) {
wellsLayer.definitionExpression = "STATUS2 = '" + newValue + "'";

if (!wellsLayer.visible) {
wellsLayer.visible = true;
}
console.log(
"Sets definition expression only well status is available"
);
}

function setWellsDefinitionExpression(newValue1, newValue2) {
if ((newValue2 = undefined)) {
console.log("Only STATUS2 is available");
wellsLayer.definitionExpression = "STATUS2 = '" + newValue1 + "'";
} else {
console.log("Both status are available");
wellsLayer.definitionExpression =
"STATUS2 = '" + newValue1 + "AND STATUS = '" + newValue2 + "'";
}

if (!wellsLayer.visible) {
wellsLayer.visible = true;
}

return queryForWellGeometries();
}

function queryForWellGeometries() {
console.log("Query well geometries");
var wellsQuery = wellsLayer.createQuery();

return wellsLayer.queryFeatures(wellsQuery).then(function(response) {
wellsGeometries = response.features.map(function(feature) {
return feature.geometry;
});
return wellsGeometries;
});
}

wellTypeSelect.addEventListener("change", function() {
console.log("Change Well status values in dropdown");
var type = event.target.value;
setWellsStatusExpression(type);
filterWellType();
});

function filterWellType() {
console.log("Filter for well type");
var query2 = wellsLayer.createQuery();
query2.where = wellsLayer.definitionExpression;

wellsLayer
.queryFeatures(query2)
.then(getQuery2Values)
.then(getUniqueValues)
.then(addToSelectQuery2);
}

function getQuery2Values(response) {
var featuresQuery2 = response.features;
var query2Values = featuresQuery2.map(function(feature) {
return feature.attributes.STATUS;
});
console.log("Get Well type values");
return query2Values;
}

//Add the unique values to the STS Route type select element. This will allow the user to filter by campaigns.
function addToSelectQuery2(query2Values) {
query2Values.sort();
query2Values.forEach(function(value) {
var option = document.createElement("option");
option.text = value;
query2Values.add(option);
});
console.log("Add well type values to second dropdown");
}

//Set a new definitionExpression on the STS Route layer and view the selected campaign and run
wellTypeTwoSelect.addEventListener("change", function() {
console.log("Get Well status values");
var type = event.target.value;
});

queryWellsButton.addEventListener("click", function() {
var type = event.target.value;
setWellsDefinitionExpression(values.value, query2Values.value).then(
queryForWellGeometries
);
});
});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<div id="drop-downs">
Select well status:
<select id="well-type" class="esri-widget"
><option value="">Select well status</option></select
>
Select well type:
<select id="well-typetwo" class="esri-widget"
><option value="">Select well type</option></select
>
</div>
<button id="query-wells" class="esri-widget">Query Wells</button>
<div id="results" class="esri-widget"></div>
</div>
</body>
</html>

AprilSummers · ‎03-21-2020

Sorry for all the spam! It finally works exactly like I want!! I had a missing quote to end my string in the query function.

Thank you Robert Scheitlin, GISP‌!