In my previous blog How to make your OData entities work with the Fiori Overview Page and Cards leveraging the new SAP Web IDE annotation modeler I described the basic steps to create a Fiori Overview Page with a table Card based on an Internet OData service, focusing on how to create the annotation file with new SAP Web IDE annotation modeler and how to adjust the manifst.json within Web IDE respectively.

In this blog I will focus on the differences when creating a Fiori Overview Page leveraging an on premise OData service and deploy the result to an on premise Fiori Launchpad. This is similar do deploying a Fiori Application to an on Premise Fiori Lauchpad, as I have described it in my previous blog Verify your Gateway (Frontend) Installation in 45 Minutes, but I will highlight the differences.

To start with, you need a HANA Cloud Connector to make your on premise OData service available in the Web IDE during design time and to deploy the Fiori Overview Page to your on premise Fiori Launch Pad:

SAP HANA Cloud Connector.png

To consume the on premise service and to deploy the Fiori Overview Page to the ABAP repository, access to the following resources including all sub-paths needs to be allowed:

  • /sap/bc/adt
  • /sap/bc/ui5_ui5
  • /sap/opu/odata

In the HANA cloud platform, we need the following corresponding destinations are needed:

UIAddOn.png

UI5.png

OData.png

For this blog I am using the Reference SFlight Data Provider. If not already done so, this service would have to be enabled:

Activate and Maintain Services.png

With these preparations, a Fiori Overview Page can be build based on this service:

Data Connection.png

As before, a local skeleton annotation file needs to be provided:

<edmx:Edmx Version=”1.0″ xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx

                xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:sap=”http://www.sap.com/Protocols/SAPData“>

                <edmx:DataServices m:DataServiceVersion=”2.0″>

                                <Schema Namespace=”RMTSAMPLEFLIGHT_2” sap:schema-version=”1″ xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

                                </Schema>

                </edmx:DataServices>

</edmx:Edmx>

Annotation Selection.png

And also some template customization:

Template Customization.png

With that we are done and our project got created. Next the path to the annotation file to localService/RMTSAMPLEFLIGHT_2 has to be correctrd to where it is in fact stored:

/wp-content/uploads/2016/02/manifest_891885.png

This enables us to use the Annotation Modeler to annotate the TravelAgencyCollection to use with a LineItem containing the DataFields Name, City and Country:

Annotation Structure.png

Next a Table Card can be added based on the same service:

Configure Datasource.png

Finally we select the TravelAgencyCollection as the Entity Set and provide the Header Elements:

New Card.png

When we now run the Fiori Overview Page as a SAP Fiori Content on Sandbox, we see our card populated with travel agent information from the on premise OData service:

SAP Fiori Content on Sandbox.png

Now we go further and deploy this Fiori Overview Page to our on premise Fiori Launchpad:

Deploy a New Application.png

We chose the destination we created before:

Deployment Options.png

And deploy it as a new application:

Deploy a New Application.png

As a result we find our Fiori Overview Page as a BSP Application in the ABAP Development Workbench. Especially important is the path /sap/bc/ui5_ui5/sap/zflight/webapp:

Web Application Builder.png

First we create a Launchpad (Role):

Overview of Launchpads.png

And then a New Application within the Launchpad. Especially important are

  • Application Parameter URL: /sap/bc/ui5_ui5/sap/zflight/webapp
  • Additional Information: SAPUI5.Component=zflight

As you have seen them in the ABAP Development Workbench:

Change Launchpad.png

Finally we need a corresponding Semantic Object:

Semantic Object.png

With this, a new Catalog can be created:

Create Catalog.png

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

Tile.png

And a Target Mapping for which again the Semantic Object is important but also the Launchpad (Role) and Application Alias that we configured before:

Target Mapping.png

To conclude the Fiori Launchpad configuration we create a Group to represent our user role:

Create Group.png

And assign the Tile from your Catalog to it:

Add Tile to Group.png

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

Change Roles.png

With this we got on premise access our Fiori Overview Page:

Assistant.png

With its Card rendering like a charm:

Travel Management.png

To make this Fiori Overview Page work on premise, you would have to be at least on SAPUI5 version 1.32.0 as shown in the manifest.json:

minUI5Version.png

This blog content has been developed on a NetWeaver 7.50 system, with SAPUI5 version 1.32.12:

SAP UI5 development toolkit for HTML5.png

To report this post you need to login first.

5 Comments

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

  1. Matt Harding

    Thanks Frank. This was very straightforward to follow (with much less magic annotations work being done than in previous guides). The only issue I came across was using the annotation modeller with the file contents you provided (it complained it wasn’t a valid annotation file in WebIDE, so I just created a new annotation file using WebIDE and removed the one during the new project wizard and it worked a treat.  I also used the FLP target mapping as opposed to the lpd_cust version of calling the OVP which I feel is a bit nicer.

    Cheers,

    Matt

    (0) 
  2. Karthik S

    Hi Frank,

    Very useful. I have created one OVP page in webide. Could you guide me how to register this application in my Fiori Launhpad. I am using sap hana trial account.

    Thanks and regards,

    Karthik.S

    (0) 
  3. Somnath Mitra

    Hi Frank,

    I tried to create an OVP in exact similar way as you showed in the blog with same RMTSAMPLEFLIGHT_2 service. But not able to display data. It is showing Cannot Load Card. Kindly suggest what is missing. I think with annotation file I am having some issues.

    Regards,

    Somnath Mitra

    (0) 

Leave a Reply