Skip to Content

show/hide field based on radio button press in sap ui5.

hi all,

i have a requirement in which there are two radio buttons (RB1 , RB2) and two fields (F1 and F2).

on clicking radiobutton RB1 field F2 must hide and only field F1 should show.

like that on RB2 only field F2 should show.

my view is of type XML .

how should i write code to get this functionality?

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

5 Answers

  • Posted on May 12, 2020 at 08:57 AM

    Hi anoop krishnan,

    Create two radio buttons and add event in radio buttons and control visibility of F1 & F2 in the method inside controller

    It cannot be achieved directly in view.

    Thanks,

    Ashutosh

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 22, 2020 at 10:04 AM

    Hi Anoop,

    I have a similar requirement.

    please share your code if you resolved it.

    Thank you in advance.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 22, 2020 at 11:05 AM

    Hi Anoop,

    Change your code in View to :

    <RadioButtonGroup  id="aadhar" columns="2" select="handleSelect"> 
    <RadioButton text="Yes" ></RadioButton>
    <RadioButton text="No" ></RadioButton>
    </RadioButtonGroup>

    Change Your code in controller to:

    function: handleSelect(){ 
    var selected = this.getView().byId("aadhar").getSelectedButton().getText(); 
    if(selected === 'Yes'){
    this.getView().byId('F2').setVisible('false'); 
    }else 
    {
    this.getView().byId('F1').setVisible('false');}
    }

    Hope this works !

    Thanks,

    kathiravan B S.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on May 12, 2020 at 09:36 AM
    -1

    Dear Anoop

    Please do as below

    In your radio button set handle.

    <RadioButton select="_handleSelect">
    

    Handle it in controller as below

    _handleSelect: function(oEvent){
       var selected = oEvent.getSource().getSelected();
       var hfield = sap.ui.getCore().byId('yourfield');
    
       hfield.setVisible(selected);
    }
    

    Regards,

    Venkat

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on May 12, 2020 at 08:14 PM
    -1

    Hi

    Sorry, please toggle it as below.

    _handleSelect: function(oEvent){
        var hfield = sap.ui.getCore().byId('yourfield');
       hfield.setVisible(false);
    }

    Please change the code as above.

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.