Skip to Content
Author's profile photo Gaurav Loknath Gera

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.

 

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks Gaurav Loknath Gera,

      Its really nice blog and helpful information....

      Regards,
      Mithun

      Author's profile photo Abdul Rasheed Mohammed
      Abdul Rasheed Mohammed

      Thanks Gaurav,

      I was able to display in Chart (pie and bar graph) and it is displaying in blue color by default. Do we have an option to change color dynamically based on the rows?

      Regards,

      Abdul Rasheed.

      Author's profile photo Jason Shah
      Jason Shah

      Hi,

      I have been following along, and I have a few issues in the Define Mashup Details.

      1. When I drag in REST Services, the pop up window does not list the REST service I created earlier. In fact, it only lists two of the many REST services: BYD_COD/BINGQRY (Bing Address Lookup) and BYD_COD/VENDAVO (VendavoService). Nothing else is listed, and therefore I cannot pick the newly created REST service.
      2. Even if I do pick one of these services, or if I pick another kind of source, I am simply unable to connect the blocks together. When I start dragging from one to another, nothing happens.

      Have you (or anyone else) experienced either of these issues? And if so, how did you overcome them?

      Thanks.

      Author's profile photo Buket Nalcaci
      Buket Nalcaci

      Hello Jason;

      http://xxxxxxx/data/2.5/xx?q=yyy&appid=123456mode=xml

      Check protocol service in REST Service. After simulation, service protocol change to JSON and when it's JSON it does not appear in REST Service List.

       

       

      Author's profile photo Fabian Orth
      Fabian Orth

      Hello,

      Thank you very much for this blog post.
      I have tried to set up the web service in 2 test systems as described above. In both systems I have the problem that clicking on "Simulate" causes an NotFound error. Anybody else have that problem? Can you help me?

      Thanks in advance,

      Fabian Orth

       

      Author's profile photo Gaurav Loknath Gera
      Gaurav Loknath Gera
      Blog Post Author

      Hi Fabian,

      One way to test is to use the API from the browser, and see you get a response or a error. If you can use the API from the browser, you should be able to consume the service in mashup.

      Regards

      Author's profile photo Fabian Orth
      Fabian Orth

      Hi Gaurav,

      Thanks for your answer. I tested the API URL in the browser and could see the corresponding XML answer for my service request. So the API works. Could this be a problem due to missing permissions?

      Kind Regards,

      Fabian