Select to view content in your preferred language

Override widget texts

04-26-2023 09:52 AM
Occasional Contributor II

Is there any way to override widget strings in 4.x?

There used to be a way to override in 3.x

However, I don't find equivalent way in 4.x. I understand I can modify the locale to display the translated text but I can't really override it. e.g. Search widget icon displays tooltip "Search" and if I want to override it to "Search Address". Is it possible to override default widget texts?

2 Replies
Occasional Contributor III

I'm not aware of a way to do override it using a method similar to the 3.x API, but the tooltip on the search button is controlled by the title attribute, so you could do a querySelector for the .esri-search__submit-button class and change the title attribute.

<button aria-label="Search" class="esri-search__submit-button esri-widget--button" title="Search" type="button">


        searchWidget.when(() => {
          setTimeout(() => {
            searchWidget.container.querySelector('.esri-search__submit-button')?.setAttribute('title', 'Search address');
          }, 500);


Occasional Contributor II

@Justin_Greco Thanks for replying about it. I thought of overriding by using dom query. I preferred overriding 3.x way so no need to worry about change in the selector class name as well as avoiding extra call. I am not sure why ESRI team has not supported overriding of the texts with 4.x.  

0 Kudos