Beginner
Develop an SAPUI5 App for a Portal Site (Cloud Foundry)
June 26, 2020
Created by
August 4, 2019
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
If you are using your own account and not a trial account, then do the following:
- Set up your Cloud Foundry environment for development by following the instructions in the tutorial: Prepare the SAP Cloud Platform Cloud Foundry Environment for Developement (non-trial account)
- Since we’ll be using SAP Web IDE for development in your production account, you should access SAP Web IDE on SAP Cloud Platform on the Neo environment.
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.
Step 1: Launch SAP Web IDE
Select SAP Web IDE from your trial environment.
Step 2: Create an MTA project with an SAPUI5 module
Step 3: 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
Filespanel, expand theFioriDemofolder. Under thewebappfolder, click themanifest.jsonfile and open it.
-
Switch to Descriptor Editor view and leave all the default values in the Settings tab as is.
-
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.
Now you can add your app to a launchpad module. We will do this in the next tutorial.