Edit mask for a percentage field

[hin3x]

Hello,

I am trying to implement a case where the user needs to see the % sign when he starts to enter in a field which contains an percentage amount.

The actual field contains a decimal where 1.0 is 100% (which is a common percentage value storage approach).

My edit mask is set to '999.99%'.

This is some sample code:

private class MyType extends SimpleType {

public MyType() {

super("mine", FieldType.ANY);
}
}

@Override
public Canvas getViewPanel() {

new MyType().register();

DynamicForm form = new DynamicForm();
form.setWidth(400);

TextItem percentageField = new TextItem("percentageItem", "Percentage");
percentageField.setAttribute("type", "mine");
percentageField.setMask("999.99%");
percentageField.setValue(0.1234);
percentageField.addChangedHandler(new ChangedHandler() {

public void onChanged(ChangedEvent event) {
SC.say(event.getValue().toString());
}
});

form.setFields(percentageField);

return form;
}

Several things are going wrong:
- the value is not correctly formatted
- when I enter a new value the decimal is completely ignored

As far as I can tell this is probably caused by the fact that the edit mask is not supposed to be used for numerical fields, is that assumption correct?

How could I implement this kind of scenario, I would find it odd that we are the 1st to try an edit mask on a percentage field?

Many thanks for your insights!

[Isomorphic]

Right, masking is for fixed-width data entry only - if you use it in a case like this it appears as if the user is required to enter 3 digits and a fraction, whereas 4% is a valid entry and requires only one letter.

[hin3x]

Indeed, and besides that is simply unfit for numerical data entry where decimals are involved.

Given this knowledge, would this (edit mask for numerical data entry) be something that you might consider to become part of your product one day (as in something to feature sponsorship or add to the roadmap)?

thanks again

[Isomorphic]

Sorry, we're confused, it seems like you just said that masking doesn't make sense for numeric but then asked when we might support it?

[hin3x]

Well it doesn't make sense in its current form, which is oriented towards text editing.
Support for numerical edit masks could allow a more convenient way towards entering numbers and decimals, for example allowing the 9% entry or keeping decimal information when entering 12.9 in a mask defined as 99.9.

Hope this makes more sense ;-)

[Isomorphic]

What did you have in mind, leaving the user input alone and not imposing any fixed field widths, but automatically tacking on a %? If so, you can use FormItem.setInputTransformer() to do this.

[hin3x]

Indeed, but I don't see how that transformer can do that. It only fires once the user starts modifying the value (which is too late). I can't add the % to the current value when the user starts editing (eg clicks in) the field using that approach.

Anyhow, adding a % plainly to the value will also allow the user to remove it - that wouldn't be ideal either.

[Isomorphic]

You could use "showHintInField" to show a hint like "XX%" when the user is not editing.

When the user begins editing a blank value you do not want to add a percent or there is no way for the user to leave a blank, and merely tabbing through the field populates it.

Subsequently if the user deletes the "%", transformInput allows you to re-add it.

[hin3x]

Thanks, the hint functionality comes pretty close to what we want - I applied it to the mix and the end result is pretty pleasing, at least for me.

thanks!

[hin3x]

A small problem has come up with this hint functionality. We are using the 'show hint in field' functionality but the hint fails to display when the form is initially displayed.

The hint becomes visible once that the field received focus though (tabbing over or clicking in it and leaving the field) and from then on it remains there until the form is refreshed again.

I can however not reproduce it with a standalone test case, which means that it must be caused by our specific use case somehow. Do you have any clues where we should be looking for the cause?

many thanks

[Isomorphic]

The most likely reason for the hint not showing up would be if the field value is not initially empty for some reason.
If that's not the case, we are not aware of any reason for it to fail to show up by default - there may be some strange focus interaction or interaction with the input transformer that's leading to the odd behavior but without seeing the problem first hand it's hard for us to speculate.

[hin3x]

Indeed, it seems that the value which is inspected is not null. This is because our values are actually JS objects which represent complex objects. The underlying value though is null and the display value is also empty.

Further investigation lead me to a difference on the check which decides to show the hint or not.

In the method which is called initially (TextItem.setValue) the return value of the setValue call on the FormItem is used to inspect the need to show the hint in the field (this.invokeSuper(isc.TextItem, "setValue", value,b,c,d);).

Later on, in the on _nativeElementBlur for example another method is used to access the value to be checked to show the hint. Here the getElementValue call is used which yields a correct null or empty string value for our field.

I adapted the code of TextItem.setValue to also use this method to check if the hint needs to be displayed and that works out ok.

We believe that the return value of the setValue call can't be used to check the hint in the TextItem's setValue function since it will not always return a string - at least the check is not in line with the other hint checks.

I hope this made some sense to you, what is your view on this?

[Isomorphic]

Interesting - yes this does make sense. It's an edge case that was tripped by your particular setup.

We agree with your fix and are rolling this change into the framework. It'll be present in the next nightly build.

Regards
Isomorphic Software

[hin3x]

Great, we'll be giving that fix a go once we update to the latest nightly. Thanks!

[hin3x]

It works now with the latest nightly installed, thanks!