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

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
本站为个人博客网站,全由我个人维护,我从事SAP开发13年,其它ERP开发7年,基本都是零售行业。本站记录工作学习的过程, 有SAP相关询问专、兼职工作可随时联系我。 有网站相关的问题可直接在文章下方留言,或者联系我。 邮件:yan252@163.com给我。 QQ:415402519

留下一个回复

你的email不会被公开。