topic Change text/headings on a web app created with web appbuilder in ArcGIS Web AppBuilder Questions

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

DuVergerRay — Tue, 12 Jan 2021 04:58:44 GMT

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 https://www.esri.com/arcgis-blog/products/sharing-collaboration/sharing-collaboration/modify-configurable-app-using-custom-css/

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

thanks

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

BrittanyBurson — Tue, 09 Feb 2021 22:34:27 GMT

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?

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

DuVergerRay — Wed, 10 Feb 2021 16:42:16 GMT

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>
<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">
</div>
</div>
</div>
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