Dynamically add text to Header in WAB

[MeleKoneya]

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?

[RobertScheitlin__GISP]

Mele,

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

[MeleKoneya]

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. 

[RobertScheitlin__GISP · Accepted solution]

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]

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

[DanNorman]

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'
  ],

[RobertScheitlin__GISP]

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) {

[DanNorman]

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