Overview of the new SharePoint – modern team sites, pages, web parts and applications

We’re heading into a new era with SharePoint at the moment, with BIG changes coming that will bring a new user experience and also a radically different development model. Team sites and publishing sites get the biggest update I’ve seen in years, and pages and web parts work differently - there’s a new web part framework based on JavaScript. These updates will come first to SharePoint Online but eventually to on-premises SharePoint too. You might have seen the “Future of SharePoint” announcements on May 4 2016 - in this post I want to go over the new things and add some thoughts, having been fortunate enough to be looking at this stuff for a while now. I’ll do this over the following posts in this series, with MANY more to come:

• Overview of the new SharePoint – modern team sites, pages, web parts and applications [this article]

• The new SharePoint development model – client web parts, JavaScript frameworks, npm, Gulp, TypeScript etc.

• Provisioning modern pages and SPFx web parts

Modern team sites – new home page, list and library UI and “SharePoint home”

If you run SharePoint team sites (i.e. most organizations using the platform), you’ll soon have the option of using a pretty attractive new home page provided by Microsoft. Here are some screenshots of what things might look like (click to enlarge):

As you’d expect, the mobile view looks good too:

A more branded site might look something like this:

It’s great to see innovation happening in team sites (arguably the core of SharePoint), and this is fairly sexy compared to what we’re used to! The home page has the following features:

• An area for curated/highlighted content
• Activity on the site (powered by the Office Graph). This consists of:
  • Conversations
  • Other activity e.g. activity around files in the site
• Responsive design so the experience on a mobile device works well

The new home page design won’t be forced on you – after all, you may have invested in a tailored experience when users land in a site (either with customizations or just content). Instead, administrators will have the ability to opt-in to using this as the default landing page for the site or not.

The Site Contents page gets a makeover too, now providing quick access to the most active content and showing some high level stats:

New document library and list UI

In addition to the new home page, lists and libraries get an update too. We’ve already seen the new document library interface (if you’re on First Release), and a similar experience will be rolled out to lists. There are some nice features, like the ability to drag and drop between groups in a “grouped” view, and this will automatically update metadata. For example, you could drag an item from “In progress” to “Complete”, and the corresponding metadata will be updated. This makes it possible to use a SharePoint list as something more like Trello, or perhaps a sprint planning board in TFS or similar.

More information on the changes to the user interface of lists will come soon.

SharePoint home

This one is nice too. I’ve previously complained about how SharePoint doesn’t really have a “top-level” – you might have lots of team sites and a publishing intranet, but you have to deal with the top-level thing yourself. This is even more fun if you actually don’t have a publishing intranet, but do have lots of team sites. So, Microsoft have acknowledged this by giving a big update to the “Sites” page. This is now renamed “SharePoint” and shows activity across sites you might be interested in (via Office Graph), recommended sites and so on. You can continue to create new sites from here (though as before, these are site collections based on the stock OOTB team site template, and created in a certain place - which might not be what you need), but one big difference is that these now also get an Office 365 Group! The next section describes this in more detail.

HOWEVER – it’s good to put “SharePoint home” in perspective. I can’t imagine many organizations being happy to actually use this as the browser default page across all their users. Most will already have some kind of intranet, and whether the home page shows company news, a social feed, key links or whatever – I can’t imagine SharePoint home replacing that. “SharePoint home replace not the intranet!”, as Yoda might say. Still, I see it as a massive improvement over what was there before and might work great in a smaller firm (click to enlarge):

Team sites are now Office 365 Groups, and vice-versa!

We’ve known for a while that there would be more harmonization between Office 365 Groups and team sites, and this is what it looks like. Later in 2016, when a site is created from the “SharePoint home” page you’ll actually be creating an Office 365 Group *and* a team site together. This is a big step forward for Office 365 Groups, since previously all you got before was the cut-down OneDrive library which didn’t have full capabilities such as metadata.  So that definitely helps on that particular “what to use when” question. Additionally, any existing Office 365 Groups you have will gain a team site. Clearly some planning work will usually still be required to establish policies and governance on how Groups are used, but at least now things are a lot more enterprise-ready.

Modern pages and web parts – a new page model

At the heart of these changes to team sites (and publishing sites – updates coming to those too!) is the new page model. To support some of the other changes such as the new web part framework, a new type of pages were needed too. Although us SharePoint folks often saw past it, if you sit with an end-user who is completely new you start to realise how clunky the current page edit experience is. Challenges included using the ribbon, editing web part properties and some aspects of adding content into the rich text editor. ALL that has been replaced in modern pages, with the goal being to provide a simplified experience closer to WIX or Medium.

Here’s what you need to know:

• New “client” web parts – with a completely new development model
• A new page “canvas” – this is the page framework which provides a simplified editing experience for end-users. There is no ribbon, and the whole process of adding/editing web parts is streamlined.
• New “client applications”
  • Page-based apps – an alternative to provider-hosted apps (which remember, are implemented with server-side code). Client applications are implemented purely in JavaScript, but have benefits such as having full “context” and using the Office 365 suite bar etc. 
  • List-based apps – think of these as an alternative to JSLink for transforming the display/edit/new experience around list items

These images don’t show the final version of the new page/canvas, but we will have a radically simplified text editor (similar to the Delve blogs UI you might have noticed):

The interface to add a new web part to the page is also much simpler:

A new publishing infrastructure

In addition to team sites, publishing sites also become much simpler for end-users. As you’d expect, the new page and web part model is used there too, meaning pages should be more lightweight. New web parts will be available, and there will continue to be a method of implementing a custom look and feel on such a site: 

