Create a HTML Mashup and display it under a custom work center view in SAP C4C

This blog post contains all the necessary information to create a HTML Mash up and display it under a Custom Work Center view inside the SAP C4C solution.

In order to send and view data from external sources, we have the option of configuring mash ups in SAP C4C. Typical examples may include integrating web searches, company or industry specific information and any other business information.

HTML Mash up enables us to navigate through an external web page within the solution. In the below example, lets find out how to embed a Wikipedia page in SAP C4C.

Login to the SAP Cloud Application Studio using the development user and follow the below mentioned steps.

Step 1

Create a new solution and a custom business object under it.

Add a new element (because it’s mandatory for a business object to have an element).

Step 2

Create Standalone Work Center and Work Center View

Let the Work Center View have only one section as shown below. Remove all the other sections.

While creating the Work Center(WoC) and the Work Center View (WCV), create it under the custom business object itself as shown below.

Step 3

Attach the Work Center View to the Work Center by doing the following.

Open the Work Center in the UI Designer.
Create a new View Switch by navigating to Properties à Oberon Center Structure.

In the View Switch Collection Editor Dialog box that appers, Click on Add and give a relevant name to the View Switch created.

Now, in the Work Center Designer Tab, Choose the View Switch created (1).

Navigate to the configuration explorer, drag and drop the Work Center View as shown below (2).

Step 4

Create a port type package by clicking on New Items à Port Type Package.

Create an Inport and Outport by clicking on ‘New’.

Add a list parameter under Inport and Outport as shown below.

Step 5

Create a mashup port binding by clicking on New Item à Mashup Port Binding

Specify the Inport & Outport Type Package created in the previous step.

Now, your solution looks something like this.

Step 6

Create a HTML Mash up by right clicking on MashUp Authoring.

A dialog box appears as shown below. Choose ‘Yes’.
This will navigate you to the C4C Solution. Login to the solution.

In the HTML Mash Up Create screen that appears, do the following:

1. Choose “With Port binding”
2. Choose the relevant Port Binding already created from the solution.
3. This Mashup is ‘URL Based’ (Displays a webpage when its URL is specified here)
4. Specify the URL of the webpage. In this example, we have the Wikipedia page of SAP SE.
5. Let the height be any value between 500 – 600.

Preview will be shown as below. If this preview is displayed properly, then your webpage mashup will also be displayed properly.

Step 7

Create an embedded component by clicking New Item à Embedded Component

Drag and drop the Mashup from the Controller tab of the Embedded Component as shown below.

In the controller tab, create an outport as shown below.

Create a Simple Navigation by doing the following:

1. In the EC, open the designer tab and click on bind.
2. A dialog box as shown below appears. In the Navigations tab click on Add to add a new Navigation.

3. In the Controller Tab, Specify the Inport and Outport to complete this step.

Step 8

Now, the final step is to drag and drop the Embedded Component to the Work Center View already created.

Step 9

Login to the solution as an admin user and assign the Work Center to a functional user.

Output:

Your final output will look like this.

It is possible to scroll, navigate and perform searches in the search box in the below wiki page very similar to when we view the same in our web browser.