Call function from Infowindow actionpane

[ElizabethMiller]

I have been working with this sample (Call function from Popup window ) and I can't get it to work. I am working with a dojo widget for CMV. I have an infowindow that scrolls through a set of returns and it is working fine. I am trying to set up a link to a function that will highlight each feature shown in the infowindow when the user clicks (i.e. a link to a function that would be an href from the html -- this example Multiple Query Results | ArcGIS API for JavaScript 3.30 would do what I want, but I can't call the function from within the html.)

So now I'm just trying to add the link to the actionpane of the infowindow and it is not showing up. I haven't even gotten to testing the function as I can't even get the visual link to show up. I can't see what is different from the example I refer to in the first sentence above. The only change I made was changing the reference to "window.map.infoWindow.domNode)[0])" to "this.map.infoWindow.domNode)[0])":

var link = domConstruct.create("a", {
"class": "action mylink",
"id": "statsLink",
"innerHTML": "Action Link Test", //text that appears in the popup for the link
"href": "javascript: void(0);"
}, query(".actionList", this.map.infoWindow.domNode)[0]);

on(link, "click", this.myfunction());

I can get the link to show up if I use this sample from the Popup Documentation, but this format won't allow me to call my function.

var customActions;

map.infoWindow.on("selection-change", function() {
  var selectedFeature = map.infoWindow.getSelectedFeature();
  
  if (selectedFeature && selectedFeature.attributes.TYPE === "crime") {
    var crimeAction = {
      title: "Crime Report",
      className: "crime-report-action",
      callback: function() {
        console.log("Get Full Crime Report");
      }
    };
    customActions = map.infoWindow.addActions([ crimeAction ]);
  }
  else {
    map.infoWindow.removeActions(customActions);
  }
});

Any help would be greatly appreciated! Thanks!

[RobertScheitlin__GISP]

Elizabeth,

   So you need to be sure that this.map in your code context is actually returning a esri map object.

[ElizabethMiller]

Hi Robert,

Yes it is…hovering over this.map.infoWindow.domNode in the devtools window shows it as “div.esriPopup.esriPopupVisible”.

The “Zoom To” is showing up fine in the actions pane at the bottom of the infowindow as you can see in the attached screen shot of the elements.

 

[RobertScheitlin__GISP]

Do you have any errors in the browsers web console?

Do you have the require for domConstruct and query in your code?

[ElizabethMiller]

No errors. I have dojo/query and dojo/dom-construct (query and domConstruct) in my define/declare code.

Do I need to set up something in my css? I am not sure what .actionList and statsLink are referring to. I did try to experiment with the css but it didn't help. I created these entries:

.esriPopup .actionsPane{
display: show;
}

.esriPopup .actionsPane .zoomTo{
display: show;
}

.esriPopup .actionsPane .action .mylink{
display: show;

[RobertScheitlin__GISP]

Elizabeth,

display: show; is not a valid value for display.

CSS display property 

[ElizabethMiller]

Thank you -- I corrected that to "inline" but that did not solve the problem.

The Zoom to displays in any case, without adding special css. But still no other action displays.

Like I said above, I can get the action to display if I use something like this example:

customActions = this.map.infoWindow.addActions([ crimeAction ]);

[RobertScheitlin__GISP]

Elizabeth,

  So I suspect that the main issue is that this portion of the code is coming back as null

query(".actionList", this.map.infoWindow.domNode)[0]

Can you test if you get something other than null for this?

[ElizabethMiller · Accepted solution]

I figured out the actionpane issue. I needed this format:

var link = dojo.create("a", {
 "id": "mylink",
 "class": "action", 
 "innerHTML": Action Link", //text that appears in the popup for the link 
 "href": "javascript: void(0);"
 }, dojo.query(".actionList", this.map.infoWindow.domNode)[0])

I'm still not sure if this will get me to the end result I want, but at least this link is now working. I would really like to build the link into the html as in the Multiple Query Results sample I cited above, but I have been unable to find examples of that in a dojo widget. Thank you so much for helping me think through this issue!

[RobertScheitlin__GISP]

Elizabeth,

   That tells me that you had an issue with your requires for domConstruct and query then. The use of dojo.query and dojo.create is reverting to old way (i.e. prior to dojo 1.7).