How to create Home page tiles within an Embedded Component in SAP Service Cloud

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.

IMG1

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.

IMG2

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

Create Web Service Integration and Communication Scenario.

IMG3

IMG4

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&";

       HeaderParameter.Add(HeaderParameterEntry);

             

       // 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

       keys.Add(key);




       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

IMG5

Event Handler:

IMG6

STEP V: Create the HTML mashup.

Create Port Type Package and Port Binding in the solution.

Port Type Package:

IMG7

Port Binding:

IMG8

Create an HTML Mashup using the Port Type package:

IMG9

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>

<head>

<style>

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;

}

</style>

</head>

<body>

<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>

&nbsp;&nbsp;

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

&nbsp;&nbsp;

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

&nbsp;&nbsp;

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

</div><br>

<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>

&nbsp;&nbsp;

<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> 

&nbsp;&nbsp;

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

&nbsp;&nbsp;

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

</div>

</span>

</body>

</html>

STEP VII: Bind the mashup to the Embedded component.

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

IMG10

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

IMG11

3. Create a Simple Navigation and do the binding:

IMG12

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

IMG13

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

IMG14

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

IMG15

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.