In my sharepoint task list there is a field with a display name of % Completed with a name of PercentCompleted.

I am trying to get an XSL handle on this column so I can add a css class. I have put this is my fldtypes_custom.xsl file in the _layouts folder where Sharepoint picks it up automatically. My other XSL mods work, but this one won't take.

<!-- Convert Percentage Complete into progressbars    -->
<xsl:template match="FieldRef[@Name='PercentComplete']" mode="body">
    <xsl:param name="thisNode" select="."/>
    <xsl:variable name="currentValue" select="$thisNode/@*[name()=current()/@Name]" />
    <span class="percentprogress"><span class="hiddenpercentage"><xsl:value-of select="$currentValue" /></span></span>  

So it seems like I just don't have a proper hook. I've tried changing the mode to number but that doesn't work.


1 Answer 1


AH! I got it! Funny how it happens that you find the answer after you give up and post a question.

I changed the mode to number_body and it hooked.

I also tweaked a few other things, in case anyone is looking for this. When you fetch currentvalue you get something like 20 % which won't compute in css. So you have to used translate() to remove the spaces. Also, you can't set the size properly using a <span> but you CAN do it with a <div>.

Here is a screenshot:

xsl+css progressbar

So here is a completely javascript-less solution to rendering percentage progress bars in sharepoint:

<xsl:template match="FieldRef[@Name='PercentComplete']" mode="Number_body">
    <xsl:param name="thisNode" select="."/>
    <xsl:variable name="currentValue" select="$thisNode/@*[name()=current()/@Name]" />
    <xsl:variable name="percentvalue" select="translate($currentValue, ' ','') "/>      <!-- Remove the space so just have the number and the % sign -->

    <div class="percentprogress">
        <div class="innerpercentprogress" style="width:{$percentvalue}"><span><xsl:value-of select="$percentvalue" /></span></div>

Here is the CSS:

/*progress bar rendering for percentages; percentprogress=background - innerpercentprogress is the actual bar*/ 
    background-color: #2572BC;
    background-color: #7F94AA;
    border-right: red 2px solid;
    padding: 2px;
.innerpercentprogress span{

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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