topic How to change Browser-Tab-Title independent from Application title in WAB Developer Edition in ArcGIS Web AppBuilder Questions

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

AndreasEugster — Wed, 15 Dec 2021 14:19:33 GMT

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 ?

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

MichaelLev — Tue, 21 Dec 2021 05:09:49 GMT

@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);

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

AndreasEugster — Tue, 21 Dec 2021 07:37:01 GMT

@MichaelLev,

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

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

Kara_Lara — Thu, 08 Jun 2023 20:27:53 GMT

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!

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

AndreasEugster — Fri, 09 Jun 2023 07:44:50 GMT

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"
- 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"
- save
deploy

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

MichaelLev — Thu, 29 Jun 2023 10:00:02 GMT

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

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

Kara_Lara — Fri, 28 Jul 2023 16:33:35 GMT

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