Technical Articles
Adding an HTML mashup to opportunity to display detailed status and sales phase information
As a machine and plant manufacturer, we have an extensive sales process. That’s why we’re working with two-tier opportunities and many sales phases. Because this is a little complicated we are trying to give a specific documentation for any phase.
To show users what status and stage the opportunity is, we have developed an HTML mashup that displays the status with color and offers different hyperlinks and help texts per phase to get a corresponding training document.
See screenshots of the opportunity in C4C Sales Cloud:
Here I explain how to include the HTML mashup using SAP Salescloud 1911.
- Workcenter Administration ->Mashup Authoring ->New ->Html Mashup (Screeshot)
- Choose Port binding Type : With Port Binding
- Port Binding: Opportunity Info
- Configuration Information -> Type HTML Code
- Height: 120
- Paste code below into the HTML Code Editor
- Save and activate
The mashup is prepared.
Open an opportunity
- Start Adaption
Find the pane where you can ->Add the mashup
- Choose your HTML Mashup
- Properties: Full width: yes; Show pane Header : no
- Apply
- That’s it. Happy testing.
Some explanations to the Javascript code. To control the information section, we take the “salesphase” and “external status” from the opportunity. We save various attributes in the associated variables. “Help” points to any url you want, here it is just a sample. The “Explanation” is displayed as a mouse over title.
The external status field controls the color of the superior opportunity (Context Z01 called “Customer Project”) or the sub-opportunity (Context Z05 called “Sub-Project”).
Summary:
Now our users can see additional information and hyperlinks to training documents for each phase. We can provide a little guidance through our complex process in this simple way. Adding a HTML mashup was a quick solution.
What is your approach of supporting and guiding users through complex processes? Do not hesitate to drop a comment here.
Many greetings from Düsseldorf / Germany
Daniel K.
The HTML/Javascript Code of the Mashup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
.sapMText {
display: inline-block;
box-sizing: border-box;
white-space: pre-line;
word-wrap: break-word;
cursor: text;
font-size: 0.875rem;
font-family: "72",Arial,Helvetica,sans-serif;
line-height: normal;
color: #333333;
}
</style>
<script type="text/javascript">
function init(){
document.getElementById('displaytext').innerHTML = "checking status ...";
var salesphasecode =
{
"Z07" : {
"Code": "Z07",
"Description": "0 - Examine inquiry/opportunity",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase. Then go to the next field."
},
"Z08" : {
"Code": "Z08",
"Description": "1 - Prepare bid decision",
"Help" : "https://www.ecosia.org/search?q=preparation",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase. Fill out the QG-survey"
},
"Z09" : {
"Code": "Z09",
"Description": "2 - Bid decision meeting",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase. Start the approval process"
},
"Z10" : {
"Code": "Z10",
"Description": "3 - Plan project (A/B projects only)",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase."
},
"Z11" : {
"Code": "Z11",
"Description": "4 - Prepare initial proposal",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase."
},
"Z12" : {
"Code": "Z12",
"Description": "5.1 - Negotiation (Comm. Quotation)",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase."
},
"Z13" : {
"Code": "Z13",
"Description": "6 - Final negotiation",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase."
},
"Z14" : {
"Code": "Z14",
"Description": "7 - Hand over",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase."
},
"Z15" : {
"Code": "Z15",
"Description": "5.2 - LOI received",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Explanation" : "Please fill in all neccessary data on tab Sales Phase."
}
};
var externalstatuscode = {
"Z1" : {
"Code": "Z1$",
"Context": "Z1",
"Description": "Customer Project - Open",
"Help" :"https://www.ecosia.org/search?q=Customer",
"Color" : "SpringGreen"
},
"Z2" : {
"Code": "Z2$",
"Context": "Z1",
"Description": "Customer Project - In Process",
"Help" : "https://www.ecosia.org/search?q=Process",
"Color" : "MediumSpringGreen"
},
"Z3": {
"Code": "Z3$",
"Context": "Z1",
"Description": "Customer Project - On Hold",
"Help" :"https://www.ecosia.org/search?q=sample%20url",
"Color" : "Orchid"
},
"Z4" : {
"Code": "Z4$",
"Context": "Z1",
"Description": "Customer Project - Won",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Color" : "SteelBlue"
},
"Z5" : {
"Code": "Z5$",
"Context": "Z1",
"Description": "Customer Project - Project not Won",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Color" : "SaddleBrown"
},
"Z6" : {
"Code": "Z6$",
"Context": "Z1",
"Description": "Customer Project - In Approval",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Color" : "Gold"
},
"Z10" : {
"Code": "Z10",
"Context": "Z5",
"Description": "Sub-Project - Open",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Color" : "LightGreen"
},
"Z11" : {
"Code": "Z11",
"Context": "Z5",
"Description": "Sub-Project - In Process",
"Help" : "https://www.ecosia.org/search?q=sample%20url",
"Color" : "LightGreen"
}
}
;
var ctx = sap.byd.ui.mashup.context;
console.log(ctx.inport.ExternalStatus);
var externalstatuscodeselected;
var phasehtml = "";
for(var key in externalstatuscode){
console.log(key);
if (externalstatuscode.hasOwnProperty(key)) {
var obj = externalstatuscode[key];
if (obj.Code == ctx.inport.ExternalStatus.substring(0,3)){ // external status code matches
document.body.style.background = obj.Color;
externalstatuscodeselected = obj;
console.log(obj.Context);
if (obj.Context == "Z1"){ // = superior project (Customer Project)
// look for phase
for(var keyph in salesphasecode){
if (salesphasecode.hasOwnProperty(keyph)) { // sales phase matches
var objph = salesphasecode[keyph];
if(objph.Code == ctx.inport.SalesPhase){
phasehtml += "<br/>Phase: <a target='_blank' href='"+ objph.Help + "' title='" + objph.Explanation + "'>" + objph.Description + "</a>";
};
}
}
}
}
};
};
document.getElementById('displaytext').innerHTML = externalstatuscodeselected.Description + " <a target='_blank' href='"+ externalstatuscodeselected.Help + "' title='Status Help'>?</a>" + phasehtml + " (OppId:" + ctx.inport.OpportunityID + ")" ;
// " SalesPhase:" + ctx.inport.SalesPhase + " Status:" + ctx.inport.Status + " ExternalStatus:" + ctx.inport.ExternalStatus;
};
</script>
</head>
<body onload="init()">
<div class="sapMText" id="displaytext">Mashup loading ...</div>
</body>
Hi Daniel,
Great blog. However, when I'm using your HTML code and try the mashup the mashup keeps saying 'checking status ...' When I inspect the source of the HTML mashup frame the URL is: https://mashup-de.sapbydesignmashups.com/mashups/html/render
Do you have any suggestions to fix this?
Thanks,
Daan
Hello Daan,
F12 and looking into the browser console, will give some hints. But I guess, that your External Status is defined not like ours.
Your External Status Code has to match with the content of the “Code” attribute of the externalstatuscode variable. I do check the first three letters.
I’ll send you an new version of this script by email.
Regards
Daniel
HI Daniel,
Thanks a lot for this article. This got me thinking. I have a task to display the all sale phases on a Opportunity view and all history from each phase. It could be some think like a line from start to current stage of Opt. May be you have some example of code?
Hello Sergey,
you mean a timeline like in SAP Sales Cloud - Guided Selling ? No, sorry, I don't have a code for that. But please let me know if you procede in this idea.
Greetings from Düsseldorf
Daniel