This document discusses various options for customizing the user interface (UI) in SharePoint on-premises and Office 365 environments. It covers using alternate CSS, master pages, JavaScript, and SharePoint Framework (SPFx) extensions to customize classic and modern SharePoint sites. It also provides an overview of capabilities like themes, site scripts, and hub sites for modern customizations. Challenges of modern site customizations are also addressed.

3. ABOUT ME

4. DO WE NEED TO DEFINE REQUIREMENTS
FOR UI CUSTOMIZATIONS?

5. WHY ARE UI CUSTOMIZATIONS SO
IMPORTANT?
• MARKETING
• USABILITY
• UNIQUE EXPERIENCE
• CORPORATE IDENTITY

6. START CUSTOMIZING YOUR UI

7. CHALLENGES IN BRANDING SHAREPOINT
WORKSPACES
✓Modern pages in classic sites
✓Classic pages in modern sites
✓SharePoint 2013/2016 on-premise

8. SESSION TOPICS
SharePoint
on-premise

9. STARTING WITH SHAREPOINT ON-
PREMISE…

10. SITE LOGO
Apply via UI or
use remote
provisioning

11. (CLASSIC) SHAREPOINT THEMES (1)
Create color theme with Color Palette Tool

12. (CLASSIC) SHAREPOINT THEMES (2)
• Upload color and font files to theme
gallery
• Create composed look with color
(.spcolor) and font files (.spfont)
• Apply themes by
UI, remote
provisioning with
CSOM,
PowerShell
Color File (.spcolor)
Font File (.spfont)
Masterpage (.master)
Background Image
Composed Look

13. ALTERNATE CSS
• Activate „Server Publishing Infrastructure“ Feature
• Make use of (Chrome) browser developer tools to add
custom CSS
• Apply alternate CSS by UI, CSOM, PowerShell

14. OTHER BRANDING POSSIBILITIES IN
SHAREPOINT ON-PREMISE
• Content/Script editor webpart
• Inject CSS in masterpage with custom actions
• Display Templates
• Page Layouts
• JSlink
• Site Templates

15. RESPONSIVE DESIGN
CSS Injection(PnP)PnP SharePoint
Patterns & Practices
UI Frameworks
(e.g.: Bootstrap,
Office UI Fabric)

16. …SWITCHING TO OFFICE 365

17. OFFICE 365 THEMES
• Add Logo
• Add Logo URL
• Set background image
• Set navigation bar colors

18. WHAT ABOUT THE MODERN UI
EXPERIENCE IN OFFICE 365?

19. SHAREPOINT ON-PREMISE
GOES ONLINE.
BUT WHAT HAPPENED TO
MY CUSTOM SOLUTIONS?

20. SHAREPOINT FRAMEWORK (SPFx)
• SharePoint Online and soon in SharePoint 2016 (FP2)
• Now: SPFx Version 1.6
• Inside a SharePoint page
• Deployment in modern and
classic pages
• Use common scripting
frameworks
SPFx WebParts SPFx Extensions
• Extends SharePoint user
experience
• 3 extension types:
✓ Application Customizers
✓ Field Customizers
✓ Command Sets

21. You made use of:
✓Alternate CSS
✓MasterPages
✓JavaScript
WE USE A LOT OF CUSTOM CODE
You want to add:
✓Custom CSS
✓HTML Elements
(Footer, Header)
✓JavaScript

22. WHAT ABOUT MY CODE SNIPPETS IN
CONTENT/SCRIPT EDITOR?
Example:
Background image of your homepage

23. CUSTOMIZING LIST FIELDS
Field customizer
• Only Office 365
• SPFx extension
• more powerful,
write any code
• “behavior”
Column formatting
• Only Office 365
• Uses JSON object
• Only simple
customizations
• „how to display“
JSLink
• Only in classic list
views
• Used in on-
premise version

24. WHAT ABOUT SEARCH RESULT PAGES IN
MODERN SITES?

26. THEMES FOR MODERN SITES
• Easy creation of color themes
• Define colors with the Color Theme
Generator
https://developer.microsoft.com/en-us/fabric#/styles/themegenerator

27. ADDING THEMES BY POWERSHELL
• Use generated code
from theme generator
• Use SharePoint
Management Shell
to add theme with
PowerShell

28. CREATE SITE SCRIPTS
• Ability to create modern site templates
(.JSON)
• Site script actions:
• Applying a theme
• Setting a site logo
• Creating a new list or library
• Creating site columns, content types, and
configuring other list settings
• And other…

29. ADD SITE SCRIPT AND SITE DESIGN
1. Add the site script to the tenant
2. Get generated site script ID and use it to add the site design

30. USING THEMES IN MODERN SHAREPOINT WORKSPACES

31. RECAP – DESIGN IN MODERN SITES
Create Theme with Theme Generator
Add Theme to Site
Add Site Script
Create Sites from Template

32. MODERN SITES AND RESPONSIVENESS

33. MOBILE APP
New:
• SharePoint hub sites
• Better UI experience on landing pages
• New tab layout for Android
• and more…

34. HUB SITES
• bring together related sites
to roll up contents
• simplified search
• shared navigation and look-
and-feel
• aggregated news

35. PnP SharePoint STARTER KIT
A DEMO communication site
• Provisioning of demo content
• Implementation of customizations
• Usage of Office UI Fabric and reusable
PnP SPFx controls
aka.ms/spdev-starter-kit

36. CHALLENGES IN MODERN SITES
• Creation of subsites
• Classic experience in modern sites (e.g.: site settings page)
• Frequently updates and new features

37. What can we
expect in future?

38. INTELLIGENCE AND AUTOMATION IN
SHAREPOINT
• AI for Images - Teach the cloud to
recognize new objects for auto-
tagging with cognitive services
https://www.customvision.ai
• Image Analysis – Analyze metadata
from images

39. WHAT? VR IN SHAREPOINT?
• Immersive, mixed reality experiences for anyone
• Smart templates, point-click simplicity
• Use cases
• Recruiting and onboarding
• Learning
• Product development
• Now: Early, limited
preview available

40. … AND WHAT ABOUT SHAREPOINT 2019?
New list creation experience
The Modern Experience will
be available in
SharePoint 2019!

42. AND THE JOURNEY
CONTINUES!

44. USEFUL LINKS
• SharePoint Color Palette Tool, https://www.microsoft.com/en-us/download/details.aspx?id=38182
• Step by Step create a SharePoint 2013 Composed Look, https://bniaulin.wordpress.com/2012/12/16/step-
by-step-create-a-sharepoint-2013-composed-look/
• SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP-
Tools/tree/master/Solutions/SharePoint.UI.Responsive
• Migrating from JSLink to SharePoint Framework Extensions, https://github.com/SharePoint/sp-dev-
docs/blob/master/docs/spfx/extensions/guidance/migrate-from-jslink-to-spfx-extensions.md
• Enrich your SharePoint Content with Intelligence and Automation,
https://techcommunity.microsoft.com/t5/SharePoint-Blog/Enrich-your-SharePoint-Content-with-
Intelligence-and-Automation/ba-p/194174
• What’s new for the SharePoint mobile app, https://techcommunity.microsoft.com/t5/SharePoint-
Blog/What-s-new-for-the-SharePoint-mobile-app/ba-p/183212
• SharePoint Framework Client-Side Web Part Samples & Tutorial Materials,
https://github.com/SharePoint/sp-dev-fx-webparts
• SharePoint site design: PowerShell cmdlets, https://docs.microsoft.com/en-
us/sharepoint/dev/declarative-customization/site-design-powershell