Change button text at runtime

Classic Servoy
1

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).
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!

2

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.
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

3

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:

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!

4

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.

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

5

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 Your suggestion nicely does the trick. Thank you!

Kind regards,
Coos