Custom Filtering Widget for FeatureLayer

TommyNygaard — Tue, 12 Nov 2019 01:41:53 GMT

Hello all,

I am new to ESRI as well as JavaScript.

I am currently trying to develop a custom widget that takes attributes of a field within a FeatureLayer and gives you the option to filter between them. So the structure would be this:

---- [FeatureLayer]
------ [FIELD]
---------- [ATTRIBUTES: x,y,z,...,]

With the widget then giving you the ability to input a FeatureLayer, a specific FIELD within the FeatureLayer and which ATTRIBUTES within that FIELD you would like to filter and outputting a drop down menu on the map as a selector.

Code wise I have this:

[FILE] main.ts

-----------------------------------------------------------------------------------

//// preamble with all import [PACKAGE] from "PLACE".

//BaseMap
const map = new EsriMap({
basemap: "TYPE"
});

//Widget view
const view = new MapView({
map: map,
container: "viewDiv",
});

//FeatureLayer
const layer = new FeatureLayer({
id: "FIELD",
url: "URL",
outFields: ["FIELD"],
});

map.add(layer);

var CustomFilter = new CustomWidget({
// VARIABLES HERE
});

view.ui.add(CustomFilter, "top-right");

-----------------------------------------------------------------------------------

[FILE] and the corresponding CustomWidget.tsx file:

-----------------------------------------------------------------------------------
/// <amd-dependency path="esri/core/tsSupport/declareExtendsHelper" name="__extends" />
/// <amd-dependency path="esri/core/tsSupport/decorateHelper" name="__decorate" />

//// preamble with all import [PACKAGE] from "PLACE".

@subclass("CustomWidget")
class CustomWidget extends declared(Widget) {

// CODE GOES HERE
}

export = FilterWidget;

-----------------------------------------------------------------------------------

as a reference, I got it to work without being a widget using the following code;

-----------------------------------------------------------------------------------

// Display a drop-down menu for filtering the FeatureLayer
var sqlExpressions = ["[ATTRIBUTE1] = [VALUE1] ", "[ATTRIBUTE2] = [VALUE2]", "[ATTRIBUTE3] = [VALUE3]"];

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

view.ui.add(selectFilter, "top-right");

// Filter the drop-down menu options based on title attribute
function setFeatureLayerViewFilter(expression: any) {
view.whenLayerView(layer).then(function(featureLayerView: any) {
featureLayerView.filter = {
where: expression
};
});
}

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

-----------------------------------------------------------------------------------

Any help on how to get started writing this code or converting it into a widget would be much appreciated. I have tried gathering information on the ESRI ecosystem but I need a little more help if possible 🙂

Thank you in advance

Re: Custom Filtering Widget for FeatureLayer

TommyNygaard — Tue, 12 Nov 2019 01:56:32 GMT

By the way the example code I provided is the tutorial code supplied here: Filter a feature layer | ArcGIS API for JavaScript 4.13

Basically I am looking to turn this into a widget 🙂

topic Custom Filtering Widget for FeatureLayer in Web AppBuilder Custom Widgets Questions

Custom Filtering Widget for FeatureLayer

Re: Custom Filtering Widget for FeatureLayer