CRM and CX Blogs by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
Showing results for 
Search instead for 
Did you mean: 
Introduction: The goal of this blog is to showcase how to create a tile within an embedded component in SAP Service Cloud which will have the same look and feel like the home page. This blog is a result of a customer requirement where they wanted to display the “Score” in Service Ticket with the layout similar to home page tiles. In the below example, an external web service is called by passing the Customer ID and the response is the Score which is displayed in the Tile.

The solution design includes creating custom tiles in SAP Service Cloud embedded components using HTML Mashups which gets the data from External REST web services in JSON data format. The data will be passed to the HTML script in the mashup by Java Script coding, and this will be displayed in colored text.


Let’s start with the development by following the below steps:

STEP I: Create an XBO to extend the standard Customer BO.

Create an XBO for Business Partner Solution Extensions BO and add a Transient field for Job Score which will be determined from the web service.


STEP II: Create the Web Service Integration to consume the REST service.

Create Web Service Integration and Communication Scenario.



STEP III: Call the Interface to extract the data.

Create an Action on the XBO and write the logic:

// Communication details

var ScenarioName = "CommJobScore";

var ServiceName = "Rest_jobScore";

var HttpMethod = "GET";

var HttpResource = "<HttpResource>";

var HeaderParameter : collectionof NameAndValue;

var HeaderParameterEntry : NameAndValue;

var ContentType = ""; // not required for this example

var Body = ""; // not required for this example

HeaderParameterEntry.Name = "apikey";

HeaderParameterEntry.Value = "&JOBSCORE_APIKEY&";


// Set URL Parameter

var URLParameter : collectionof NameAndValue;

var URLParameterEntry : NameAndValue;

var result = WebServiceUtilities.ExecuteRESTService(ScenarioName, ServiceName, HttpMethod, HttpResource, URLParameter, HeaderParameter, "application/json", Body);

var JsonString = result.Content;

var jsonValid = Json.IsValidJson(JsonString);

var Result : JsonResult;

var keys : collectionof LANGUAGEINDEPENDENT_EXTENDED_Text;

var key ;

key = "feedback.satisfaction";//full path of key needs to be specified here from the JSON extracted from REST service


Result = Json.ParseKeyValues(keys, JsonString);

foreach(var res in Result.KeyValue)


this.GetFirst().ZCOD_Job_Score = res.Value;



STEP IV: Create Embedded component.

Create an embedded component and fire this action on the Load of the EC


Event Handler:


STEP V: Create the HTML mashup.

  1. Create Port Type Package and Port Binding in the solution.

Port Type Package:


Port Binding:


  1. Create an HTML Mashup using the Port Type package:


STEP VI: Create tiles via HTML code.

In the HTML Code Editor, copy the below code which will create the tiles and embed the data using the JavaScript in <script> tag:
<!DOCTYPE html><html>



span.a {

display: block;


span.b {

display: inline-block;

width: 120px;

height: 120px;

padding: 10px;

box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);

background-color: white;





<span class="a">

<div style="font-family:'Arial';font-size: 14px;">

<span class="b">Number of Calls<br><br><br><br><b><p style="color: orange;font-size: 24px;"><script>document.write(sap.byd.ui.mashup.context.inport.JobScore);</script></p> </b></span>


<span class="b">Rant Rave Scores<br><br><br><br><b><p style="color: green;font-size: 24px;">10</p></b></span>


<span class="b">Contacted customer last<br><br><br><br><br>&nbsp;Alan Heald</span>


<span class= "b">Quick Notes in SAP Production<br><br>Spoke to customer, job is going ahead tommorow<br><br></span>


<div style="font-family:'Arial';font-size: 14px;">

<span class="b">Track my job score<br><br><br><br><b><p style="color: orange;font-size: 24px;">7</p></b></span>


<span class="b">Repeat contact over last 6 months<br>/30days<br><br><b><p style="color: grey;font-size: 24px;">3</p></b></span>


<span class="b">DG7 complaints<br><p style="color: grey;font-size: 10.7px;">Ticket No:123456</p><br><br><br><br></span>


<span class= "b">Raise a new task in SAP<br><br><br><br><br><br></span>





STEP VII: Bind the mashup to the Embedded component.

  1. In the embedded component, drag the HTML Mashup, drop it in the pane container of embedded component:


      2. Navigate the controller tab and create a new outport with the configured PTP.


      3. Create a Simple Navigation and do the binding:


  1. Now, in the Mashup Configuration you will find the below settings:


STEP VIII: Bind the embedded component with the Individual Customer TI screen.


Final Result: The Tile “Job Score” has the data from Rest Service.


Conclusion: By following the above approach, we can create custom Tiles which will have the same look & feel like home page tiles and make it available within embedded components.


Please provide a feedback or ask a question in case of any clarifications required.