Technical Articles
Dynamic Data Binding for sap.ui.layout.Grid
Hi Readers,
First of all, thank you very much for reading this blog. In this blog I am going to write about the dynamic data binding in sap.ui.layout.grid.
In SAP UI5 Explored we will able to see that data binding is present but that is not in dynamic way of binding, means there multiple ObjectlistItems have been used to display the tile based grid. So, no of tiles will be equal to the no of ObjectListItem used in the code. I am attaching the present code in SAP UI5 Explored in the bellow section.
<l:Grid defaultSpan="L4 M6 S6" class="sapUiSmallMarginTop">
<l:content>
<ObjectListItem id="productitem-small-0"
title="{Name}"
intro="{Category}"
icon="{path: 'Category',formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon'}" >
</ObjectListItem>
<ObjectListItem id="productitem-small-1"
title="{Name}"
intro="{Category}"
icon="{path: 'Category',formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon'}" >
</ObjectListItem>
</l:content>
</l:Grid>But this approach will not be applicable in such test case where list of data is coming from service (e.g: Approval List) and that need to displayed in Grid Tiles.
So, is the solution, I am taking one page in my view
<Page showHeader="true" title="Grid Layout Dynamic Data Binding" id="myPage">
</Page>Now In controller I am creating the js view and will add into the content o
f the page. Now I am creating mock Data and that is going to display on the screen.
In JS view, i had taken one grid and added one custom template with the grid. Here I am attaching the source code. I have used few CSS for better look n feel.
ar oPage=this.getView().byId("myPage");
oPage.removeAllContent();
var data = {
ApprovalList : [
{
"name" : "Kathy J",
"Grade" : "E6",
"Designation" : "Client Representative",
"reason" : "Relocation",
"subReason" : "Career Change",
"RelDate" : "5 March, 2016",
"ResDate" : "16 March, 2016",
"Remarks" : "Location Problem.",
"Image" : "images/thumb_Kathy.jpg"
},
{
"name" : "S.P.Shivaprakashm",
"Grade" : "E2",
"Designation" : "Senior Executive - TA",
"reason" : "Schedules and Hours",
"subReason" : "Career Change",
"RelDate" : "25 March, 2016",
"ResDate" : "6 March, 2016",
"Remarks" : "Timings Problem.",
"Image" : "images/1.jpg"
},
{
"name" : "Amy Jackson",
"Grade" : "E2",
"Designation" : "Senior Executive - TA",
"reason" : "Difficult Work Environment",
"subReason" : "Career Change",
"RelDate" : "15 April, 2016",
"ResDate" : "10 March, 2016",
"Remarks" : "Health Issue.",
"Image" : "images/thumb_Amy.jpg"
}
]
};
var oApproveModel = new JSONModel(data);
oThat.getView().setModel(oApproveModel,"ApproveModel");
var oGridTiles1 = new sap.ui.layout.Grid({
hSpacing : 1,
vSpacing : 1,
defaultSpan : "L4 M12 S12"
}).bindAggregation("content", {
path : "ApproveModel>/ApprovalList",
template : new sap.ui.layout.VerticalLayout({
width :"95%",
content : [
new sap.m.CustomListItem({
type :"Active",
press :function(oEvent){
var sPath = oEvent.getSource() .getParent() .getBindingContext( "ApproveModel") .getPath();
var sSelectedIndex = sPath .substring(sPath .lastIndexOf("/") + 1);
oThat.handleApprovalFlow(sSelectedIndex);
},
content : [
new sap.m.HBox({
items: [
new sap.m.Image({
densityAware: false,
width : "60px",
height : "60px",
src : "{ApproveModel>Image}"
}).addStyleClass("sapUiLargeMarginTop"),
new sap.m.VBox({
width:"140%",
items:[
new sap.m.Label({
text : "{ApproveModel>name}"
}).addStyleClass("LabelCss sapUiMediumMarginTop"),
new sap.m.Label({
text : "Grade: {ApproveModel>Grade}"
}),
new sap.m.Label({
text : "Designation: {ApproveModel>Designation}"
}),
new sap.m.Label({
text : "Reason: {ApproveModel>reason}"
}),
new sap.m.Label({
text : "Sub Reason: {ApproveModel>subReason}"
}),
new sap.m.Label({
text : "Relieving Date: {ApproveModel>RelDate}"
}),
new sap.m.Label({
text : "Resign Date: {ApproveModel>ResDate}"
}),
new sap.m.Label({
text : "Remarks: {ApproveModel>Remarks}"
}),
new sap.m.Bar({
contentLeft: [
new sap.m.Button({text : "Retain",
type : "Emphasized",
width : "auto",
press : function(oEvent){
var sPath = oEvent.getSource() .getParent() .getBindingContext( "ApproveModel") .getPath();
var sSelectedIndex = sPath .substring(sPath .lastIndexOf("/") + 1);
oThat.fnRetainEmployee(sSelectedIndex);
}}).addStyleClass("sapUiSizeCompact"),
new sap.m.Button({text : "Hold",
type : "Reject",
width : "auto",
press : function(oEvent){
}}).addStyleClass("sapUiSizeCompact"),
new sap.m.Button({text : "Approve",
type : "Accept",
width : "auto",
press : function(oEvent){
var sPath = oEvent.getSource() .getParent() .getBindingContext( "ApproveModel") .getPath();
var sSelectedIndex = sPath .substring(sPath .lastIndexOf("/") + 1);
oThat.fnApproveEmployee(sSelectedIndex);
}}).addStyleClass("sapUiSizeCompact")
],
}).addStyleClass("sapUiSmallMarginBottom BarClass sapUiSmallMarginEnd ApprovalBar")
]
}).addStyleClass("sapUiSmallMarginBegin sapUiSmallMarginTopBottom")
]
})
]
}).addStyleClass("sapMLIBCustomCSS sapUiTinyMarginBottom")
]
})
});
oPage.addContent(oGridTiles1);
Now the output will be like the bellow attached screen.
Thanking You,
Regards,
Rahul Patra
Hi Rahul,
I’m wondering. Can you add tables into the grid you are using?
So, How to list them in a grid, such as the following. Thank you very much for your help
ApprovalList : [
{ “id” :1
“name” : “Kathy J”,
“Grade” : “E6”, },
ApprovalList1 [ { “id” :1 “material” : “Book”, },
{ “id” :1 “material” : “Pencil”, },
{ “id” :1 “material” : “notebook”, },
]
]