Show TOC

UI Extensibility WorkflowLocate this document in the navigation structure

Use

When the back-end logic and content required for the app extension exists in the Gateway layer, but is not exposed in the app’s UI, then you follow this workflow.

Note

This workflow describes the process for extending the UI by using the Eclipse integrated developer environment (IDE). You can also use SAP Web IDE.

To learn about using SAP Web IDE to extend applications that reside in the SAPUI5 ABAP repository, see https://help.hana.ondemand.com/SAP_RDE/frameset.htm?97d34a108dda4662be04f3953944cff3.html.

Prerequisites

Before beginning, you should complete the following steps:

  • Install ABAP Development Tools for SAP NetWeaver

    Refer to https://tools.hana.ondemand.com/#abap for setting up ABAP Team Provider

  • Install the SAPUI5 Application Development Tool for Eclipse

    Refer to SAP Note 1747308 Information published on SAP site for the Installation of UI development toolkit for HTML5 (SAPUI5)

  • Ensure that all SAPUI5 plugins are version 1.16.2 or higher

    Version numbers appear on the Installed Software tab. See Start of the navigation path Help Next navigation step About Eclipse Next navigation step Installation Next navigation step Details End of the navigation path.

  • Ensure the local Tomcat web server is configured to work with SAPUI5 Eclipse

    • First you may have to download Tomcat from http://tomcat.apache.org/download-70.cgiInformation published on non-SAP site.

    • In the Java EE perspective (the default perspective) of Eclipse, click the Servers tab. If there are no servers available, choose the new server wizard link. Alternatively, right-click and select Start of the navigation path New Next navigation step Server End of the navigation path.

    • Choose Start of the navigation path Apache Next navigation step Tomcat 7.0 End of the navigation path.

    • Add a new server runtime by specifying the folder where you unzipped the Tomcat files.

    • When you finish the wizard you should see a Tomcat v7.0 server in the Servers view.

    • Finally, open the configuration overview by double-clicking the Tomcat v7.0 server in the Servers view. There you need to select the server option, Serve modules without publishing.

Use
Note

In case the ABAP system where the UI application is deployed is based on NW 7.31 or higher, then you can use the ABAP Repository Team Provider. For releases lower than NW 7.31, you can use SAPUI5 Application Development plug-in of Eclipse and use the upload/download mechanisms described in the link http://help.sap.com/saphelp_uiaddon10/helpdata/en/91/f346786f4d1014b6dd926db0e91070/content.htm?frameset=/en/a5/60bd6ed4654fd1b338df065d331872/frameset.htm

Process

These are the steps in the process for extending the UI of SAP Fiori applications.

Task

Definition

1

Download the SAP-delivered standard application from the ABAP system

2

Test the SAP-delivered standard application in the local Launchpad sandbox environment

3

Create a custom application that extends an SAP-delivered standard application

4

Check the SAP-enabled extension options

5

Define the extensions metadata

6

Test the custom application on the local Launchpad sandbox environment

7

Upload the custom application to the ABAP system

8

Smoke-test the custom application on the ABAP system

9

Configure the custom application on Fiori Launchpad

10

Test the custom application on Fiori Launchpad