Skip to content

Instantly share code, notes, and snippets.

@gbvaibhav

gbvaibhav/gist:9394f0d55bf576c45dfbe954b966c45b

Created March 16, 2017 11:15
Show Gist options
  • Save gbvaibhav/9394f0d55bf576c45dfbe954b966c45b to your computer and use it in GitHub Desktop.
Save gbvaibhav/9394f0d55bf576c45dfbe954b966c45b to your computer and use it in GitHub Desktop.
Download ZIP
sap ui5 list with panel in items for custom format of data in list https://jsbin.com/qidojey
Raw
gistfile1.txt
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 List example with local JSON model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAPUI5 Example gbvaibhav</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
var data = {results:[
{
name:"gb",
fied:"test",
num:"123"
},
{
name:"rach",
fied:"tester",
num:"456"
}
]};
var list = new sap.m.List();
list.bindAggregation("items",{
path:"/results",
template:new sap.m.CustomListItem({
content:[
new sap.m.Panel({
headerText:"{name}",
content:[
new sap.ui.layout.form.SimpleForm({
content:[new sap.m.Label({text:"Field"}),
new sap.m.Text({text:"{fied}"}),
new sap.m.Label({text:"Number"}),
new sap.m.Text({text:"{num}"})]
})
]
})
]
})
});
var model = new sap.ui.model.json.JSONModel(data);
list.setModel(model);
var page = new sap.m.Page({
title:"SAPUI5 List Example",
content:[
list
]
});
// finally place the App into the UI
var app = new sap.m.App({
pages: [page]
}).placeAt("content");
</script>
</head>
<body>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment