How to add custom link or button in info window and get the event in arcgis web appbuilder?

5765
15
Jump to solution
07-31-2016 09:53 PM
ShaikhRizuan
New Contributor III


Hi,

I want to add a link or button in info window like "ZoomIn" after Search done from search widget and get the button event in the widget.js of search widget in ArcGIS web AppBuilder.

Also i have attached the screenshot for better understanding of the requirement (highlighted in red color).

Any suggestions or code??

Regards,

Shaikh Rizuan

0 Kudos
1 Solution

Accepted Solutions
GirishYadav
Occasional Contributor

Shaikh,

Following are the functions to add/remove custom link/button into the info window. Include these functions into the search widget's widget.js. and define onClick handler (_onCustomAction).

_addAction: function(){
    var link = domConstruct.create("a",{
                "class": " action my-action", //give it a unique class
                "id": "customAction",
                "innerHTML": "My Action", //text that appears in the popup for the link 
                "href": "javascript: void(0);"
              }, query(".actionList", this.map.infoWindow.domNode)[0]);


     //when the link is clicked register a function that will run 
     on(link, "click", this._onCustomAction);
}

_removeAction: function() {
     //to remove either store "link" var into a global or get it by class using dojo/query
     query(".my-action", this.map.infoWindow.domNode).forEach(function(elem){
          elem.destroy();
     })
}

Call this _addAction method in "_onSearchResults" method inside Search widgets's widget.js.

Hopefully this should do what you want.

Thanks,

Girish

View solution in original post

15 Replies
GirishYadav
Occasional Contributor

Shaikh,

Following are the functions to add/remove custom link/button into the info window. Include these functions into the search widget's widget.js. and define onClick handler (_onCustomAction).

_addAction: function(){
    var link = domConstruct.create("a",{
                "class": " action my-action", //give it a unique class
                "id": "customAction",
                "innerHTML": "My Action", //text that appears in the popup for the link 
                "href": "javascript: void(0);"
              }, query(".actionList", this.map.infoWindow.domNode)[0]);


     //when the link is clicked register a function that will run 
     on(link, "click", this._onCustomAction);
}

_removeAction: function() {
     //to remove either store "link" var into a global or get it by class using dojo/query
     query(".my-action", this.map.infoWindow.domNode).forEach(function(elem){
          elem.destroy();
     })
}

Call this _addAction method in "_onSearchResults" method inside Search widgets's widget.js.

Hopefully this should do what you want.

Thanks,

Girish

ShaikhRizuan
New Contributor III

Thanks Girish... Its working now!!

0 Kudos
AdamCommeford
New Contributor III

Hi Girish,

Could you explain where and how to "Call the  _addAction method" ?

Thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Adam,

Call this _addAction method in "_onSearchResults" method inside Search widgets's widget.js.
AdamCommeford
New Contributor III

Hi Robert, 

is it possible to call the editor from this button that will used the selected geometry that was returned as a search result?

I would like the user to use the search widget to find the required address, and then add this address and its attributes to a FS.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Adam,

   Custom actions know which feature is selected to show the popup, so yes.

0 Kudos
AdamCommeford
New Contributor III

Thanks for your help Robert. I am still trying to get this to work, have not been able to successfully call the method, are there any examples I maybe able to reference? Any examples of using this process to call the attribute editor? 

Thank you in advance 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

No that I am aware of.

0 Kudos
esriuser2
New Contributor II

I got this example worked. But I want the link/button to be visible for only one feature  layer map infowindow and not to be visible for any of the other feature layers map info windows.

How to accomplish this?

Thank you!

0 Kudos