How to include a link on the WAB icon

4207
2
Jump to solution
01-27-2015 08:45 PM
StephenLead
Regular Contributor III

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:

WAB link.JPG

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

1 Solution

Accepted Solutions
StephenLead
Regular Contributor III

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.

View solution in original post

0 Kudos
2 Replies
StephenLead
Regular Contributor III

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.

0 Kudos
JasonStanton__GISP
Occasional Contributor

How do i get this to open in a new tab, and is it possible to add a tooltip?

0 Kudos