In this post I will show how easy it is to extend the Fiori UI5 Boilerplate (UI5BP) with an additional view, which is then automatically added to the navigation of the Fiori app. I will use the SAP Web IDE to do this. I assume you already imported the UI5BP from GitHub into the workspace of your Web IDE (of not, this is described in step 1 of the post Deploy UI5 Boilerplate on Fiori Launchpad of HANA Cloud Platform ).

So what are we putting as content on this additional view? Inspired by the nice post Using the SAP HCP User API in SAP Web IDE

from Jamie Cawley, let’s display the user information of the currently logged in user. The result will look like this (in preview of SAP Web IDE):

Extend Fiori UI5 Boilerplate with additional View

There are basically only two steps necessary to add a new view to the UI5BP. First is create the View with the new component wizard of the SAP Web IDE.

Step 1: Create new View with SAP Web IDE wizard

Select the folder view of the UI5BP and open the context menu with a right click. Select New -> Component:

The wizard is started and you can now provided the details of the new component (do not get confused about the word component here, it is not a ui5 component here but a new part of the app). First we confirm the location of the new view, it should be in the view folder of the app:

Press Next and now select SAPUI5 View as we want to add a new view to our application:

Press Next and we define the details of the view. Choose a View Type from the drop down. As namespace use ui5bp (this is important as the UI5BP uses this namespace. You can change this, but then you need to change the namespace for all parts of the application so that is can run in the Fiori Launchpad). As last input define the name of the view.

Press Next and confirm to generate the new view, which result in two new files: the controller file UserInfo.controller.js and the view itself UserInfo.view.js.

Step 2: Add new entry in menu.json

The menu.json file in folder model of the app is the basis for the generation of entries in the LeftMenu. In the Fiori Edition of the UI5BP also a corresponding routing entry is made. So we need to add here a new JSON Object for the new view:

And that’s all, now there is a new entry in the Menu List in the master page of the App and you can navigate to the new detail view “UserInfo” .

Note: If you choose for example a XML view instead of JavaScript view, you need to specify additionally the viewType in the JSON object of the new entry in the menu.json (see About entry as example), for a XML view it would be: “viewType”: “XML”

Display User Information of HANA Cloud Platform (HCP)

So far the new view “UserInfo” is empty. We will now add the user information of the current logged in user (of HCP) to the content of the view. First we need to add the corresponding HCP service (see documentation of SAP help “Accessing the User API” for more details) to the neo-app.json (this is the Application Descriptor File of a HTML5 App on the HCP) to get access to the user information:

Then we can add a model “currentuser” to the new view in the controller, which retrieves the user information from the service:

and finally display the data of the model on the view:

Source Code on GitHub

The complete code can be found in a dedicated branch “featuresHCP” of the Fiori UI5BP on GitHub as this will only work for Fiori App running on HANA Cloud Platform (HCP).

And for SAP Gateway / On-Premise Scenario?

The described way to display the user information works on an SAP cloud environment only. So what to do on the classical Fiori environment with SAP Gateway? There is also a service available which provides the user information, but the data structure is a bit different (instead of name it is id and instead of displayName it is fullName)!

The URL to the service is: /sap/bc/ui2/start_up