Add Page to UI5 SplitApp Boilerplate

ui5In previous blog posts we created the basis to work/develop with the UI5 Boilerplate in different environments (OpenUI5, SAPUI5, SAP or non-SAP centric Development Environment) and the app structure concept was explained in the SCN blog post UI5 Boilerplate explained (Part 1). It is now time to extend the UI5 Boilerplate:

How to add an additional Page to UI5 SplitApp Boilerplate?

Step 1: Create new View and Controller for the new Page

In this step we assume you work with Eclipse and the SAPUI5 Toolkit Plugin. If you work without the SAPUI5 Toolkit you have to create the files yourself.

addPage1

Select the view folder and right-click to open the contect menu: New -> Other

addPage2

In the wizard select the View under SAPUI5 Application Development and press Next

addPage3

Enter the name of the view (here myPage1). We stay here with the JavaScript View. You could also select XMLView. Press Finish. As result two new files are generated. The JavaScript view file myPage1.view.js and the corresponding controller file myPage1.controller.js. 

addPage4

Step 2: Add new View to SplitApp

The View returns a Page (sap.m.Page) and we need to add this now to the SplitApp. For that we have to modify the App.view.js file. We add the following code line:

this.app.addDetailPage(sap.ui.jsview("myPage1", "view.myPage1"));

addPage5

Last Step is now the add the Page to Menu

Step 3: Add new Page to Menu

As the Menu is already dynamic, we only have to add a entry in the menu.json file:

        "title": "My New Page",
        "icon": "sap-icon://list",
        "targetPage": "myPage1",
        "description": "My New Page"
    }, {

addPage6

Result with new Page

A new entry is shown in the Master Page and Navigation is working out of the box

addPage7

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.