Script to change user entered values to uppercase letters in Adaptive Forms

[nowackem]

Hello all! I'm building adaptive forms in AEM and I need assistance with a rule or script to force user entered data from a text field to upper case letters. In Designer we used this JS: xfa.event.change=xfa.event.change.toUpperCase(); Wondering how to get this same functionality into the Adaptive side of forms.

thanks!

[Mayank_Gandhi]

@nowackem XFA events are not for adaptive form. You can take 2 route:

1. you can use css:

to make a block of text have all capital letters, use text-transform: uppercase in your CSS selector. The text-transform property accepts three possible values: uppercase: Sets each word to uppercase in a text element.

2. JS:

var text = "Hello World!";
var result = text.toUpperCase();

CSS need to go in style editor or client libs and js will go in code editor. The event would be value commit,

[nowackem]

@Mayank_Gandhi Thank you for your reply. I'm looking to use the JS option. I implemented the provided script but I'm not able to make it work. I do have the event set as Value Commit. Can you help me troubleshoot to figure out what I'm missing? Please let me know if you need other info from me to help me solve this. I appreciate it.

[Mayank_Gandhi]

@nowackem send me your test form pls. 

[nowackem]

@Mayank_Gandhi I dont have a public site where I can publish these yet as we are not live just have a sandbox. I can send screenshots. Will that work?

[nowackem]

[nowackem · Accepted solution]

@Mayank_Gandhi I got this figured out! Thank you so much for trying to help. Here is what worked: 

Event: Value Commit 

Code Editor: this.value=this.value.toUpperCase()

[Mayank_Gandhi]

Of course you needed to set the value of the result back to the field. 

[IainClucas]

This is just the type of feature in needing. Though I'm wondering how to make this at the component level. Say we a dedicated competent for a particular reference number and that we wanted to always need it to be uppercase.

Guessing we could at your rule into the rule script mode of the content.XML for the component.

Or is there a better option ?

[IainClucas]

The approach we are testing today is using a guideBridge event handler.

guideBridge.on("elementValueChanged" , function(event, payload) {
    var component = payload.target; // Field whose value has changed
    if (component.cssClassName.includes("uppercase")) {
        var uValue = payload.newText.toUpperCase();
    	guideBridge.setProperty([component.somExpression],
            "value",
            [uValue]);
    }
})

On the individual component we can set the uppercase css class, or for components that always required uppercase we can set using the cssClassName in the  cq:template.

We are going to test this with our users soon.

[workflowuser]

you can force the users to enter uppercase using the following regex [A-Z]+ in the field property

[IainClucas]

I have tried that but it does not 'force' the uppercase, it just tells them they have got it wrong. We want the user to enter as they like and for us to convert to uppercase, for display and for the binding to the data.