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' ) ; } ,

In Chrome if i am in developer tools the 'Help' button works but once i close out of Dev tools it stops working.

Try adding the widget to a new app and see if you get the same behavior.

OK thanks for responses and help. I am lost as to why it doesn't work in Chrome or Internet explorer.

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; } } }

Add help button link inside widgets

CCWeedcontrol

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"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>widgets/ElevationProfile/images/help.png<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>25<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>62<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>helpImage<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">cursor</SPAN><SPAN class="punctuation token">:</SPAN>pointer</SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

_bindEvents<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>btnClear<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_clear<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>btnClear<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'display'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>btnExport<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_export<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>helpImage<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> win <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"widgets/ElevationProfile/help/index.html"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"_blank"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; win<SPAN class="punctuation token">.</SPAN><SPAN class="token function">focus</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>btnExport<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'display'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>btnInfo<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'display'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>btnDownload<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'display'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

All comments

Keith-Bornhorst

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?

<SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;"><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;"><</SPAN>img <SPAN class="" style="border: 0px; font-weight: inherit;">src</SPAN><SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;"><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">=</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">"</SPAN>widgets/ElevationProfile/images/help.png<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">"</SPAN></SPAN> <SPAN class="" style="border: 0px; font-weight: inherit;">height</SPAN><SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;"><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">=</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">"</SPAN>25<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">"</SPAN></SPAN> <SPAN class="" style="border: 0px; font-weight: inherit;">width</SPAN><SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;"><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">=</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">"</SPAN>62<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">"</SPAN></SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">/></SPAN></SPAN><CODE style="border: 0px; font-weight: inherit; padding: 0px;"><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit; padding: 0px;"><a href="widgets/ElevationProfile/help/index.html" target="_blank"></SPAN>

<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit; padding: 0px;"></a></SPAN>

rscheitlin

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

CCWeedcontrol

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.

rscheitlin

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

CCWeedcontrol

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

CCWeedcontrol

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.

ElevationHelp.png

ElevationFolder.png

rscheitlin

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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