SharePoint Online Doc Lib UI Update April 2016 – Impact on Custom Branding? 6

As many of you may be aware, Microsoft pushed out a UI update for Document Libraries in Office 365 SharePoint Online last week. Of course my first thought is to wonder how this impacts the custom branding story. Let’s find out together!

Note: I have an obnoxious theme applied with Oslo master page just to put this through the paces… no commenting on how ugly it is!

First let’s look at how the new update reveals itself in SPO. I assume you need to have First Release turned on in order to even see this:

doclib1

Check out that snazzy banner! It’s worth noting that if you have a custom master page installed you will need to have <div id=”pageStatusBar”></div> in said master page before you will see the banner. When you click “Check it out” you will be presented with a new modern UI experience with a new clean layout and the ability to switch on a big grid of document icons. But as you will see in the next screenshot we not only lose our Oslo master page but we also lose the theme that I applied as well:

doclib2

Why do we lose all of our branding? I suspect this is what Microsoft refers to as a “railed (or on rails) experience”. In other words it’s just meant to be used and not customized… much like the OneDrive experience today. Note: I have no idea if they will add customization options in the future or not for this modern UI.

If we view source on the page, we see some really interesting HTML. If you are used to what the current version of SharePoint 2016 or 2013 pumps out for HTML from the legacy ASP.net master pages you might be in for a shock:

doclibsource

Wow! That looks like a lot of lines of code… but wait, it’s not actually a lot of lines, it only has about 15 lines total! What you are seeing is many many lines of JavaScript configuration minimized into a few lines. Looks kind of like they are using the Knockout JavaScript libraries… perhaps other modern scripts as well!

Welcome to the brave new world of SharePoint Online, based on modern web development methodologies! How do we customize it? I have no idea at this point… stay tuned!

What if you want to go back to the old look and feel? Thankfully (for now at least) Microsoft gives us a link in the lower left-hand corner “Return to classic SharePoint” that will revert the experience back to the same old lovable customizable SharePoint experience.

What do you think of this update… awesome usable out-of-the-box UI or not flexible enough for real work?

6 thoughts on “SharePoint Online Doc Lib UI Update April 2016 – Impact on Custom Branding?

  1. Reply Roland Oldengarm Apr 11,2016 3:13 am

    Great post 🙂 It was quite a shock that suddenly the new UI was revealed. Most bugs have been squashed I’ve been told, but I haven’t seen anyone complaining about custom themes.
    Are you on the Yammer IT Pro Network? In the blog post I’ve written about the new UI you’ll find a link.
    If not, I can leave your feedback there, Microsoft is reading.

    I think that the new UI is great, it will take some time for users to adopt. It’s a shame that you cannot apply custom branding though.

  2. Reply Aaron Chatham Apr 11,2016 8:10 am

    Thanks Randy for the heads up! Love the line “How do we customize it? I have no idea at this point”. SPO is challenging when it comes to design, but I guess thats what keeps us staying busy 🙂

  3. Reply Michal Pisarek Apr 11,2016 2:54 pm

    I actually like this new experience, although from a branding perspective it sucks. However this is all now in React not knockout or AngularJS. This looks like the direction that Microsoft is heading with Delve and now OneDrive all being written in React so some exciting times ahead.

  4. Reply Andrej Apr 12,2016 9:34 am

    Nice for sharing libraries, absolutely useless for libs which rely on metadata…

  5. Reply LaSP Apr 19,2016 5:10 am

    I love the different functions Microsoft has come up with – like the options you now have on each column directly from the view, but I think the branding will be confusing for the end users. Looks like you are being navigated to a new site with new branding.
    – The top navigation should not be hidden
    – The new top banner with links for New, Upload etc. should instead replace the current line/banner where the same link options appears today.

  6. Reply Biraj Jun 15,2016 1:21 am

    We have done branding by injection javascript injection (header & footer) using spWeb.UserCustomActions.
    But when I switched to new doc library UI, all custom branding goes away – no header footer at all.
    🙁

Leave a Reply