Rename Filter Drop-down Options

937
8
Jump to solution
02-28-2020 07:36 PM
RebeccaWilson1
New Contributor

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

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Emeritus

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
New Contributor III

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!

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


JamieHollis
New Contributor II

What did you need to rename those too?

Kind regards,

0 Kudos
JamieHollis
New Contributor II

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,

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
New Contributor II

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

Kind regards,

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sure you would just apply expression to your desired layer.