Side By Side Extension of C4C Utilities using SAP Cloud Platform

[former_member269587]

Any coding or configuration examples provided in this document are only examples and are NOT intended for use in a productive system. The example is only done to better explain and visualize the topic.

The Objective of this blog is to explain how Cloud For Customer can be extended with SAP Cloud Platform based Apps.

Prerequisites are basic knowledge of C4C SDK, SCP, OData, Web IDE.

As scope of the blog spread across developing a SAP Cloud Platform App by consuming OData and embed the same in Cloud for Customer, the whole content is split it into 2 parts.

Below is the detailed scope of this Blog: –

Part 1 -:- Create UI5 App in SAP Cloud Platform by consuming OData.

• Create a Custom OData for an existing CDS View (S4 HANA).


• Expose the OData using Cloud Connector.


• Wrapper UI for OData using UI5.

Refer the following Blog which has details about the same.

https://blogs.sap.com/2019/02/11/building-sap-s4-hana-apps-on-sap-cloud-platform/

Part 2 -:- Embedding the SCP App in Cloud for Customer UI floor plans using C4C SDK.

• Create HTML Mashup using C4C SDK


• Create new Embedded Component and create necessary Inport and Outports


• Embed the mashup to the new EC and bind the parameters


• Add the new EC to C4C Customer TI.

Below will be our targeted Individual Customer Thing Inspector (TI) with SAP Cloud Platform App embedded as new facet Called "Service Notification".

Embedding the SCP App in Cloud for Customer UI floor plans using C4C SDK.

1. Create HTML Mashup using C4C SDK

Create HTML Mashup using SDK.

HTML Mashup Editor opens the Mashup Editor, Configure the required fields.

2. Create new Embedded Component and create necessary Inport and Outports

Create a new Embedded Component to include the HTML Mashup created in the above step.

Create new Structure "InportData" and Data field "CustomerExtID" to store incoming Customer External ID.

Create an Inport to receive Customer External ID from Customer TI.

Create an Outport to fire Customer External ID to SCP App through Mashup parameter.

3. Embed the mashup to the new EC and bind the parameters.

Add the Mashup to newly created EC by dragging and dropping it from "Configuration Explorer".

Bind the Mashup to EC's Outport.

4. Add the new EC to C4C Customer TI.

Embed the newly created EC to Customer TI by navigating Extensibility Explorer and identify the "View Switch Navigation" Anchor.

"Save & Activate" you will be able to find the SAP Cloud Platform UI5 App embedded as new facet in Customer TI.