In the previous lesson, Creating a Simple Webapp in SAP Build Code and Deploying It to the SAP BTP, Cloud Foundry Environment you learned how to create and deploy a simple web page. Now, you use this knowledge as a basis to create a more advanced web page and embed it into SAP Sales Cloud and SAP Service Cloud Version 2 via mashup.
The mashup page used in this example contains data and functionality from the SAP Sales Cloud and SAP Service Cloud Version 2 tenant. Therefore, certain features of the web page only work properly when it is embedded as a mashup into SAP Sales Cloud and SAP Service Cloud Version 2.
The first step is to create a new project in SAP Business Application Studio using the Basic Multitarget Application template and add a manifest.yaml file that defines how the project will be built and deployed.
The content should look similar to this:
12345
applications:
- name: my-mashup-sample
memory: 128M
buildpack: https://github.com/cloudfoundry/staticfile-buildpackThen, in the same project, create a second file with name index.htm that includes the mashup code. Copy the provided code snippet into this file.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extension Samples</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #FFFFFF;
/* Sets the background color of the entire web page */
color: #475E75;
}
</style>
<h3>Mashup: Parameters</h3>
<br>
<table style="border: none;width: 400px;">
<tr>
<td style="width: 100px;"">1st Parameter:</td>
<td style="width: 200px;""><input type="text" id="Parameter1" readonly></td>
</tr>
<tr>
<td style="width: 100px;">2nd Parameter:</td>
<td tyle="width: 200px;"> <input type="text" id="Parameter2" readonly></td>
</tr>
</table>
<script>
// Get Parameters from iFrame
function getUrlParams() {
const urlParams = new URLSearchParams(window.location.search);
const param1 = urlParams.get('param1');
const param2 = urlParams.get('param2');
console.log(param1, param2); // Outputs: value1 value2
// Display the variable in the HTML element
document.getElementById('Parameter1').value = param1;
document.getElementById('Parameter2').value = param2;
}
window.onload = getUrlParams;
</script>
<br>
<br>
<h3>Mashup: Buttons that interact with the solution</h3>
<br>
<input type='button' value='Open Case List' onclick='openNewCnsCaseList();' style="width: 150px;" />
<input type='button' value='Open Case Create' onclick='openNewCnsCaseCreate();' style="width: 150px;" />
<script>
// Open Case List View
function openNewCnsCaseList() {
var oCase = { operation: "navigation", params: { routingKey: "case", viewType: "list" } };
window.parent.postMessage(oCase, '*')
}
// Open Case Quick Create view
function openNewCnsCaseCreate() {
var oCase = { operation: "navigation", params: { routingKey: "case", viewType: "quickcreate" } };
self.window.parent.postMessage(oCase, '*')
}
</script>
<br>
</body>
</html>The first part of the code contains the title and formatting information.
1234567891011121314151617181920
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extension Samples</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #FFFFFF;
/* Sets the background color of the entire web page */
color: #475E75;
}
</style>The two following parts start each with a headline and contain the following functions:
Mashup: Parameters
1234567891011121314151617181920212223242526
<h3>Mashup: Parameters</h3>
<br>
<table style="border: none;width: 400px;">
<tr>
<td style="width: 100px;"">1st Parameter:</td>
<td style="width: 200px;""><input type="text" id="Parameter1" readonly></td>
</tr>
<tr>
<td style="width: 100px;">2nd Parameter:</td>
<td tyle="width: 200px;"> <input type="text" id="Parameter2" readonly></td>
</tr>
</table>
<script>
// Get Parameters from iFrame
function getUrlParams() {
const urlParams = new URLSearchParams(window.location.search);
const param1 = urlParams.get('param1');
const param2 = urlParams.get('param2');
console.log(param1, param2); // Outputs: value1 value2
// Display the variable in the HTML element
document.getElementById('Parameter1').value = param1;
document.getElementById('Parameter2').value = param2;
}
window.onload = getUrlParams;
</script>The next part of the code retrieves parameter values that are passed from the calling application, in this case the SAP Sales Cloud and SAP Service Cloud Version 2 tenant. In SAP Sales and SAP Service Cloud Version 2, these parameters can be bound to information from within the system. This binding is done during the mashup creation in SAP Sales and SAP Service Cloud Version 2 and explained in the next lesson. In the HTML code, the values are retrieved via the Javascript function GetUrlParams and passed to the text input fields to display them.
Mashup: Buttons that interact with SAP Sales and SAP Service Cloud Version 2
1234567891011121314151617
<h3>Mashup: Buttons that interact with the solution</h3>
<br>
<input type='button' value='Open Case List' onclick='openNewCnsCaseList();' style="width: 150px;" />
<input type='button' value='Open Case Create' onclick='openNewCnsCaseCreate();' style="width: 150px;" />
<script>
// Open Case List View
function openNewCnsCaseList() {
var oCase = { operation: "navigation", params: { routingKey: "case", viewType: "list" } };
window.parent.postMessage(oCase, '*')
}
// Open Case Quick Create view
function openNewCnsCaseCreate() {
var oCase = { operation: "navigation", params: { routingKey: "case", viewType: "quickcreate" } };
self.window.parent.postMessage(oCase, '*')
}
</script>This part uses a feature of SAP Sales and SAP Service Cloud Version 2 called UI Events. The events provides a capability to communicate between an extension running as mashup (in an iFrame) and the SAP Sales and SAP Service Cloud Version 2 User Interface.
The webpage contains two buttons that each triggers a Javascript function. Both functions work in the same way. First, a Javascript object is created that contains an operation (in this case navigation to navigate to another view), and params (parameters passed to the operation, in our case the Case object in SAP Sales Cloud and SAP Service Cloud Version 2 and the respective action). In the second step, the Javascript object is passed to the calling system (SAP Sales and SAP Service Cloud Version 2) to execute the function. The examples show how to display the list of cases in the system and how to open the dialog to create a new case.
More advanced functions are available as well, for example to navigate to another object in SAP Sales Cloud and SAP Service Cloud Version 2 based on its UUID or automatically trigger searches, for example in the Agent Desktop. Further information on this topic can be found in this blog: Using UI Events in SAP Sales and Service Cloud V2
