Developing SAP Fiori and SAPUI5 Applications with SAP Web IDE and Running Them in the SAP Fiori Launchpad on Portal
This blog is designed for application developers/administrators who want to run their SAP Cloud applications in the SAP Fiori Launchpad on Portal (FLP on EP), thereby taking advantage of the portal’s role-based content management with the latest SAP cloud technology.
If you’re new to FLP, you can start off by reading this blog which explains what it is and how to run it on Portal.
We’ll start with some prerequisites, then we’ll create a simple application, and lastly, we’ll consume it in Portal using our ABAP back-end server and running it on FLP.
- You are using Portal version 7.31 SP16 and higher
- You set the Fiori Framework Page SAPUI5 library to “ABAP”:
- You have access to SAP HANA Cloud Platform cockpit.
- You are familiar with developing Fiori applications and/or SAPUI5 applications.
- In the event that your back-end system is not connected to the internet, you need to install the SAP HANA Cloud connector. This enables your Web IDE to communicate with your back-end system to deploy or import applications you are developing.
For more information, see this short video of a step-by-step process on installing and defining the cloud connector:
Now, let’s begin…
- Go to your Web IDE.
- Create a Fiori application:
- Create a new project.
- Select a Fiori template
- Select an ODATA service to be used by the application, for example, the ODATA service below shows catalogs in the GM6 ABAP:
- Fill in the template customization in the Master section and Detail section
- Now the application is built, and you can run it from Web IDE.
3. Deploy application to the back-end system as shown below:
- Choose Deploy to SAPUI5 ABAP Repository and complete the steps in the wizard.
4. Open FLP Designer.
5. Create a catalog and a tile:
- Choose the “+” icon.
- Enter a title and an ID.
- Add a target mapping (this points to the actual application to be launched from the tile):
- Choose “Target Mapping”.
- Choose “Create Target Mapping”.
- Fill in the following entries:
- Add the a tile:
- This is an example of a simple application, so we’ll select a static application launcher
- Add a title, information, icon, and so on.
- Fill in the following details; select an icon for the tile, semantic object for navigation (note: this is a target mapping that is mapped to the application we have created) and confirm.
6. Go to your Portal and log on as an Administrator.
7. Consume the application in the portal:
- Under “Content Administration”, locate the Fiori Role and open it for editing.
- Choose “Add Remote Content”.
- Select the destination GM6 and the catalog name where the application was deployed in the previous step, select it, and choose “Add”:
- Choose Finish (or choose “Next” if you want to preview the whole procedure).
8. Log on to FLP on Portal (as explained in the blog linked in the introduction) to run the application:
- Choose “Tile Catalog”:
The application you developed should appear under the “EP_DEMO_CATALOG” catalog.
- Add the application you developed to the user by clicking the “+” icon.
- Now you see the application in FLP.
Click the tile to run it.
Now you can use the portal even more as a one stop shop for your end users and enrich their user experience while keeping your content management as is, create state-of-the-art applications with a great UI and powerful and familiar back-end systems.