Slides aus dem Vortrag vom 23.01.2020 auf dem Collaboration Meetup in München

1. Corinna Lins
UI Anpassungen in
SharePoint
Was hat sich geändert und was
können wir in modernen sites
anpassen?
corinna_lins

2. HEUTE AUF DER AGENDA
UI Anpassungen – Früher und Heute
Anpassungen in modernen SharePoint Seiten
Nützliche Tools und Erweiterungen

3. ICH WÜNSCHE MIR…

4. UI ANPASSUNGEN –
FRÜHER UND HEUTE

5. Früher Heute
Klassische SharePoint Themes
• Nicht mehr notwendig in modernen
SharePoint Webseiten (dennoch
unterstützt)
• Color Palette Tool (Kostenlos) für
Farbdefinition Themes zu erstellen
Designs für moderne SharePoint
Webseiten (Modern Design)
• Einfache Erstellung von Themes mit
dem Theme Designer
• Bereitstellung über PowerShell

6. Früher Heute
Page Layouts
• Layout Definition in .aspx Seiten
• Komplexer Code
• Verwendung des SP Design Managers
Page Templates
• Seitenvorlagen erstellen und einfach
speichern
• Vorlage steht bei der Erstellung von
neuen Seiten zur Verfügung

7. Früher Heute
Entwicklungen für einen
klassischen Intranet Auftritt
• Responsive Design
• Footer Bereich
• Mega Menu Navigation
• News Carousel
Out-of-the-box Features
• Funktionen welche in jedem internen
Unternehmensauftritt benötigt werden

8. Früher Heute
Listendesign auf Basis von JSLink
• Nutzt Client Side Rendering
• Erfordert JavaScript Kenntnisse
Column und View Formatting
• JSON Objekt
• Kann durch einen Power User
hinzugefügt werden
Field Customizer (advanced)
• SPFx Erweiterung (Deployment
notwendig)
• Entwicklungskenntnisse notwendig

9. Früher Heute
Darstellung von Suchergebnissen
mit Display Templates
• HTML File wird von SharePoint in
JavaScript konvertiert
• Erfordert JavaScript Kenntnisse
Darstellung von Suchergebnissen
mit SPFx modern search Web Parts
• GitHub Lösung
• Templating System (analog zu Display
Templates) mit Handlebar
• Verfügbare WebParts: Search Results,
Search Bar, Search Refiners usw.
https://github.com/SharePoint/sp-dev-
solutions/tree/master/solutions/Moder
nSearch/react-search-refiners

10. Früher Heute
Weitere Werkzeuge die genutzt
wurden.
• Custom CSS und JavaScript
• Alternate CSS
• MasterPage Anpassungen
Welche Alternativen
gibt es?
• PnP Lösung (Script Editor)
• Entwicklung mit SPFx (Application
Customizer)

11. ANPASSUNGEN IN EINER
MODERNEN SHAREPOINT
SEITE

12. Header
Hintergrund und
Style
Office 365 bar
Hub navigation
Section Layout und
Hintergrund
Theme Color
Navigation Style
Footer Bereich
Site Logo
WebParts

13. HEUTE: 2 TYPEN VON MODERNEN SITES
TEAMWEBSITES
• Fokus: Zusammenarbeit
• Linke Navigation, keine Top Navigation
• Verbunden mit einer Office 365 Gruppe
KOMMUNIKATIONSWEBSITES
• Fokus: Bereitstellung von Inhalten für
viele User (Broadcast)
• Top Navigation, keine Linke Navigation
• Seitenveröffentlichung verfügbar

14. Header
Hintergrund und
Style
UI ANPASSUNG EINER TEAMSEITE
Site Logo
Theme Color

15. Header
Hintergrund und
style
Theme Color
UI ANPASSUNG EINER
KOMMUNKATIONSSEITE
Footer Bereich
Site Logo
Navigation Style

