Visual Display(Images) of Approval Process for rich UI experience

Are you bored to see the same old fashioned display of approval process in C4C UI ?

And if you are keen to have a new look and feel for better UI experience, Like,

How about the idea of displaying image of the approver, along with the Title, Name and the Status.

Seems interesting!! Curious to see how the output will be ?

It will be as shown in below image and you can see that the visual representation clearly shows the current progress.

The border of image represents the step status OR the steps the approval flow has already passed.

In this context Green means Approved, Blue means In- Progress, Grey means Approval stage Not started yet.

At a high level, the steps that needs to be followed are mentioned below:

1. Retrieve Approver Details along with their profile image URL
2. Modify the Approver profile image URL for dynamic display on UI
3. Develop HTML Mashup to display the Approval Workflow along with images
4. Create an Embedded Component – Bind the Mashup to EC
5. Configure the Embedded Component on the corresponding work center view

Let’s now deep dive into each step to explore how these can be achieved.

Step-1:Retrieve Approver Details along with their profile image URL

In the “After loading event” implement logic to fetch the Approver Name, Title & Image Url from Employee entity.

Implement custom logic to determine the color of the status.It will be varied based on the business requirement

Sample logic for reference is as below

var DepMan =  this.DepartmentManager;
 if (!DepMan.IsInitial() && this.DepartmentManagerName.IsInitial()
  && this.DepartmentManagerImageURI.IsInitial() && this.DepartmentManagerTitle.IsInitial()){
	 identification = Employee.Identification.Retrieve(DepMan);
	if (identification.IsSet()){
	   employee = identification.ToParent; 
		if (employee.IsSet() && employee.CurrentCommon.IsSet()){
// Fetch Name
		this.DepartmentManagerName = employee.CurrentCommon.BusinessPartnerFormattedName;
		if (employee.IsSet() && employee.CurrentOrganisationalUnitAssignment.Count()>0
			&& employee.CurrentOrganisationalUnitAssignment.Job.Count()>0){
// Fetch Title
	this.DepartmentManagerTitle = employee.CurrentOrganisationalUnitAssignment.Job.GetFirst().CurrentName.Name.content;
			}
			 empAttachment = employee.AttachmentFolder;
			if (empAttachment.IsSet() && empAttachment.Document.Count()>0){
// Fetch Profile Image URL
		 employee_image = empAttachment.Document.GetFirst().FileContentURI.content;
			}
		}
	  }
//  Custom logic to determine Department Manager status color - it can be varied based on your 
    requirement

	if (Numeric.ParseFromString( DepManStepId) < this.CurrentApprovalStepId){
	 this. DepartmentManagerStatus = green;
	}else{
		if(Numeric.ParseFromString( DepManStepId)>this.CurrentApprovalStepId){
		this. DepartmentManagerStatus = grey;
		}else{
			if(this.ApprovalStatus == approved){
			this. DepartmentManagerStatus = green;
			}else{
			 if(this.ApprovalStatus == inrevision){
			 this. DepartmentManagerStatus = blue;
			}else{
			if(this.ApprovalStatus == rejected){
			 this. DepartmentManagerStatus = red;
			}else{
			 if((this.ApprovalStatus == approvalNotStarted)||(this.ApprovalStatus == inapproval)){
			 this. DepartmentManagerStatus = grey;
			 }
			}
			}
			}
		}
	} 
 }

Step – 2: Modify the Approver profile image URL for dynamic display on UI

Profile image URL fetched above will be in the form of

http://vaai01kgs.byd.sap.corp:50000/sap/ap/ds/wd/doc/00163E6BB3DF1ED9BEF7B9385212ACAF/………..

when you use this URL directly it will not display the image on UI.

So inorder to solve this issue we need to trim the above URL and prefix with Session URL.

i. Trim the image URL  –  remove http://vaai01kgs.byd.sap.corp:50000/sap/ from the above URL.

Add the below piece of logic while fetching below Profile Image URL

