Embed widget in popup

253
2
Jump to solution
01-30-2019 08:42 AM
ZorbaConlen1
Occasional Contributor III

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

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
ZorbaConlen1
Occasional Contributor III

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

View solution in original post

0 Kudos
2 Replies
KellyHutchins
Esri Frequent Contributor

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
      });
ZorbaConlen1
Occasional Contributor III

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

0 Kudos