How to change Browser-Tab-Title independent from Application title in WAB Developer Edition

1390
6
Jump to solution
12-15-2021 06:19 AM
AndreasEugster
Occasional Contributor

Hi

I'm working with WAB-Developer Edition 2.22.

I have a WAB-App downloaded and deployed on a server and would like to change the browser-tab-title independet from the WAB-Title.

Rightnow in the config.json the WAB-title is defined as "title": "123456". I would like to set the Browser-Tab-Label as "ABCDEFG" independet from the WAB-Title "123456".

Changing the title to <title>ABCDEFG</title> in the index.html does not work - loading the page will first show the Browser-Tab-Label as "ABCDEFG" but then quickly change the Browser-Tab-Label to "123456". Inspecting the html head with browser-developer-tool showes <title>123456</title>. So I guess the index.html configuration is overwritten by the title set in the config.json ?!

Is there a way to interfere / decouple ?

AndreasEugster_4-1639577527250.png

AndreasEugster_3-1639577518804.png

 

 

 

 

1 Solution

Accepted Solutions
MichaelLev
Occasional Contributor III

@AndreasEugster ,

I also use WAB Developer Edition 2.22

What I did -

In config I added a new item "titleBrowserTab" and set it to the browseer tab title I want,

and in jimu.js/ConfigLoader.js lines 223 to 224 I changed 

from:

if(appConfig.title){
  document.title = jimuUtils.stripHTML(appConfig.title);

to:

if (appConfig.titleBrowserTab){//mlev_modified. was appConfig.title
  document.title = jimuUtils.stripHTML(appConfig.titleBrowserTab);

View solution in original post

6 Replies
MichaelLev
Occasional Contributor III

@AndreasEugster ,

I also use WAB Developer Edition 2.22

What I did -

In config I added a new item "titleBrowserTab" and set it to the browseer tab title I want,

and in jimu.js/ConfigLoader.js lines 223 to 224 I changed 

from:

if(appConfig.title){
  document.title = jimuUtils.stripHTML(appConfig.title);

to:

if (appConfig.titleBrowserTab){//mlev_modified. was appConfig.title
  document.title = jimuUtils.stripHTML(appConfig.titleBrowserTab);

AndreasEugster
Occasional Contributor

@MichaelLev,

Many thanks, that's exactly what I was looking for.  

0 Kudos
Kara_Lara
New Contributor III

Did you add the new item "titleBrowserTab" into the config.json specifically? Can you please provide more details on the proper code structure you inserted in the config? Thank you in advance!

0 Kudos
AndreasEugster
Occasional Contributor
  • Download the Dev-WAB-App
  • Add "titleBrowserTab" to config.json
    • unzip downloaded WAB-App
    • open with an editor "../yourapp/config.json
    • seach for "title" or "subtitle" and append a new line with the "titleBrowserTab"image.png
    • save
  • modifiy "appConfig.title" in jimu.js/ConfigLoader.js
    • open with editor "..yourapp/jimu.js/ConfigLoader.js"
    • search for "document.title =" (around line 370)
    • change "appConfig.title" to "appConfig.titleBrowserTab"image.png
    • save
  • deploy

image.png

Kara_Lara
New Contributor III

@AndreasEugster thank you so much! This worked out perfectly.

0 Kudos
MichaelLev
Occasional Contributor III

Dear Kara_Lara,

In the config.json there is a line

"title": "ArcGIS Web Application",

What yoy have to do is to add a line (next to it, for example):

"titleBrowserTab": "here you write what you want to be in the browser tab title",