Auto Caps-lock or Uppercase for user input in screen

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?

1 Like

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.

  1. Create theme extension for halo theme
  2. Open modules/web/themes/halo/halo-ext.scss
  3. Add CSS style:

@mixin halo-ext {
  @include halo;

  .uppercase-field {
    text-transform: uppercase;
  }
}
  1. Assign stylename uppercase-field to your text field:

<textField stylename="uppercase-field"/>
  1. Restart your application
1 Like

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: https://doc.cuba-platform.com/manual-6.1/screen_extension.html.

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:

  1. Create web-toolkit module in your project
  2. Create class CapsLockAutoConverter that will extend AbstractExtension in web module. It is a server-side API for your extension.

public class CapsLockAutoConverter extends AbstractExtension {
    protected CapsLockAutoConverter(AbstractClientConnector target) {
        super(target);
    }

    public static CapsLockAutoConverter setup(TextField textField) {
        return new CapsLockAutoConverter(textField);
    }
}
  1. Create package com.company.demo.web.toolkit.ui.client. (Replace com.company.demo with your application package)
  2. Create class com.company.demo.web.toolkit.ui.client.CapsLockAutoConverterConnector in web toolkit module inside ‘client’ package

@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());
                        }
                    }
                });
            }
        });
    }
}
  1. Unwrap CUBA TextField and apply extension

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: https://vaadin.com/wiki/-/wiki/Main/Creating+a+component+extension.

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.

Hi,

The feature is implemented in the platform version 6.4.0.

1 Like

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);
}
1 Like