What all this means for implementers

The introduction of new pages and web parts means that some choices are needed – should you implement your solution with the new building blocks, or stick to what’s out there already? What about solutions that are in use already? Should you migrate to the new page/web part model?

Some of the factors to consider include:

• New pages exist in a new pages library – they cannot simply be added to the existing ‘Site Pages’ library in a team site for example. This means navigation, roll-ups and so on need to be thought about if you’re considering some kind of migration or “mixed” solution.
• New web parts can be used in “classic” pages, but not vice-versa. So you can’t expect to use existing web parts (even existing out-of-the-box web parts) in new pages. To ensure new pages can do the things we need, Microsoft will provide a new set of web parts, equivalent to commonly used ones such as the content search web part, content editor web part and so on. These will most likely be simplified versions to align with the overall aim of making things easier for page authors. The aim is to have around 5-10 common OOTB web parts available in the new model at launch time, and then others will come later (including the ability to purchase web parts in the store).
  
  Note that when a new client web part is used in a classic page, there’s some “joining-up” of the edit experience for web part properties. There’s a single “Edit properties” button in the place where settings usually appear, and the user must click this to show the new style property pane and change settings there. It’s a bit clunky, but it works.
• The edit experience will be different between new pages/web parts and other page types. That’s the whole idea, but worth remembering if you’re considering a migration or mixed model.
• The page and development model will be different between new pages/web parts and other page types. As above.

So, it might be sub-optimal to mix the models too much within one site/solution. A simpler approach might be to consider the new building blocks for new sites and development projects, but to leave existing investments as they are. Your mileage may vary though.

What it means for developers (high-level)

I cover this in MUCH more detail in the next post The new SharePoint development model – client web parts, JavaScript frameworks, npm, Gulp, TypeScript etc., but let’s include a high-level view here:

• If you want to build new style client web parts and/or client applications, you’ve probably got some new skills to learn! The general framework and tooling are new, but web development and JavaScript are at the core and this brings things much more in line with the rest of the dev world.
• Core technologies include npm, Gulp, a little node.js, the Yeoman generator, and TypeScript. But the good news is you don’t have to be an expert in all these, and when you get your hands on the tooling you’ll see that it takes care of lots of things for you. As ever though, the more you know, the more you’ll be able to resolve any little quirks you hit if/when you need to do something a bit different.
• There are new config and manifest files to learn about, for example the web part manifest which describes a web part, it’s dependencies on other JavaScript libraries and so on..
• The “local development” model is very different – you don’t need to use IIS to host files on your local machine, since Gulp and nodel.js are used to serve files instead
• This “evolution” of the development model doesn’t *necessarily* replace existing options (e.g. provider-hosted apps, use of JavaScript embed approaches etc.). However, if you choose to implement your solution using the new building blocks, then you do need to adapt your skills and approaches

Other bits – SharePoint mobile app and PowerApps/Flow:

But that’s not all. I’ve tried to summarize the key changes for how SharePoint sites will be used (and built) above, but other things that will have an impact are the new mobile app and a new options for integrating your SharePoint sites/data with other tools. Let’s look at both of those briefly:

SharePoint mobile app

The new app looks great – one key pillar I really like is that you’ll have quick access to recently used sites and documents, in a way that will actually work. We’ve already had the OneDrive app, but the SharePoint app will cover team sites and publishing sites too. Additionally there are areas to help with finding people and and key links for your environment as defined by administrators. The iOS app will come first (early summer), followed by Windows Phone and Android:

PowerApps/Flow

You might already be familiar with PowerApps, Microsoft’s no-code platform for creating simple business apps which can also work on mobile devices. If not, my article PowerApps – no-code Azure apps which talk to Office 365, SharePoint, SQL and more may help. In a similar vein, Microsoft also recently announced a new service called “Flow” – this helps you take simple actions across common services under certain circumstances e.g. when something changes in SharePoint. It’s commonly described as being a bit like If This Then That (IFTTT) for the enterprise, and can talk to popular service such Salesforce, CRM, SharePoint/OneDrive, Dropbox, Twitter and so on:

I guess I’m particularly interested in some of the ones that can act as simple “event receivers” in SharePoint:

To add a flow related to something in SharePoint, a new “Add flow” button will take you into the simple designer where you can define the steps:

Clearly this isn’t a heavyweight workflow or forms tool, but it’s quite a nice option for taking simple actions related to things stored in SharePoint (and elsewhere).

Summary

So, big changes all round then! Like many others, I’m hugely excited about the future of SharePoint and it’s great to see the innovation that’s happening. I think the proposition for organizations using SharePoint and Office 365 is getting even stronger, and many of the the gripes and gaps are being addressed. My next post on the SharePoint framework, The new SharePoint development model – client web parts, JavaScript frameworks, npm, Gulp, TypeScript etc., looks at things from a developer perspective.

Other reading:

• The Future of SharePoint - https://blogs.office.com/2016/05/04/the-future-of-sharepoint
• SharePoint—the mobile and intelligent intranet - https://blogs.office.com/2016/05/04/sharepoint-the-mobile-and-intelligent-intranet/
• Flow and SharePoint - https://flow.microsoft.com/en-us/blog/sharepoint-and-flow 

For developers:

• My post - The new SharePoint development model – client web parts, JavaScript frameworks, npm, Gulp, TypeScript etc.
• Official Microsoft post - The SharePoint Framework - an open and connected platform