Dynamically add text to Header in WAB

3106
7
Jump to solution
12-19-2015 04:32 PM
MeleKoneya
Regular Contributor

I may not be using the correct term but what I would like to do is to add some text to the title bar or header are in WAB application based on the selection made in another widget.

How can I add some text dynamically to the title bar?

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Mele,

  The simplest way would be to manipulate the dom element directly:

Require: 'dojo/query'

var appTitleNode = query('.jimu-title.jimu-float-leading')[0];
var appTitle = appTitleNode.innerHTML;
appTitleNode.innerHTML = appTitle + " my added string";

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Mele,

   Are you talking about the Header controller widget in the foldable theme?

example.jpg

0 Kudos
MeleKoneya
Regular Contributor

Yes, Robert,  that is what I was looking to do.    Add some text dynamically to the Header Controller Widget below.    I would like to add something at the end of 'Hydrant Maintenance Program'.    It looks like this is the Title which is set in the config.json file. 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Mele,

  The simplest way would be to manipulate the dom element directly:

Require: 'dojo/query'

var appTitleNode = query('.jimu-title.jimu-float-leading')[0];
var appTitle = appTitleNode.innerHTML;
appTitleNode.innerHTML = appTitle + " my added string";
MeleKoneya
Regular Contributor

Robert,  this is perfect!   Thanks for all your help!

0 Kudos
DanNorman
Occasional Contributor

Hi Robert, I added 'dojo/query' to the end of this list which is at the beginning of a widgets Widget.js file (In your map progress widget). Is that all I need to do to "require" dojo/query?

Thanks!

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/on',
    'jimu/BaseWidget',
    'esri/dijit/util/busyIndicator',
    'jimu/utils',
    'dijit/registry',
    'dojo/dom-style',
    'dojo/query'
  ],
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Dan,

   That should be it as long as you are adding a var for the require as well (line 10):

function(
    declare,
    lang,
    on,
    BaseWidget,
    busyUtil,
    utils,
    registry,
    domStyle,
    query) {
0 Kudos
DanNorman
Occasional Contributor

Ok Robert that's what I missed and now it works thank you very much!

0 Kudos