I got it from -> https://spjsblog.com/2017/08/19/dffs-example-training-application-list-with-approval/
but here’s the CSS:
.statusBannerIcon{
display:inline-block;
font-size:35px;
margin:5px;
color:#cccccc;
}
.approvalWfLabel{
font-size:18px;
font-weight:bold;
border-bottom:1px silver solid;
padding:0 0 10px 5px;
}
.customHeading{
background-color: #1B619B;
color: #EFF2F6;
font-size:16px;
padding:5px 10px;
}
Below Function being called from “Click function name” within the tab:
//create Status numbers on top of the form
function showApprovalStatus(){
var b = [], label, labelColor, status, spjsStatusArr = [
{“label”:”New”,”icon”:”①”,”color”:”#0000FF”},
{“label”:”Draft”,”icon”:”②”,”color”:”#1E90FF”},
{“label”:”Cancelled”,”icon”:”③”,”color”:”#FFD700″},
{“label”:”Submitted”,”icon”:”④”,”color”:”#3CB371″},
{“label”:”Returned”,”icon”:”⑤”,”color”:”#e81123″},
{“label”:”Review”,”icon”:”⑥”,”color”:”#0000FF”},
{“label”:”Approved”,”icon”:”⑦”,”color”:”#107c10″}
];
status = getFieldValue(“txtRequestStatus”);
jQuery.each(spjsStatusArr,function(i,c){
b.push(“<div title='”+c.label+”‘ class=’statusBannerIcon'”);
if(status === c.label){
b.push(” style=’color:”+c.color+”‘”);
label = c.label;
currStatusIndex = i;
labelColor = c.color;
}
b.push(“‘>”+c.icon+”</div>”);
});
jQuery(“.approvalWfStatus”).html(b.join(“”));
jQuery(“.approvalWfLabel”).html(“<span style=’color:”+labelColor+”‘>Current status: “+label+”</span>”);
}
setTimeout(function(){
showApprovalStatus();
},500);
