Click here and follow my SAP UI5/FIORI snippets and information Page
text:"First Name", })}),
This is controller table binding with json,below I have shown application structure,view part,controller part, json part and index part of the application.Go through it and please let me know in case of any issue/doubt.
Application Structure
View Part
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="view.s1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Table with Json" id="pageid">
<content>
</content>
</Page>
</core:View>
Controller Part
sap.ui.controller("view.s1", {
onInit:function()
{
var json=new sap.ui.model.json.JSONModel("model/data.json");
this.getView().setModel(json);
var table=new sap.m.Table
({
columns:[ new sap.m.Column({
header: new sap.m.Text({text:"First Name", })}),
new sap.m.Column({
header: new sap.m.Text({
text:"Last Name", }) }),
new sap.m.Column({
header: new sap.m.Text({
text:"Email-id", }) }),
new sap.m.Column({
header: new sap.m.Text({
text:"Mobile No.", })
}),
new sap.m.Column({
header: new sap.m.Text({
text:"Address",
})
}),] });
var cElls=sap.m.ColumnListItem({
cells:[
new sap.m.Text({
text:"{fname}"
}), new sap.m.Text({
text:"{lname}"
}), new sap.m.Text({
text:"{email}"
}), new sap.m.Text({
text:"{mob}"
}), new sap.m.Text({
text:"{address}"
})
] });
var page_ID=this.getView().byId("pageid");
page_ID.addContent(table);
table.bindAggregation("items","/Records",cElls);
OR
table.bindItems("/Records",cElls);
}
});
data.json
{ "Records":[{
"fname":"vikas",
"lname":"singh",
"email":"vikas@gmail.com",
"mob":1111111111,
"address":"Patana"
},
{
"fname":"raj",
"lname":"singh",
"email":"raj@gmail.com",
"mob":2222222222,
"address":"Ranchi"
},
{
"fname":"Rahul",
"lname":"singh",
"email":"rahul@gmail.com",
"mob":3333333333,
"address":"Mumbai"
},
{
"fname":"Nikhil",
"lname":"singh",
"email":"nikhil@gmail.com",
"mob":4444444444,
"address":"Aurangabad"
}
]}
index.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 src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idview1"});
var page = sap.ui.view({id:"idview1", viewName:"view.s1",type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Result
No comments:
Post a Comment