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

• TomazicM: If I try to run your working app, I get this error in the console: [esri.views.MapView] #container element with id 'viewDiv' not found
• Pfalbaum: Interesting, I don't see any error. Even on two different machines. Is the error prohibiting you from viewing the app?
• TomazicM: Yes, I see just the basic frame and message "Updating ...".
• TomazicM: App works now and it seems you made it work as you want.
• Pfalbaum: Good news. However, it's not yet working the way I want. What I expect: After clicking the Search by Category drop-down item the Description shows up in the sidebar. Right now the Description shows up when you click the feature in the view.

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:

enter image description here

• Pfalbaum: This does nicely to display the category in the sidebar. Apologies if my question wasn't so clear, but I'm trying to display the {Description} field (i.e. the text from the field) when you click a Category--as it does when you click a point in the map.
• TomazicM: Description from the first found item? Not all of them have the same description despite belonging to the same category.
• Pfalbaum: "Not all of them have the same description..." --Good point. The dataset is a bit convoluted. I just have to live with that. So, yes (I think), to answer your question whatever description is found first for that category will have to work. Thank you.
• TomazicM: See modified answer.