1

I am using JSLink code I found at Office Dev Center to modify my fields showing percent values to display progress bars. What I would like to do further is add some text above the list itself, dynamically using JS. I am coding in Office 365 platform, so Content Editor Web Part is not available to me.

Is there a way to modify my code so that it includes, e.g., "TEST TEST TEST" string above the list view? Where would I need to edit my script?

(function () { 
   var context = {};
   context.Templates = {};

   //I am assuming I should add something like context.Templates.SOMETHING here...

   context.Templates.Fields = {
      "PercentComplete": {
         "View": progressBarViewFieldTemplate
      },
      "Budget": {
         "View": progressBarViewFieldTemplate
      },
      "Hours": {
         "View": progressBarViewFieldTemplate
      }
   };
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
})(); 

// PercentComplete, Budget, Hours rendering for Views
function progressBarViewFieldTemplate(context) { 
   var fieldValue = context.CurrentItem[context.CurrentFieldSchema.Name];
   var percent = fieldValue.replace(/\D/g,'');
   return "<div style='background-color: #e5e5e5; width: 50px; display:inline-block;'><div style='width: " + percent + "%; background-color: #369aca;'>&nbsp;</div></div>&nbsp;" + fieldValue;
}
1

2 Answers 2

2

Try adding a postRender event, then modifying the Pagetitle element.

Add the first line at your comment (//I am assuming .....)

context.OnPostRender = postRenderHandler;

function postRenderHandler(ctx) {

    $(document).ready(function(){
        var parent = $("#pageTitle");
        $("<span id='spanId'>TESTING</span>").appendTo(parent);
    });
}
2
  • I have tested this on-Prem and it works. Oct 6, 2014 at 17:44
  • Works on SharePoint Online as well.
    – Boris
    Oct 7, 2014 at 8:34
2

The following script demonstrates how to render an additional caption for List View:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
   OnPostRender: function() { 
        $('table.ms-listviewtable').before('<h1>List of Microsoft Offices</h1>');
   }
});

Result

enter image description here

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.