topic Re: Embed widget in popup in ArcGIS JavaScript Maps SDK Questions

Embed widget in popup

ZorbaConlen1 — Sat, 11 Dec 2021 14:28:00 GMT

Hi. Working with 4.10 api, I'd like to have a widget render in a popup. The popup would be an accordion like interactive interface. I have modified the popup style so it is large enough to contain the widget, but not sure the best way to create the widget inside the popup. Typically, you would add the widget to an app like below, but that div does not exist in the interface. Rather it would need to be created dynamically when the popup content is created.

var widget = new myWidget({
  container: "myWidgetDiv"
});‍‍‍

I know the popup content can be generated via a function. Seems that would be the way to handle this but having trouble wrapping my head around how exactly to go about it.

Any suggestions would be appreciated.

Thanks

Re: Embed widget in popup

KellyHutchins — Sat, 11 Dec 2021 14:28:03 GMT

Zorba,

Here's a really contrived example showing how you can add custom content - in this case a button and some text to a popup.

      var template = { 
        title: "Marriage in NY, Zip Code: {ZIP}",
        content: function (info) {
          var container = document.createElement("div");
          var button = document.createElement("button");
          button.innerHTML = "Click Me";
          button.addEventListener("click", function () {
            console.log("Clicked button for " + info.graphic.attributes.STATE);
          });
          var details = document.createElement("div");
          details.innerHTML = info.graphic.attributes.PO_NAME;
          container.appendChild(details);
          container.appendChild(button);
          return container;
        }
      };
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Embed widget in popup

ZorbaConlen1 — Thu, 31 Jan 2019 17:04:08 GMT

That's good example to get me started. Thanks.