AnsweredAssumed Answered

Put text element from popup template into feature widget?

Question asked by jpilbeam Champion on Oct 1, 2020
Latest reply on Oct 7, 2020 by jpilbeam

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: "<font size='2.75px'><b>{USER_Name}</b>",
    content: [
      {
        // You can also set a descriptive text element
        type: "text", // TextContentElement
        text: "<font color='#1c9c52'><b>{Description}</b>"
      },
      {
        //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>

Outcomes