Thursday, March 9, 2017

My “don’t-do-it” modern page header configurator web part

In a current project we are making heavy use of the modern layout for lists, libraries and pages in Team Sites. I’m very much known for scoping things down, but the huuuge header of modern pages just takes up too much valuable screen estate the way it is. As I’m also know for not sticking to my principles, I went out and misused the SharePoint Framework and created a part which does CSS injection on the page to override the default behavior. My hope is that Microsoft gives us some default options regarding the header, so I can kill this code before it spreads.

To be clear – I do not recommend this approach, and rather accept how it is until proper support is added (but where’s the fun in that right?)

The Delve blog allows adding a header photo to posts and the home page of group team sites does not have this huuuge banner – clear evidence that Microsoft know how to implement it if they want to ;)

If interested, you can get the code from https://github.com/wobba/spfx4fun/tree/master/react-pageheaderconfigurator. The code also has a nice sample on how to use a color picker as a property pane control.

site-page-header-configurator

8 comments:

  1. when add the web part to a modern page, gets error.
    Please review the problem. Thnks.

    ReplyDelete
    Replies
    1. Haven't tried it in a while, and what's the error?

      Delete
  2. Nice one ! P.S. It's still a problem - March 2018

    ReplyDelete
    Replies
    1. The part no longer works, but check out http://www.techmikael.com/2017/06/how-to-remove-banner-on-modern-pages.html and the article it links to as well.

      Delete
  3. There are now additional ways ways to customize the appearance and the layout of modern pages that are native to SharePoint online.

    A few of these options definitely create a better user experience:
    Configure the Title Region – SharePoint Modern Pages

    ReplyDelete
    Replies
    1. Indeed and this hack stopped working ages ago - and I said don’t do it :)

      Delete
  4. Open the page in SharePoint designer and change pagelayout to "Home". This will remove the header area. Ive done this quite a few times so far. Modern pages is not really meant worked on by SharePoint designer, so I guess this to is very unsupported.

    ReplyDelete
    Replies
    1. This is indeed supported but I'd rather use PowerShell as per https://www.techmikael.com/2017/05/how-to-remove-banner-on-modern-pages.html than SPD. SPD is best left alone in your basement thee days :)

      Delete