topic Put text element from popup template into feature widget? in ArcGIS JavaScript Maps SDK Questions

Put text element from popup template into feature widget?

JaredPilbeam2 — Sun, 12 Dec 2021 00:05:04 GMT

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Put text element from popup template into feature widget?

JaredPilbeam2 — Sun, 12 Dec 2021 00:05:07 GMT

UPDATE:

I was able to include my popup template in the sample. But, how do I get the Description text element (green text) to appear in the "sidebar" only? In other words, I want the table in the popup and the Description in the "sidebar".

<!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 {
        float: left;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

#sidebar {
    z-index: 99;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    width: 380px;
}

.esri-widget {
    color: white;
    font-size: 14px;
    font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.3em;
}
    </style>

    <script>
      require([
        "esri/WebMap",
        "esri/layers/FeatureLayer",
        "esri/views/MapView",
        "esri/widgets/Feature"
      ], function (WebMap, FeatureLayer, MapView, Feature) {
        
        //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
          }
        ]
      }
    ]
  };
        
        const fLayer = new FeatureLayer({
          portalItem: {
            id: "b5665da3feab4b6091914cbfe4ab028f"
          },
          popupTemplate: template,
          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 a 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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Put text element from popup template into feature widget?

JaredPilbeam2 — Sun, 12 Dec 2021 00:05:10 GMT

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;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