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:

/wp-content/uploads/2015/05/project_709934.jpg

Chose the SAP Fiori Master Detail Application:

/wp-content/uploads/2015/05/template_709935.jpg

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:

/wp-content/uploads/2015/05/zcatalog_709936.jpg

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:

/wp-content/uploads/2015/05/catalog_709937.jpg

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

/wp-content/uploads/2015/05/master_709938.jpg

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

/wp-content/uploads/2015/05/details_709939.jpg

Leave the Navigation Section empty and Finish the wizard.

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

/wp-content/uploads/2015/05/fiori_709940.jpg

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:

/wp-content/uploads/2015/05/preview_709941.jpg

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

/wp-content/uploads/2015/05/deploy_709942.jpg

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

/wp-content/uploads/2015/05/options_709943.jpg

Deploy it as

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

/wp-content/uploads/2015/05/tmp_709944.jpg

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:

/wp-content/uploads/2015/05/server_709945.jpg

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

/wp-content/uploads/2015/05/se80_709946.jpg

And as a node in the Internet Communication Framework:

/wp-content/uploads/2015/05/sicf_709947.jpg

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:

/wp-content/uploads/2015/05/ldp_709948.jpg

Create a New Application within your Launchpad (Role). Especially important are:

  • Application Parameter URL: /sap/bc/ui5_ui5/sap/zcatalog

As you have seen it in the Internet Communication Framework and Advanced Parameter

  • Additional Information: SAPUI5.Component=zcatalog

As you have seen it in the ABAP Development Workbench:

/wp-content/uploads/2015/05/application_709949.jpg

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

/wp-content/uploads/2015/05/semobj_709950.jpg

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):

/wp-content/uploads/2015/05/developer_709951.jpg

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

/wp-content/uploads/2015/05/tile_709952.jpg

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:

/wp-content/uploads/2015/05/mapping_709953.jpg

Then you create a Group to represent your user role:

/wp-content/uploads/2015/05/group_709954.jpg

And assign the Tile from your Catalog to it:

/wp-content/uploads/2015/05/odata_709955.jpg

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

/wp-content/uploads/2015/05/role_709956.jpg

With this you now see your Tile:

/wp-content/uploads/2015/05/launchpad_709957.jpg

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

/wp-content/uploads/2015/05/app_709958.jpg

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:

/wp-content/uploads/2015/05/components_709959.jpg

/wp-content/uploads/2015/05/sapui5_710920.jpg

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Venkatesh Machineni

    Hi Frank,

    Nice article.

    I am planning to take SAP gateway server access from providers for extending SAP fiori apps for my practice, so how can I check whether all the SAP standard fiori apps are available or not? and also how to check whether all the components are installed or not?

    Please guide me.

    (0) 

Leave a Reply