Modernize the user interface
One of the immediately visible elements of a modern team site or communication site is its modern user interface, as evidenced on its home page and lists and library pages.
But what if your site today still has lists and libraries, wiki pages, or web part pages that use the classic user interface?
To make the switch to a modern user interface, you need to focus on the following:
- Transitioning your lists and libraries to use the modern user interface (also referred to as the modern list and library experience)
- Transforming your site pages from classic wiki and web part pages into modern pages
Important
The "classic" experience is not being deprecated; both "classic" and "modern" will coexist.
Important
Modernization tooling and all other PnP components are open-source tools backed by an active community providing support for them. There is no SLA for open-source tool support from official Microsoft support channels.
Where do you start when you want to modernize the user interface of your sites? What sites should be modernized first? These are very relevant questions and are addressed in the following steps.
Step 1: Identify and educate stakeholders
Before embarking on this modernization journey, it's important that the following stakeholders become familiar with the SharePoint modern user interface.
- Key business stakeholders - The modern user interface must meet the needs of the business user, and the key business stakeholders should be advocates of this change. Granting them access to a playground environment and closely working with them will help them understand what works well and what doesn't. Later on, these key business stakeholders will play a crucial role in helping your end-users adopt the modern user interface.
- Customization team and developers - Because customizations built in the past may no longer work in the modern user interface, this team needs to be available to redesign those customizations.
- SharePoint administrators - The admins will be the ones that enable the modern user interface across your tenant and its sites.
- Change management and governance teams - If these teams exist in your organization, they should be looped in as well because switching from the classic user interface to the modern user interface impacts change for users, and might require an update of internal training materials.
With the right teams looped in and educated, you can continue to the next step.
Step 2: Analyze your site collections
Your tenant might contain thousands of site collections, so which of these site collections are good candidates to modernize and which aren't? To help you understand the readiness of your existing sites, Microsoft has built a scanner: The SharePoint Modernization scanner provides a detailed analysis of your site's readiness for connecting to a Microsoft 365 group, helps you get a deep understanding of the modern user interface compatibility of your lists and libraries and also performs a detailed analysis of the wiki and web part pages in your environment to prepare you for a page modernization. These outcomes can be used initially to drive remediation work, followed later on by migration work. If your focus is to transform your site pages, to transform your lists and libraries or to connect your sites to a Microsoft 365 group then use this scanner.
| Microsoft 365 group connection readiness |
|---|
 |
| List readiness |
 |
| Page transformation readiness |
 |
Step 3: Modernize your site collections
After you analyze the sites that you want to modernize, you can continue with the actual modernization, which contains one or more of the following components:
Replace incompatible customizations with equivalents that work in a modern user interface. Following are some samples. For more information, see Modernize customizations.
- Replace JSLink with a column formatter or with a SharePoint Framework Field Customizer extension.
- Replace existing first-party web parts with SharePoint Framework web parts in case there's no out-of-the-box modern web part available that provides similar capabilities.
- Replace JavaScript embedding via user custom actions with a SharePoint Framework Application Customizer extension.
- Replace list commands (user custom actions) with SharePoint Framework ListView Command Set extensions.
Modernize your user experience by:
- Enabling lists and libraries to show in the modern user interface by replacing customizations, removing incompatible columns from the used views, or (as a last resort) moving data into a modern user interface-compatible list type.
- Connecting your site to a Microsoft 365 group, which gives your site a modern home page and enables your site to use, for example, a mailbox or Microsoft Planner, which then enables you to use a modern version of a calendar and task list.
- Creating modern pages and configuring these to be "similar" to your key classic wiki and web part pages. Programmatic page transformation should be done for the key pages of your sites; transforming all pages is resource-intensive and often not needed. To assist in this triage, the SharePoint Modernization scanner can give you usage information about the current wiki and web part pages.
Communicate to your end users about the completed changes; the site will work differently in a modern version, so your users need to be aware of that.
See also
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Submit and view feedback for