SAP Fiori Application Integration with SAP Enterprise Portal

Background

The purpose of this blog post is to explain and demonstrate how to integrate an SAP Fiori application into SAP Enterprise Portal.

This blog post is for portal developers and administrators who would like to learn about the tasks required to integrate SAP Fiori applications in Portal. In only a few steps you can easily add a SAP Fiori application to Portal.

ℹ This capability is applicable only for a subset of Fiori transactional applications, which are self-contained in nature and do not require contextual services. These are typically e.g. Employee or Manager Self Services. See details in SAP Note #2103156

What’s the Problem?

Actually there are a few problems we need to address:

• Fiori (Wave II and above) applications are called via a URL location fragment. Therefore, a simple form submission is not sufficient here.
• Fiori applications are protected against click-jacking attacks; this prevents them from being rendered in an iFrame.
• Extra parameters need to be forwarded to the application to ensure it runs in standalone mode.

Standard use of the Application Integrator (UI5 iView) is not possible – precisely because of the problems listed above.

The Solution

We have created a new iView template in the portal: SAP Fiori iView. By using this iView, you will be able to call a specific Fiori application running on an ABAP back-end system and run it within the portal framework.

Prerequisites

• Your Enterprise Portal version is:
  • 7.3 EHP 1 SP 13 and above
  • 7.4 SP 8 and above
• Your back-end server has SAP Fiori Launchpad SP 8 or above
• You have made sure that both the portal server and the ABAP server can be reached via the same URL (including the server name). This can be achieved by using a SAP Web Dispatcher.

How to configure a web dispatcher (example)

• A is our ABAP server and its URL is: http://abap.sap.com
• Server B is our portal server and its URL is: http://portal.sap.com

We need to access both servers via the same URL. Therefore, we set up a web dispatcher.

• Server C is our web dispatcher and its URL is:  http://dispatcher.sap.com

So, we configure it such that:

• If you access http://dispatcher.sap.com/irj* -> go to -> http://portal.sap.com/irj*
• If you go to http://dispatcher.sap.com/sap/bc* -> go to -> http://abap.sap.com/sap/bc*
• The client always uses server C (the web dispatcher). When the URL contains /irj/portal it actually accesses server B. When the URL matches the /sap/bc template, it accesses server A.

For the client, it seems as if, both the portal and the Fiori application are on the same server.

So, How to Integrate a Fiori Application into Portal

In this example:

• My web dispatcher is: http://dispatcher.sap.com
• The real portal URL is: http://portal.sap.com
• The real ABAP server URL is http://abap.sap.com

The Fiori app can be accessed directly from: https://abab.sap.com:44336/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=123#Shell-runStandaloneApp?sap-ushell-SAPUI5.Component=cus.crm.opportunity&sap-ushell-url=/sap/bc/ui5_ui5/sap/crm_opprtnty

Since the web dispatcher is already set up it also can be accessed from: http://dispatcher.sap.com/sap/bc/ui5_ui5/ui2/ushell/

shells/abap/FioriLaunchpad.html?sap-client=123#Shell-runStandaloneApp?sap-ushell-SAPUI5.Component=cus.crm.opportunity&sap-ushell-url=/sap/bc/ui5_ui5/sap/crm_opprtnty

Steps

1. Create a system object and give it an alias, such as ‘WEBSIDP’. This system will actually points to on the same URL we are using to access the portal – the web dispatcher.
2. Enter the following mandatory settings for this system object:
   1. SAP Client: 123
   2. ICM Protocol: http
   3. Web AS Host Name: dispatcher.sap.com
   4. Set the system HTTP Security Session to be on. See SAP KBA #1717945 for details.
   5. You can set other properties too according to your needs.
3. Create a Fiori iView.
   1. In Content Administration, create a new iView from template and select SAP Fiori iView.
   2. Go through the wizard, choose a name for your iView, and then click Next.
   3. In the next screen, fill in the details as follows (according to the example):
      • System: WEBSIDP (this is the system alias we defined before)
      • Relative Path for SAP Fiori Application: sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
      • Parameters to Pass on the Location String in the URL: Shell-runStandaloneApp?sap-ushell-SAPUI5.Component=cus.crm.opportunity&sap-ushell-url=/sap/bc/ui5_ui5/sap/crm_opprtnty
        • If you leave this field blank you will simply get the SAP Fiori Launchpad (FLP).
      • SAP Fiori Application Header: You can choose one of the following:
        • No Header – you will not see the FLP header, personalization will be off (disclaimer: supported as of ABAP Add-on SP10)
        • Minimal Header – You will have the FLP header with functions that match embedded mode, personalization will be enabled (supported as of ABAP add-on SP9)
   4. Click Next, then Finish.
   5. Once this is done you can preview the iView. All the properties that you entered with the wizard are still available via the iView property editor under the category ‘Content – Fiori’
   6. Unless you have a custom theme maintained in the portal that is suitable for an SAPUI5 application, set the Hand Over Portal Style Sheet property on the iView to false. The Fiori application will be rendered with the default theme of the application, as it is on the back-end system.

That’s it. You’re done. All you need to do now is add the iView to a Role and assign it to your end users.

Notes

• See SAP Note #2017946 – SAP Fiori application integration with NetWeaver Portal.
• The official SAP documentations are here.
• SAP recommends accessing both Portal and ABAP BE via the same URL. If you wish to do otherwise you will have to modify your FioriLaunchpda.html on the BE server. Please refer to SAP Note #2057847 for detailed information.
• Creating Trust Between Portal and Back-End Systems – see more info here.
• It is recommended to run Fiori iView in the portal content area only in HTML5 (Standards) supported framework page. If your end-users framework page is not supporting standards document mode rendering, and your end-users are using Internet Explorer, set the Fiori iView to launch in a new headerless portal window that support Standards mode. See SAP note #1737445 for more details.