Put text element from popup template into feature widget?

Question

I've been primarily looking at this sample for guidance: Feature widget in a side panel | ArcGIS API for JavaScript 4.16 I'd like to add the {Description} field from this feature layer as the new graphic in the feature widget. But, instead of putting it in the side panel as the sample shows, I have it in the "sidebar" div. How do I put the {Description} field into the "sidebar", and keep the following fields from my popup template in the popup? //popup template var template = { //autocasts the new template title: "{USER_Name}", content: [ { // You can also set a descriptive text element type: "text", // TextContentElement text: "{Description}" }, { //set content elements in the order to display type: "fields", fieldInfos: [ { fieldName: "USER_Addre", label: "Address", visible: true }, { fieldName: "USER_City", label: "City", visible: true }, { fieldName: "USER_Zip", label: "Zip Code", visible: true }, { fieldName: "USER_Phone", label: " Phone", visible: true }, { fieldName: "USER_Link", label: "Website", visible: true }, { fieldName: "USER_Notes", label: "Extra Notes", visible: true } ] } ] };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ This is as far as I got in the sample sandbox: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title> Feature widget in a side panel | Sample | ArcGIS API for JavaScript 4.16 </title> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.16/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; } #viewDiv { padding: 0; margin: 0; height: 100%; width: 60%; } #sidebar { z-index: 99; position: absolute; top: 0; right: 0; height: 100%; background: rgba(0, 0, 0, 0.5); width: 380px; } </style> <script> require([ "esri/WebMap", "esri/layers/FeatureLayer", "esri/views/MapView", "esri/widgets/Feature" ], function (WebMap, FeatureLayer, MapView, Feature) { const fLayer = new FeatureLayer({ portalItem: { id: "b5665da3feab4b6091914cbfe4ab028f" }, layerId: 0, outFields: ["*"] }); const map = new WebMap({ basemap: "dark-gray", layers: [fLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [-88.7, 41.8], zoom: 8.7, popup: { autoOpenEnabled: true } }); view.when().then(function () { // Create a default graphic for when the application starts const graphic = { popupTemplate: { content: "To change search from Item to Category, make sure Search by Item dropdown is set to 'Select One'. Businesses should note that they will find more appropriate listings if they check Business under the search box." } }; // Provide graphic to a new instance of a Feature widget const feature = new Feature({ container: "sidebar", graphic: graphic, map: view.map, spatialReference: view.spatialReference }); view.whenLayerView(fLayer).then(function (layerView) { let highlight; // listen for the pointer-move event on the View view.on("click", function (event) { // Perform a hitTest on the View view.hitTest(event).then(function (event) { // Make sure graphic has a popupTemplate let results = event.results.filter(function (result) { return result.graphic.layer.popupTemplate; }); let result = results[0]; highlight && highlight.remove(); // Update the graphic of the Feature widget // on pointer-move with the result if (result) { feature.graphic = result.graphic; highlight = layerView.highlight(result.graphic); } else { feature.graphic = graphic; } }); }); }); }); }); </script> </head> <body> <div id="sidebar" class="esri-widget"></div> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JaredPilbeam2 · Accepted Answer

The solution I went with was: //1.) use template for flayer, const fLayer = new FeatureLayer({ portalItem: { id: "b5665da3feab4b6091914cbfe4ab028f" }, popupTemplate: template, // <- template for popup layerId: 0, outFields: ["*"] }); //2.) Once the feature is selected and you obtain it, set it template2, if (result) { feature.graphic = result.graphic.clone(); // <- clone it to avoid mutation feature.graphic.popupTemplate = template2; // <- template2 for feature widget highlight = layerView.highlight(result.graphic); } else { feature.graphic = graphic; } ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