topic Re: Call function from Infowindow actionpane in ArcGIS JavaScript Maps SDK Questions

Call function from Infowindow actionpane

ElizabethMiller — Sat, 11 Dec 2021 07:53:34 GMT

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!

Re: Call function from Infowindow actionpane

RobertScheitlin__GISP — Wed, 30 Oct 2019 17:35:59 GMT

Elizabeth,

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

Re: Call function from Infowindow actionpane

ElizabethMiller — Wed, 30 Oct 2019 18:43:22 GMT

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.

Re: Call function from Infowindow actionpane

RobertScheitlin__GISP — Wed, 30 Oct 2019 18:56:18 GMT

Do you have any errors in the browsers web console?

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

Re: Call function from Infowindow actionpane

ElizabethMiller — Wed, 30 Oct 2019 19:16:56 GMT

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;

Re: Call function from Infowindow actionpane

RobertScheitlin__GISP — Wed, 30 Oct 2019 19:26:38 GMT

Elizabeth,

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

CSS display property

Re: Call function from Infowindow actionpane

ElizabethMiller — Wed, 30 Oct 2019 20:08:44 GMT

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 ]);

Re: Call function from Infowindow actionpane

RobertScheitlin__GISP — Wed, 30 Oct 2019 21:11:58 GMT

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?

Re: Call function from Infowindow actionpane

ElizabethMiller — Sun, 12 Dec 2021 16:06:03 GMT

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!

Re: Call function from Infowindow actionpane

RobertScheitlin__GISP — Thu, 31 Oct 2019 15:04:38 GMT

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).