# Change button text at runtime

**URL:** <https://forum.servoy.com/t/change-button-text-at-runtime/20096>\
**Category:** Classic Servoy\
**Created:** [October 8, 2019, 6:41am UTC](https://forum.servoy.com/t/change-button-text-at-runtime/20096 "2019-10-08T06:41:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![c.groefsema](https://avatars.discourse-cdn.com/v4/letter/c/fbc32d/32.png) [@c.groefsema](https://forum.servoy.com/u/c.groefsema)\
**Post date:** [October 8, 2019, 6:41am UTC](https://forum.servoy.com/t/change-button-text-at-runtime/20096/1 "2019-10-08T06:41:55Z")

</div>

Hi everyone,

I have a very simple question.

I need to change the text on a button at runtime: the button “Save” should display “Saving…” as soon as it is clicked on.  
Now I have added a Button but it seems that its text property is read only ([https://wiki.servoy.com/display/DOCS/Button#Button-text](https://wiki.servoy.com/display/DOCS/Button#Button-text)).  
I guess I need a RuntimeButton since its text can be set, but I don’t see RuntimeButtons in the components list in the Servoy editor.  
How can I accomplish this? Thanks in advance!

---

<div class="post-metadata">

**Author:** ![paronne](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/paronne/32/5096_2.png) [@paronne](https://forum.servoy.com/u/paronne)\
**Post date:** [October 8, 2019, 7:21am UTC](https://forum.servoy.com/t/change-button-text-at-runtime/20096/2 "2019-10-08T07:21:35Z")

</div>

Hi,

are you using the default Button component or the Button from the Bootstrap Components package ?  
You should be able to set a text using elements.btnName.text = “Saving…”; if you can’t do that you should report a bug at [support.servoy.com](http://support.servoy.com).  
Wouldn’t be a blocker issue since you can use a form variable as dataprovider of your button and simply change the value of the dataprovider: myButtonText = “Saving…”  
Note: if you are using the button from Bootstrap Component package you don’t have a dataprovider property but you can use a displayTag in text: set the button text to "%%myButtonText%% will show the value of your form variable myButtonText.

Please note, if within the same call stack you reset the text to “Save” you may not be able to see the text changing.

Regards,  
Paolo

---

<div class="post-metadata">

**Author:** ![c.groefsema](https://avatars.discourse-cdn.com/v4/letter/c/fbc32d/32.png) [@c.groefsema](https://forum.servoy.com/u/c.groefsema)\
**Post date:** [October 10, 2019, 9:53am UTC](https://forum.servoy.com/t/change-button-text-at-runtime/20096/3 "2019-10-10T09:53:19Z")

</div>

Hi Paolo,

Thanks for replying!  
I’m using the Button from the Bootstrap Components package.

> paronne:  
> “You should be able to set a text using elements.btnName.text = “Saving…”;”

That works partly: sometimes it shows and sometimes it doesn’t. I’m using this code:

```auto
function onSave(event) {
    var saveButton = elements[event.getElementName()];
    saveButton.text = i18n.getI18NMessage("Message.Saving");
    saveButton.enabled = false;
    saveSettings(event); //do the actual saving
    wait(2);
    saveButton.text = i18n.getI18NMessage("Action.Save");
    saveButton.enabled = true;
}

function wait(seconds) { 
    if (!isNaN(seconds)) {
        var now = new Date();
        var later = now.setSeconds(now.getSeconds() + seconds);
        while (Date.now() < later) { //do nothing useful while waiting, just be lazy...
        }
    }
}

```

When I comment out the last two lines of onSave, I can see that the text and appearance of the button always change. So that is good. But it looks like the screen doesn’t always update in time to reflect the change - and then after wait(2); the text and appearance are normal again. This is probably a case of

> if within the same call stack you reset the text to “Save” you may not be able to see the text changing.

I was hoping to overcome this by what you suggest:

> you can use a displayTag in text

but I don’t know how to accomplish this. Searching on “displayTags” revealed that there should be a property checkbox “displayTags”, but I cannot find it. Can you lend a hand once more?  
Thanks!

---

<div class="post-metadata">

**Author:** ![paronne](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/paronne/32/5096_2.png) [@paronne](https://forum.servoy.com/u/paronne)\
**Post date:** [October 10, 2019, 10:27am UTC](https://forum.servoy.com/t/change-button-text-at-runtime/20096/4 "2019-10-10T10:27:19Z")

</div>

Hi,

i see indeed as i have suspected you change back the text value to “Save” within the same code stack.  
I have mentioned in my previous message

> Please note, if within the same call stack you reset the text to “Save” you may not be able to see the text changing.

Because of timing and perfomance optimization Servoy doesn’t push immediately to the UI any single change of an element state.  
An update of the state (and therefore of the UI) is forced at the end of the code stack or when executing a method which requires to operate with the UI.  
In simple words: you have have to execute a method which does a round-trip to the UI so a state update is pushed.

```auto
    saveButton.text = i18n.getI18NMessage("Message.Saving");
    saveButton.enabled = false;
    saveButton.requestFocus();
    // this method is a type of method which does a round-trip to the UI
    plugins.ngclientutils.getUserAgent();
   // saveSettings(event); //do the actual saving
    application.sleep(2000);
    saveButton.text = i18n.getI18NMessage("Action.Save");
    saveButton.enabled = true;
    return true

```

Nevertheless i suggest you use the svyBlockUI service instead : [https://github.com/Servoy/svyBlockUI/wiki](https://github.com/Servoy/svyBlockUI/wiki)  
The svyBlockUI it fits perfectly these situations where you want to block the UI and inform the user that their request is being elaborated.  
You can install this service via the Servoy Web Package Manager (right click your solution: "Download/Install via Web Package Manager) in the NG Services section.

Regards,  
Paolo

---

<div class="post-metadata">

**Author:** ![c.groefsema](https://avatars.discourse-cdn.com/v4/letter/c/fbc32d/32.png) [@c.groefsema](https://forum.servoy.com/u/c.groefsema)\
**Post date:** [October 11, 2019, 6:37am UTC](https://forum.servoy.com/t/change-button-text-at-runtime/20096/5 "2019-10-11T06:37:27Z")

</div>

Hi Paolo,

> i see indeed as i have suspected you change back the text value to “Save” within the same code stack.

Yes, I was aware that I did so. I had not yet found a means of overcoming this.  
But now I have! ![:D]( "Very Happy") Your suggestion nicely does the trick. Thank you!

Kind regards,  
Coos