How to include a link on the WAB icon

StephenLead

In the Attributes section of an application, you can set the app's icon. You can also add a link - this is placed to the right of the subtitle text:

How can I add a link to the icon itself, so that clicking on the three coloured blocks navigates somewhere?

The icon seems to be loaded dynamically, into this div:

<div class="header-section jimu-float-leading" data-dojo-attach-point="headerNode">

    <img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode" src="images\logo.png" style="height: 30px; min-width: 30px; margin-top: 5px; cursor: default;">

</div>

Which script builds this section of the UI? It should be possible to wrap the whole thing in an <a href> tag.

thanks,

Steve

StephenLead

Some digging shows that the script which builds the header, including the logo, is found at \themes\<theme name>\widgets\HeaderController\Widget.js.

These edits seem to do the trick

- edit the application's main config.js file to include a new property logoLink:

"logoLink": "http://www.google.com.au",

- add this to the \themes\<theme name>\widgets\HeaderController\Widget.js script around line 92:

html.setAttr(

  this.logoLink,

  'href',

  this.appConfig.logoLink ? this.appConfig.logoLink : "#"

);

- add the template <a> code into  \themes\<theme name>\widgets\HeaderController\Widget.html around the logo image:

<a data-dojo-attach-point="logoLink">

  <img class="logo jimu-float-leading jimu-leading-margin1" data-dojo-attach-point="logoNode">

</a>

It would be nice if someone could explain how to build the logoLink property from the main UI, rather than needing to hack into the config.js file manually.