Friday, July 27, 2018

Getting a sticky header for your modern SharePoint lists and libraries

image
Photo by Carson Arias on Unsplash.

If you have a list or library with many columns and items it becomes hard to navigate list when the header row scrolls out of view. Basically you are loosing context. Excel has had the ability to freeze the top header row for forever, and having this in modern lists and libraries would be extremely useful.

There is a user voice request for this at https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/16077640-freeze-column-headers which you can upvote and maybe we will get it sooner rather than later.

Or………

….you can download my SharePoint Framework extension courtesy by Puzzlepart from github, which also has instructions for installing the extensions.

You may download the sppkg directly if you don’t want to build it yourself from https://github.com/Puzzlepart/spfx-solutions/blob/master/Pzl.Ext.StickyListHeader/pzl-ext-sticky-list-header.sppkg?raw=true

NOTE: This extension uses DOM manipulation to add the required CSS for the header to remain sticky. Any use is at your own risk.

Once installed and activated on your sites, you can enjoy headers regardless of how far down you scroll.

10 comments:

  1. This seems to work great, but we seem to have an issue when accessing forms on a list. The headers overlap the form on the page. Now I am using a custom PowerApps form, so I am not sure if that makes a difference.

    Image

    ReplyDelete
    Replies
    1. I did fix a zindex issue, and might not have updated the sppkg file. I'll try to check and it's very much a hack anyways ;)

      Delete
  2. What kind of permissions to SharePoint and tools should I use to implement this workaround?
    Can you please describe or navigate where can I find information how to do it?

    ReplyDelete
    Replies
    1. I implemented it in SharePoint Online. Mainly following the GitHub instructions here. I did have to upload the sppkg to our SharePoint Online application catalog. Then enable it for the sites I wanted to use it on.

      Delete
    2. How to enable it for site? Where can I find this option?

      Delete
    3. Adam, once you install the sppkg, you can enable it for the site by using for example PnP powershell as described in the readme.md file in the repository link.

      Delete
  3. Hello,
    Thanks for this great feature, it works well!

    Nevertheless, I found an issue : it doesn't work when you click on "quick-edit" (I can understand that it's not working with this specific view), but the issue is when you click on "exit quick edit" and go back to the normal view, the extension doesn't work anymore.

    Any idea or suggestion?

    Thanks in advance.

    Rgds,

    ReplyDelete
  4. Hello, Where should we upload the provisioning template, "sticky-header-pnp-template.xml", I originally uploaded to site assets? I have the sppkg loaded to our appcatalog and have run the PowerShell Command to register, but not working.

    ReplyDelete
    Replies
    1. Not to be uploaded. It's a config which does the same as the other Powershell cmd. And it has to be applied per site collection the way it's built right now.

      Delete
  5. This works great! Thank you so much. So when Microsoft does eventually get around to implementing this, how will the changes made with this extension affect lists and libraries? I don't want MS to implement their solution to this and then all my lists break. Do you know if that might happen, and if so, how can we roll back your solution? Thank you again for all your help.

    ReplyDelete