17. Define requirements for UI customizations
• Less investment of time, more customer satisfaction
• Better overview of technical challenges in SharePoint
• Common understanding by clear definition of UI requirements
18. Session topics
Define
Requirements
Branding
the UI
What is UI/UX?
Browser
Styleguides
Responsive design
Mock Ups
SharePoint issues
Infrastructure
CSS
Color Palette Tool
Themes
Responsive design
Retrieve data
Display templates
19. Pretty up with CSS
• Alternate CSS
• Content editor webpart
• Inject CSS in masterpage with
custom actions
• Display templates
• Page layouts
• SPFx webparts and extensions
• SharePoint add-ins
24. DEMO
Responsive Design with PnPhttps://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive
25. UserData
Content Visualisation
How to retrieve data?
• SharePoint REST API
• SharePoint Client Context
• Search API
• SP Services (SharePoint 2010)
• Graph API (Office 365)
Libraries
Lists
User Profile
Information
Visualisation
26. Comparison
Display Templates
• Uses search API
• SharePoint specific file
• HTML file automatically
converted to JS
• SharePoint know-how
needed
Custom Development
• Use REST API or client
context
• JavaScript development
• Sandbox solutions, farm
solutions, SharePoint apps,
SPFX apps or add-ins, script
editor
27. Search and Display Templates
Integrate any template
(e.g.: carousel, slider, list view)
to your display template
28. Customize Fields
Field customizer
• Only Office 365
• SPFx extension
• more powerful,
write any code
Column formatting
• Not yet available
• Only Office 365
• Uses JSON object
• Only simple
customizations
JSLink
• Only classic list
views
• Used in on-
premise version
30. SharePoint Communication Sites
• Use them for publishing
purpose
• Multiple webparts and layouts
already available
• New page layouts can be
created
31. Modern Sites
• Today:
• Classic sites with lists and
libraries in modern view
• Modern sites
(automatically creation of
groups)
• Listing of all modern sites not
yet possible in SharePoint
• Actually via PowerShell or
groups
• In future SPO admin center
32. Themes for modern
sites in Office 365
• Define colors with the theme
generator
https://developer.microsoft.com/en-
us/fabric#/styles/themegenerator
• Add themes via PowerShell
via UI not yet possible
• Apply theme in the UI
future improvements coming soon
33. DEMO
Themes for modern siteshttps://developer.microsoft.com/en-us/fabric#/styles/themegenerator
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-powershell
37. 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/
Image Slider with SharePoint 2013 Search Results Web Part, https://en.share-gate.com/blog/image-slider-
with-sharepoint-2013-search-results
SharePoint 2013 Search Query Tool, https://sp2013searchtool.codeplex.com/
PnP SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP-
Tools/tree/master/Solutions/SharePoint.UI.Responsive
Use PowerShell to customize the theme of a SharePoint Modern Site,
https://today.collab365.community/story/how-to-use-powershell-to-customize-the-theme-of-a-sharepoint-
modern-site/
38. Help us do
better next
time…
Session Evaluation
https://goo.gl/fGz887
Event Evaluation
https://goo.gl/GRmMKm
11.11.2017 SharePoint Saturday Oslo 2017