Customize your UI in modern SharePoint workspaces
- 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
- 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!
- 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