How to create HTML mashup for News in SAP Hybris Cloud for Customer
Mashups enable end users to combine and view data from the SAP Hybris Cloud for Customer and third party data sources and services. The framework tool, facilitate fast integration and innovative approaches that yield completely new functionalities.
HTML Mashup is used to embed HTML content in an iframe via URL protocol or HTML code.
A set of JavaScript APIs are provided to access the UI context (not only out port and extension fields but possibly the standard fields as well), call secure cross-domain RESTful web services (with basic authorization, OAuth or API keys), and write data back to the UI in port or extension fields if needed.
In the following example, we’ll display the latest News for an Account’s. I am using Bing News Search API of Cognitive Toolkit. The API takes the search parameter, count of News items, Market from where the News is to be fetched and the safe search mode as inputs. Detailed documentation about the API is available in the below link.
https://azure.microsoft.com/en-us/services/cognitive-services/bing-news-search-api/
- First, you need to get an API key for Bing News Search.
You can get the key from the below site, create an account if you don’t have an account.
https://www.microsoft.com/cognitive-services/en-US/subscriptions
You can select Bing News from the list of APIs and generate API key for Bing News Search API, by clicking on the Create button. You will be asked to login.
The API keys will look like
2. You can use the below link to test the API’s of Cognitive toolkit.
3. Now, let’s create the HTML mashup in SAP Hybris C4C.
There are two types of HTML mashup – HTML code and URL mashup. You can either write your HTML code to render the data being fetched from the external application or you can also use the same interface as the external application by using the URL. In both the cases, the information is rendered in an iframe within the C4C TI.
We are going to use the HTML Code in our HTML mashup. The HTML code will call the above Bing News service API and render the result of the News search in an iframe on the Account screen.
HTML mashup can be created under Administrator –> Mashup Authoring. We are using the Silverlight client to create the HTML mashup, however we’ll test the mashup in the Fiori client.
Click on New –> HTML Mashup
4. Select the mashup category as Business & Finance and Port Binding as Additional Account Information.
Port Binding consists of different fields which can be passed parameters to the Mashup and these will then be mapped to the Mashup . Selection of the port binding would depend on the screen you want the mashup to be embedded in. The fields/parameters of the port binding are bound to the screen fields and the values are passed on from the screen.
5. Select the HTML code and use the below code.
<!DOCTYPE html>
<html>
<head>
<title>News</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
var params = {
// Request parameters
"q": sap.byd.ui.mashup.context.inport.AccountName,
"count": "10",
"offset": "0",
"mkt": "en-us",
"safeSearch": "Moderate",
};
$.ajax({
url: "https://api.cognitive.microsoft.com/bing/v5.0/news/search?" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","<API Key>");
},
type: "GET",
// Request body
data: "{body}",
})
.done(function(data) {
// alert("success");
console.log(data);
var temp;
for(var i=0;i<data.value.length;i++){
temp+='<tr><td><p><a><div>'+data.value[i].category+'</div></a> <a><div>'+data.value[i].datePublished+'</div></a> <a href="'+data.value[i].url+'"><div>'+data.value[i].name+'</div></a> <a><div>'+data.value[i].description+'</div></a></p></td></tr>';
}
$("#items").append(temp);
})
.fail(function() {
alert("error");
});
});
</script>
<table id="items">
</table>
</body>
</html>Couple of points to be noted:
- You can bind the AccountName parameter of the Input Parameter by select the parameter and clicking on the Copy button to the API parameter ‘q’.
- The API key need to be passed in the header of the request.
xhrObj.setRequestHeader(“Ocp-Apim-Subscription-Key”,”<API Key>”);
6. You can preview the result of the mashup by providing the input parameter, and click on the Preview button.
7. Lastly embed the News Mashup in the Accounts TI, by using the Key User Adaptation tool. You can use either HTML5 or the Silverlight client. Below screenshot is from the HTML5 client.
The end result looks like
Hi Gaurav,
Thanks for the informative blog. you mentioned that 'A set of JavaScript APIs are provided to access the UI context (not only out port and extension fields but possibly the standard fields as well)'.
Can you point us to any documentation or sample code which allows us to do this. For example, if I prepare a mashup for the Quote object would I be able to call JavaScript API to get data from the standard fields or extension fields of the quote object. Currently the mashup only gets the standard outport from the Quote object which is the Quote ID. we had to use an embedded component in the middle to take the standard quote id outport from the Quote TI and have that as well as a extension field as a second outport from the embedded component and into the mashup. We are facing some issues in the same and hence having a JavaScript API which can access the standard and extension fields of the Quote object would definitely help to simplify the design.
Request your help in pointing us to the correct documentation / sample code for the JavaScript APIs that you mentioned.
Regards,
Hi Vipinkumar,
You might find the following link useful - https://help.sap.com/viewer/cea15f900ca04c4faa35d3044577fe27/1708/en-US/98ad1d236d8e1014b18fa76bb596726c.html.
Regards,
Mustafa.
Hello Gaurav and thanks for this amazing blog.
Well i tried to do the same but i couldn't find the Additional Account Information port binding in the list of Port in mashup authoring.
Is it a standard port binding or custom ?
THanks,
Sarah,
Hi Sarah,
It's a standard port binding and available. You can also search for the port binding either by the name or a field within the port binding.
Regards
Gaurav
Hey ,
Thanks for you're answer, i found it now.
But the problem now is i cant find the mashup with port bidning that im adding in mashup authoring when a activate the adaptation mode i find just the mashups witout port binding but the one with port binding i cant find them