The segmented button is as follows:
<SegmentedButton width="98%">
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
<SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>
</SegmentedButton>
and Next button as:
<Button text="Next" press="onPressNext" enabled="true"></Button>
previous button as:
<Button text="Previous" press="onPressPrevious" enabled="true"></Button>
How to write the JS code so that when Next is pressed INDICATOR2 should be active and on second press INDICATOR3 should be active
And when on INDICATOR2 if Previous is pressed both INDICATOR2 and INDICATOR1(which is current one) should be active
I have no knowledge on JS at least to try , any help so that I would go through it and learn, TIA
You can grab the list of items from the SegmentedButton, get the next or previous item respecitively, and set it as the selected item.
(I added an id to the SegmentedButton in below example)
sap.ui.define("myController", [
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("myController", {
onPressNext: function() {
var sb = this.byId("segmentButton1");
var items = sb.getItems().map(function(itm) { return itm.getId() });
var idx = items.indexOf(sb.getSelectedItem()) + 1;
if(idx < items.length) {
sb.setSelectedItem(items[idx]);
}
},
onPressPrevious: function() {
var sb = this.byId("segmentButton1");
var items = sb.getItems().map(function(itm) { return itm.getId() });
var idx = items.indexOf(sb.getSelectedItem()) - 1;
if(idx > -1) {
sb.setSelectedItem(items[idx]);
}
}
});
});
sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
XMLView.create({
definition: $('#myView').html()
}).then(function(oView) {
oView.placeAt('content');
});
});
<html>
<head>
<meta charset="utf-8">
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_fiori_3' data-sap-ui-libs='sap.m'></script>
<script id="myView" type="sapui5/xmlview">
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController">
<SegmentedButton width="98%" id="segmentButton1">
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress" id="before" />
<SegmentedButtonItem text="INDICATOR2" class="progress" id="present" />
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after" />
</items>
</SegmentedButton>
<Button text="Previous" press="onPressPrevious" enabled="true" />
<Button text="Next" press="onPressNext" enabled="true" />
</mvc:View>
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
I think you create event like onclick and change OR add style class for example active attribute
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress active" id="before"/>
<SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>
and when you click next then you have to remove active class from INDICATOR1 and then append active class to next indicator
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
<SegmentedButtonItem text="INDICATOR2" class="progress active" id="present"/>
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>
Please write an onclick function for the next button something like below
function onNextClick(){
//Make the css of INDICATOR1 normal and INDICATOR2 || INDICATOR3 active
}
Related
I have to create a table (sap.m.Table) in SAPUI5 where rows can be deleted, reordered, and clicked on to open a dialog. So far I've figured out that I can set the Table to mode="delete" and ColumnListItem to type="Navigation" to achieve deleting rows and clicking on rows to open dialogs at the same time:
Is it possible to add the functions to reorder rows to this?
You can use a "editModeEnabled" variable in your view model to change the Table mode to "SingleSelectLeft" and show/hide some buttons. Then in "editMode", use some buttons to insert and remove the items of the table wherever you want
Here a snippet
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Page>
<Table id="myTable" mode="{= ${viewModel>/editModeEnabled} ? 'SingleSelectLeft' : 'SingleSelectMaster'}" items="{path:'json>/rows'}">
<headerToolbar>
<Toolbar>
<ToolbarSpacer></ToolbarSpacer>
<Button text="Edit" press="onEditPressed" visible="{= ${viewModel>/editModeEnabled} ? false : true}"></Button>
<Button icon="sap-icon://slim-arrow-down" press="onDownPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
<Button icon="sap-icon://slim-arrow-up" press="onUpPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
<Button text="Finish" press="onFinishEditPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Column1" />
</Column>
<Column>
<Text text="Column2" />
</Column>
</columns>
<items>
<ColumnListItem>
<Text text="{json>col1}"></Text>
<Text text="{json>col2}"></Text>
</ColumnListItem>
</items>
</Table>
</Page>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(){
var oViewModelData = {
editModeEnabled: false
};
var oViewModel = new sap.ui.model.json.JSONModel();
this.getView().setModel(oViewModel, "viewModel")
},
onEditPressed: function() {
this.getView().getModel("viewModel").setProperty("/editModeEnabled", true);
},
onFinishEditPressed: function(){
this.getView().getModel("viewModel").setProperty("/editModeEnabled", false);
},
onUpPressed: function(oEvent){
var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
if(oCurrentIndex > 0){
this.getView().byId("myTable").removeItem(oSelectedItem);
this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex-1);
}
},
onDownPressed: function(oEvent){
var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
if(oCurrentIndex < this.getView().byId("myTable").getItems().length){
this.getView().byId("myTable").removeItem(oSelectedItem);
this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex+1);
}
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create a Model and assign it to the View
//Using a small JSON model
var myData = {
rows: [
{
col1: "Row1Col1",
col2: "Row1Col2",
},{
col1: "Row2Col1",
col2: "Row2Col2",
},{
col1: "Row3Col1",
col2: "Row3Col2",
}
]
};
var oJSONModel = new sap.ui.model.json.JSONModel(myData);
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
// Set the Models
myView.setModel(oJSONModel, 'json');
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
I have a table(sap.m.table) with radiobutton control in the first column.
The table shows different "prices" from which the user should be able to choose only one. My problem is, when i use the cancel button it should delete all selections made (in dropdowns, datefilter, etc.). It works for every control except radiobutton.
<ColumnListItem> <cells>
<RadioButton id="radiobutton" groupName="tablebuttons" select="onSelect"/>.....
When i leave the view with the cancel button and then open it again in the same session, the previous selected radiobutton is still selected.
I cant find any method to set it to unselected. When i use this.getView().byId("radiobutton").getSelected()
it always gives back "false".
Is it because there is one button for each table row and i only select (the first?) one? If so, how can i search all button for the selected one and deselect it?
You must have added id="radiobutton" to the template list item which is used for aggregation binding. That is why calling byId("radiobutton") does not return any rendered radio button but the template instance. If you check the IDs of the radio buttons from the HTML document, you'll notice that they all contain the generated prefix __clone0, __clone1, etc.
I can't find any method to set it to unselected.
To deselect a radio button, use:
In case of RadioButton: .setSelected(false)
In case of RadioButtonGroup: .setSelectedIndex(-1)
But you might not even need any sap.m.RadioButton to add manually to the table. Since sap.m.Table extends from sap.m.ListBase, it can have a radio button in each list item via mode="SingleSelectLeft". Here is a demo:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/model/json/JSONModel"
], JSONModel => sap.ui.xmlview({
async: true,
viewContent: `<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="MyController"
>
<Table
mode="SingleSelectLeft"
selectionChange=".onSelectionChange"
includeItemInSelection="true"
items="{prices>/}">
<columns>
<Column>
<Text text="Price"/>
</Column>
<Column>
<Text text="Foo"/>
</Column>
</columns>
<items>
<ColumnListItem selected="{prices>selected}" >
<ObjectNumber number="{prices>price}" />
<Text text="bar" />
</ColumnListItem>
</items>
</Table>
<Button
class="sapUiTinyMargin"
text="Deselect"
type="Emphasized"
press=".onResetPress"
/>
</mvc:View>`,
controller: sap.ui.controller("MyController", {
onInit: function() {
const model = new JSONModel(this.createModelData());
this.getView().setModel(model, "prices");
},
onResetPress: function() {
const model = this.getView().getModel("prices");
model.setProperty("/", this.createModelData());
},
createModelData: () => [{
price: 111.01,
}, {
price: 222.0245,
}, {
price: 333,
}],
}),
}).loaded().then(view => view.placeAt("content"))));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-preload="async"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-waitForTheme="true"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>
IMO, you should use a model to set/reset values and not called the setter function of control. here is an example of using MVC
http://jsbin.com/zijajas/edit?html,js,output
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>MVC</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:table="sap.ui.table">
<table:Table id="Table1" rows="{/}"
selectionMode="None">
<table:title>
<Button icon="sap-icon://reset" press="reset" />
</table:title>
<table:columns>
<table:Column>
<Label text="Employee name"/>
<table:template>
<Text text="{name}" ></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Company"/>
<table:template>
<Text text="{company}"></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Radio"/>
<table:template>
<RadioButtonGroup selectedIndex="{radio}">
<RadioButton text="no" />
<RadioButton text="yes" />
</RadioButtonGroup>
</table:template>
</table:Column>
<table:Column>
<Label text="Bonus"/>
<table:template>
<Input value="{bonus}" />
</table:template>
</table:Column>
</table:columns>
</table:Table>
</mvc:View>
</script>
</head>
<body class="sapUiBody sapUiSizeCompact" role="application">
<div id="content"></div>
</body>
</html>
controller
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";
var oController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
this.getView().setModel(new JSONModel([{
name : "John",
company: "apple inc",
radio: 0,
bonus: "0"
}, {
name : "Mary",
company: "abc inc",
radio: 0,
bonus: "0"
},
]));
},
reset: function() {
var oModel = this.getView().getModel();
oModel.getProperty('/').forEach(function(item) {
item.radio = 0;
item.bonus = 0;
});
oModel.refresh();
}
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
I am trying to make a custom dialog to show some text and link in the footer along with buttons. I don't know how to change the existing rendering for this, so I wrote a simple renderer to check the behavior. This is my code:
sap.m.Dialog.extend("EnhancedDialog",{
metadata:{
properties:{
footerLabelText:{type:"string",defaultValue:null},
footerLinkText:{type:"string",defaultValue:null},
footerLinkHref:{type:"string",defaultValue:null}
},
aggregations:{
_label:{type:"sap.m.Label",multiple:false,visibility:"hidden"},
_link:{type:"sap.m.Link",multiple:false,visibility:"hidden"}
},
events:{}
},
init:function(){
this.getAggregation("_label", new sap.m.Label({text:"Check"}));
this.getAggregation("_link",new sap.m.Link({text:"Link"}));
},
setFooterLabelText:function(oLabelText){
this.setProperty("footerLabelText",oLabelText,true);
this.getAggregation("_label").setText(oLabelText);
},
setFooterLinkText:function(oLinkText){
this.setProperty("footerLinkText",oLinkText,true);
this.getAggregation("_link").setText(oLinkText);
},
setFooterLinkHref:function(oLinkHref){
this.setProperty("footerLinkHref",oLinkHref,true);
this.getAggregation("_link").setHref(oLinkHref);
},
renderer:{
render:function(oRM,oControl){
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_label"));
oRM.renderControl(oControl.getAggregation("_link"));
oRM.write("</div");
}
}
});
var enhancedDialog=new EnhancedDialog();
var btn=new sap.m.Button({
text:"Click Here!",
press: function(){
enhancedDialog.open();
}
});
But I am getting the error
Dialog.js:6 Uncaught TypeError: Cannot read property 'setInitialFocusId' of undefined
when I am clicking the button.
Can someone point out what I am doing wrong?
And how to change the existing renderer behavior to show text in the footer?
This is what I want to make:
The error you are seeing is because you have overwritten the init() method and not called the overwritten init() of Dialog. So the internal popup and other stuff does not get initialized. You have to call the base.init() this way:
init:function(){
sap.m.Dialog.prototype.init.apply(this,arguments);
this.getAggregation("_label", new sap.m.Label({text:"Check"}));
this.getAggregation("_link",new sap.m.Link({text:"Link"}));
},
However you will need to copy most of the DialogRenderers code to get a fully functional dialog.
Alternatively you could use the unmodified DialogRender and overwrite the Dialog._createToolbarButtons() method to add your Label and Link to the beginning:
_createToolbarButtons:function () {
Dialog.prototype._createToolbarButtons.apply(this,arguments);
var toolbar = this._getToolbar();
var toolbarContent = toolbar.getContent();
toolbar.removeAllContent();
toolbar.addContent(this.getAggregation("_label"));
toolbar.addContent(this.getAggregation("_link"));
// insertContent is not implemented correctly...
toolbarContent.forEach(function(control){toolbar.addContent(control)});
},
renderer:DialogRenderer
Full example on Plunker.
[...] show some text and link in the footer along with buttons.
Having a customizable Dialog footer is now supported since UI5 1.110. Simply define sap.m.Toolbar in the new <footer> aggregation of your sap.m.Dialog. For example:
<Dialog xmlns="sap.m" title="Title" initialFocus="okButton">
<!-- ... -->
<footer> <!-- Since UI5 1.110: -->
<Toolbar>
<Text text="Some text!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
Sample demo:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], async (XMLView) => {
"use strict";
const control = await XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
height="100%"
>
<App autoFocus="false">
<dependents>
<Dialog id="myDialog"
class="sapUiResponsiveContentPadding sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer"
initialFocus="okButton"
title="Title"
draggable="true"
resizable="true"
>
<Text text="Content ..." />
<footer>
<Toolbar>
<Text text="Some text in the footer!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
</dependents>
</App>
</mvc:View>`,
afterRendering: function () {
this.byId("myDialog").open();
}
});
control.placeAt("content");
})
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I have the following list, but it is not reacting to any of the events that I'm using.
In the method onSelectionChange i have breakpoints and is updating the label, but it is for some reason not reaching this. The onSearch method is working fine.
I'm using the sapui5
<mvc:View
height="100%"
controllerName="Tasks.CompletedTasks.view.CompletedTasks"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<SearchField
liveChange="onSearch"
width="100%" />
<Label id="label" text="test">
</Label>
<List
id="idList"
items="{/results}"
select="onSelectionChange"
>
<items>
<StandardListItem
title="{TaskTitle}"
description="{InstanceID}"
icon="sap-icon://task"
iconDensityAware="false"
iconInset="false"
/>
</items>
</List>
Code:
jQuery.sap.require("jquery.sap.resources");
jQuery.sap.require("sap.ui.model.Filter");
jQuery.sap.require("sap.ui.model.FilterOperator");
jQuery.sap.require("Tasks.CompletedTasks.util.ModelBuilder");
sap.ui.controller("Tasks.CompletedTasks.view.CompletedTasks", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf cscompletedtasks.CompletedTasks
*/
onInit: function() {
//this.getView().bindElement("/results");
},
onSelectionChange : function (oEvt) {
var oList = oEvt.getSource();
var oLabel = this.getView().byId("label");
oLabel.setText("event");
},
onSearch : function (oEvt) {
// add filter for search
var aFilters = [];
var sQuery = oEvt.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("TaskTitle", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
// update list binding
var list = this.getView().byId("idList");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");
}
});
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script id="sap-ui-bootstrap"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"Tasks.CompletedTasks" : "./" }'>
</script>
<script>
new sap.ui.core.ComponentContainer( {
name : "Tasks.CompletedTasks"
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
The select event work if you set the mode of selection on the list.
<List
id="idList"
items="{/results}"
select="onSelectionChange",
mode="" //Type of mode you required SingleSelect,MultiSelect, Delete default it is None.
>
<items>
<StandardListItem
title="{TaskTitle}"
description="{InstanceID}"
icon="sap-icon://task"
iconDensityAware="false"
iconInset="false"
/>
</items>
</List>
refer this link for more information
Please slot this at the top of the function handling the onSelectionChange event:
jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['INFO']);
jQuery.sap.log.info("*** my onSelectionChange has triggered");
i.e.:
onSelectionChange : function (oEvt) {
jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['INFO']);
jQuery.sap.log.info("*** my onSelectionChange has triggered");
var oList = oEvt.getSource();
Then check the console of your browser and filter to find the output of this message. (Just in case the event is triggering and your consequent code doesn't do anything. (if you have set the LogLevel elsewhere please ignore)
I have an XML view which I am using to display an IconTabBar. On the user selecting one of these "IconTab's" I would like to trigger a method in the controller js file.
I have the following code for one of the IconTab definitions.
<IconTabFilter text="Data" icon="sap-icon://documents" press="onData">
<content press="onData" id="data">
<cmn:Tree nodes="{/aRoot}">
<cmn:TreeNode text="{#name} TagNameHere?"></cmn:TreeNode>
</cmn:Tree>
</content>
</IconTabFilter>
I was assuming the press="onData" would allow me to trigger a method on the controller file. It does not.
Does anyone know if this can be done and if so how?
Thanks
Martin
You can use the select(oControlEvent) event of the parent IconTabBar by switching the logic according to the key value of IconTabFilter
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:VerticalLayout>
<IconTabBar select="onSelectChanged">
<items>
<IconTabFilter key="1" text="Test1">
<Text text="Test1 " />
</IconTabFilter>
<IconTabFilter key="2" text="Test2">
<Text text="Test2 " />
</IconTabFilter>
</items>
</IconTabBar>
</l:VerticalLayout>
</mvc:View>
</script>
<script>
sap.ui.controller("test.controller", {
onSelectChanged: function(oEvent) {
var key =oEvent.getParameters().key;
if(key=='1') {
alert("Click Test1");
}
else if(key == '2')
{
alert("Click Test2")
};
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
</script>
<boy class="sapUiBody" id="content" />