Hide Table of Contents
View FeatureTable - Custom Menu Items live sample
FeatureTable - Custom Menu Items


This sample demonstrates how FeatureTable displays attributes of a FeatureLayer.

  • Shows how to edit existing attributes in the table by setting FeatureTable.editable property to true.
  • Shows how to add custom functional menu items to 'Options' dropdown menu using menuFunctions property.
  • How FeatureTable.refresh() method re-fetches features from the layer once the layer's definitionExpression is set.
  • How to change labels and editability of a field using fieldOptions property.
  • How to set interactions between the map and the table by:
    • setting FeatureTable.syncSelection property to true to enable selection from the table to the map.
    • implementing the layer's click logic to enable selection from the map to the table.


<!DOCTYPE html>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>FeatureTable - Custom Menu Items</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.46/"></script>

    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;

    ], function (
      FeatureLayer, FeatureTable, Extent, graphicsUtils, Query, PictureMarkerSymbol, Map,
      dom, parser, ready, on, ContentPane, BorderContainer
    ) {


        var map = new Map("map",{
          basemap: "dark-gray-vector", 
          extent: new Extent({xmax: -13035353.854156237, xmin: -13053431.211345658,
            ymax: 4038351.1313028745, ymin: 4034089.766975982,

        //Load a FeatureTable to the application once map loads
        map.on("load", loadTable);

        function loadTable(){
          // editable FeatureLayer
          var myFeatureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/RedlandsEmergencyVehicles/FeatureServer/1", {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            visible: true,
            id: "fLayer2"

          // set a selection symbol for the featurelayer
          var selectionSymbol = new PictureMarkerSymbol("https://sampleserver6.arcgisonline.com/arcgis/rest/services/RedlandsEmergencyVehicles/FeatureServer/1/images/3540cfc7a09a7bd66f9b7b2114d24eee", 48 ,48);

          // listen to featurelayer click event to handle selection 
          // from layer to the table. 
          // when user clicks on a feature on the map, the corresponding 
          // record will be selected in the table.   
          myFeatureLayer.on("click", function(evt) {
            var idProperty = myFeatureLayer.objectIdField,
            if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
              feature = evt.graphic,
              featureId = feature.attributes[idProperty];
              query = new Query();
              query.returnGeometry = false;
              query.objectIds = [featureId];
              query.where = "1=1";
              myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
          // Redlands police vehicle locations layer
          // this layer is an editable layer 

          //create new FeatureTable and set its properties 
          var myFeatureTable = new FeatureTable({
            featureLayer : myFeatureLayer,
            map : map, 
            editable: true,
            syncSelection: true,
            dateOptions: {
              datePattern: 'M/d/y', 
              timeEnabled: true,
              timePattern: 'H:mm',
            // use fieldInfos object to change field's label (column header), 
            // change the editability of the field, and to format how field values are displayed
            // you will not be able to edit callnumber field in this example. 
            fieldInfos: [
                name: 'callnumber', 
                alias: 'Call Number', 
                editable: false //disable editing on this field 
                name: 'speed', 
                alias: 'Current Speed', 
                format: {
                  template: "${value} mph" //add mph at the of the value
                name: 'type', 
                alias: 'Vehicle Type'
                name: 'unitname', 
                alias: 'Unit Name'
            // add custom menu functions to the 'Options' drop-down Menu 
             menuFunctions: [
              label: "Filter Available Emergency Vehicles", 
              callback: function(evt){
                console.log(" -- evt: ", evt);
                // set definition expression on the layer
                // show only available emergency vehicles 
                myFeatureLayer.setDefinitionExpression("status = 0");

                // call FeatureTable.refresh() method to re-fetch features
                // from the layer. Table will only show records that meet 
                // layer's definition expression creteria.  
              label: "Show All Emergency Vehicles", 
              callback: function(evt){
                console.log(" -- evt: ", evt);
          }, 'myTableNode');


          // listen to refresh event 
          myFeatureTable.on("refresh", function(evt){
            console.log("refresh event - ", evt);
<body class="claro esri">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
      <div id="map"></div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%;">
      <div id="myTableNode"></div>
Show Modal