Skip to Content
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>
Be the first to leave a comment
You must be Logged on to comment or reply to a post.