topic Re: Help links on header of Jewelry Box Theme in Web AppBuilder Custom Widgets Questions

Help links on header of Jewelry Box Theme

James_001 — Sun, 12 Dec 2021 11:07:40 GMT

Hi,

I am trying to add the help and some other link (button) on the top of header of Jewelry Box theme of my WAB app. It is some thing similar to King County sample. This is the header controller html (widget.html) of my app, but some how it is not working.

div>
  <!-- solve the bug of style delay loading -->
  <div class="header-section jimu-float-leading" data-dojo-attach-point="headerNode">
    <a data-dojo-attach-point="logoLinkNode" target="_blank">
      <img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode" data-dojo-attach-event="onload:_onLogoLoad">
    </a>
    <div class="titles jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="titlesNode">
      <div class="jimu-title jimu-float-leading" data-dojo-attach-point="titleNode"></div>
      <div class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode"></div>
    </div>
    <div class="links jimu-float-leading jimu-leading-margin25" data-dojo-attach-point="linksNode">
      <div class="dynamic-section jimu-float-leading" data-dojo-attach-point="dynamicLinksNode">// Help added
<a href="http://abc.com" target="_blank" rel="noopener noreferrer" class="jimu-link jimu-align-leading jimu-leading-margin1" style="line-height: 40px;">• Online</a>
       <a href="http://myorg.com" target="_blank" rel="noopener noreferrer" class="jimu-link jimu-align-leading jimu-leading-margin1" style="line-height: 40px;">• Help</a> 
//Help end
</div>
      <div class="signin-section jimu-float-leading" data-dojo-attach-point="signInSectionNode">
        <a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSigninClick"
        data-dojo-attach-point="signinLinkNode">${nls.signin}</a>
        <a href="" target="_blank" class="jimu-link" data-dojo-attach-event="onclick:_onUserNameClick" data-dojo-attach-point="userNameLinkNode"></a>
        <a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSignoutClick" data-dojo-attach-point="signoutLinkNode">${nls.signout}</a>
      </div>
    </div>
  </div>
  <div class="container-section jimu-float-leading" data-dojo-attach-point="containerNode"></div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Help links on header of Jewelry Box Theme

Adri2cPérez_Beneito — Tue, 26 Jun 2018 06:56:09 GMT

Hi!

Here an example (modification at the last div)

<div>

<div class="header-section jimu-float-leading" data-dojo-attach-point="headerNode">
<a data-dojo-attach-point="logoLinkNode" target="_blank">
<img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode" data-dojo-attach-event="onload:_onLogoLoad">
</a>
<div class="titles jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="titlesNode">
<div class="jimu-title jimu-float-leading" data-dojo-attach-point="titleNode"></div>
<div class="jimu-subtitle jimu-float-leading jimu-leading-margin5" data-dojo-attach-point="subtitleNode"></div>
</div>
<div class="links jimu-float-leading jimu-leading-margin25" data-dojo-attach-point="linksNode">
<div class="dynamic-section jimu-float-leading" data-dojo-attach-point="dynamicLinksNode"></div>
<div class="signin-section jimu-float-leading" data-dojo-attach-point="signInSectionNode">
<a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSigninClick"
data-dojo-attach-point="signinLinkNode">${nls.signin}</a>
<a href="" target="_blank" class="jimu-link" data-dojo-attach-event="onclick:_onUserNameClick" data-dojo-attach-point="userNameLinkNode"></a>
<a href="#" class="jimu-link" data-dojo-attach-event="onclick:_onSignoutClick" data-dojo-attach-point="signoutLinkNode">${nls.signout}</a>
</div>
</div>
</div>
<div class="container-section jimu-float-leading" data-dojo-attach-point="containerNode">
<a href="https://community.esri.com/" data-dojo-props="style: { position: 'absolute', left: '300px' }">Hyperlink</a>

</div>
</div>

Cheers

Re: Help links on header of Jewelry Box Theme

James_001 — Tue, 26 Jun 2018 13:47:55 GMT

Adri,

Thanks for your help! I added your proposed modified div, but some how as soon we change the screen size all the widgets behave funny, they are moving down to below the header controller and then stick back to again. Any help is appreciated!

Irfan