Slides from my session in SPS Oslo

1. Pretty Up My
SharePoint
Corinna Lins, Bridging IT
@corinna_lins
11.11.2017 SharePoint Saturday Oslo 2017

2. Sponsors
11.11.2017 SharePoint Saturday Oslo 2017

3. About me

4. Please make my
SharePoint not look and
feel like SharePoint!

5. 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

6. UI UX

7. How important are requirements
for UI customizations in
?

8. Browser
compatibility

9. Responsive
design

10. Styleguide,
corporate identity,
existing sources

11. Use logo
and
images
Remember :
You bought it,
you own it!

12. Use
mock-ups

13. User experience expectation
Modern document library experience in SharePointClassic document library experience in SharePoint

14. Understand
SharePoint
Structure
elements
• Contains left and top navigation
• Loads resources (CSS and JS)
• Uses content placeholders
• Layout of the content area
• Used in publishing sites

15. Check SharePoint
concerning issues
e.g.: Site Collection Publishing Feature
Site collection feature
Site feature

16. Check infrastructure
 SharePoint themes
 Masterpages
 Page Layouts
+ Office 365 themes
+ Themes for modern sites
+ SPFx (Addins)

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

20. Use browser developer tools
Google Chrome
Control + Shift + i

21. SharePoint
Color
Palette
Tool
Create SharePoint themes
(Composed looks)
3 steps:
- Create theme files
(.spcolor and .spfont)
- Create composed look
- Apply theme

22. DEMO
Composed Looks

23. Make SharePoint Responsive
PnP
CSS Injection
PnP SharePoint
Patterns & Practices
Responsive Design
UI Frameworks
(e.g.: Bootstrap,
Office UI Fabric)

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

29. Additional branding
possibilities in Office 365

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

34. Color my SharePoint
SharePoint
on-premise
• Office 365 Themes
• Themes for modern sites
• Custom CSS
• SharePoint Themes
SharePoint
online

35. Coming Soon – Hub Sites
• bring together related sites to
roll up contents
• simplified search
• shared navigation and look-
and-feel.

36. And the journey
continues!

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