CODEWITHSUNDEEP
sapui5
Cold_Class
Cold_Class

Reputation: 3494

How to validate and scroll to sap.m.RadioButtonGroup

The task is straight forward:
The user has to select an entry in a group of radio buttons, otherwise the validation should fail.
RadioButtonGroup
In order to be nice to the user, I'd also like to scroll to that RadioButtonGroup when its validation fails since it's further down and may not be in sight (as in my example linked below).

The implementation is not so straight forward to me because RadioButtonGroup does not have the property required.
Here's my code example - the RadioButtonGroup is in file SomeView.view.xml at line 420...
I have not really tried anything so far because I have no idea what to try.

Does anyone know if this is possible without compromising the existing validator implementation (that I got from here)?

Upvotes: 1

Views: 464

Answers (1)

Jan Schulz
Jan Schulz

Reputation: 610

The implementation is not so straight forward to me because RadioButtonGroup does not have the property required.

Only sap.m.Label needs the property required="true". Not the control sap.m.RadioButtonGroup itself.

The control sap.m.RadioButtonGroup has a property called selectedIndex. In your Code-Snippet you set the property selectedIndex="-1". If the user selects an sap.m.Radiobutton the selectedIndex will change to 0..3. Let's capture that with sap.ui.model.type.Integer.

 // JSON dummy data
            var oData = {
                text   : "Test",
                userEmail : "[email protected]",
                number : 50,
                date   : "01.01.2021",
                selectedIndex: -1
            };

 <Label text="Final answer?" required="true"/>
            <RadioButtonGroup 
               id="answer" 
               columns="4" 
               selectedIndex="{ path: '/selectedIndex',
               type: 'sap.ui.model.type.Integer',
               constraints : { 
                              minimum : 0, 
                              maximum : 3 
                             }}">
                <RadioButton id="A1" text="A"/>
                <RadioButton id="B1" text="B"/>
                <RadioButton id="C1" text="C"/>
                <RadioButton id="D1" text="D"/>
            </RadioButtonGroup>

The Validator.js only checks for following properties

 aValidateProperties   = ["value", "selectedKey", "text"]

so we add the propertie selectedIndex

aValidateProperties   = ["value", "selectedKey", "text", "selectedIndex"]

Validation works now ! Code-Example

In order to be nice to the user, I'd also like to scroll to that RadioButtonGroup when its validation fails since it's further down and may not be in sight (as in my example linked below).

See this offical Example

Upvotes: 3

Related Questions