Custom Popup container or how do I put content elsewhere?

3313
4
Jump to solution
05-23-2018 09:39 AM
LizEidsness
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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 

View solution in original post

4 Replies
KellyHutchins
Esri Frequent Contributor

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 

0 Kudos
LizEidsness
New Contributor III

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.

0 Kudos
KellyHutchins
Esri Frequent Contributor

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 

LizEidsness
New Contributor III

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!!

0 Kudos