Changing Column Name in SharePoint list view using JavaScript.



Few days back I had a requirement from one of my client to show column name on a list view of SharePoint List in different languages together (i.e. EnglishName / ArabicName).There are many ways you can change list view column display name in SharePoint. I figure out one of the easy way using JavaScript. Below are the steps.

Step 1:

Go to List View on which you want to modify column names.


Step 2

Get hyper link id for column name, to do this open development tool (or press F12) in your browser and click on column link. (e.g. Title etc.)  copy link id and paste it to notepad for later use. 




Step 3

Here comes the magic part. Create a JavaScript file with below script and save it any document library withing SharePoint. replace Column ID with your own in my case it is "diidSortLinkTitle"

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("ChangeColumnName"); 
function on PageLoad
        function ChangeColumnName() 
          {
            RenameColumn('diidSortLinkTitle', 'Title / لقب'); //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);
            }
        }
 </script>

Step 3

Edit the same page List View page and add a content editor web part above your List View web part


Step 4 

Edit Content Editor Web Part and paste the script URL which you uploaded to SharePoint in step 3 in Content Link Field.




Step 5.

Click OK and save the page. You can now see the changes on your column in List View, Cheers!.


I hope you find this post helpful. Please let me know your feedback in comments below. I will be posting some more short workarounds for SharePoint so keep in touch if you need anything. Thanks!




No comments:

Post a Comment