Change text/headings on a web app created with web appbuilder

01-11-2021 08:58 PM
Labels (1)
New Contributor II

Hello everyone!

am curious, once the the source files for a web app are downloaded how can I change the heading/titles of the web app?

this example demonstrates how to change the styling

but lets say I wanted to change the text "Layers" in my web app to say "Options" how could I do that?


Tags (3)
2 Replies
Occasional Contributor III

Hi @DuVergerRay , I am also trying to do this, although natively within the AGO app and not hosted on our own. In my case I am using the "Minimalist" web app and want to change the text associated with the docked pop up to be more specific to the data I am showing. But I am stuck with just "Info" and the prompt that follows. I went over the CSS blog/youtube and found, like you, that we can't change the text in these elements with CSS. Did you find a workaround?



0 Kudos
New Contributor II

Hi !

So as of now I opted for hiding the title in the webapp builder (i am still in the testing stage so it will work for now). But u can try this..In widgets section click the layers widget and uncheck "Show Title". then enter your desired title in the text box, and if I remember in the youtube video you reference it will cover how to change the styling for that text field so you can customize it to your linking


I have not had the opportunity to test this yet, but my next step was to
1. download the webapp from the appbuilder
2. open Widget.html file 
2a. html for me look like so:
<div class="layers-section" data-dojo-attach-point="layersSection">
<div class="layer-list-title" data-dojo-attach-point="layerListTitle">${nls.layers}</div>
<div class="layer-filter-node" data-dojo-attach-point="layerFilterNode"></div>
<div class="layer-list-body" data-dojo-attach-point="layerListBody">
2b. change ${nls.layers} to my desired title e.g. My Layers
3. Upload/host my webapp and see if it works

not sure if it helped, but hopefully it gave you some ideas of things to try


0 Kudos