This blog is for portal end-users who would like to learn about a simple way to develop an SAP Fiori based application in the Web IDE using a service from an external host, deploy it to the Enterprise Portal and consume it via with the Fiori Launchpad on EP.

Prerequisite:
 – SAP Web IDE instance – either trial or production (you can get one here: SAP HANA Cloud Platform) with Enterprise Portal plug-in installed
– SAP HANA Cloud Connector installed
– SAP Enterprise Portal release 7.50 SP4 and higher
– SAP Web Dispatcher.

Note: SAPUI5 application life-cycle in the SAP Enterprise Portal is as follows:
When deploying a UI5-based application to the Enterprise Portal (either from Web IDE or uploading it to the Web Resource Repository), the application files are extracted into the Web Resource Repository.
The application is transportable through EP transport package mechanism and CTS+. You should include the whole app from WRR and the iView rendering the app (or parent role) in a regular transport package and export & import it between your systems.

Landscape requirements to allow this integration:

• Java AS server 7.50 SP04
• Web Dispatcher
• HANA Cloud Platform (HCP)
• Cloud Connector
• Gateway System (external host) with Fiori services.

The scenario flow consists the following steps:

1. Configure the Cloud Connector
2. Configure HCP destination for Gateway services
3. Configure HCP destination for portal deployment
4. Create an application from a template in Web IDE
5. Deploy the application to portal
6. Create an iView for the application
7. Consume the application in run-time.

1  Configure the Cloud Connector

Choose Connector State on the side-panel and verify that the status of your account is Connected:

More detailed documentstion can be found here.

2   Configure HCP destination for Gateway services

Open the HCP account https://account.<hanahost>.com/ with your HCP user.

Navigate to Connectivity à Destinations on the side pane, then click on New Destination. Fill in the data:

• Name: <GatewaySystemName>
• Type: http
• Description: <GatewaySystemDescription>
• URL: <GatewaySystemURL>
• Proxy Type: OnPremise
• Authentication: BasicAuthentication
• User: <GatewaySystemUser>
• Password: <GatewaySystemPassword>

Add properties (click New Property on the right):

• WebIDEEnabled: true
• WebIDESystem: <GatewaySystemName>
• WebIDEUsage: odata_abap

3   Configure HCP destination for portal deployment

Create another destination for portal server:

• Name: <PortalSystemName>
• Type: http
• Description: <PortalSystemDescription>
• URL: <PortalSystemURL>
• Proxy Type: OnPremise
• Authentication: BasicAuthentication
• User: <PortalAdminUser>
• Password: <PortalAdminPassword>

Add properties (click New Property on the right):

• WebIDEEnabled: true
• WebIDESystem: <PortalSystemID>
• WebIDEUsage: enterprise_portal

4   Create an application from a template in Web IDE

In HCP on the side panel choose Services, then under the category Dev & Ops select Web IDE and click on Open SAP Web IDE:

After Web IDE is loaded verify that Portal plug in is enabled: go to Preferences -> Plugins on the side panel, then switch on EP plug-in and save.

Go to Home page and choose New Project from Template.  Provide your project name and click Next.

Choose SAP Fiori Master Detail Application and click Next:

In the Data Connection screen choose Service Catalog, enter <Gateway destination> from the drop-down list and review the list of available services:

Choose the ODATA service, e.g. SalesOrderSet and press Next.

Customize your application, i.e. fill the title and namespace, map the service fields on the UI fields and click Finish:

Now you can see your application in Web IDE Workspace. Click on Play to see it running (enter your Gateway destination credentials if required).

5   Deploy the application to portal

In order to deploy the application, use right click on it and choose deploy -> Deploy to SAP Enterprise Portal:

In the next pop-up window verify that the System field contains your portal destination, defined in HCP, and click Deploy (enter your portal destination credentials if required).

6  Create an iView for the application

View your application in the portal http://<portalhost>:<Port>/irj/portal (AdministratorUserID/password): open Content Administration -> SAPUI5 Applications folder, find your application by the project name and expand it – you will see SAPUI5 iView with the Namespace you have entered in the customizing step.
Open the role assigned to an end-user. Right click on SAPUI5 Portal iView from SAPUI5 Applications folder and add it to the role:

Open the iView properties from the role and set all the required properties to present the iView in FLP on EP (details can be found here). Verify that the following properties are set as following:

• Object ID of Device Group to <device group>
• System to local.

7  Consume the application in run-time

Logon to EP as an end-user. Open the tile catalog.Your application appears as a tile. Click on the tile to run the application from tile catalog or add it to the home page and run from there. Enter the gateway destination credentials if required.

To learn more:

• SAP Documentation NW 7.5 Release notes
• SAP HANA Cloud Documentation
• Web IDE deployment video
• SAP note 2031108
• FLP on EP New Features in NW 7.50 SP04
• FLP on EP New Features in NW 7.50 SP05
• SAP Fiori Launchpad on SAP Enterprise Portal: Recommendations and Frequently Asked Questions
• SAP Fiori Launchpad on Portal – Sample Content for Administrators.