add button to Info Window Pop-up

5689
15
Jump to solution
05-02-2016 03:08 PM
DaveOrlando
Occasional Contributor III

very similar question to this

Is there a widget or set a serivce on Arc Server to download selected feature from WAB pop-up window...

I have created a Property Report widget (it is just a watered down Print widget using the Export Web Map) but now I'm looking for a simple way to present this to the user. If I could find where the 'Zoom To' comes from I'm sure I can add my own Property Report button in the same fashion.

It would be ideal to place this in the pop-up. In doing so I assume I will have access to the feature's attributes to pass them to my Print code for the customTextElements.

Thanks for any possible help...

Tags (3)
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Dave,

  It seems a little easier in 2.0 but either way it involves a little work. In 1.3 you

  1. Copy the PopupHandler.js file from the AttributeTable widgets folder over into your widgets folder.
  2. Rename and modify the this.showRelatedTableBtn to suit your needs (i.e. title)
  3. Rename and change the _onRealtionshipClick function to do your work
  4. Add the popupHandler code and require to your custom widget:

// create PopupHandler
        this.popupHandler = new PopupHandler({
          map: this.map,
          myWidget: this,
          nls: this.nls
        });

View solution in original post

15 Replies
RobertScheitlin__GISP
MVP Emeritus

Dave,

  Are you talking WAB 1.3 or WAB 2.0 as the methods for addign buttons to the popup have completely changed in 2.0?

0 Kudos
DaveOrlando
Occasional Contributor III

Lovely, I will need to learn both or else I'll be stuck in 1.3 until I do.

Let's start with 1.3 for now.

Is the 2.0 technique significantly easier, or just different?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Dave,

  It seems a little easier in 2.0 but either way it involves a little work. In 1.3 you

  1. Copy the PopupHandler.js file from the AttributeTable widgets folder over into your widgets folder.
  2. Rename and modify the this.showRelatedTableBtn to suit your needs (i.e. title)
  3. Rename and change the _onRealtionshipClick function to do your work
  4. Add the popupHandler code and require to your custom widget:

// create PopupHandler
        this.popupHandler = new PopupHandler({
          map: this.map,
          myWidget: this,
          nls: this.nls
        });
DaveOrlando
Occasional Contributor III

This is great, I'm 95% there, but the button will only appear if the widget has been previously opened (understandable).

I've read some of your other answers regarding loading a widget at start-up but keeping it invisible. I also started with an in-Panel widget (Print) but I don't need the UI anymore. where can I initiate the widget to allow the popupHandler to initialize?

I've tried this but to no success.

"widgetOnScreen": {

  "widgets": [{

            "uri": "widgets/PrintDemo/Widget",

            "position": {

                "relativeTo": "map"

            },

            "version": "1.4",

            "id": "widget_PrintDemo",

            "name": "PrintDemo",

            "label": "Print Demo",

"config": "configs/PrintDemo/config_PrintDemo.json",

"visible": true

        }, {

any other suggestions?....

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Dave,

  If you do not need a UI anymore then delete you Widget.html and edit your manifest.json to be

inPanel: false

hasUIFile: false

hasStyle: false

0 Kudos
DaveOrlando
Occasional Contributor III

Thanks I got it working!

it should be mentioned that the above attributes need to go into a 'properties' element

{........

"properties":{

"inPanel": false,

"hasUIFile": false,

"hasStyle": false,

"openAtStart": true

  }

}

Thanks again, your help and contributions to the forum are invaluable and very appreciated!

Dave

0 Kudos
fahadrasheed
New Contributor III

Hi Robert,

Can you explain me a bit how can one achieve this in version 2.16 of WAB Developer Edition. It'll be of great help. I also want to add a custom button or hyperlink text in Popup window of my app. Take a look at attachment for better understanding. 

Thank You,

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@fahadrasheed ,

The steps are still the same as outlined in this thread above.

0 Kudos
fahadrasheed
New Contributor III

@RobertScheitlin__GISP  ,

I tried following the procedure mentioned above but couldn't found the  'PopupHandler.js' file in Attribute table widget. Also you mentioned that this procedure is for version 1.3 but i'm using version 2.16. I have added a screen shot of attribute table widget file. 

Thankyou,

file.PNG

0 Kudos