nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Is it possible to filter the Feature Table?

LindaDunklee

I am using the (Javascript) Feature Table to allow my users to edit feature layer information directly in the table. Is there a way to let the user filter this based on their own criteria, similar to the attribute table filtering in AGO or Web App Builder?

Trouver plus de publications taguées avec

Accepted answers

RobertScheitlin__GISP

Linda,

Sure you can here is a sample to get you started:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Filtering FeatureTable</title>
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.16/esri/css/esri.css">
  <script src="//js.arcgis.com/3.16/"></script>

  <style>
    html, body, #map{
      width:100%;
      height:100%;
      margin:0;
      padding:0;
    }
    #header {
      overflow:hidden;
      border:none;
      border-bottom:3px solid #badb9c;
      font-family:Windows;
      font-size:14pt;
      color:#000000;
      background:#80bb7e;
    }
    .filterTb {
      padding-left: 12px;
    }
    .esri-feature-table .esri-feature-table-menu {
      background-color: #80bb7e;
    }
  </style>

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/geometry/webMercatorUtils",
      "esri/map",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "esri/tasks/query",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox"
    ], function (
      FeatureLayer, FeatureTable, webMercatorUtils, Map,
      domConstruct, dom, parser, ready, on,lang,
      registry, Query, Button, ContentPane, BorderContainer, TextBox
    ) {
      parser.parse();

      ready(function(){

        var myFeatureLayer;
        var lastWhere = "";
        var map = new Map("map",{
          basemap: "streets"
        });

        map.on("load", loadTable);

        function loadTable(){

          // Create the feature layer
          myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
            visible: true,
            outFields: ["*"],
            id: "fLayer"
          });

          //set map extent
          on(myFeatureLayer, "load", function(evt){
            var extent = myFeatureLayer.fullExtent;
            if (webMercatorUtils.canProject(extent, map)) {
              map.setExtent( webMercatorUtils.project(extent, map) );
            }
          });

          on(dijit.byId("stringTextBox"), 'change', function(value){
            var userVal = dijit.byId("stringTextBox").get('value');
            var oidFld = myFeatureLayer.objectIdField;
            var query = new Query();
            if(value.length >= 3){
              lastWhere = query.where = "Sci_Name LIKE '%" +  userVal + "%'";
              myFeatureLayer.queryIds(query, lang.hitch(this, function(objectIds) {
                myFeatureTable.selectedRowIds = objectIds;
                myFeatureTable._showSelectedRecords();
              }));
            }else{
              if(lastWhere !== ''){
                query.where = "1=1";
                myFeatureLayer.queryIds(query, lang.hitch(this, function(objectIds) {
                  myFeatureTable.selectedRowIds = objectIds;
                  myFeatureTable._showSelectedRecords();
                }));
                lastWhere = '';
              }
            }
          });

          map.addLayer(myFeatureLayer);

          myFeatureTable = new FeatureTable({
            "featureLayer" : myFeatureLayer,
            "outFields":  ["Collected","Crew","Status","Spp_Code", "Height", "Cmn_Name","Sci_Name","Street","Native"],
            "map" : map,
            "gridOptions": {}
          }, 'myTableNode');

          myFeatureTable.startup();
        }
      });
    });
  </script>
</head>

<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >
      Filter table by Sci Name:
      <input id="stringTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, intermediateChanges:true" class="dijit-form-TextBox filterTb" />
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:70%">
      <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:30%">
      <div id="myTableNode"></div>
    </div>
  </div>
</body>
</html>

All comments

YingwenDeng

Thanks! It is exactly what I am searching for.

deleted-user-5IaUWKgFepbf

This saved my day. Thank you!

prashantnigam

Hi, I saw this thread and wanted to add my simpler approach :

to add filter to feature layer just add the where expression as :

myFeatureLayer.setDefinitionExpression("Sci_Name LIKE '" + userVal + "%'");

After this just call:

myFeatureTable.refresh();

RobertScheitlin__GISP

Kari,

Sure that is as simple as changing the Query used by the QueryTask to use OR in the where clause.

KariHicks2

Hi Robert Scheitlin, GISP

Thank you for providing that sample! I have been trying to figure out how to filter a feature table for a while. Do you know how one might filter my multiple fields? I don't mean filtering my two fields simultaneously (like first AND last name) but using one or the other.

