topic Custom Popup container or how do I put content elsewhere? in ArcGIS JavaScript Maps SDK Questions

Custom Popup container or how do I put content elsewhere?

LizEidsness — Sun, 12 Dec 2021 03:45:57 GMT

I'm working with JSAPI 4.7

I really like Popup Templates for what they do out of the box - attribute substitution/functions/promises/actions. However, I would really like to place my popup contents somewhere else on my page (not on map). Like I do with LayerList and Legend widgets. However, when I set the container property for my popups, instead of putting my contents in it, it removes that element from it's parent node, and still floats it over the map. Not what I was expecting.

var view = new MapView({
 container: "viewDiv", // Reference to the DOM node that will contain the view
 map: map, // References the map object created in step 3
 center: [-90,50],
 zoom: 5,
 popup: "queryResults"
});‍‍‍‍‍‍‍

And later in my view.on click event

view.popup.open({
 title: "Results",
 content: "This is some content"
});‍‍‍‍

So my question is - am I doing this wrong? I am assuming this behaviour is as designed, and I'm asking too much. However, I'd like to be pleasantly surprised.

Alternatively, is there a way to obtain the rendered content without the popup popping up, so I can insert it in the DOM myself? I'm hoping to use the popup templates for identify query task results.

Thanks

Re: Custom Popup container or how do I put content elsewhere?

KellyHutchins — Thu, 24 May 2018 17:02:30 GMT

Liz,

One option might be to use the Feature widget to display the popup content. You'd need to build in support for multiple features and displaying the title but it does allow you to display the popup content in another container. Here's a sample app:

JS Bin - Collaborative JavaScript Debugging

Re: Custom Popup container or how do I put content elsewhere?

LizEidsness — Thu, 24 May 2018 18:15:50 GMT

This widget presents the same problem I am having. If I put the DIV target outside of the view (say add a block beneath the map), it's taken by the widget (removed from the DOM) and placed in the view. I think I am missing a step somewhere else. I was given some esri support using Popup and it works. But I don't know why. Yet.

Re: Custom Popup container or how do I put content elsewhere?

KellyHutchins — Thu, 24 May 2018 18:23:42 GMT

I don't see the issue with the div being placed in the view. Did you disable the popup for the layer so the default behavior doesn't occur? Here's a test case:

JS Bin - Collaborative JavaScript Debugging

Re: Custom Popup container or how do I put content elsewhere?

LizEidsness — Thu, 24 May 2018 18:33:23 GMT

Your second case works for me. The problem I was originally having, and also with your first example, is the popup/feature was attached to the view. I wasn't realizing it could be "opened" on it's own merits. I think when it's attached to the view, the view takes it over and moves it. The ESRI support example I have used a popup, but also on it's own, so that's why it worked. I like your Feature example though because it has less Popup-y formatting.

Oh and thanks!!