sap.m.SplitApp demo application in SAPUI5

15
6037

Hello everyone, In this SAPUI5 tutorial we will see how to create a Split App or Master-Detail SAPUI5 application in SAP.

[adsenseyu2]

Prerequisites

  • You should have knowledge on OData services. Click here.
  • You should have implemented the first part of the SAP UI5 split app demo application.

Step-by-Step Procedure

In our first part of the Split App (or) Master-detail SAPUI5 application we have built the master page, now we will built the detail page and when we select any item in the master page list we  need to display the details of product category in the detail page.

1. Double click on the “DetailView.view.js” to design the detail page to display products which belongs to a category. Copy and paste the below code in the detail view.

var oTable = new sap.m.Table("idPrdList", {		
		inset : true,
		headerText : "List of Products",
		headerDesign : sap.m.ListHeaderDesign.Standard, 
		mode : sap.m.ListMode.None, 		
		includeItemInSelection : false, 		
		});

// Table Column Headers		
var col1 = new sap.m.Column("col1",{header: new sap.m.Label({text:"Product ID"})});
oTable.addColumn(col1); 
		
var col2 = new sap.m.Column("col2",{header: new sap.m.Label({text:"Description"})});
oTable.addColumn(col2); 
		
var col3 = new sap.m.Column("col3",{header: new sap.m.Label({text:"Price"})});
oTable.addColumn(col3);
	
// Table Column Items
var colItems = new sap.m.ColumnListItem("colItems",{type:"Active"});
		
var txtNAME = new sap.m.Text("txtNAME",{text:"{ProductID}"});
colItems.addCell(txtNAME); 
		
var txtNAME2 = new sap.m.Text("txtNAME2",{text:"{ProductName}"});
colItems.addCell(txtNAME2); 
		
var txtNAME3 = new sap.m.Text("txtNAME3",{text:"{UnitPrice}"});
colItems.addCell(txtNAME3); 

oTable.bindAggregation("items","/value",colItems);
		
return new sap.m.Page({
		showNavButton : true,
           	title: "Products Page",
		content: [oTable],
		});

 

What we have done in the previous step

  • Created a table with three columns using sap.m.Table and sap.m.ColumnListItem.
  • Bind the aggregation to the table.
  • Created a Page which contains the above created table.

2. Go back to Master View and add the “itemPress” event to the list by adding the below code.

olistCatgery =  new sap.m.List("idHdr", {			
			inset : true,
			itemPress : function(oEvent) {  //Item Press Event
			 oController.onSelect(oEvent); }
		});

3. Go to Master View controller and implement the method “onSelect”.

// To get the selected Category ID
var oItemSelect = oEvent.getParameter("listItem");
var Context = oItemSelect.getBindingContext();
var CatID = Context.getProperty("CategoryID");
	
// Get the products for the select Category ID
var sUrl = "http://services.odata.org/Northwind/Northwind.svc/Categories(" + CatID + ")/Products?$format=json";
var omodel = new sap.ui.model.json.JSONModel(sUrl);
sap.ui.getCore().byId("idPrdList").setModel(omodel);

What we have done in the above step.

  • Get the Category ID for the selected category.
  • We created a JSON model and pass the url of the OData service to get the list the product and then set the model to the list by calling setModel(  ) method.
  • Set the Model of the table in the detail view

4. We have successfully created all the views/pages required. Save all the views and double click on the index.html and right click → Run As → Web App Preview.

Master-Detail App in SAPUI5
Master-Detail App in SAPUI5

You can also hit the execute button in the toolbar

SAPUI5 Web App Preview
SAPUI5 Web App Preview

5. You should see the output like below

SAPUI5 Split App Output-1
SAPUI5 Split App Output-1

6. Now select any category from the list and you should see the list of products for that selected category in the detail view.

SAPUI5 Split App Output-2
SAPUI5 Split App Output-2

You can also see the video below

 

Congrats, you have successfully created Master-Detail App/Split App in SAPUI5.

Please stay tuned to us for more SAPUI5 tutorials.Please feel free to comment and let us know your feedback. You feedback will keep us alive. 🙂

