Here, I will show you how to create a simple split app.
Split app basically is a an app divided into two segments (pages), one is the
Master Page and the other is the Detail Page.
Here we will create a New Project
Select Application Project from SAPUI5 Application
Development. Now Name the Project ,here I named it as SplitApp.
Click on Next, but unselect the Initial view.
Now we will create two more views, i.e. Master view and page view
Name it as MasterPage, similarly create another view and
name it as DetailPage.
Now in the Index.html file, in the style tag, we will start
coding.
sap.ui.localResources(“”);
var app = new
sap.m.SplitApp({initialPage:"idMasterPage1"});
var mpage =
sap.ui.view({id:"idMasterPage1", viewName:"MasterPage",
type:sap.ui.core.mvc.ViewType.JS});
var dpage =
sap.ui.view({id:"idDetailPage1", viewName:"DetailPage",
type:sap.ui.core.mvc.ViewType.JS});
app.addMasterPage(mpage);
app.addDetailPage(dpage);
app.placeAt("content");
·
Here sap.ui.localResources(“”) make
the location of a component's resources known to SAPUI5.
Here this is empty, since we haven’t created
any folder within the WebContent.
·
We have created a variable named app, which is a
splitapp, we have mentioned the initial page’s id.
·
Mpage is a masterPage view, in which the id,
viewname and type of the view is mentioned, similarly the detail page is also
created.
·
We have added both Master and Detail Page to the
app, which is a splitapp. At the end we have added the app to the content.
Now name the tilte in
masterPage.view.js as Master Page, similarly replace the title in
DetailPage.view.js as Detail Page.
Output
will be somewhat like this:
Now
we will show some content in the Master and the Detail Page. For that, we will
create a list in the master page, and a simple form in the detail page. Here we will make use of JSON for binding
data in the list.
We
are trying to bind data on the form in the DetailPage on the click of list item
in MasterPage. For that, we will write code in the press function of the list.
Creating a list
MasterPage.view.js
var list = new sap.m.List("list",{
items:{
path:"/Product", //this is the
key value in the JSON
template: new
sap.m.ObjectListItem({
// we are using objectlistitem
as the template for //the list
title:"{Product Name}",
number:"{Price}",
intro:"{Plant}",
icon:"{image}",
type : "Active",
attributes:
[
{
text:"{Product
ID}"
},
{
text:"{value}"
}
],
firstStatus:
{
text:"{Status}"
},
press: function(evt)
{
debugger
var icon = evt.oSource.mProperties.icon;
sap.ui.getCore().byId("i").setSrc(icon);
var title =
evt.oSource.mProperties.title;
sap.ui.getCore().byId("i1").setValue(title);
var intro =
evt.oSource.mProperties.intro;
sap.ui.getCore().byId("i2").setValue(intro);
var number =
evt.oSource.mProperties.number;
sap.ui.getCore().byId("i3").setValue(number);
var type =
evt.oSource.mProperties.type;
sap.ui.getCore().byId("i4").setValue(type);
} }) }});
For binding the json onto the list, we will define json
model in the init method of MasterPage’s
controller.
MasterPage.controller.js
onInit: function() {
var model1 = new
sap.ui.model.json.JSONModel();
model1.loadData("model/expense.json");
sap.ui.getCore().setModel(model1);
},
Expense.json
{
"Product": [
{ "image":
"model/bag1.gif",
"Product ID": "123",
"Price": "321",
"Product Name": "Bag",
"value":"10",
"Plant":"bags limited",
"Status":"available"
},
{"image": "model/watch1.gif",
"Product ID": "124",
"Price": "322",
"Product Name":"watch",
"value":"7",
"Plant":"watch limited",
"Status":"unavailable"
},
{"image": "model/pen.png",
"Product ID": "125",
"Price": "323",
"Product Name": "Pen",
"value":"50",
"Plant":"pen limited",
"Status":"available"
},
{"image": "model/laptop.png",
"Product ID": "126",
"Price": "324",
"Product Name": "Laptop",
"value":"15",
"Plant":"laptop
limited",
"Status":"available"
},
{
"image": "model/pencil.png",
"Product ID": "127",
"Price": "325",
"Product Name": "pencil",
"value":"10",
"Plant":"pencil limited",
"Status":"unavailable"
},
{
"image": "model/bulb.png",
"Product ID": "128",
"Price": "326",
"Product Name": "bulb",
"value":"10",
"Plant":"bulb limited",
"Status":"available"
}
]
}
You may use
any image for your own purpose.
DetailPage.view.js
We will
create a simple form, and as the list
item is pressed, the data on the list item should be populated onto the form.
var form = new
sap.ui.layout.form.SimpleForm("form1",{
maxContainerCols:
2,
layout:"ResponsiveGridLayout",
content:[
new sap.m.Image("i",{
width
: "10%",
height
: "10%"
}),
new sap.m.Label("l1",{
text:"Product
Name"
}),
new sap.m.Input("i1",{
maxLength:20,
width:"30%",
editable:false,
}),
new sap.m.Label("l2",{
text:"Plant
Name"
}),
new sap.m.Input("i2",{
maxLength:20,
width:"30%",
}),
new sap.m.Label("l3",{
text:"Price"
}),
new sap.m.Input("i3",{
maxLength:20,
width:"30%",
}),
new sap.m.Label("l4",{
text:"Status"
}),
new sap.m.Input("i4",{
maxLength:20,
width:"30%",
})
]
})
Output would be like this:
So, now when we will click the particular list item, we will
be able to populate form on the detailpage.
Hope, everything was simple and clear.
That’s all folks!!!
ConversionConversion EmoticonEmoticon