topic Re: Rename Filter Drop-down Options in ArcGIS JavaScript Maps SDK Questions

Rename Filter Drop-down Options

RebeccaWilson1 — Sat, 29 Feb 2020 03:36:27 GMT

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
};
});
}

Re: Rename Filter Drop-down Options

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:39:20 GMT

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);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Rename Filter Drop-down Options

RebeccaWilson — Sun, 01 Mar 2020 02:12:48 GMT

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!

Re: Rename Filter Drop-down Options

RobertScheitlin__GISP — Sun, 01 Mar 2020 02:30:41 GMT

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

Re: Rename Filter Drop-down Options

JamieHollis — Thu, 11 Jun 2020 22:18:20 GMT

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;

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

Kind regards,

Re: Rename Filter Drop-down Options

JamieHollis — Fri, 12 Jun 2020 07:20:52 GMT

What did you need to rename those too?

Kind regards,

Re: Rename Filter Drop-down Options

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:39:23 GMT

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);
});‍‍‍‍‍‍‍‍‍

Re: Rename Filter Drop-down Options

JamieHollis — Fri, 12 Jun 2020 13:28:46 GMT

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

Kind regards,

Re: Rename Filter Drop-down Options

RobertScheitlin__GISP — Fri, 12 Jun 2020 14:21:07 GMT

Sure you would just apply expression to your desired layer.