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.
The mashup is prepared.
Open an opportunity
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:
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>- SAP Managed Tags:
4 Comments
