首页 > SAP > SAPUI5 > sap.m.SplitApp demo application in SAPUI5
2019
08-27

sap.m.SplitApp demo application in SAPUI5

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

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

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

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.

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

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

You can also hit the execute button in the toolbar

sap.m.SplitApp demo application in SAPUI5 - 第2张  | 优通SAP
SAPUI5 Web App Preview

5. You should see the output like below

sap.m.SplitApp demo application in SAPUI5 - 第3张  | 优通SAP
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.

sap.m.SplitApp demo application in SAPUI5 - 第4张  | 优通SAP
SAPUI5 Split App Output-2

You can also see the video below

最后编辑:
作者:yangsen
有需要可在文章留言或者邮件yan252@163.com给我。

留下一个回复

你的email不会被公开。

nineteen − 13 =