SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Downloaden Sie, um offline zu lesen
Corinna Lins
UI Anpassungen in
SharePoint
Was hat sich geändert und was
können wir in modernen sites
anpassen?
corinna_lins
HEUTE AUF DER AGENDA
UI Anpassungen – Früher und Heute
Anpassungen in modernen SharePoint Seiten
Nützliche Tools und Erweiterungen
ICH WÜNSCHE MIR…
UI ANPASSUNGEN –
FRÜHER UND HEUTE
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
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
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
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
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
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)
ANPASSUNGEN IN EINER
MODERNEN SHAREPOINT
SEITE
Header
Hintergrund und
Style
Office 365 bar
Hub navigation
Section Layout und
Hintergrund
Theme Color
Navigation Style
Footer Bereich
Site Logo
WebParts
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
Header
Hintergrund und
Style
UI ANPASSUNG EINER TEAMSEITE
Site Logo
Theme Color
Header
Hintergrund und
style
Theme Color
UI ANPASSUNG EINER
KOMMUNKATIONSSEITE
Footer Bereich
Site Logo
Navigation Style
• 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
Header Hintergrund
und Style *
(kann geändert
werden)
Theme Color
HUBSITE BRANDING WIRKT
SICH AUF ZUGEHÖRIGE
WEBSEITEN AUS!
Navigation Style
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
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
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
NÜTZLICHE TOOLS
UND
ERWEITERUNGEN
• SharePoint Design
Principles
• Tipps für die Erstellung
von Seiten und WebParts
• SharePoint LookBook
(Beispiele)
• Und mehr
SHAREPOINT DESIGN WEBSITE
https://spdesign.azurewebsites.net/
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
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
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!
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

Weitere ähnliche Inhalte

Ähnlich wie Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020

Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020
Thomas Maier
 
Arbeiten mit SharePoint - Puffer IT Consulting
Arbeiten mit SharePoint - Puffer IT ConsultingArbeiten mit SharePoint - Puffer IT Consulting
Arbeiten mit SharePoint - Puffer IT Consulting
Provaria GmbH
 
Studiosdigital wieninternational.at
Studiosdigital wieninternational.atStudiosdigital wieninternational.at
Studiosdigital wieninternational.at
StudiosDigital GmbH
 

Ähnlich wie Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020 (20)

Sendung 17-10 Special: SharePoint
Sendung 17-10 Special: SharePointSendung 17-10 Special: SharePoint
Sendung 17-10 Special: SharePoint
 
Brand My SharePoint
Brand My SharePointBrand My SharePoint
Brand My SharePoint
 
Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020Office 365 Akademie News – Dezember 2020
Office 365 Akademie News – Dezember 2020
 
SharePoint 2013: Die Neuerungen im Überblick
SharePoint 2013: Die Neuerungen im ÜberblickSharePoint 2013: Die Neuerungen im Überblick
SharePoint 2013: Die Neuerungen im Überblick
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Microsoft SharePoint 2010 – neue Funktionen
Microsoft SharePoint 2010 – neue FunktionenMicrosoft SharePoint 2010 – neue Funktionen
Microsoft SharePoint 2010 – neue Funktionen
 
Arbeiten mit SharePoint - Puffer IT Consulting
Arbeiten mit SharePoint - Puffer IT ConsultingArbeiten mit SharePoint - Puffer IT Consulting
Arbeiten mit SharePoint - Puffer IT Consulting
 
News aus Office 365
News aus Office 365News aus Office 365
News aus Office 365
 
Studiosdigital wieninternational.at
Studiosdigital wieninternational.atStudiosdigital wieninternational.at
Studiosdigital wieninternational.at
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
SharePoint 2013 Search Driven Websites Collaboration Days 2014 David Schneider
SharePoint 2013 Search Driven Websites Collaboration Days 2014 David SchneiderSharePoint 2013 Search Driven Websites Collaboration Days 2014 David Schneider
SharePoint 2013 Search Driven Websites Collaboration Days 2014 David Schneider
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
SEO-Basics: Worauf es bei Suchmaschinenoptimierung wirklich ankommt | Stephan...
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Power BI Version 2.0
Power BI Version 2.0Power BI Version 2.0
Power BI Version 2.0
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
 
Notes Sharepoint Migration
Notes Sharepoint MigrationNotes Sharepoint Migration
Notes Sharepoint Migration
 
TechDays 2012 Internet Sites mit SharePoint 2013
TechDays 2012 Internet Sites mit SharePoint 2013TechDays 2012 Internet Sites mit SharePoint 2013
TechDays 2012 Internet Sites mit SharePoint 2013
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
 

Mehr von Corinna Lins

Mehr von Corinna Lins (6)

CollabDaysBenelux2020 - Building a remarkable onboarding experience for new e...
CollabDaysBenelux2020 - Building a remarkable onboarding experience for new e...CollabDaysBenelux2020 - Building a remarkable onboarding experience for new e...
CollabDaysBenelux2020 - Building a remarkable onboarding experience for new e...
 
M365 Virtual Marathon - Using The Power Of Search For Content Visualisation
M365 Virtual Marathon - Using The Power Of Search For Content VisualisationM365 Virtual Marathon - Using The Power Of Search For Content Visualisation
M365 Virtual Marathon - Using The Power Of Search For Content Visualisation
 
NACS - Customizing the UI in modern SharePoint workspaces
NACS - Customizing the UI in modern SharePoint workspacesNACS - Customizing the UI in modern SharePoint workspaces
NACS - Customizing the UI in modern SharePoint workspaces
 
Customize your UI in modern SharePoint workspaces
Customize your UI in modern SharePoint workspacesCustomize your UI in modern SharePoint workspaces
Customize your UI in modern SharePoint workspaces
 
SPS Oslo - Pretty up my SharePoint
SPS Oslo  - Pretty up my SharePointSPS Oslo  - Pretty up my SharePoint
SPS Oslo - Pretty up my SharePoint
 
Pretty Up My SharePoint
Pretty Up My SharePointPretty Up My SharePoint
Pretty Up My SharePoint
 

Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020

  • 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
  • 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
  • 18.
  • 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
  • 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