Verify your Gateway (Frontend) Installation in 45 Minutes

Inspired by a question from Richard Harnwell: “Is there a Fiori application that does not require a Backend service to verify my Gateway configuration?” I am explaining in this blog how you can deploy a custom Fiori application to the Frontend SAPUI5 ABAP Repository, that visualizes the information available from a Frontend service, and that therefore runs without the need of any Backend configuration  while still verifying your Gateway setup.

For this I am going to deploy the Fiori application from my blog: Compose SAP HANA Cloud Platform Fiori application accessing on premise OData service leveraging SAP River Rapid Development Environment in 30 minutes to the Gateway server rather than to the HANA Cloud Platform and integrate it into the Fiori Launchpad. Since I wrote this blog nearly one year ago, SAP have renamed their HANA Cloud Platform extension tool to SAP Web IDE and amended the catalogue of available templates, but the concept how to build a master detail Fiori application remained the same. Therefore I will only briefly recapitulate the steps to create the app here.

From your Local folder chose File > New > Project from Template:

Chose the SAP Fiori Master Detail Application:

Give it a Project Name. I chose zcataog this time because this time I will deploy the app to the Gateway server and therefore adhere to ABAP naming conventions:

Select the CATALOGSERVICE which is available on every Gateway server since it is the service that this screen uses to display all available OData services and does not require a Backend configuration or even connection:

Leave the Project Namespace empty and fill in the Master Selection as follows:

• Title: Services Catalog
• OData Collection: ServiceCollection
• Item Title: Title
• Numeric Attribute: TechnicalServiceVersion
• Units Attribute: Author

Next fill in the Details Section as follows:

Title: Service Details

Detail Text: Description

Status Attribute: Description

Attribute 1: TechnicalServiceName

Attribute 2: ID

Attribute 3: UpdatedDate

Leave the Navigation Section empty and Finish the wizard.

To test our Fiori application, select it and chose Run > Run as > SAP Fiori Component:

As a result you will see our Fiori app displaying all the OData services on the Frontend service, including the CATALOGSERVICE with all its details we build the app on in the first place:

Now instead of deploying our app to the SAP HANA Cloud Platform we deploy it to the SAPUI5 ABAP Repository on our Gateway server:

For this we chose the system we want our app to be deployed to and chose to Deploy a new application:

Deploy it as

• Name: zcatalog
• Description: Services Catalog
• Package: $TMP

Click Finish to deploy your application to the SAPUI5 ABAP Repository. Be aware that you need a developer key for this. A progress indicator in the upper right hand corner of Web IDE informs you on the progress. Once deployed, you can test your deployment by running the app on the ABAP server:

You now also find your app as a BSP Application in ABAP Development Workbench:

And as a node in the Internet Communication Framework:

The only remaining tasks now are registering your app in the Fiori Launchpad and giving your user authorization to see and launch it. There are many good blogs for this, and I especially like this one Understanding launchpad object relationship with screenshots by Masa Sekihara, so that I will only briefly recapitulate the steps here.

Create a New Launchpad (Role) for your application:

Then you create a Semantic Object that will be needed when you create the Tile and Target Mapping for your application:

Next you create a Catalog for the user role that will be using your application. In this case the Catalog will be for developers (searching for the available OData services):

Next you create a Tile within your Catalog. Important here is the Semantic Object, you created before:

Next you create a Target Mapping for which again the Semantic Object is important but also the Launchpad (Role) and Application Alias you configured before:

Then you create a Group to represent your user role:

And assign the Tile from your Catalog to it:

Finally you create a Single Role, assign your Fiori Launchpad Catalog and Group to it and assign it to your user:

With this you now see your Tile:

And when you click on it, your app launches within the Launchpad:

Now you have proven that your Gateway (Frontend) server has been setup correctly and that any subsequent issues with deploying Fiori applications have to be checked on the Backend server.

If your app does not launch, your Gateway server configuration is not finished so that I would advise to fix this first before attempting connecting to Backend services. One likely cause for this could be that your Frontend components are not up-to-data. In this blog I have been working with the following versions: