Rename Filter Drop-down Options

[RebeccaWilson1]

Hi, 

I'm working on a hiking trail application. I have a functioning filter tool within the app based on trail difficulty. Currently the tool drop-down shows the literal sql queries being used, and I'd like to rename them for display purposes. 

Currently they look like the screenshot below, but I'd rather it says something like "Difficulty is easiest". 

I've tried playing around with my script (below) but I just can't quite nail down what I need to change to make it work.

Thanks for any help!

var sqlExpressions = ["DIFFICULTY = 'Easiest'", "DIFFICULTY = 'Moderate'", "DIFFICULTY = 'Moderately Strenuous'", "DIFFICULTY = 'Strenuous'", "DIFFICULTY = 'Very Strenuous'", "DIFFICULTY IS NOT NULL" ];

var selectFilter = document.createElement("select");
selectFilter.setAttribute("class", "esri-widget esri-select");
selectFilter.setAttribute("style", "width: 275px; font-family:Avenir Next W00; font-size: 1em;");
sqlExpressions.forEach(function(sql){
var option = document.createElement("option");
option.value = sql;
option.innerHTML = sql;
selectFilter.appendChild(option);
});

var selectExpand = new Expand({
view: view,
expandTooltip: "Filter by Difficulty",
expandIconClass: "esri-icon-filter",
content: selectFilter,
});

view.ui.add(selectExpand, "top-left");

selectFilter.addEventListener('change', function(event) {
setFeatureLayerViewFilter(event.target.value);
});

function setFeatureLayerFilter(expression) {
featureLayer.definitionExpression = expression;
}

function setFeatureLayerViewFilter(expression) {
view.whenLayerView(trails).then(function(featureLayerView){
featureLayerView.filter = {
where: expression
};
});
}

[RobertScheitlin__GISP · Accepted solution]

Rebecca,

  You would need to use an object in your array instead of strings.

var sqlExpressions = [{sql:”DIFFICULTY = 'Easiest'",label:”Easiest”},{sql: "DIFFICULTY = 'Moderate'",label:”Moderate”},{sql:"DIFFICULTY = 'Moderately Strenuous'",label:”Moderately Strenuous”},{sql: "DIFFICULTY = 'Strenuous'",label:”Strenuous”},{sql:"DIFFICULTY = 'Very Strenuous'",label:”Very Strenuous”},{sql: "DIFFICULTY IS NOT NULL",label:”???”}];
var selectFilter = document.createElement("select");
selectFilter.setAttribute("class", "esri-widget esri-select");
selectFilter.setAttribute("style", "width: 275px; font-family:Avenir Next W00; font-size: 1em;");
sqlExpressions.forEach(function(option){
  var optionObj = document.createElement("option");
  optionObj.value = option.sql;
  optionObj.innerHTML = option.label;
  selectFilter.appendChild(optionObj);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RebeccaWilson]

Thank you Robert!

I was able to implement your changes and get it to work! 

The code you had written didn't work quite right, but after some playing around with it I was able to get it operate as I was hoping. I had to rename the option variable within the: " sqlExpressions.forEach(function(option){ " and then subsequently for option.sql and option.label - but after that it worked!

Thank you so much!

[RobertScheitlin__GISP]

Well that’s because trying to write code on your phone is never easy. Glad you got it to work.

[JamieHollis]

What did you need to rename those too?

Kind regards,

[JamieHollis]

Hi, 

I'm trying to do the same thing with the code I'm using - still new to JS for some reason it keeps showing "object, Object" or is just blank in my bar. I've used the same principle as you both; 

var sqlExpressions = [{sql:"scheme_cat = 'Footway Scheme'",label:"Footway Scheme"},{sql:"scheme_cat = 'West End Scheme'",label:"West End Scheme"}];

var selectFilter = document.createElement("select");
selectFilter.setAttribute("class", "esri-widget esri-select");
selectFilter.setAttribute("style", "width: 275px; font-family:Avenir Next W00; font-size: 1em;");
sqlExpressions.forEach(function(option){
var option = document.createElement("option");
option.value = option;
option.innerHTML = option;
selectFilter.appendChild(option);
});

It's probably super simple but your helps would be much appreciated.

Kind regards,

[RobertScheitlin__GISP]

Jamie,

  You just missed specifying which property to assign.

var selectFilter = document.createElement("select");
selectFilter.setAttribute("class", "esri-widget esri-select");
selectFilter.setAttribute("style", "width: 275px; font-family:Avenir Next W00; font-size: 1em;");
sqlExpressions.forEach(function(option){
  var optionObj = document.createElement("option");
  optionObj.value = option.sql;
  optionObj.innerHTML = option.label;
  selectFilter.appendChild(optionObj);
});‍‍‍‍‍‍‍‍‍

[JamieHollis]

Thanks Robert!! That has worked perfectly! Is there a way to add multiple layers to this function? 

Kind regards,

[RobertScheitlin__GISP]

Sure you would just apply expression to your desired layer.