Displaying Graphical Workflow Status – OOB


User requirement is to show the progress of a SharePoint Workflow Request in a graphical display to make the end user to understand more easily.


You have followed the following steps to achieve the above mentioned requirement. The request status was created and updated with the help of an InfoPath form, and I have used a 3 level approval Nintex Workflow which will start when an item is created and modified.

The Request Progress Bar is built by the Workflow in the background at run time, one status image which is used at that starting point of the workflow(that is when an item is created), and the remaining Request Progress Bar images are calculated based on the status change.

To map this, I have created four individual images, one for each stage in the process. Example images are included below.

Status 1: Submitted statusbarlevelfirst

Status 4: Completed statusbarlevelfour

These images were uploaded into the Images library and the mapping list was created as shown below: mapping

The Workflow will build the appropriate HTML to show the status bar based on the status change. Nintex Workflow is used to generate this HTML as shown below.

The HTML output generated by the workflow is shown below:

<div style=”clear: both; width: 305px”><img src=”/sites/JRDW/PublishingImages/statusbarlevelfour.jpg” /></div>

This HTML content is now updated by the workflow on a multiline plant text. But when we view this in SharePoint list view through the browser it will not get interpreted by the browser as an image.

From Christophe’s post I came to know that using CEWP we can convert the plain HTML content into browser understandable HTML content. To do this, you have to add a CEWP at the bottom of the page where you want to show the status and paste the following script into the HTML source editor.

<script type=”text/javascript”>

var theTDs = document.getElementsByTagName(“TD”);
var i=0;
var TDContent = ” “;
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf(“<div”) == 0) && (TDContent.indexOf(“</div>”) >= 0)) {
theTDs[i].innerHTML = TDContent;
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById(“tbod”+groupName+”_”);
var wrapDiv=document.createElement(“div”);
wrapDiv.innerHTML=”<TABLE><TBODY id=\”tbod”+ groupName+”_\” isLoaded=\””+isLoaded+ “\”>”+htmlToRender+”</TBODY></TABLE>”;
var theTBODYTDs = wrapDiv.getElementsByTagName(“TD”); var j=0; var TDContent = ” “;
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf(“<div”) == 0) && (TDContent.indexOf(“</div>”) >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;


So, with the help of this script the Request Status Bar now displays the image. Thats it 🙂

final output


About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Comments are closed.

%d bloggers like this: