2

I have a page that contains list view web part. I want to rename the column titles.

I have used the following JS script, however it only shows if I click on it. Also, the id of the list view title changes sometimes.

Is there a way on how to implement this successfully?

<script type="text/javascript">
//This script is developed by Mohammad Yusuf Hussain # http://mohammadyusufhussain-sharepoint.blogspot.in/
_spBodyOnLoadFunctionNames.push("ChangeColumnName"); // Call ChangeColumnName function on PageLoad
    function ChangeColumnName() 
    {
        RenameColumn('diid8SortAuthor', 'Author'); //Provide Column ID and New Column name
    }
    function RenameColumn(colID, NewHeader) {
        try {
            document.getElementById(colID).innerHTML = NewHeader; //Change Header Name
            document.getElementById(colID).title = "Sort by " + NewHeader; // Change Tooltip value
        }
        catch (err) {
            alert('Invalid Column ID:' + colID);
        }
    }

UPDATE - JS function to loop through column titles:

            function modifyColumns(renderCtx)
{
  var arrayLength= renderCtx.ListSchema.Field.length;

    for (var i=0; i < arrayLength;i++)
    {
        if(renderCtx.ListSchema.Field[i] == 'order_number')
        {
            var newTitle= "New Title";
            var linkTitleField = renderCtx.ListSchema.Field[i];
            linkTitleField.DisplayName = newTitle;
        }
    }
}
  • Please provide the version of SharePoint you are using. – Taran Goel Jun 25 '15 at 10:27
  • @TaranGoel sharepoint 2013 – ELS Jun 25 '15 at 10:30
  • Please try my answer below. – Taran Goel Jun 25 '15 at 10:35
  • 1
    renderCtx.ListSchema.Field[i] returns object, you'll need to refer the "DisplayName" property of it to actually do the compare. – Taran Goel Jun 29 '15 at 4:48
3

First I am assuming that you're using SharePoint 2013.

I would suggest you to use SharePoint's Client Side Rendering Framework. I would suggest this blog to understand how to apply CSR.

The code which you can write to modify column names is as below (I am currently modifying "Title"):

(function () {


    function preTaskFormRenderer(renderCtx) {
       modifyColumns(renderCtx);       
    }


    function modifyColumns(renderCtx)
    {
      var arrayLength= renderCtx.ListSchema.Field.length;
        for (var i=0; i < arrayLength;i++)
        {
           if(renderCtx.ListSchema.Field[i].DisplayName == 'order_number')
             {
               var newTitle= "New Title";
               var linkTitleField = renderCtx.ListSchema.Field[i];
               linkTitleField.DisplayName = newTitle;
             }
         }
    }

    function registerRenderer()
    {
      var ctxForm = {};
      ctxForm.Templates = {};
      ctxForm.OnPreRender = preTaskFormRenderer;
      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    } 
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})(); 

You can also for loop to find position of a particular field. var linkTitleField = renderCtx.ListSchema.Field[0]; Here "0" refers to the position of the field. As i mentioned above you can iterate over the fields to find the position of the desired column.

  • I don't have 'Title' field. how do I specify which field in your code? var linkTitleField = renderCtx.ListSchema.Field[0]; here? – ELS Jun 25 '15 at 10:42
  • I updated my answer, please take a look at it. If you want I can add the For loop too. – Taran Goel Jun 26 '15 at 5:00
  • can you help me write the loop? see the loop i created in the question. – ELS Jun 28 '15 at 5:40
  • Also I have a question; I have two list web parts on the same page, I want to render the second list web part but it only renders the first one. how do I tell it to render the second one? The two web parts are linked – ELS Jun 28 '15 at 7:10
  • 1
    You need to update the JSlink property of the webpart which you want to custom render. I'll update the answer with loop. Thanks – Taran Goel Jun 29 '15 at 4:36

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.