Skip to Content

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

May 17, 2017 at 01:02 PM


avatar image
Former Member

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:" displayBlock="true">

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

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"

path: '/ProductCollection',
sorter: { path: 'Name' }
<core:Item key="{ProductId}" text="{Name}" />

In the Javascript for the radiobutton group,

get the comboBox you want to see using


Then you can use the setVisible method on that object

Show 1 Share
10 |10000 characters needed characters left 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>