Adding a hyperlink to the header of ArcGIS Server Web AppBuilder

I wanted a way to add a hyperlink to the logo shown at the top left of an ArcGIS Server Web AppBuilder application:

Web AppBuilder logo

but couldn't see anything out-of-the-box. Here's the approach I came up with.

  • in the \myApp\config.json file, add a property "logoLink": "http://www.google.com"
  • in the \myApp\themes\FoldableTheme\widgets\HeaderController\Widget.html file, add a new a tag (with a data attribute 'logoLink') 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>
  • in the \myApp\themes\FoldableTheme\widgets\HeaderController\Widget.js file, add the following in the postCreate function, around line 90:
html.setAttr(
  this.logoLink,
  'href',
  this.appConfig.logoLink ? this.appConfig.logoLink : "#"
);

The result is a hyperlink on the logo, which can be used to either refresh the current page (using "#") or redirect to another page (such as an index page of maps)

new hyperlink on the logo

Back to articles

CONTACT