topic Re: Add help button link inside widgets in ArcGIS Web AppBuilder Questions

Add help button link inside widgets

CCWeedcontrol — Fri, 10 Dec 2021 21:19:31 GMT

Not sure how complicated it is but i would like to add a 'Help' button onto some of the widgets i have on my application. I tried coping the 'Measure' widget code but i can't get to work. I would gratefully appreciate any help please.

I have added the help image to html with the following and can see the help icon inside the widget.

div data-dojo-type="jimu/dijit/LoadingShelter" data-dojo-attach-point="shelter" data-dojo-props="hidden:true"></div>
  <br><br><br><br><br><br><br><br><br><br><br><br>
    <img src="widgets/ElevationProfile/images/help.png" height="25" width="62" data-dojo-attach-point="helpImage" style="cursor:pointer" />
</div>‍‍‍‍

I added the function in the _blindEvents: Function like so.

_bindEvents: function () {
        this.own(on(this.btnClear, 'click', lang.hitch(this, this._clear)));
        html.setStyle(this.btnClear, 'display', 'none');
        this.own(on(this.btnExport, 'click', lang.hitch(this, this._export)));
        this.own(on(this.helpImage, 'click', lang.hitch(this, function() {
            var win = window.open("widgets/ElevationProfile/help/index.html", "_blank");
  win.focus();
        })));
        html.setStyle(this.btnExport, 'display', 'none');
        html.setStyle(this.btnInfo, 'display', 'none');
        html.setStyle(this.btnDownload, 'display', 'none');
      },‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add help button link inside widgets

RobertScheitlin__GISP — Thu, 04 May 2017 23:41:25 GMT

So what's not working? Does the image show up on the widget? Do you have widgets/ElevationProfile/images/help.png and a widgets/ElevationProfile/help/index.html in your app?

Re: Add help button link inside widgets

CCWeedcontrol — Fri, 05 May 2017 14:02:00 GMT

My bad. The 'Help' image is in the Elevation Widget. when hover over the 'Help' mage on the widget my pointer does not turn into a pointing finger and if i click on it the 'Help' nothing happens. I do have the widgets/ElevationProfile/images/help.png and widgets/ElevationProfile/help/index.html in the app.

Re: Add help button link inside widgets

CCWeedcontrol — Mon, 08 May 2017 18:36:33 GMT

I am still struggling on how to do this. Would really appreciate some help.

Re: Add help button link inside widgets

RobertScheitlin__GISP — Mon, 08 May 2017 22:24:00 GMT

So are you getting any errors in your browsers web console?

Re: Add help button link inside widgets

CCWeedcontrol — Tue, 09 May 2017 17:39:29 GMT

I don't get any errors, it's as if when i click on the 'Help' button nothing happens at all, no click or anything.

Re: Add help button link inside widgets

RobertScheitlin__GISP — Tue, 09 May 2017 18:04:49 GMT

And you have code in your widget that calls _bindEvents right?

Re: Add help button link inside widgets

CCWeedcontrol — Tue, 09 May 2017 20:38:00 GMT

I was testing it on the ElevationProfile widget so i do have the _bindEvent in the app\widgets\ElevationProfile\Widget.js. See attached.

Re: Add help button link inside widgets

RobertScheitlin__GISP — Tue, 09 May 2017 21:04:01 GMT

That image does not show me that you are actually calling that function though.

Re: Add help button link inside widgets

CCWeedcontrol — Tue, 09 May 2017 21:22:54 GMT

oh well maybe that's my problem i thought i was. How call that function correctly?

Re: Add help button link inside widgets

RobertScheitlin__GISP — Tue, 09 May 2017 22:10:45 GMT

Just,

this._bindEvents();

Re: Add help button link inside widgets

CCWeedcontrol — Tue, 09 May 2017 22:57:07 GMT

my apologies for my slowness, but i do have this._bindEvents(): in the widget.js. See attached.

Re: Add help button link inside widgets

RobertScheitlin__GISP — Tue, 09 May 2017 23:56:27 GMT

alright this is to much back and forth with bits and pieces. Can you attach your whole widget,

Re: Add help button link inside widgets

Keith-Bornhorst — Wed, 10 May 2017 13:27:39 GMT

If you're already editing Widget.html and you don't need any special state or display logic, why not keep it all in HTML/JavaScript and wrap your image in a A tag with the necessary JavaScript to open up the new window?

<a href="widgets/ElevationProfile/help/index.html" target="_blank"><img src="widgets/ElevationProfile/images/help.png" height="25" width="62" />
</a>

Re: Add help button link inside widgets

CCWeedcontrol — Wed, 10 May 2017 14:20:05 GMT

I have attached the widget. Thanks.

Re: Add help button link inside widgets

RobertScheitlin__GISP — Wed, 10 May 2017 15:15:46 GMT

When I added your widget to an app it had the help button and the mouse changed and the help doc showed when clicked.

Re: Add help button link inside widgets

CCWeedcontrol — Wed, 10 May 2017 15:38:29 GMT

WHAT! Did you add to Dev Web Appbuilder folder or the deployed app? i am working with ta deployed application.

Re: Add help button link inside widgets

CCWeedcontrol — Wed, 10 May 2017 15:43:51 GMT

Robert i see the problem i was testing in Chrome, once i opened the application on Firefox i was able click on the help button. So is the issue with Chrome?

Also does not work on internet explorer.

Re: Add help button link inside widgets

RobertScheitlin__GISP — Wed, 10 May 2017 15:45:43 GMT

Nope I primarily work in Chrome and it worked fine for me.

Re: Add help button link inside widgets

CCWeedcontrol — Wed, 10 May 2017 15:52:00 GMT

interesting. i am on Version 57.0.2987.133 on Chrome.

Also does not work on internet explorer for me.

Any idea on why i am having these issues with these browsers.