sap.m.SplitApp demo application in SAPUI5

12
15787

[adsenseyu2]

Hello everyone, In this tutorial we will see how to create a Split App in SAPUI5. Split App control sap.m.SplitApp exists in sap.m library from SAP. When you want to display master and details we can use this to build the UI5 application.

In this UI5 application we are displaying Product Categories in the Master Page and list of products of ta particular category will be displayed in the Detail Page. The output of the application is show in the below figure. Lets get started.

OutputStep-by-Step Procedure

1. Create a new SAPUI5 Application project in Eclipse. By clicking File → New → Project and choose SAPUI5 application development project.

New SAPUI5 Application Project2. Enter the Project Name and choose sap.m Library. Leave “Create an Initial View” check-box selected, as we want an initial view to be created by default. Click on Next.

New Project3. Enter the View name and choose development paradigm as “JavaScript”. Most of the UI5 applications are easy to develop by using JavaScript development paradigm and we also choose the same on our demo application. Click on Finish button for a new SAPUI5 application to be created.

Create n New View4. In the Project Explorer, our new project “demoSplitApp” has been created. If you expand the project and go to WebContent → demosplitapp here you can see a default view and controller got created.

Project Explorer5. Apart from the default view which is Master View ,we need one more view to display list of products, create a new view and name it “DetailView”. To create a new view navigate to New → Other or press Cntrl+N and choose View under the SAPUI5 Application project.

Detail View6. Now two views are ready, go to “index.html” and add the two views using sap.m.SplitApp.You can find the “index.html” under WebContent folder of application project.Copy paste the below code in the index.html.

7. What we have done in the above step is , we have created an instance of Split App control by calling the sap.m.SplitApp. Created instances for both pages and added the one view as master page to the Split App and other as Detail Page.
 [adsenseyu1]
8. Now go to the Master View and add a list in the page, to display all the product categories. Create a list by using the sap.m.List like below.
 olistCatgery =  new sap.m.List("idHdr", {
			includeItemInSelection : true,
			inset : true
		}):

9. As we have created a list, we need to have template of the list to add the data to the list.Create a template like below. Here we are using sap.m.StandardListItem as the template of the list.

 
oTemplate = new sap.m.StandardListItem("idItems", {title : "{CategoryName}",
			   description: "{Description}",
				   type : sap.m.ListType.Navigation,
					  });

10. Add the above create template instance as template to the List by using the below code and bind the data to the list by using “bindAggregation”.

olistCatgery.bindAggregation( "items", { 
			 path : "/value",
			 template: oTemplate
			 
		});

11. Now add the list to the Page content to be displayed in the page by using the below code.

 		return new sap.m.Page({
			title: "Categories",		
			content: [
			olistCatgery
			]
		});

12. By this our Master Page is ready with design, lets run the application and see how it looks like.

OP113. As you can see there is not data in the list so our next step would populating the data in the list.To do so got the Master View controller and write the below code in onInIt(  ) method.

var sUrl = "http://services.odata.org/Northwind/Northwind.svc/Categories";
var omodel = new sap.ui.model.json.JSONModel(sUrl);
sap.ui.getCore().byId("idHdr").setModel(omodel);

14. We created a JSON model and pass the url of the OData service to get the list the product categories and then set the model to the list by calling setModel(  ) method.

15. Now again run the application you should be able to see the data in the list.

OP2

Now our designing of master page is done.In the next tutorial we will design the detail page and add select event to the list to get the list of products of a selected category and display the list on the detail page in a table.

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

  • Vishal Kumar

    Need next part of this tutorial.

  • Madhu Sudhan

    please can you provide in xml view format
    thank you

    • AdminSAPLearners

      Hello Madhu,

      Thanks for your comment. It will be available soon.

      Thanks,
      Admin

  • Vijay Gaggar

    please can you provide in xml view format ???
    thank you..

    • rameez

      Hi Vijay,
      If you are using XML View please create a view named app.view.js and app.controller.js and aggregate the master and detail pages inside.

      You can even create the appview in XML format.This is how your app.view.xml will look like

      In your coponent.js file include your app as root view

      sap.ui.core.UIComponent.extend(“masetData.Component”, {

      metadata : {

      name : “masterDetail”,

      version : “1.0”,

      includes : [],

      dependencies : {

      libs : [“sap.m”, “sap.ui.layout”],

      components : []

      },

      rootView : “masetData.view.App”,

      config : {

      resourceBundle : “i18n/messageBundle.properties”,

      serviceConfig : {

      name: “”,

      serviceUrl: “”

      }

      },

      Regards,
      Rameez

      • AdminSAPLearners

        Thank you Rameez for the reply.

        Thanks,
        Prakash

    • AdminSAPLearners

      Hello Vijay,

      We are in busy creating new tutorials in SAP HANA and ABAP on HANA.
      We will soon create the example

      Thanks,
      Prakash

  • Md Iqbal

    Please correct Step14 its wrong ,you are calling service by wrong way(By passing URL to json)
    1.Either you can use Ajax Call
    2.OData Model.

  • Ayham Tanbari

    Hi
    Thanks a lot for the tutorial
    i have problem
    i deploy an app using split control and i am using XML view
    how can i navigate from master page to another master page and the same idea from detail page to another one with changing the hash code
    my problem: i can not control the page to be in the correct container
    for example : i need to navigate to other master pager inside the master pages container
    please help me && thanks for the helpful website

  • Dorabinia

    hi!