Welcome to the ultimate SAP UI5, BTP, Fiori, CAPM, RAP, ABAP blog! Explore comprehensive tutorials, interview questions, and real-world examples to master SAP development. Elevate your skills in creating stunning UI5 apps, harnessing the power of BTP, and building Fiori applications. Unlock the potential of CAPM, RAP, and ABAP, and learn to integrate seamlessly with the enterprise portal. Whether you're a beginner or an experienced developer, this blog is your go-to resource for SAP expertise!
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.
Watch my video for better understanding:
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
anyfolder 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
modelin 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.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
You know after a hard day I decided to have fun and play games of chance I climbed a bunch of sites and only on this I understood what was happening prosperous casino sites now I sit and spend all the time on this site
We need your help to support www.sapui5tutors.com. Please consider disabling your ad blocker while visiting this website so that we can continue to provide this content to you free of charge.
For details on turning off your ad blocker, or to add www.sapui5tutors.com to your whitelist, please read these
instructions
6 comments
Click here for commentsin what folder is contained de expense.json?
ReplyAll the json files are maintained in the model folder.
Replyhello sir i am new in ui 5. i crated a home page . on click on login button i want to move on split app page. how i can do ? please help...
ReplyRefer to this blog: http://www.sapui5tutors.com/2016/01/routing-in-split-application.html
ReplyThe video and the content of the blog doesn't match, both are different apps and different way of implementation.
ReplyYou know after a hard day I decided to have fun and play games of chance I climbed a bunch of sites and only on this I understood what was happening prosperous casino sites now I sit and spend all the time on this site
ReplyConversionConversion EmoticonEmoticon