Embed widget in popup

[ZorbaConlen1]

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

[KellyHutchins]

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 · Accepted solution]

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