InfoWindow not showing ActionPane

[ChrisSheets]

When fire a map infowindow after setting title and content the infowwindow is shown as expected but the actionpane area is hidden and if I use CSS to unhide it the "Zoom to" does not work.  Is there a way to initialize the infowindow window so that everything is wired up and functional.

If I trigger it "automatically" by clicking on a symbol the infowindow seems to get initialized appropriately and then from then on when I display is manually it is all OK including the showing of the actionPane and also clicking on the Zoom to link. Makes sense since the infowindow is just shown and hidden.

Any help with how to get it all wired up so that it works with both default marker clicking functionality but also triggering manually it would be much appreciated. Hoping I am just missing an easy way to "initialize" the infowindow...

[KellyHutchins]

Is this for features in a feature layer? If so if you specify the info template when you create the feature layer it should 'just work' and the action pane should display.

If you are trying to display something like the results of a query in a popup you can use the setFeatures method to associate the feature with the popup.

Here's an example that shows setFeatures in action: History API to track selected feature | ArcGIS API for JavaScript

[ChrisSheets]

this is for markers in map.graphics layer -- there are a set of markers that get created after the map is loaded based on given GPS coordinaste -- these graphics/markers get created with the following basic code:

var myPoint = {

                                "geometry": {

                                    "x": long,

                                    "y": lat ,

                                    "spatialReference": { "wkid": 4326 }

                                },

                                "attributes": {

                                    "Longitude": long,

                                    "Latitude": lat,

                                    "Plate": licensePlateNo,

                                    "FixDateTimeLocal": localFixDate,

                                    "FixDateTimeUTC": utcFixDateTime,

                                    "VehicleObjectId": vehicle.id

                                },

                                "symbol": {

                                    "type": "esriPMS",

                                    "url": "/Content/images/cvt/map_truck_marker_md.png",

                                    "contentType": "image/png",

                                    "width": 25,

                                    "height": 21,

                                    "angle": 0,

                                    "xoffset": 0,

                                    "yoffset": 0

                                },

                                "infoTemplate": {

                                    "title": "Vehicle Info",

                                    "content": "Vehicle: ${Plate}<br/>Latitude: ${Latitude}<br/>Longitude: ${Longitude}<br/>Last Update: ${FixDateTimeLocal}<br/>(UTC: ${FixDateTimeUTC})<br/><button onClick=\"document.getElementById('geoAddress').innerHTML = '{not implemented}';\">Address</button> <span id=\"geoAddress\"></span>"

                                }

                            };

                            var g = new esri.Graphic(myPoint);

                            map.graphics.add(g);

Afterwards, clicking on each marker on the map pops up the infowindow as expected -- that works

What doesn't work is if I manually popup the infoWindow from another link (not the graphic) - this code changes the symbol image, centers the map and pops up the infoWindow based on gps coordinates which are attributes with the marker as created above in the JSON definition for the point. code below:

This works also except for when the "external/non-graphic link is clicked first before clicking on the actual graphic -- the thing that does not work in this case is that the actionPane part of the info window is not displayed nor does it seem to be "connected" either since I can make adjustments to the css at runtime, get the actionPane to show but when I click on the "Zoom to" link nothing happens.

var gps = vehicle.gpsLocations[0];

                                var point = new Point(gps.longitudeDeg, gps.latitudeDeg);

                                var hiliteSymbol = new esri.symbol.PictureMarkerSymbol("/Content/images/cvt/map_truck_marker_md_hilite.png", 30, 25);

                                graphic.setSymbol(hiliteSymbol);

                                map.infoWindow.setContent(graphic.getContent());

                                map.infoWindow.setTitle(graphic.getTitle());

                                var scrnPt = map.toScreen(point);

                                map.infoWindow.show(scrnPt, map.getInfoWindowAnchor(scrnPt));

                                // ZOOM TO

                                var graphicExtent = graphic._extent.getExtent();

                                map.setExtent(graphicExtent);

[KellyHutchins · Accepted solution]

Chris,

In this case you'll want to use setFeatures to associate the graphic with the popup. Here's a code sample that shows this:

Create a Map

The relevant code is in the button click handler

 on(dom.byId("showPopup"), "click", function(){
            var graphic = map.graphics.graphics[map.graphics.graphics.length -1];
      
            var screenPoint = map.toScreen(graphic.geometry);
            map.infoWindow.setFeatures([graphic]);
            map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
          });

[ChrisSheets]

thanks Kelly -- works -- was missing the setFeatures() call - didn't realize that was necessary. It also took care of another positioning bug that was happening before in certain situations.