Change button text at runtime

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

Change button text at runtime

Postby c.groefsema » Tue Oct 08, 2019 8:41 am

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!
User avatar
c.groefsema
 
Posts: 26
Joined: Fri Feb 22, 2019 12:40 pm

Re: Change button text at runtime

Postby paronne » Tue Oct 08, 2019 9:21 am

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
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Change button text at runtime

Postby c.groefsema » Thu Oct 10, 2019 11:53 am

Hi Paolo,

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

paronne wrote:"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:

Code: Select all
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!
User avatar
c.groefsema
 
Posts: 26
Joined: Fri Feb 22, 2019 12:40 pm

Re: Change button text at runtime

Postby paronne » Thu Oct 10, 2019 12:27 pm

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.

Code: Select all
    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
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Change button text at runtime

Postby c.groefsema » Fri Oct 11, 2019 8:37 am

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
User avatar
c.groefsema
 
Posts: 26
Joined: Fri Feb 22, 2019 12:40 pm


Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 8 guests