16. • Hubsites werden im SharePoint Admin
center (oder PowerShell) festgelegt
• Sites können immer nur einem Hub zugeordnet werden (in den Hub
Einstellungen der Site oder durch den Admin). – 1 (Hub): N(Sites)
HUBSITES UND AUSWIRKUNG AUF DIE UI
• Hubseiten
unterstützen bei der
Strukturierung und
Aggregierung der
Inhalte in SharePoint
– “zentraler Hub”
HUB SITE
Kommunikations- oder
Teamseite
Erstellt von User oder Admin
Hub Seite gesetzt durch admin
Team sites
(Erstellt von User
oder Admin)
Communication
sites
(Erstellt von User
oder Admin)
Navigation
Design
Suchscope
News und activity
rollup

17. Header Hintergrund
und Style *
(kann geändert
werden)
Theme Color
HUBSITE BRANDING WIRKT
SICH AUF ZUGEHÖRIGE
WEBSEITEN AUS!
Navigation Style

19. Moderne Site Templates: SITE DESIGNS
• Das Site Design kann bei der Erstellung von
neuen Websites in der SharePoint
Unternehmensstartseite ausgewählt werden
(https://tenant_name.sharepoint.com)
• Werden für eine Team- oder
Kommunikationsseite erstellt
• Werden in einem Site Script definiert
• Provisionierung von WebParts gewünscht? Mit
PnP PowerShell möglich, in Site Designs als
Aktion definierbar

20. List Formatting
• Für Spalten und Ansichten möglich
• JSON code kann direkt in die Liste/Bibliothek oder in die Spalte
hinzugefügt werden
• Beispiele auf GitHub verfügbar
• Siehe SharePoint List Formatting Samples
View formatting
Column formatting

21. Zentrale Ressourcen Bibliothek
Alle Bilder und Icons an einem
zentralen Ort
Zugriff aus jeder SharePoint site
Keine mehrfache Speicherung von
ofiziellen Unternehmensbildern
Aktivierung per PowerShell
https://docs.microsoft.com/en-us/powershell/module/sharepoint-
online/add-spoorgassetslibrary?view=sharepoint-ps

22. NÜTZLICHE TOOLS
UND
ERWEITERUNGEN

23. • SharePoint Design
Principles
• Tipps für die Erstellung
von Seiten und WebParts
• SharePoint LookBook
(Beispiele)
• Und mehr
SHAREPOINT DESIGN WEBSITE
https://spdesign.azurewebsites.net/

24. SharePoint Modernization Scanner
• Bietet eine Analyse der Readyness
einer Umgebung für moderne
Seiten
• Scannt nur SharePoint Online
Umgebungen
• Lokale Installation notwendig
• Scannt einzelne Seiten oder
gesamten Tenant
• Kostenlos (von Microsoft)
• + modernization repository mit
Skripten
https://github.com/SharePoint/sp-dev-
modernization/tree/master/Tools/SharePoint.Modernization

25. MICROSOFT 365 ROADMAP
Kommende Updates in SharePoint
• SharePoint Home Sites
• Custom Search Results
• Page Difference Visualisation
• Stock Images
• Image Resize in Image Webpart
https://www.microsoft.com/en-us/microsoft-365/roadmap

26. ZUSAMMENFASSUNG
• Der Fokus von SharePoint liegt auf die
Optimierung der Zusammenarbeit und nicht des
Designs. Dennoch ist eine gute Usability
essenziell.
• Mit Out-of-the-box Mitteln kann man Heute in
SharePoint sehr ansprechende Seiten gestalten.
• Microsoft bietet viel Unterstützung durch Material
und Tools. Nutzt diese!

27. NÜTZLICHE LINKS
• Microsoft 365 Roadmap
• UI Fabric Theme Designer
• SharePoint Design Website
• SharePoint LookBook
• SharePoint PnP Provisioning Service (Beta), by PnP Team
• SharePoint site design: PowerShell cmdlets, Docs Microsoft
• The ultimate guide to SharePoint site designs and site scripts, by Laura Kokkarinen
• Build your modern intranet with SharePoint in Office 365, by Mark Kashman
• SharePoint Framework Client-Side Web Part Samples & Tutorial Materials, GitHub
• SharePoint List Formatting Samples, GitHub