on 05-17-2017 2:02 PM
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>
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
User | Count |
---|---|
88 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.