Split App in sapui5



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 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!!!
Oldest

6 comments

Click here for comments
Unknown
admin
13 July 2016 at 12:05 ×

in what folder is contained de expense.json?

Reply
avatar
Sanjo Thomas
admin
13 July 2016 at 22:06 ×

All the json files are maintained in the model folder.

Reply
avatar
Unknown
admin
24 October 2016 at 04:34 ×

hello 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...

Reply
avatar
Sanjo Thomas
admin
24 October 2016 at 04:43 ×

Refer to this blog: http://www.sapui5tutors.com/2016/01/routing-in-split-application.html

Reply
avatar
Unknown
admin
17 October 2018 at 05:00 ×

The video and the content of the blog doesn't match, both are different apps and different way of implementation.

Reply
avatar
Maria
admin
30 January 2019 at 06:03 ×

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

Reply
avatar