none
How to detect all document library web parts and do something with CSS or JavaScript RRS feed

  • Question

  • 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.

    Friday, April 12, 2019 5:29 PM

All replies

  • Hi,

    A document library will contain a text "or drag files here" in New Item td html element like capture below, which Generic List will not have, so this is a option to distinguish if it is a document library or Generic List:

    Generic List html element through Developer Tool:

    Libray html Element through Developer Tool:

    Then could use the Jquery snippet below to get Document Library selector:

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
    $(function() {
    
      console.log($("td.ms-list-addnew:contains(' or drag files here')"));
      
    });
    </script>

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, April 15, 2019 7:13 AM
  • Hi Jerry,

    Thank you for looking into this for me. I thought about something similar, however, I assume this won't work if the end user only has "read" permission to the document library? As the edit/dragging feature is only available to users with editing type permissions.

    -Leon

    Monday, April 15, 2019 1:34 PM
  • 1. you may add javascript to all pages using CustomActions: Add custom javascript file to all pages in on-premise Sharepoint site collection without modifying masterpage

    2. in this js file first identify whether current page belongs to document library. You may do it using the following code:

    var selection = SP.ListOperation.Selection;
    var listId = selection.getSelectedList();
    var context = new SP.ClientContext.get_current();
    var web = context.get_web();
    var list = web.get_lists().getById(listId);
    context.load(list, 'BaseType');
    context.executeQueryAsync(Function.createDelegate(this, function () {
        if (list.get_baseType() == 1) {
            // we are inside document library
        }
    }), Function.createDelegate(this, function (sender, args) { console.log(args); }));
    
    3. implement needed actions inside your function

    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - https://github.com/sadomovalex/camlex

    Monday, April 15, 2019 3:44 PM
  • Thank you, but running the code above yields this error ?

    Cannot read property 'toString' of null
        at SP.ListCollection.getById

    Thanks

    Wednesday, May 29, 2019 2:00 PM
  • I found the issue, it seems that the code only works when user manually "selects" the list by clicking on the white area around the doc lib (where doc lib ribbons starts to appear)...
    Wednesday, May 29, 2019 2:19 PM
  • Hi,

    Yes, this can be working to check all document library type and if the code snippet is helpful to this question, you could Mark the reply as answer so that it could also help others who stuck with the same question in the forum.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, May 30, 2019 2:50 AM