Develop an SAPUI5 App for a Portal Site (Cloud Foundry)

2019-11-07

Beginner

45 min.

Create an app module in SAP Web IDE and set up its navigation so that it can be used in a Portal site.

You will learn

How to create an SAPUI5 app module in SAP Web IDE
How to configure the navigation properties of this app so that it can be launched from the launchpad module that you will create later.

Prerequisites

You have a development space set up in the Cloud Foundry environment so that you can make use of the services you need to develop your app module.
You have launched SAP Web IDE from your trial subaccount, (or from your own subaccount that you want to use)

When developing apps in the Cloud Foundry environment, you create a Multi-Target Application (MTA) file in SAP Web IDE. Each SAP Fiori app is developed as an SAPUI5 module of the MTA.

In this tutorial, you will create an MTA with one SAPUI5 module as well as a launchpad module.

IMPORTANT: To develop your own assets on SAP Cloud Platform on the Cloud Foundry environment, you must first configure it.

A trial account is configured by default for development.

If you are working on a non-trial account, and have not set up your Cloud Foundry environment for development, follow the instructions in the tutorial Prepare the SAP Cloud Platform Cloud Foundry Environment for Development (non-trial account).

In addition, we will be using SAP Web IDE for development. As the SAP Web IDE service is available on SAP Cloud Platform on the Neo environment, you should have an SAP Cloud Platform Neo subaccount.

Step 1: Create an MTA project with an SAPUI5 module

To do this step, follow this tutorial.

Done

Log on to answer question

Step 2: Configure navigation for the UI module

You’ve created your MTA project with an SAPUI5 app module called FioriDemo in step 1 and now you’ll configure its navigation target. These navigation settings will enable your FioriDemo app to be launched from the launchpad module that you’ll create in the next tutorial.

Configure the navigation settings as follows:

In the Development area of SAP Web IDE, in the Files panel, expand the FioriDemo folder. Under the webapp folder, click the manifest.json file and open it.
Leave all the default values in the Settings tab as is, and click the Navigation tab to configure the target navigation settings.
Create the navigation intent by clicking +. Then enter the following intent values:
- Semantic Object: data
- Action: display
Click the intent and then enter the information for the Inbound Tile (that will be displayed on the launchpad module) as follows:
- Title: Candidates
- Subtitle: Engineering
- Icon: sap-icon://activities
Click File > Save.