nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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

All comments

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

MeleKoneya

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

RobertScheitlin__GISP

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

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

Mele,

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.