Developing a sample C4C extension application using SAP HANA Cloud Platform (Part 1).

[gauravdey]

Companies need to provide exceptional support experience to customers once they have purchased their products/services. A good support experience goes a long way in improving the overall customer experience and customer satisfaction.

SAP Cloud for Customer provides an out-of-the-box support portal - “SAP Cloud for Service – Self-Service Support Portal”. It is an intuitive self-service support site for customers to raise and track service requests and collaborate with service agents to resolve issues quickly. The support portal can also be used for creating branded, customized service sites.

However, companies may need the flexibility to develop their own customized support sites with a custom look and feel (branding / layout). Companies can choose to expose additional information or services from the underlying C4C backend to the end users/customers to suit their support needs. A sample support site developed using the HANA Cloud Platform is shown in the image.

This series describes how the SAP HANA Cloud Platform can be used to build such a customized support site.

• Part1:(This blog)
  • Leverage the SAP Cloud for Customer (C4C) OData services that expose service request functionality from the C4C backend.
  • Use the rapid application development capabilities (project templates with OData services) of the SAP Web IDE to develop an SAP UI5 application.
• Part 2: Integrate the SAP UI5 application into a Fiori Launchpad site.

Prerequisites

• You have signed up for a developer account for SAP HANA Cloud Platform and have your SAP ID or SCN credentials. If not, register for a developer account here.
• You have access to a C4C test tenant which exposes the underlying C4C service request functionality via OData services. The OData services relevant for the service request scenario are accessible at <Your_C4C_tenant_host_name>/sap/byd/odata/v1/servicerequest/

I. Configure connectivity to the Cloud for Customer backend

Launch your SAP HANA Cloud Platform Account Cockpit

From your browser, access the SAP HANA Cloud Platform cockpit for your developer account. Go to https://account.hanatrial.ondemand.com/cockpit. Log on with your SAP ID or SCN credentials.

Configure connectivity destinations to the Cloud for Customer backend

SAP HANA Cloud Platform account enables secured connections from your cloud account to C4C backend systems by configuring destinations.

Input	Output
Download the attached zip file - C4CODataServices.txt.zip that contains the destination.
Click on the Destinations tab in your HANA Cloud Platform cockpit. From the empty Destinations table, click Import from File …
In the file selection dialog, select the downloaded destination file.  The destination configuration properties from the file would be displayed as shown in the image.        Change the URL to point to your C4C tenant system.       <Your_C4C_tenant_hostname>sap/byd/odata/v1/servicerequest/
Click on Save: A new entry is added to your Destinations table.

II. Develop the SAPUI5 application for displaying open tickets

Input	Output
Launch the SAP Web IDE Click on the Subscriptions tab of your HANA Cloud Platform cockpit. From the subscribed HTML5 Applications list, click the webide link in the Application column.
Click the Application URL or copy it into your browser to launch the Web IDE in a new tab. The SAP Web IDE opens (this may take a few seconds).
Click on the icon </> to open the Development perspective.

Use the Project Templates in SAP Web IDE

Since we have enabled connectivity from our HCP account to the C4C OData services, we can use the SAP Web IDE templates to generate applications that consume data coming from the OData services.

Input	Output
From the Project Explorer select the Local root folder. Right click and select New > Project from Template. The new project from template wizard is opened.
From the drop down select the All Categories tab as this will list all the types of application you can build.
In the Template Selection screen select the SAP Fiori Master Detail Application template as shown in adjacent figure.
Click Next. The Basic Information screen opens. Enter the Project Name as "OpenTickets" Click Next.
The Data Connection screen opens. This screen allows you to select data sources for your application as defined by the various destination files you configured in your HANA Cloud Platform Cockpit. From the list of Sources, select Service URL From the Service Information drop down list select the connection source: C4CODataServices: This connection source reflects the connectivity defined by the destination you created in the previous section. Enter the relative path to the C4C OData service end point: sap/byd/odata/v1/servicerequest/
Click on the button. A list of available OData entity collections is displayed on the right side of the screen
Click Next. Choose the OData entity collection you want to work with (ServiceRequestCollection), and bind its properties to the applications Master-Detail UI controls. In the Master Section and Detail section, enter the following details as shown in the image. Click Next. The confirmation screen is opened Click Finish - A new project is created in your SAP Web IDE.

Preview the application

Input	Output
Click on the OpenTickets folder to expand it. Select the index.html file.
Click the button to preview the application. The application preview opens displaying data coming from the configured Cloud for Customers backend (this may take several seconds).

Deploy the application to SAP HANA Cloud Platform

In this part, we will deploy our application to the SAP HANA Cloud Platform and activate the application.

Input	Output
Right click on the OpenTickets project folder and select Deploy > Deploy to SAP HANA Cloud Platform. If this is the first time you’re deploying an application to HANA Cloud Platform - A User Information dialog box is opened. Verify your SCN user Email Address for the Settings of the Git repositories (the OpenTickets application will be stored in the Git repository). Click OK. The SAP HANA Cloud Platform Login dialog opens. Enter your SCN credentials. Click Login.
The Deploy Application to SAP HANA Cloud Platform dialog box is displayed with values for the application version. Click Deploy.
The deployment allocates a dedicated Git repository for hosting the application source code on HCP,creates a version from the current code and activates the application – publishing the current activated version. A Successfully Deployed dialog box is opened. Note: To test the running application, click on Open the active version of the application. This will take you to the running instance of the application