like-128

  • Amol Gupta

    Hi,

    I am getting the following exceptions on trying to run the given tutorial-
    Uncaught TypeError: oController.handlePress is not a function

    Can you help me with it ?

    • AdminSAPLearners

      Hi Amol,

      Can you please check whether you implemented the event handler method in the Master view controller.
      You can connect to us through skype using saplearners.hub if you want so.

      Thanks,
      Admin

      • Srinivas Brahmasani

        Hi Admin

        I’m getting below exception when we clicked on the Product
        Uncaught TypeError: Cannot read property ‘getBindingContext’ of undefined

        Below is the code for the method onSelect which is implemented in master view.controller

        onSelect: function(oEvent){

        var oItemSelect = oEvent.getParameter(“listitem”);

        console.log(oItemSelect);

        var context = oItemSelect.getBindingContext();

        var catID = context.getProperty(“CategoryID”);

        var surl = “http://services.odata.org/northwind/northwind.svc/Categories(” + catID + “)/Products?$format=json”;

        var omodel = new sap.ui.mpdel.json.JSONModel(surl);

        sap.gui.getCore().byId(“idPrdList”).setModel(omodel);

        }

        Could you please help me on this???

    • Subha

      One of the best yet simple tutorial of split app!!

      But following should be added:-

      implement this in controller of master
      handlePress : function(oEvent) {

      }

      Also in detail view bind {ProductID}, {ProductName} and {UnitPrice} instead of {Name}, {Description} and {Price}

      • AdminSAPLearners

        Hi Subha,

        Thanks for your kind feedback. Code was adjusted accordingly.

        Thanks,
        Admin

  • Gaurav Kumar

    Getting error with getBindingContext() in masterViewController

    • AdminSAPLearners

      Hi Gaurav,

      Step-3 Line-3.. Where you able get the reference for the ItemSelected.

      Thanks,
      Admin

  • Gaurav Kumar

    yes i have but binding is not working

  • Gaurav Kumar

    could you please share a piece of code for the same so that i can verify

    • AdminSAPLearners

      Hi Gaurav,

      Code is available. Please go through steps one-by-one.
      If you still can not be able to figure it out.We are available in skype – saplearners.hub

      Thanks,
      Admin

  • Gaurav Kumar

    hi

    i want to get a selected data as of your application but i am getting the whole data.

    var oItemSelect = oEvent.getParameter(“listItem”).getBindingContext();
    var oContext = oItemSelect.getProperty(“EmpID”);
    var oModel = new sap.ui.model.json.JSONModel(“Model/employee_detail.json” + oContext);
    sap.ui.getCore().byId(“EmpDetail”).setModel(oModel);

    above is the code which i am using to set model.

    the error is in 3rd line. can you please help me how can i get the selected data.

    in you code you have used the CATID to get the selected data.
    i want to get data from my own json file through the value EmpID.

    thanks in advance

    Gaurav

  • Bianca Chambugong

    Hi,
    The details view comes up blank even after I have added the code till the end. When i click on each item, it still shows : “No Data”

    • AdminSAPLearners

      In Step-3, please place a break-point and check whether you have data in the model.
      You can also call/chat with us in skype – saplearners.hub

      Thanks,
      Admin

  • Meryam

    Hello ,

    it didnt work for me when i click on the items but nothing shows;

    even in the program he never execute that

    olistCatgery = new sap.m.List(“idHdr”, {
    inset : true,
    itemPress : function(oEvent){
    console.log(“‘i pressed an item”), //Msg never shown in the console !!
    oController.onSelect(oEvent) },

    });

    when i try updateFinished : function(oEvent) INSTEAD OF itemPress : function(oEvent){

    it prints the Msg in console

    its like it didnt understand the “itemPress” but i have no ErrorMessage !!

    hope that u get my problem , if any one can help

    Thank you

  • Kritakshy

    Hey,

    Its working properly.

    Thanx to post such a nice example.

    Can u post any example to display map in detail field and master item click show location detail on map.