Using field alias for query widget in html maps

Rice_GIS — Mon, 29 Aug 2022 19:16:12 GMT

Hello,

I am new to developing html and am working on a project for my organization. For this project I'm referencing this code sample, I'm just using my own service url and related table: https://developers.arcgis.com/javascript/latest/sample-code/query-related-features/

For the life of me, I can't figure out how to show the field alias in my column headings for the query results. In the script below, I have the fields next to my outFields call as "SpeciesGroup", "CommonName", and "ProtectionLevels" (LINE 48). But I want these field names displayed on the web page with a space between them. The tables that these are referencing have the desired field alias, but it's showing the actual field name. I'm not sure what or where the code should be to get the desired field name. Any help would be greatly appreciated. Thank you in advance!

// Add widgets to the view view.ui.add(document.getElementById("gridDiv"), "bottom-left"); view.ui.add(legendExpand, "top-right"); // Initialize variables let highlight, grid; // call clearMap method when clear is clicked const clearbutton = document.getElementById("clearButton"); clearbutton.addEventListener("click", clearMap); layer.load().then(function () { return (g = new Grid()); }); view.on("click", function (event) { clearMap(); queryFeatures(event); }); function queryFeatures(screenPoint) { const point = view.toMap(screenPoint); // Query the for the feature ids where the user clicked layer .queryObjectIds({ geometry: point, spatialRelationship: "intersects", returnGeometry: false, outFields: ["*"] }) .then(function (objectIds) { if (!objectIds.length) { return; } // Highlight the area returned from the first query view.whenLayerView(layer).then(function (layerView) { if (highlight) { highlight.remove(); } highlight = layerView.highlight(objectIds); }); // Query the for the related features for the features ids found return layer.queryRelatedFeatures({ outFields: ["SpeciesGroup", "CommonName", "ProtectionLevels"], relationshipId: layer.relationships[0].id, objectIds: objectIds }); }) .then(function (relatedFeatureSetByObjectId) { if (!relatedFeatureSetByObjectId) { return; } // Create a grid with the data Object.keys(relatedFeatureSetByObjectId).forEach(function ( objectId ) { // get the attributes of the FeatureSet const relatedFeatureSet = relatedFeatureSetByObjectId[objectId]; const rows = relatedFeatureSet.features.map(function (feature) { return feature.attributes; }); if (!rows.length) { return; } // create a new div for the grid of related features // append to queryResults div inside of the gridDiv const gridDiv = document.createElement("div"); const results = document.getElementById("queryResults"); results.appendChild(gridDiv); // destroy current grid if exists if (grid) { grid.destroy(); } // create new grid to hold the results of the query grid = new Grid( { columns: Object.keys(rows[0]).map(function (fieldName) { return { label: fieldName, field: fieldName, sortable: true }; }) }, gridDiv ); // add the data to the grid grid.renderArray(rows); }); clearbutton.style.display = "inline"; }) .catch(function (error) { console.error(error); }); } function clearMap() { if (highlight) { highlight.remove(); } if (grid) { grid.destroy(); } clearbutton.style.display = "none"; } });

topic Using field alias for query widget in html maps in Developers Questions

Using field alias for query widget in html maps