I'm tearing my hair out trying to get a % progress bar based on a calculated column in a list to work. I had it working for 24hrs, I tried to guild the lily and it's not worked since. We are on Sharepoint online and there's also a calculation based stoplight column in the same list which is rendering perfectly with a CEWP and the following code:

<script type="text/javascript">
/* Text to HTML - version 2.1.1 */
function TextToHTML(NodeSet, HTMLregexp) {
var CellContent = "";
var i=0;
while (i < NodeSet.length){
try {
CellContent = NodeSet[i].innerText || NodeSet[i].textContent;
if (HTMLregexp.test(CellContent)) {NodeSet[i].innerHTML = CellContent;}

// List views
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");

Which i do not really understand but works fine. This has not been changed between the Progress bars working yesterday and them not working today.

The calculation in the column is:

="<DIV style='background-color:skyblue;'>
<DIV style='background-color:steelblue;width:"&100-([%Complete]*100)&"%;'>

Which again is a copy and paste from a tutorial with some edits. The column output type is set to number.

Where am I going wrong? Thanks


Since you are in SharePoint Online environment, SPO doesn't support calculated columns with markup from June, 2017. You can refer to the MS documentation here.

Alternatively you can pick CSR/JSLink to make your column render the way you want. You can learn the CSR concept using this link.


  1. Create a JS file and put following code in it. Name it CSR_Demo.js.

    var FillCtx = {}; FillCtx.Templates = {}; FillCtx.Templates.Fields = {'Completed':{'View': fillStatus}} function fillStatus(ctx){ var html =""; var fieldVal = ctx.CurrentItem['Completed'];

    html += "<div class='progress' style='width:400px;'>"+
                "<div class='progress-bar progress-bar-info progress-bar-striped active' role='progressbar' aria-valuenow='" + fieldVal + "' aria-valuemin='0' aria-valuemax='100' style='width: " + fieldVal + "%'>"+
    return html;


    ExecuteOrDelayUntilScriptLoaded(SPClientTemplates.TemplateManager.RegisterTemplateOverrides(FillCtx), 'clienttemplates.js');

  2. Upload this file to SiteCollection's SiteAssets library under JS folder.

  3. Now open the List View (or list view web part) where you want to use it.
  4. Add the reference to JQuery, Bootstrap CSS and JS. Use script editor web part to add script reference on page.
  5. Now open the settings of List View Web Part and expand Miscellaneoussection and in the end find JS link section.
  6. Add following URL to JSLink section ~sitecollection/SiteAssets/JS/CSR_Demo.js.

Save your page and you'll see the output like this. Make sure to use proper column name, in my case its Completed.

Note: I dont know why it is not formatting code properly, but you have to put the complete within Point 1 and Point 2 in CSR_Demo.js file.


enter image description here

| improve this answer | |
  • Oh dear. I have already tried every example on that link and none of them work for me. – Hydrogen Jul 20 '17 at 11:00
  • can you share the code you tried? We can see whats going wrong in your case – ThinkB4Code Jul 20 '17 at 11:11
  • The code currently in use is above. The code I used in the examples on the link given I copied verbatim. My guess its it's not finding the file but when I try to use jslink it tends to result in a completely blank page and I have to reserect the page with SPD and version history. – Hydrogen Jul 20 '17 at 11:15
  • edited the code for you. – ThinkB4Code Jul 20 '17 at 11:50
  • thank you. Could you clarify point 4 please? "Add the reference to JQuery, Bootstrap CSS and JS" I'm a coding beginner so this is greek to me... – Hydrogen Jul 20 '17 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.