if (empAttachment.IsSet() && empAttachment.Document.Count()>0){
	employee_image = empAttachment.Document.GetFirst().FileContentURI.content;
	length = employee_image.Length();
	trimlength =employee_image.Find("/sap",0,length-1);
	this.SalesDepartmentManagerImageURI = employee_image.Substring(trimlength+4);
	}

ii.  Store the SessionUrl Parameter in a custom parameter say CurrentSessionUrl as shown below

iii.  Use this custom parameter CurrentSessionUrl in HTML Mashup to prefix with the above modified URL which results in display of Profile Image on the UI (Sample logic is available in step-3)

Step – 3: Develop HTML Mashup to display the Approval Workflow along with images

(External blog posts are already available explaining “How to create HTML Mashup”)

Parameter “sap.byd.ui.mashup.context.inport” is used to read the values of the attributes from BO in the HTML Mashup logic

Sample logic is shown for one approver – You can extend for N number in similar fashion

<!DOCTYPE html>
  <html>
  <head>
<title>Approval Process</title>
<style>
img {
  border-radius: 100%;
}
.red
{
border:3px Solid Red;
}
.green
{
border:3px Solid Green;
}
.grey
{
border:3px Solid #7e7e7e; 
}
.blue
{
border:3px Solid Blue;
}

.italic {
  font-style: italic;
  text-align: center;
  font-size: 10px;
  height:11px;
  color:#484848;
}
</style>

<script>
// current session url
var CurrentSessionUrl = (sap.byd.ui.mashup.context.inport.CurrentSessionURL);
if(CurrentSessionUrl.includes('https/')){
CurrentSessionUrl = CurrentSessionUrl.split("https/").pop();
CurrentSessionUrl = "https://"+CurrentSessionUrl;
}

// Arrow Image
var ArrowImageURI = (sap.byd.ui.mashup.context.inport.ArrowImageURI);
ArrowImageURI = CurrentSessionUrl+ArrowImageURI;
//alert(ArrowImageURI);

// 2. DepartmentManager details
var DepartmentManagerName = (sap.byd.ui.mashup.context.inport.DepartmentManagerName);
var DepartmentManagerImageURI = (sap.byd.ui.mashup.context.inport.DepartmentManagerImageURI);
DepartmentManagerImageURI = CurrentSessionUrl+DepartmentManagerImageURI;
var DepartmentManagerTitle = (sap.byd.ui.mashup.context.inport.DepartmentManagerTitle);
var DepartmentManagerStatus = (sap.byd.ui.mashup.context.inport.DepartmentManagerStatus);

function myFunction(){	
	document.getElementById('DeptManagerPic').src = SalesDepartmentManagerImageURI;
	if(SalesDepartmentManagerStatus == "1"){
	document.getElementById('DeptManagerPic').classList.add('green');	
	 }else if(SalesDepartmentManagerStatus == "2"){
	 document.getElementById('DeptManagerPic').classList.add('blue');	
	 }else if(SalesDepartmentManagerStatus == "3"){
	 document.getElementById('DeptManagerPic').classList.add('red');	
	 }else{
	 document.getElementById('DeptManagerPic').classList.add('grey');	
	}	
	document.getElementById('arrowPic1').src = ArrowImageURI;

}
</script>
 </head>
 <body onload="myFunction()">
<table style="font-family:Arial;color:#787878;font-size:12px;height:15px">
    <tr>
        <td><img id="DeptManagerPic" alt="No Image" height=75 width=75></img></th>
			<td><img id="arrowPic1" alt="" height=100 width=100></img></th>
    </tr>
	
  <tr style="text-align:center;">
   <td><script>document.write(DepartmentManagerName)</script></th>
  </tr>

  <tr class="italic">
   <td><script>document.write(DepartmentManagerTitle)</script></th>
  </tr>
   
</table>

  </body>
  <html>

Now perform the steps 4 & 5 :

Create an Embedded Component – Bind the Mashup to EC

Configure the Embedded Component on the corresponding work center view

(External blog posts are already available explaining “How to Create & Configure Embedded Component”)