Custom widget in popup

[sidd]

Hi Community,

I am transitioning from using the ArcGIS JavaScript API to ArcGIS Experience Builder Developer Edition, and I need some guidance regarding popup customization.

In the ArcGIS JavaScript API, I was able to create custom popups using the PopupTemplate. Specifically, I used the type: "custom" feature in the content section to render a React component within the popup. Here's an example of how I achieved this:

//////////////////////////////////////////////////////////////////////////////////

  export const SiteCustomPopupTemplate = {

  title: "Site Name: {site_name}",

  fieldInfos: site_fields, // Array of fields to display content:

  content: [

    {

        type: "custom",

        creator: (event) => {

        const container = document.createElement("div");

        const selected_site = event.graphic.attributes.site_name;

        const feature_attributes = event.graphic.attributes;

        ReactDOM.render(

          <SiteReactComponent

            selected_site={selected_site}

            featureAttributes={feature_attributes} />,

          container);

        return container;

      },

    },

  ],

};

//////////////////////////////////////////////////////////////////////////////////

 

 

This approach allowed me to embed a fully functional React component (<SiteReactComponent />) within the popup. As I am working with about real time data, the component updates its UI every 60 seconds by querying other related published data from the ArcGIS portal.

Now, I am working in ArcGIS Experience Builder Developer Edition and would like to replicate this functionality. However, I couldn't find a way to include a custom widget or even available widgets within a popup in Experience Builder.

My Question:

Is it possible to add a custom-developed widget in a popup in ArcGIS Experience Builder? If so, how can I achieve this?

Any guidance, code examples, or documentation links would be greatly appreciated!

Thank you for your help!

[TimWestern]

I'm not sure if I understand what you are trying to do.  It looks like you are trying to render different urls within the popup?  (I wonder how that works with how CORS works currently).  

I know popups can be setup on maps, and you can enable or disable their appearance on layers.  The last time I wanted something to pop out, I had to design a component that would use CSS to draw outside of the normal widget frame.  I seem to recall it was quite a pain to get it to do what I desired, knowing how CSS works helped, unfortunately I don't have any other suggestions that might work.

What I do know is its possible to create custom actions that perform certain actions.  I recently used a search selection to move the extent, drop a pin, and then find and load a specific widget from out of a panel.  That's not quite how popups look though, and it sounds like you might be looking for something more specific?

[DNMCSCADA]

Custom content in popup

[TimWestern]

My understanding is the traditional popup is configured in Pro, and published.  I know you can turn off the regular pop off in code, and in theory use selection actions to popup something else (another widget for example that you have laid out as you want)