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/
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.
https://dev.cognitive.microsoft.com/docs/services/56b43f72cf5ff8098cef380a/operations/56f02400dbe2d9...
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.
Couple of points to be noted:
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
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.
https://dev.cognitive.microsoft.com/docs/services/56b43f72cf5ff8098cef380a/operations/56f02400dbe2d9...
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
- SAP Managed Tags:
5 Comments
| User | Count |
|---|---|
| 4 | |
| 3 | |
| 2 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
