nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

ShaikhRizuan

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

SearchReq.png

LeslieFountain_0-1626192501519.png

Encontre mais publicações marcadas com

Accepted answers

GirishYadav

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

All comments

GirishYadav

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

Thanks Girish... Its working now!!

Anonymous User

slick, I'll have to come to this. For now, to do links to our Tax Cards which have a unique number (primary key) in the URL I put that in as a link http://thelink/{PropertyNumber} for a Picture in the bottom of the popup. I did a screenshot of the word "Tax Card" with a button as a background, put it in, works like a charm.

RichBell

Nice!

Help Please????

I'm not as savoy as to how to do this. Could someone show the completed addition of the example code in the Search widget.js and if there are any other files that need to be edited? I would really like to do this too!.....

Rich

Anonymous User

I put the links in the popup in the Configure Popup in ArcGIS Online.

Just create a picture, put it in a specific spot in WAB and put this path in for the URL to the Picture. Maybe a picture of the word "Site Plan" or something. (instead of Tax Card in our case)

Then, put in a description (optional) and for the link, the first part of it like http://yoursite.com/files/{PDFfilepath}

The {PDFfilepath} in brackets would be a filename, for files in a folder full of PDF files, for example, on your server. This would be assuming you had a field in your layer like 'filepath' that contained the filename. ThePDFfilepath therefore takes the value of whatever the layer has in that field for that record. Savvy matey? Just let me know if this helps shed more light on it for you.

RichBell

Thanks, but not quite what I was looking for.

More specifically is where and how do I insert this snippet of code from the last post into the search Widget.js?

A screen shot of a working widget with this code inserted would be great.

Rich

AdamCommeford

Hi Girish,

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

Thanks

RobertScheitlin__GISP

Adam,

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

AdamCommeford

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.

RobertScheitlin__GISP

Adam,

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

MarkJTurnbull

Answer looks like a good solution, but if I wanted these actions to appear in the default map callout (not the search widget callout), where would I add this code? Is this code relevant for the default map callout?

RobertScheitlin__GISP

Mark,

https://developers.arcgis.com/web-appbuilder/sample-code/create-a-feature-action-in-your-widget.htm

To have an action appear in the map default popup you can add the feature action to the jimu.js\featureActions folder and add a reference to your featureAction to the main.js

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.