Question

I want the same column display different title in different views with only one list. So I append a jquery script in my view.aspx.

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" src="/_layouts/15/Library/js/jquery-1.9.1.js">      </script>
​<script type="text/javascript">

$(document).ready(function(){
    $('[id^=diidSort][id$=company]').text('com');
  });
</script>

It works,but when I click column ascending or descending then refresh page. the column title restore to original text. How could I fix it?

Was it helpful?

Solution

Since it is a SharePoint 2013 environment, the following approach is suggested:

  • Create rendering template in order to render the custom column title in a List View
  • Update List View web part in View page

Template file

SharePoint 2013 introduces client side rendering framework (CSR) for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript.

The following example demonstrates how to render the custom title for Title column in List View:

(function () {


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


    function modifyHeaderData(renderCtx)
    {
      var viewTitle = renderCtx.viewTitle;
      var linkTitleField = renderCtx.ListSchema.Field[1];
      linkTitleField.DisplayName = viewTitle + ':' + linkTitleField.DisplayName;
    }

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

})();

How to apply changes

  • Upload the specified script (lets name it TaskForm.js) into SharePoint Site Assets library
  • Open View page in edit mode and go to List View web part properties
  • Specify JS Link property located under Miscellaneous group: ~sitecollection/SiteAssets/TaskForm.js (see pic. 1)
  • Save changes and repeat steps 2-4 for every View page if needed

enter image description here

Fig 1. JS Link property

Result

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top