Display selected category from dropdown menu in sidebar in ArcGIS SDK JavaScript app?

Question

I'd like to display the {Description} field content of a feature layer in the sidebar div of my application. One way I believe it can be done is by using a click event and the selectedIndex property. For instance, when a user clicks an option in the Select by Category drop-down the Description field content should display in the sidebar. And then that selection should be removed when the user selects another option. Each option in the drop-down is from the Category field of the feature layer, by the way.

Here is the working app.

Here is an example attempt to get the drop-down option to display in the sidebar. No error but nothing happens.

// put selection from Category drop-down in sidebar div
    const catSelect = document.getElementById("category", displayDescription); 
    function displayDescription() {
        document.getElementById("sidebar", catSelect).selectedIndex > 0
    };
};

This attempt logs the value. If I can only put it in the sidebar.

// put selection from Category drop-down in sidebar div
const catSelect = document.getElementById("category");
catSelect.addEventListener('click', (displayInSidebar) => {
    console.log(displayInSidebar.target.value); //get selected text
}, false);

Answer 1

I'm not some expert in ArcGIS SDK JS (working mostly with OpenLayers and Leaflet), so the solution might not be optimal, but it works.

In the queryForGeometries() function you have to set feature.graphic.popupTemplate to a template that displays category and description in the sidebar. Relevant part of the code could then look something like this (there are also some other modifications to make app behavior consistent):

const searchWidget = new Search({
    view: view
});
view.ui.add(searchWidget, {
    position: "top-left"
});

const homeBtn = new Home({
    view: view
});

view.ui.add(homeBtn, "top-left");

var graphic = {
    popupTemplate: {
        content: "To search by item make sure Search by Category is set to 'Select one'.<br> <br>Businesses should note that they will find more appropriate listings if they check Business under the search box. Hit Search after changing from Residential to Business or vice versa."
    },
};

var feature = new Feature({
    container: "sidebar",
    graphic: graphic,
    map: view.map,
    spatialReference: view.spatialReference
});

var sidebarDescriptionTemplate = {
    content: [
        {
            type: "text", // TextContentElement
            text: "<b>Category</b>: {Category}<br><br>{Description}"
        },
    ]
};

var selectedCategory = '';
var sidebarCategoryTemplate = {
  content: [
    {
      type: "text",
      text: ''
    },
  ]
};

const catSelect = document.getElementById("category");
catSelect.addEventListener('change', (displayInSidebar) => {
  keyTypeSelect.selectedIndex = 0;
  selectedCategory = displayInSidebar.target.value;
  if (selectedCategory.length == 0) {
    feature.graphic = graphic;
    return;
  }
}, false);

function showCategoryInSidebar(category, description) {
  sidebarCategoryTemplate.content[0].text = '<b>Category</b>: ' + category + '<br><br>' + description;
  feature.graphic.popupTemplate = sidebarCategoryTemplate;
}

function queryForGeometries() {
    console.log("Running query");
    var rQuery = recycleLayer.createQuery();
    var geometries = recycleLayer.queryFeatures(rQuery).then(function (response) {
        rGeometries = response.features.map(function (feature) {
            return feature.geometry;
        });
        if ((response.features.length > 0) && (selectedCategory.length > 0)) {
          var attributes = response.features[0].toJSON().attributes;
          showCategoryInSidebar(attributes.Category, attributes.Description);
        }
        return rGeometries;
    })
    return geometries;
}

view.when().then(function () {
    view.whenLayerView(recycleLayer).then(function (layerView) {
        let highlight;
        view.on("click", function (event) {
            view.hitTest(event).then(function (event) {
                let results = event.results.filter(function (result) {
                    return result.graphic.layer.popupTemplate;
                });
                let result = results[0];
                highlight && highlight.remove();
                if (result) {
                    feature.graphic = result.graphic.clone(); //clone it to avoid mutation
                    feature.graphic.popupTemplate = sidebarDescriptionTemplate;
                    highlight = layerView.highlight(result.graphic);
                } else if (selectedCategory.length > 0) {
                    feature.graphic.popupTemplate = sidebarCategoryTemplate;
                } else {
                    feature.graphic = graphic;
                }
            });
        });
    });
});

Here is complete working JSFiddle: https://jsfiddle.net/TomazicM/q4L679p3/

That's how selected category info looks like then: