Skip to Content
avatar image
Former Member

How to show/hide combobox on select of a particular radio button?

I am trying to achieve a functionality to show particular Combobox on select of a particular Radio button in UI5 app using XML view. I am working on WebIDE to develop this.I have placed the required elements in the xml view page but unable to move forward as i am not able to get the correct java script code in controller.js file. Below is the code from View.xml file:

http://www.w3.org/1999/xhtml" displayBlock="true">

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    avatar image
    Former Member
    May 17, 2017 at 02:46 PM

    A little more of your XML would make answering this easier, but this might help.

    Stop trying to put HTML markup into your XML, instead;

    Have a look here for an example of a radio button set and triggering javascript

    (from Sai Vellanki in reply to this post)

    In the definition of your ComboBox in the XML, add visible="false" to hide it initially and an id

    <ComboBox visible="false"
    id="cbOne"
    
    items="{
    path: '/ProductCollection',
    sorter: { path: 'Name' }
    }">
    <core:Item key="{ProductId}" text="{Name}" />
    </ComboBox>

    In the Javascript for the radiobutton group,

    get the comboBox you want to see using

    this.getView().byId("cbOne")

    Then you can use the setVisible method on that object

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Thanks Tom.

      Below is the snippet from xml.view file and yes i have not added any code to Index.html in my project. i am trying to handle this functionality in the controller.js file.

      <l:content> <RadioButtonGroup columns="1" selectedIndex="4"> <buttons> <RadioButton text="Radio Button" id="__button3" select="show"/> <RadioButton text="Radio Button" id="__button1"/> <RadioButton text="Radio Button" id="__button5"/> <RadioButton text="Radio Button" id="__button4"/> </buttons> </RadioButtonGroup>

      <ComboBox xmlns:sap.ui.core="sap.ui.core" id="__box1" visible="false"> <items> <sap.ui.core:ListItem text="List Item 1" key="item1" id="__item3"/> <sap.ui.core:ListItem text="List Item 2" key="item2" id="__item4"/> <sap.ui.core:ListItem text="List Item 3" key="item3" id="__item5"/></items> </ComboBox> <ComboBox xmlns:sap.ui.core="sap.ui.core" id="__box2" visible="false"> <items> <sap.ui.core:ListItem text="List Item 1" key="item1" id="__item6"/> <sap.ui.core:ListItem text="List Item 2" key="item2" id="__item7"/> <sap.ui.core:ListItem text="List Item 3" key="item3" id="__item8"/></items> </ComboBox>

      Regards

      Rahul