topic Re: Dynamically add text to Header in WAB in ArcGIS Web AppBuilder Questions

Dynamically add text to Header in WAB

MeleKoneya — Sun, 20 Dec 2015 00:32:33 GMT

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?

Re: Dynamically add text to Header in WAB

RobertScheitlin__GISP — Sun, 20 Dec 2015 04:19:01 GMT

Mele,

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

Re: Dynamically add text to Header in WAB

MeleKoneya — Thu, 24 Dec 2015 16:11:14 GMT

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.

Re: Dynamically add text to Header in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:49:47 GMT

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";

Re: Dynamically add text to Header in WAB

MeleKoneya — Thu, 24 Dec 2015 20:23:36 GMT

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

Re: Dynamically add text to Header in WAB

DanNorman — Sun, 12 Dec 2021 07:49:50 GMT

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

Re: Dynamically add text to Header in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:49:53 GMT

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

Re: Dynamically add text to Header in WAB

DanNorman — Tue, 19 Jan 2016 17:44:48 GMT

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