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

Add Custom Item to FeatureTable Menu and Keep Original Functionality

ShannonDeArmond

I have a web app built with the arcgis js 4 api that uses the featuretable widget. I would like to enable some of the stock menu items on the feature table such as zoom to selected features. This works fine until I try to add additional custom items to the menu. Then the options related to selected features in the table (zoom to selection, show selection, clear selection, etc.) are no longer available. Does anyone know how to add a custom menu item and keep this functionality?

            // Create the feature table
            const featureTable = new FeatureTable({
                view: view, 
                layer: featureLayer,
                visibleElements: {
                    menu: true,
                    // Autocast to VisibleElements
                    menuItems: {
                        clearSelection: true,
                        refreshData: true,
                        toggleColumns: true,
                        selectedRecordsShowAllToggle: true,
                        selectedRecordsShowSelectedToggle: true,
                        zoomToSelection: true
                    }
                },
                container: "tableDiv"
            });

            //Adds custom menu options to featuretable
            featureTable.when().then(() => {
                const buttonMenuItem1 = new ButtonMenuItem ({
                    label: "Download Table",
                    clickFunction: function (event) {
                        setupCSV();
                    }
                });
                const buttonMenu = new ButtonMenu ({
                    iconClass: "esri-icon-handle-horizontal",
                    items: []
                });
                featureTable.menu.items.forEach(element => {
                    console.log(element.label);
                    buttonMenu.items.push(element);
                });
                buttonMenu.items.push(buttonMenuItem1);
                featureTable.menuConfig = buttonMenu;
            });

Original Menu.png

With Custom Menu Items.png

Find more posts tagged with

Accepted answers

Justin_Greco

I was able to reproduce using your code: https://codepen.io/justingreco/pen/eYXvMyX

But it works if you add the button when you initialize the FeatureTable widget:

https://codepen.io/justingreco/pen/yLwMKjG

All comments

cadgism

Works perfect. how can I show my custom menu item on the top of the list , please

ShannonDeArmond

That worked and makes much more sense. Thanks very much @Justin_Greco and @JeffreyThompson2 . I appreciate the help.

Justin_Greco

I know why the selection options are not appearing in the menu in the original code. Since there is no feature selected, those options are not in the menu when the widgets loads, so the featureTable.menu.items only contains the Refresh Data and Show/Hide Columns options. As a test, I set the highlightIds value on the FeatureTable, so there is a selected record when the table loads. Doing that made the selection options appear in the menu. So its best to add your custom button item when the widget is initialized, since the SDK handles the display of the built in items.

Jeff.Thompson@arlingtontx.gov_arlingtontx

@ShannonDeArmond Did you try @Justin_Greco 's code? I think it should work. There is a fundamental difference between your original code and Justin's. He is creating the table and adding the new item in a single step. Your code creates the table first and then replaces the menu with a new menu that only contains the download button.

Justin_Greco

I was able to reproduce using your code: https://codepen.io/justingreco/pen/eYXvMyX

But it works if you add the button when you initialize the FeatureTable widget:

https://codepen.io/justingreco/pen/yLwMKjG

ShannonDeArmond

Unfortunately not, Justin_Greco, but thanks for trying. There are items selected in both screen shots. The addition of the new menu item seems to remove the zoom-to-selected functionality.

Justin_Greco

You can add the button to the menuConfig.items property when initializing the FeatureTable widget.

UPDATE: I read your problem wrong, this does the same thing as your code, but is a simpler way.

I think the issue is that you must have a row selected in the first screenshot and not selected in the second screenshot. The menu items that apply to selections only appear if you have a row selected.

// Create the feature table
const featureTable = new FeatureTable({
  view: view,
  layer: featureLayer,
  visibleElements: {
    menu: true,
    // Autocast to VisibleElements
    menuItems: {
      clearSelection: true,
      refreshData: true,
      toggleColumns: true,
      selectedRecordsShowAllToggle: true,
      selectedRecordsShowSelectedToggle: true,
      zoomToSelection: true
    }
  },
  container: "tableDiv",
  menuConfig: {
    items: [
      new ButtonMenuItem({
        label: "Download Table",
        clickFunction: function (event) {
          setupCSV();
        }
      })
    ]
  }
});

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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