Technical Articles
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:
- Retrieve Approver Details along with their profile image URL
- Modify the Approver profile image URL for dynamic display on UI
- Develop HTML Mashup to display the Approval Workflow along with images
- Create an Embedded Component – Bind the Mashup to EC
- 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”)
Great Read, Thank you
Thank you
Great effort and Nice Document.. Keep Share Knowledge.
Vielen Dank.
Vielen Dank!
nice to read it, thanks
Thank you
Good One... Thank you
Thank you
Nice Blog on workflow...Thanks for hard work
Thank you
Good one Vishnu
Thank you
Nice blog. Thanks for detailed steps.
Thank you
Very well written. Thanks for sharing.
Thank you
Nice detailed blog. Keep Sharing !!!
Thank you
nicely written . Thanks for sharing
Thank you
Nice one. Thanks 🙂
Thank you
Very well explained, Thanks for sharing!
Thank you
This is intuitive way of making the workflow more expressive and makes it an enriching experience. Good Job!
Thank you
Very well written Vishnu and it enhances the customer experience - Great Job.
Thank you