Hi,
Is there a way to force Caps-Lock/Uppercase for particular screen or even for all screen at once as some configuration settings.
If there are no configuration, would you mind sharing standard approach to override the existing Base classes and force the caps-lock or auto converting input text to Upper Case based on keydown event or something like that?
Hi,
I think the most elegant way is without any code but with CSS. You can use text-transform: uppercase; CSS property for your input fields, no need to extend base classes.
@mixin halo-ext {
@include halo;
.uppercase-field {
text-transform: uppercase;
}
}
<textField stylename="uppercase-field"/>
Hi Yuriy,
Didnt got this part in Step 4, does it needs to be specified for each text field individually? Is there a way this property can be configured globally system wide for all forms to have only Upper case allowed in text field or it explicitly converts to upper case all input in the application. Coz for existing forms such as Security Module user or roles forms i wont be able to specify individually right?
You can assign stylename for vbox or another container and then create CSS selector like this:
.uppercase-layout input {
text-transform: uppercase;
}
Apply stylename to whole screen:
<layout stylename="uppercase-layout">
<textField/>
<textField/>
</layout>
As for CUBA screens, you have to create extension of CUBA standard screens to assign stylename to their layouts. You can read more about screen extension here: Extending Screens - CUBA Platform. Developer’s Manual.
Also you can apply CSS rule for all inputs, but it is error-prone way and I don’t recommend it.
Hi Yuriy,
Followed the above approach and on the user interface it appears as Upper case. But when being saved to DB it’s still considering it in lower case. I mean the data in the backend is in lower case which is still a issue as the whole idea is to capture all input’s in the system in upper case to avoid necessary checks during Search Operation.
For instance, if I search in lower case from search panel it will be case-sensitive and other systems which the application is integrated to will also be needing data in Upper Case only.
So, can you please check and advise why it’s just appearing in UI as upper case but in backend it’s still lower case.
Sorry, I’ve checked value on server-side and I see that CSS really affects only visual representation of text. I will prepare demo with client side code for letter case transformation shortly.
Hi, I’ve prepared sample project with CapsLockAutoConverter which is Vaadin extension for TextField component. You can import it to Studio and try it.
Steps to implement custom client-side extension of a component without extending class of the component:
public class CapsLockAutoConverter extends AbstractExtension {
protected CapsLockAutoConverter(AbstractClientConnector target) {
super(target);
}
public static CapsLockAutoConverter setup(TextField textField) {
return new CapsLockAutoConverter(textField);
}
}
@Connect(CapsLockAutoConverter.class)
public class CapsLockAutoConverterConnector extends AbstractExtensionConnector {
@Override
protected void extend(ServerConnector target) {
final VTextField textField = (VTextField) ((ComponentConnector) target).getWidget();
// here we add new behaviour for existing component
textField.addKeyPressHandler(new KeyPressHandler() {
@Override
public void onKeyPress(KeyPressEvent event) {
Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
@Override
public void execute() {
if (textField.getText() != null) {
textField.setText(textField.getText().toUpperCase());
}
}
});
}
});
}
}
com.vaadin.ui.TextField vTextField = (com.vaadin.ui.TextField) WebComponentsHelper.unwrap(uppercaseTextField);
CapsLockAutoConverter.setup(vTextField);
You cannot use it as a system-wide mechanism, but it shows the generic approach for such an extension of the client-side logic of components. Read more about client-side component extension here: Vaadin Docs.
You can try to use this approach for CUBA screens, so you have to create an extension of CUBA standard screens to apply this extension for TextField components on a screen. If you want to apply it to another type of components you should implement a client-side extension for that type of components.
capslock-demo.zip (26.3K)
Hi.
Would Cuba development team consider having this implemented say as a string field attribute Case. It would accept one of three values - ‘’, ‘lowercase’, ‘UPPERCASE’. And then wherever we use that field it would automatically behave and persist data as per Case attribute. This would be so useful for many solutions have need for such functionality - you can use this for scenarios such as customer and product numbers, etc. - everywhere you need a code field for the entity.
Thanks.
Regards
Darius
Hi,
It is an excellent idea! We are planning to add such an option to our text input components: TextField and TextArea. I think it will be available in one of the next bug fix versions of release 6.3.
what about the fields within the fieldgroup?
Is this property also available?
Hi,
It is not available through Visual Designer, but can be easily enabled from a screen controller:
@Named("fieldGroup.name")
private TextField nameField;
@Override
public void init(Map<String, Object> params) {
super.init(params);
nameField.setCaseConversion(CaseConversion.UPPER);
}