cancel
Showing results for 
Search instead for 
Did you mean: 

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

former_member196814
Active Participant
0 Kudos

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:

<mvc:View xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="FA.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true"> <l:VerticalLayout width="100%"> <l:HorizontalLayout> <l:content> <Label text="Label B (bold)" labelFor="input-b" design="Bold" width="200%"/> <Input id="input-b" fieldWidth="50%"/> <Button text="? Further Info" width="100px" id="__button0"/> </l:content> </l:HorizontalLayout> </l:VerticalLayout><l:VerticalLayout width="100%"> <l:HorizontalLayout> <l:content> </l:content> </l:HorizontalLayout> <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="true"> <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="true"> <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> <ComboBox xmlns:sap.ui.core="sap.ui.core" id="__box0" visible="true"> <items> <sap.ui.core:ListItem text="List Item 1" key="item1" id="__item0"/> <sap.ui.core:ListItem text="List Item 2" key="item2" id="__item1"/> <sap.ui.core:ListItem text="List Item 3" key="item3" id="__item2"/></items> </ComboBox> </l:content> </l:VerticalLayout> <l:HorizontalLayout> <l:content> <Button text="No Findings" press="onPress" width="100px" id="__button2"/> <Button text="Add Findings" press="onPress" width="100px" id="__button6"/> </l:content> </l:HorizontalLayout> <Panel id="__panel0"> <content> <Label text="Findings" labelFor="input-c" design="Bold"/> <Input id="input-c"/> </content> </Panel> </mvc:View>

Accepted Solutions (1)

Accepted Solutions (1)

tom_parsons
Participant
0 Kudos

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

former_member196814
Active Participant
0 Kudos

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

Answers (0)