0

I'd like to apply certain CSS/JavaScript to ALL Document libraries within the site collection. For example, I'd like to add a banner on the top of every document library for some informational verbiage.

I figured this perhaps should be done within the .master file as it is being applied globally. However, I'm having a hard time finding a detector/grabber that could pin point all the document library web parts on the page. Is there any unique identifiers such as "Id=" "Class=" or other properties that I could have CSS/JavaScript to recognize that the web part is a document library and do something about it?

Please note the two following conditions that the solution should also be able to overcome -

  1. Make distinction between Document library v.s. Generic List, although they rendered similar in many ways.

  2. It should work when the document library is either on its own aspx page or gets added to a zone of another page as a web part.

2

You could probably do this by leveraging the Client Side Rendering system. When rendering, the ctx object has a lot of useful information. For instance, there are listBaseType and listTemplate properties.

For document libraries, those values are 1 and "101", respectively:

List Template value for doc libs

For regular lists, they are 0 and "100" respectively:

List Template value for regular lists

Other specialized types of lists (Calendar, Tasks, Announcements, etc.) I believe have other values for listTemplate (and might have different values for listBaseType), but I don't think they are "101".

Additionally, there is a ctx.ListSchema.IsDocLib property, which for document libraries is "1":

IsDocLib value for document libraries

and for regular lists it is just an empty string (so falsy):

IsDocLib value for regular lists

And crucially for what you want to do, the there is a ctx.wpq property which has the WPQ# of the web part currently being rendered.

So conceivably what you could do is set up a generic OnPostRender override, since that will run after all HTML elements have been added to the DOM and you will be able to find the web part you want to alter based on the WPQ#, look at the listTemplate value and determine if you want to add extra CSS classes or whatever it is that you want to do.

If you are thinking of adding it to the masterpage of the site, you'll also probably have to add a step to wait to ensure that the SharePoint CSR scripts have loaded and are ready to use. So something like:

var MyNamespace = MyNamespace || {};

MyNamespace.postRender = function (ctx) {
    console.log('postrender', ctx.wpq, ctx);

    if (ctx.listTemplate === "101") {
        // do your manipulation here
    }
}

MyNamespace.listTypeOverride = (function () {
    return {
        render: function () {
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
                OnPostRender: MyNamespace.postRender,
            });
        }
    }
})();

// make sure the SPClientTemplates is ready before you try to register the override
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
    RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~site/path/to/overrideScript.js"), MyNamespace.listTypeOverride.render);
    MyNamespace.listTypeOverride.render();
});

I used the ~site URL token in my example, but according to the documentation over on DefinitelyTyped, another valid token is ~sitecollectionmasterpagegallery, which might be more appropriate if you are adding the script to the masterpage.

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.