I made an example for this question with the following logic:
A dropdown (sap.m.Select) has 2 options:
But whenever a checkbox above it is checked it only has one option left:
In that case I don't need any of this anymore:
So I found out, that the property editable="false" does exactly what I want in this case:
...but I don't know how to set editable dynamically depending on the current number of options.
Here's the full example:
https://jsfiddle.net/mb0h8v1s/1/
Since you are using a JSONModel you can say something like
editable="{= ${options>/arr1}.length > 1 }"
This is called Expression Binding and lets you use basic JavaScript within your binding.`
This assumes that you always use the same list and change the content of your list once the CheckBox is triggered and not rebind the list.
View:
<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>
<script id="myView" type="ui5/xmlview">
<mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:layout="sap.ui.commons.layout">
<Shell>
<Page id="mainPage" showHeader="false">
<FlexBox id="flex" justifyContent="Center" alignItems="Center" direction="Column">
<CheckBox
text="Only 1 option"
selected="{path:'options>/cbx_val'}"
/>
</FlexBox>
</Page>
</Shell>
</mvc:View>
</script>
<body class="sapUiBody">
<div id="content"></div>
</body>
JavaScript:
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.controller("MyController", {
onInit: function() {
console.log("INITIALIZING!");
var arr1 = [{
id: "1",
name: "1st option"
}];
var arr2 = arr1.concat([{
id: "2",
name: "2nd option"
}]);
var oModel = new sap.ui.model.json.JSONModel({
cbx_val: false,
arr1: arr1,
arr2: arr2
});
this.getView().setModel(oModel, "options");
var selectVal = new sap.m.Select({
id: "selectField",
selectedKey: '',
editable: true,
enabled: "{= !${options>/cbx_val}}"
});
var selectLbl = new sap.m.Label({
text: "Select:",
labelFor: selectVal,
});
var selectLogicListener = new sap.m.Text({
visible: false,
text: {
parts: ['options>/cbx_val'],
formatter: function(bVal) {
var result = "options>/arr2";
if (bVal) {
result = "options>/arr1";
}
console.log(result);
selectVal.bindItems({
path: result,
template: new sap.ui.core.Item({
key: "{options>id}",
text: "{options>name}"
})
});
}
}
});
this.byId("flex").addItem(selectLbl);
this.byId("flex").addItem(selectVal);
this.byId("flex").addItem(selectLogicListener);
}
});
sap.ui.xmlview({
viewContent: jQuery("#myView").html()
}).placeAt("content");
});
Related
I have a filter bar with multiple filter items and I need to get the selected/typed values for each filter item in the onSearch event. I've tried but unable to figure out a way of getting all filter data for all the filter items.
<fb:FilterBar reset="onReset"
search="onSearchFilterbar"
showRestoreButton="true"
showClearButton="true"
filterBarExpanded="false"
id="userFilterBar">
<fb:filterItems>
<fb:FilterItem name="A" label="User">
<fb:control>
<Select id="slcUser" forceSelection="false"
items="{ path: 'sysusers>/Users' , sorter: { path: 'Name' } }" >
<core:Item key="{sysusers>Name}" text="{sysusers>Name}"/>
</Select>
</fb:control>
</fb:FilterItem>
<fb:FilterItem name="B" label="Location">
<fb:control>
<Select id="slcLocation" forceSelection="false"
items="{ path: 'location>/Locations' , sorter: { path: 'Name' } }">
<core:Item key="{location>Name}" text="{location>Name}"/>
</Select>
</fb:control>
</fb:FilterItem>
</fb:filterItems>
</fb:FilterBar>
onsearch:function(oEvent){
oEvent.getSource().getFilterItems()[0];
// But cannot find a way to get the selected data
}
there are a few ways to do this. IMO, the best way is to use model. that's adopting the MVC approach. here is a working example, http://jsbin.com/nudewew/edit?html,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:fb="sap.ui.comp.filterbar"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<fb:FilterBar reset="onReset"
search="onSearchFilterbar"
showRestoreButton="true"
showClearButton="true"
filterBarExpanded="false"
id="userFilterBar">
<fb:filterItems>
<fb:FilterItem name="A" label="User">
<fb:control>
<Select id="slcUser" forceSelection="false" selectedKey="{selection>/user}"
items="{ path: 'sysusers>/Users' , sorter: { path: 'Name' } }" >
<core:Item key="{sysusers>Name}" text="{sysusers>Name}"/>
</Select>
</fb:control>
</fb:FilterItem>
<fb:FilterItem name="B" label="Location">
<fb:control>
<Select id="slcLocation" forceSelection="false" selectedKey="{selection>/location}"
items="{ path: 'location>/Locations' , sorter: { path: 'Name' } }">
<core:Item key="{location>Name}" text="{location>Name}"/>
</Select>
</fb:control>
</fb:FilterItem>
</fb:filterItems>
</fb:FilterBar>
</mvc:View>
</script>
<script>
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() {
var oView = this.getView();
oView.setModel(new JSONModel({
user: "",
location: ""
}), "selection");
oView.setModel(new JSONModel({
Users: [
{Name: "johnDoe"},
{Name: "maryAnn"}
]
}), "sysusers");
oView.setModel(new JSONModel({
Locations: [
{Name: "London"},
{Name: "Paris"}
]
}), "location");
},
onSearchFilterbar: function(oEvent) {
console.log(this.getView().getModel("selection").getData());
}
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
The value of items is on Parameters of de Event.
oEvent.getParameter('0').selectionSet
It's a array with each Control of filterbar you can use:
oEvent.getParameter('0').selectionSet[0].getValue()
There are a few ways to do this.. but with your current code, I would suggest the following:
The short answer to your question:
The FilterBar has a method determineControlByFilterItem you can use to get the control for the filter item, which you can then use to get the selected value.
var oFilterItem = oEvent.getSource().getFilterItems()[0];
var oControl = oFilterBar.determineControlByFilterItem(oFilterItem);
var sSelectedValue = oControl.getSelectedKey();
Be cautious, though, when hard coding array indexes like this. For a more complete solution to your problem, I've suggested a full approach below.
The long answer if you want to use the filter bar to filter a result set:
First, make sure the names of your filter items align to the name of the property you want to filter by. So in your case, your filter items are named "A" and "B"... I suggest you change these to match the property name you want to filter by. Assuming that the names of the properties you want to filter by are "User" and "Location":
<FilterItem name="User" label="User">
...
<FilterItem name="Location" label="Location">
...
Then in your controller, you can use those names to build an array of sap.ui.model.Filter objects that you can use to filter your result set.
onSearch: function(oEvent) {
//get the filter bar from the event
var oFilterBar = oEvent.getSource();
//get the filter items from the filter bar
var aFilterItems = oFilterBar.getFilterItems();
//map the array of FilterItems to a new array of sap.ui.model.Filter objects
var aFilters = aFilterItems.map(function(oFilterItem) {
//get the filter item name (which is now the same as the filter property name)
var sFilterName = oFilterItem.getName();
//use the filter bar to get the control for the filter item
var oControl = oFilterBar.determineControlByFilterItem(oFilterItem);
//use the control to get the selected value (selected key)
var sSelectedValue = oControl.getSelectedKey();
//use the filter item/property name and the selected value to create a new sap.ui.model.Filter
var oFilter = new sap.ui.model.Filter(sFilterName, "EQ", sSelectedValue);
//return the Filter object to the new array
return oFilter
});
//use the array of sap.ui.model.Filter objects to filter your table
//if you're using a responsive table (sap.m.Table), use:
this.getView().byId("yourTableId").getBinding("items").filter(aFilters);
//or if you're using a grid table (sap.ui.table.Table), use:
this.getView().byId("yourTableId").getBinding("rows").filter(aFilters);
}
The reason I suggest this approach as opposed to others, is because it scales nicely. Say, for example, that you want to add a third Select control to filter by, you simply need to add a new <FilterItem name="NewFilterProperty" label="New Filter Property">. Because we didn't hard code anything into the event handler, it will still work without any additional changes.
The only thing to lookout for is if you use different types of controls in your FilterBar. So, for example, if you added an <Input> instead of a <Select>, you'll need to adjust the logic of your event handler to handle this.
I usually do something like this:
onSearch: function(oEvent) {
var oFilterBar = oEvent.getSource();
var aFilterItems = oFilterBar.getFilterItems();
var aFilters = aFilterItems.map(function(oFilterItem) {
var sFilterName = oFilterItem.getName();
var oControl = oFilterBar.determineControlByFilterItem(oFilterItem);
var sValue;
if (oControl.getMetadata().getName() === "sap.m.Select") {
sValue = oControl.getSelectedKey();
} else if (oControl.getMetadata().getName() === "sap.m.Input") {
sValue = oControl.getValue();
}
var oFilter = new sap.ui.model.Filter(sFilterName, "EQ", sValue);
return oFilter;
});
}
In my XML view, I have a Table, in that Table I have Input field at a particular column, and I have a function for liveChange event of that Input field. Code is like below:
<Table ...>
<columns> ... </columns>
<items>
<ColumnListItem>
<cells>
......
<Input type ="Number" value="{...}" liveChange="qtyChanged"/>
</cells>
</ColumnListItem>
</items>
</Table>
In qtyChanged(), I need to know the row number on which user is editing. How to achieve it?
You can achieve it using indexOfItem() of sap.m.Table
qtyChanged: function(oEvent){
var oRow = oEvent.getSource().getParent();//Get Row
var oTable = oRow.getParent();// Get Table
var iRowIndex = oTable.indexOfItem(oRow);//Get Row index
}
Note: If the response data is more then table row limit then scroll will appear, then the row index will not work properly.
you can get the binding context and then the path. you're also able to get the object itself like this (working example http://jsbin.com/hutuvo/edit?html,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
controllerName="sap.example.Controller"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%">
<Table id="idProductsTable" items="{ path: 'suppliers>/suppliers'}">
<columns>
<Column><Text text="Supplier" /></Column>
<Column><Text text="Quantity" /></Column>
</columns>
<items>
<ColumnListItem>
<cells><Text text="{suppliers>SupplierName}" /></cells>
<cells><Input type ="Number" value="{suppliers>Quantity}" liveChange="qtyChanged" /></cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"],
function(Controller, JSONModel) {
"use strict";
var oPageController = Controller.extend("sap.example.Controller", {
onInit: function() {
var oView = this.getView();
oView.setModel(new JSONModel({
suppliers: [
{
SupplierName: "Apple",
Product: "iPhone",
Quantity: 0
}, {
SupplierName: "Samsung",
Product: "Galaxy",
Quantity: 0
}
]
}), "suppliers");
},
qtyChanged: function(oEvent) {
var oContext = oEvent.getSource().getBindingContext("suppliers");
var oPath = oContext.getPath();
var index = parseInt(oPath.substring(oPath.lastIndexOf("/") + 1), 10);
console.log(index);
console.log(oContext.getObject());
}
});
return oPageController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I have a component in SAPUI5 where I need to listen to changes in the binding (Binding.change event). At the moment I'm adding a listener to the Binding in modelContextChange like this:
function onModelContextChange(oEvent){
var oSelect = oEvent.getSource();
var binding = oSelect.getBinding("items");
if(binding){
binding.attachChange(onDataChange, oSelect);
}
}
However this causes all kinds of weird problems, because modelContextChange could be fired multiple times. It would be better to to this in the XML view. I've tried code like this, but it doesn't work.
<Select items="{ path: 'project>/data/', change:'onDataChange' templateShareable: false">
<core:Item key="{project>Id}" text="{project>Parameter}"/>
</Select>
Any recommendations how to do this?
I just came across the problem, too. I solved it in that way:
<Select items="{
path: 'project>/data',
events: {
change: '.onDataChange'
},
templateShareable: false
}">
You can pass an events object to the binding and use the available bindings (e.g. v2.ODataListBinding). Note that you have to use a dot before your function name (.onDataChange). In your controller you can add the function:
onDataChange: function(oEvent) {
// Your implementation...
},
If I remember well from the JS Views, I think it is like this:
<Select items="{ path: 'project>/data/', events: {change:'onDataChange'}, templateShareable: false}">
This is for listening to the Model "change" events.
If you want to listen to the "change" event in the Select control, this is when the user selects a different value in the dropdown, it is like this:
<Select items="{ path: 'project>/data/', templateShareable: false}" change="onDataChange">
EDIT:
Using "modelContextChange" event.
<Select items="{ path: 'project>/data/', templateShareable: false}" modelContextChange="onDataChange">
here is an example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<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-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<style type="text/css">
.sapMObjLTitle {
cursor: pointer;
}
</style>
<!-- XML-based view definition -->
<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">
<Select change="onDataChange" items="{ path: 'project>/data', templateShareable: false}">
<core:Item key="{project>Id}" text="{project>Parameter}"/>
</Select>
</mvc:View>
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
var ListController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
var oView = this.getView();
oView.setModel(new JSONModel({
data: [{
Id: "1",
Parameter: "One"
}, {
Id: "2",
Parameter: "Two"
}]
}), "project");
},
onDataChange: function() {
alert("changed")
}
});
return ListController;
});
// Instantiate the View and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
https://jsbin.com/zufurav/edit?html,js,output
Note: the change attribute in your XML is incorrect
I managed to get the binding change event with this set to the element that I needed by attaching a modelContextChange to the element and handling attaching the change event to the binding in there. Here's the code from the view controller:
modelContextChange: function(oEvent) {
var oElement = oEvent.getSource();
var binding = oElement.getBinding("items");
if (binding) {
//Binding change event could already be attached, detach it first, if it's there
binding.detachChange(this.onBindingChange, oSelect);
binding.attachChange(this.onBindingChange, oSelect);
// Beacause I used this inside a sap.ui.table.Treetable,
// in some cases binding changes occur without the binding change event firing.
// Manually fire the binding change just in case
// YMMV
binding.refresh(true);
}
},
onBindingChange: function() {
//The code that needs to run at binding change
//"this" is set to the correct element
//I specifically needed to add one element in front of other items in a sap.m.Select
var items = this.removeAllItems();
this.addItem(new sap.ui.core.Item({
key: 0,
text: "< Inherit >"
}));
items.forEach(function(item) {
this.addItem(item);
}, this);
}
I've been developing a UI5 app that uses a model to store notifications. I want to display these notifications inside a MessagePopover that can be triggered using the footer.
The data binding works perfectly. I can see that all the properties are set and match the data inside the model. But the link in the details page is not showing up.
When I use a static Link (i.e. a static link to google.com) that is not using data binding, the link is rendered.
Does anyone of you came across the same problem and has a solution for it?
Here is my code:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(BaseController) {
return BaseController.extend("test.Test", {
onShowNotificationPopover: function(oEvent){
if (!this._notificationPopover) {
var oMessageTemplate = new sap.m.MessageItem({
type : '{data>type}',
title : '{data>title}',
subtitle : "{data>subtitle}",
description : '{data>description}',
markupDescription : "{data>markupDescription}",
groupName : "{data>groupName}"
});
var oLink = new sap.m.Link({
text : "{data>link/text}",
href : "{data>link/url}",
target : "_blank"
});
/* Working with static */
// oLink = new sap.m.Link({text: "Google", href: "http://google.com", target: "_blank"})
oMessageTemplate.setLink(oLink);
var oPopover = new sap.m.MessagePopover();
oPopover.bindAggregation("items",{
template: oMessageTemplate,
path: "data>/notifications"
});
this._notificationPopover = oPopover;
this.getView().addDependent(this._notificationPopover);
}
this._notificationPopover.toggle(oEvent.getSource());
}
});
});
The view contains the following:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.f" xmlns="sap.m" controllerName="test.Test">
<f:DynamicPage showFooter="true">
<f:footer>
<OverflowToolbar>
<Button icon="sap-icon://message-popup" type="Emphasized"
press="onShowNotificationPopover" />
</OverflowToolbar>
</f:footer>
</f:DynamicPage>
</mvc:View>
And the index.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.f"
data-sap-ui-theme="sap_belize"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"test": "."
}'
>
</script>
<script>
sap.ui.getCore().attachInit(function() {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
notifications: [{
type: "Error",
title: "Title1",
subtitle: "Subtitle",
description: "This is a description and below you should see a link",
markupDescription: false,
groupName: "notification",
link: {
text: "Click here",
url: "http://www.google.com"
}
}]
});
var oView = sap.ui.xmlview("test.Test");
oView.setModel(oModel, "data");
oView.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Example: Popover with dynamic link
Example: Popover with static link
I found a solution for my problem: the event itemPress of MessagePopover.
The event handler inside the controller:
onNotificationItemSelect: function(oEvent){
var oItem = oEvent.getParameter("item"), oBindingContext = oItem.getBindingContext("data");
var oData = oBindingContext.getModel().getProperty(oBindingContext.getPath());
oItem.getLink().setText(oData.link.text);
oItem.getLink().setHref(oData.link.url);
}
And you have to register it:
var oPopover = new sap.m.MessagePopover({
itemSelect: this.onNotificationItemSelect
});
Additional Information
When you display the content of the popover using
console.log(oPopover.getItems()[0].getLink())
the correct properties are shown. see here
But when you search the DOM you can see that the link is copied and does not contain the required binding. see here
Having two distinct values such as QtValidF and DocDate, I want to be able to display DocDate only if QtValidF comes null. How could I condition this?
<Text text="{
path: 'QtValidF',
formatter:'.formatoFecha'
}"/>
I'm trying this but doesn't work.
<Text text="{= ${QtValidF} != 'null' ? {
path: 'DocDate',
formatter: '.formatoFecha'
} : {
path: 'QtValidF',
formatter: '.formatoFecha'
}}"/>
Expression Binding
In general, you can make use of expression binding for a short and simple conditional expression.
<MyControl anyProperty="{= ${myPrimary} || ${mySecondary}}" />
Just like in JS, when the first operand results in one of the falsy values, the second one is taken into account.
Formatter
In case a formatter is preferred, the composite binding syntax can be used:
<MyControl anyProperty="{
parts: [
'myPrimary',
'mySecondary'
],
formatter: '.getThatValue'
}" />
Then in the controller:
getThatValue: function(primaryValue, secondaryValue) {
return primaryValue || secondaryValue;
},
For more information, please take a look at the topics Binding Syntax and Composite Binding.
Here is the inline binding expression:
value='{= ${/QValidF} !== null ? ${/QValidF} : ${/DocDate} }'
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Bernard LeTourneur - UI5 Single Page</title>
<script
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
id='sap-ui-bootstrap'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-bindingSyntax='complex'
data-sap-ui-compatVersion='edge'
data-sap-ui-preload='async'>
</script>
<script id='myXmlView' type='ui5/xmlview'>
<mvc:View
controllerName='MyController'
xmlns='sap.m'
xmlns:core='sap.ui.core'
xmlns:mvc='sap.ui.core.mvc'>
<Input id='inputStatus' enabled='false' value='{= ${/QValidF} !== null ? ${/QValidF} : ${/DocDate} }' />
<Button press="handleDataChange" text='{= ${/QValidF} !== null ? "Set QValidF to Null" : "Set QValidF to something"}' />
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
'use strict';
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function (Controller, JSONModel) {
'use strict';
return Controller.extend('MyController', {
onInit : function () {
var that = this;
var data = {QValidF: "something", DocDate: "2018/06/08"};
var oModel = new JSONModel(data);
this.getView().setModel(oModel);
},
handleDataChange: function(){
var isNull = this.getView().getModel().getProperty("/QValidF");
console.log(isNull);
if (isNull=="something"){
this.getView().getModel().setProperty("/", {QValidF: null, DocDate: "2018/06/08"});
}
else{
this.getView().getModel().setProperty("/", {QValidF: "something", DocDate: "2018/06/08"});
}
}
});
});
sap.ui.xmlview({
viewContent : jQuery('#myXmlView').html()
}).placeAt('content');
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>