0

I am using a JQuery script in a list (in a Script Editor) to (visually) change a column's name. The internal and display column names remain static.

When I switch from normal view to Quick Edit, the JQuery fails to relaunch and I lose the column name change.

Is there a way to trigger JQuery to run with each view change or moving back and forth into/from Quick Edit mode?

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#js-listviewthead-WPQ2").find('tr>th').each(function(){
            if($(this).find('div').attr("displayname")=="Prev Month")
            {
                    $(this).find('a:first').text("Prev EOM 03-31-2021");
        }
    });
});
</script>

1 Answer 1

0

To insert a script that always runs when a view is refreshed

The only right way of injecting JavaScript to SharePoint lists/views is to use the JSLink / Client Side Rendering (CSR). Check out the fantastic article on this by Andrei Markeev.

This is how you run your script reliably, without any script webparts:

  • Install Cisar Chrome extension
  • Navigate to the SharePoint list
  • Click F12
  • Click Cisar tab
  • Click on the "Click here to add a file to the webpart"
  • Type a file name of your choice
  • Press Enter:

enter image description here

  • Uncomment the "OnPostRender" function and inject your code here:

enter image description here

enter image description here

SAMPLE CODE

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function getBaseHtml(ctx) {
    return SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);
  }

  function init() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({      
      OnPostRender: function(ctx) { 
        $("#js-listviewthead-WPQ2").find('tr>th').each(function(){
            if($(this).find('div').attr("displayname")=="Prev Month")
            {
                    $(this).find('a:first').text("Prev EOM 03-31-2021");
            }
         });
        },
      ListTemplateType: 100

    });
  }

  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/ViewScript.js"), init);
  init();

});

You can also add the JS Link manually.

  • Edit the page
  • Go to the webpart properties
  • Specify the JSLink like so:

enter image description here

7
  • Denis, thank you for the detailed answer! I work for a bank and there are restrictions on not only viewing images on this site but downloading Chrome extensions. I managed to see your images on my personal laptop. That all being said, is it possible to save this script in my doc library and put a reference url to the script into the JS Link?
    – ChasEpes
    Apr 21, 2021 at 15:14
  • Sure! Every list or a view has a JSLink property. So you have to 1) Manually create and upload a JS file to a library and 2) In your list or library or a View, in the JSLink property specify the URL. See my updated answer. Apr 21, 2021 at 15:19
  • Perfect! So, I have one more question because I'm not fluent in JS or JQ. Am I placing your code as-is into the JS Link or adding it below the standard script :<script language="javascript" type="text/javascript"> $(document).ready(function() { If I was using a script editor or CEWP, I would paste in a standard JS script but I'm not sure with a JS Link script.
    – ChasEpes
    Apr 21, 2021 at 15:28
  • You don't need the script tag and the ready function. You can just use my script. Just make sure that ~siteCollection/Style Library/ViewScript.j part is replaced with your library/list URL and the script name. Apr 21, 2021 at 15:31
  • OK. Mine are stored as txt files so I'm assuming that extension will be fine.
    – ChasEpes
    Apr 21, 2021 at 15:32

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.