How to Create a Data Mashup in SAP Hybris Cloud for Customer

Data mashup is used to integrate data provided from external application with SAP Hybris Cloud for Customer by consuming a web service.

In the following example, we’ll display the weather temperature of Account’s city using a data mashup. I found an open API which can be called from C4C to fetch the weather temperature.
However, before we can consume the service, we need to create a API id by registering with the service provider. The API id is used by the service provider to monitor the requests coming from different application and in case of paid services, the service provider charge based on the usage.I registered on https://openweathermap.org/api to be able to consumer their weather service.

Following steps will explain how to consume this external Web Service API in C4C through Data Mashup.

Steps:

Create a Mashup Web service

Key users can create Web services which can then be integrated into a data mashup. RSS/ATOM, REST, and SOAP Web services are supported.

Web service can be created under Administrator –> Mashup Web Services

Give details like Service Name, Description, Authentication Method, Service Protocol, HTTP Method and URL.

Authentication method can be None, Basic (User and Password based) or OAuth based. In our case we don’t need any authentication.

HTTP method in this case is Get, since we are going to fetch data from the external service. In case, you need to create/edit some data by consuming the external service, you need to use the Post HTTP method.

Copy and Paste the service URL from the browser along with the required parameters. A good way to ensure that the external service works fine, is by executing the service URL through a web browser and service results in XML reply.

Paste the URL

Click on Extract Parameters

Click on the Simulate button to ensure that C4C is able to reach the service and response is received by C4C.

Once you are sure that the service is working as expected, copy the appid value from Constant to API Key field. APP id is what we got when we registered with the service provider.

Remove the constant value ‘London’ for parameter q. The value of q will be passed to the web service from the mashup.

Click on Save and Close. Ensure that the web service is Active.

Create the Data Mashup

Next step is to create the data mashup. This data mashup will then be integrated on the Account’s screen.

Data mashup can be created under Administrator –> Mashup Authoring

Click on New –> Data Mashup

Select the mashup category as Location & Travel and Port Binding as Weather

Port Binding consists of different fields which can be passed parameters to the Mashup and these will then be mapped to the Mashup web service. Selection of the port binding would depend on the screen you want the mashup to be in. The fields/parameters of the port binding are bound to the screen fields and the values are passed  on from the screen.

In the next screen you will see the In-port which defines the parameters received by it.

Click on the Sources tab and drag-drop the Rest Service building block on to the canvas

A window opens for you to select the Weather Service, we created before

Connect the two building blocks

Select the Fetch Content building block and map the web service parameter ‘q’ to a mashup in-port parameter. In our case we map it to ‘Address-City’.

Next we add another building block from Actions tab, which will fetch the values from the service result and display it on the screen.

From the Actions tab, select the Extract Field building block and place it on the canvas. Connect the Web service to this building block.

Next we need to select the fields from the service result that will be displayed on the screen. To be able to do that, click on the Mashup In-port, provide a value in the City field and click on the Preview Result.

Select the Extract Field building block and select the field from the Extract Field Properties Pane

Select the Form view of the screen and you see the values from the service result.

There are other options as well if you like to display the data in different formats like a table, chart, RSS feed etc. Depending on the response from the service you can select an appropriate format of data display.

Click on Next to Review the mash up

Click Finish to save and activate the new mash up.

Embed the Weather mashup in Accounts TI

Lastly embed the Weather Mashup in the Accounts TI, by using the Key User Adaptation tool.