Thank you!

RobertScheitlin__GISP

Linda,

I do not have a sample put together for that particular scenario but if you start a new thread and attach your code attempt to combine the two then I or others can help diagnose whats wrong.

LindaDunklee

Now that I've got this working, I'm trying to add an editor that will allow the creation of new features into a different layer than the one that displays in the table, and cannot seem to get Edit and the Feature Table to work in the same code. Does anyone have any samples of something similar? This is my first mixed-bag application like this!

Thanks!

LindaDunklee

Thank you Robert, this is very helpful as a launch point!

RobertScheitlin__GISP

Ken,

True, It was just a quick example to get her started. I will update the sample.

kenbuja

That's a nice example, Robert, but the logic isn't quite right. When I query for "carolina", I get back these records.

It's returning the results of a query for the first three letters that the user types. And since the whereclause is

lastWhere = query.where = "Sci_Name LIKE '" +  userVal + "%'";

it won't return the rows for "Halesia carolina". Changing it to

lastWhere = query.where = "Sci_Name LIKE '%" +  userVal + "%'";

gives the expected result.

RobertScheitlin__GISP

Linda,

Sure you can here is a sample to get you started:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Filtering FeatureTable</title>
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.16/esri/css/esri.css">
  <script src="//js.arcgis.com/3.16/"></script>

  <style>
    html, body, #map{
      width:100%;
      height:100%;
      margin:0;
      padding:0;
    }
    #header {
      overflow:hidden;
      border:none;
      border-bottom:3px solid #badb9c;
      font-family:Windows;
      font-size:14pt;
      color:#000000;
      background:#80bb7e;
    }
    .filterTb {
      padding-left: 12px;
    }
    .esri-feature-table .esri-feature-table-menu {
      background-color: #80bb7e;
    }
  </style>

  <script>
    var map;

    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/geometry/webMercatorUtils",
      "esri/map",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "esri/tasks/query",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox"
    ], function (
      FeatureLayer, FeatureTable, webMercatorUtils, Map,
      domConstruct, dom, parser, ready, on,lang,
      registry, Query, Button, ContentPane, BorderContainer, TextBox
    ) {
      parser.parse();

      ready(function(){

        var myFeatureLayer;
        var lastWhere = "";
        var map = new Map("map",{
          basemap: "streets"
        });

        map.on("load", loadTable);

        function loadTable(){

          // Create the feature layer
          myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
            visible: true,
            outFields: ["*"],
            id: "fLayer"
          });

          //set map extent
          on(myFeatureLayer, "load", function(evt){
            var extent = myFeatureLayer.fullExtent;
            if (webMercatorUtils.canProject(extent, map)) {
              map.setExtent( webMercatorUtils.project(extent, map) );
            }
          });

          on(dijit.byId("stringTextBox"), 'change', function(value){
            var userVal = dijit.byId("stringTextBox").get('value');
            var oidFld = myFeatureLayer.objectIdField;
            var query = new Query();
            if(value.length >= 3){
              lastWhere = query.where = "Sci_Name LIKE '%" +  userVal + "%'";
              myFeatureLayer.queryIds(query, lang.hitch(this, function(objectIds) {
                myFeatureTable.selectedRowIds = objectIds;
                myFeatureTable._showSelectedRecords();
              }));
            }else{
              if(lastWhere !== ''){
                query.where = "1=1";
                myFeatureLayer.queryIds(query, lang.hitch(this, function(objectIds) {
                  myFeatureTable.selectedRowIds = objectIds;
                  myFeatureTable._showSelectedRecords();
                }));
                lastWhere = '';
              }
            }
          });

          map.addLayer(myFeatureLayer);

          myFeatureTable = new FeatureTable({
            "featureLayer" : myFeatureLayer,
            "outFields":  ["Collected","Crew","Status","Spp_Code", "Height", "Cmn_Name","Sci_Name","Street","Native"],
            "map" : map,
            "gridOptions": {}
          }, 'myTableNode');

          myFeatureTable.startup();
        }
      });
    });
  </script>
</head>

<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >
      Filter table by Sci Name:
      <input id="stringTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, intermediateChanges:true" class="dijit-form-TextBox filterTb" />
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:70%">
      <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:30%">
      <div id="myTableNode"></div>
    </div>
  </div>
</body>
</html>

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.