Pretty Up My SharePoint
-
Upload
corinna-lins -
Category
Technology
-
view
150 -
download
0
Transcript of Pretty Up My SharePoint
![Page 1: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/1.jpg)
Pretty Up My
4th of March 2017@MS HQ Munich
Corinna Lins
@corinna_lins
Pretty Up My SharePointTips and tricks for designing the UI
#SPSMUC14
![Page 2: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/2.jpg)
Pretty Up My
![Page 3: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/3.jpg)
Pretty Up My
About me
• SharePoint Consultant, for 5 years
• Focus areas: SharePoint/Office365 UI Customizing and Consulting, HCI, UI and UX
• Since 2015 at Munich
![Page 4: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/4.jpg)
Pretty Up My
Please make my SharePoint not look and feel like SharePoint!
![Page 5: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/5.jpg)
Pretty Up My
Session topics
Define
RequirementsBranding
the UI
What is UI/UX? Browser Styleguides Responsive design Mock Ups SharePoint issues Infrastructure
![Page 6: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/6.jpg)
Pretty Up My
UI UX
Emotion
Meet user
needsVisual
Elements
Interaction
![Page 7: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/7.jpg)
Pretty Up My
Do we need to define Requirementsfor UI Customizations in
?
![Page 8: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/8.jpg)
Pretty Up My
Browser compatibility
![Page 9: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/9.jpg)
Pretty Up My
Styleguide,
corporate identity,
existing sources
![Page 10: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/10.jpg)
Pretty Up My
Responsive
Design
![Page 11: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/11.jpg)
Pretty Up My
Use
Mock-ups
![Page 12: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/12.jpg)
Pretty Up My
User Experience Expectation
Modern document library experience in SharePointClassic document library experience in SharePoint
![Page 13: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/13.jpg)
Pretty Up My
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
![Page 14: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/14.jpg)
Pretty Up My
Check SharePoint
concerning issues
e.g.: Publishing Feature
Site collection feature
Site feature
![Page 15: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/15.jpg)
Pretty Up My
Check Infrastructure
vs.
![Page 16: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/16.jpg)
Pretty Up My
Define Requirements for UI Customizations
PROS
• Less investment of time, more customer satisfaction
• Better overview of technical challenges in SharePoint
• Common understanding by precise UI requirements
![Page 17: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/17.jpg)
Pretty Up My
Do you know other important
Requirements for UI Customizations
in ?
![Page 18: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/18.jpg)
Pretty Up My
Session Topics
Define
RequirementsBranding
the UI
CSS Color Palette Tool Themes Responsive design Retrieve data Display templates
![Page 19: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/19.jpg)
Pretty Up My
Pretty up with CSS
• Alternate CSS
• Content editor webpart
• Custom actions
• CSS Reference in masterpage
• Display templates
• Page layouts
• SPFx
![Page 20: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/20.jpg)
Pretty Up My
Use Browser Developer Tools
Press F12
![Page 21: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/21.jpg)
Pretty Up My
SharePoint
Color
Palette
Tool
Create SharePoint Themes
![Page 22: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/22.jpg)
Pretty Up My
What about custom theme in modern site?
# Apply a custom theme to a Modern Site
Add-PnPFile -Path .\SPcolorFile.spcolor -Folder SiteAssets
# Second, apply the theme assets to the site
$web = Get-PnPWeb
$palette = $web.ServerRelativeUrl + "/SiteAssets/SPcolorFile.spcolor"
# Method: public void ApplyTheme(string colorPaletteUrl, string fontSchemeUrl, string backgroundImageUrl, bool shareGenerated)
$web.ApplyTheme($palette, [NullString]::Value, [NullString]::Value, $true)
$web.Update()
…
$web.Context.ExecuteQuery()
See also: https://msdn.microsoft.com/en-us/pnp_articles/modern-experience-customizations-customize-sites
Only
PowerShell
![Page 23: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/23.jpg)
Pretty Up My
DEMOComposed Looks andCSS in SharePoint
![Page 24: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/24.jpg)
Pretty Up My
Make SharePoint Responsive
Only CSS
example
SharePoint Patterns & Practices Responsive Design
UI Frameworks (e.g.: Bootstrap)
![Page 25: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/25.jpg)
Pretty Up My
DEMOResponsive Design with PnP
![Page 26: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/26.jpg)
Pretty Up My
UserData
How to retrieve data?
• SharePoint REST API
• SharePoint Client Context
• SP Services (SharePoint 2010)
• Search API
• Graph API
Libraries
Lists
User Profile
Information
Visualisation
![Page 27: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/27.jpg)
Pretty Up My
Search and Display Templates
![Page 28: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/28.jpg)
Pretty Up My
DEMODisplay Templates in use
![Page 29: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/29.jpg)
Pretty Up My
SPFxWebPart
SPFx 40 Fantastics Web Parts
![Page 30: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/30.jpg)
Pretty Up My
Customizations in SharePoint
Techniques
• SharePoint Themes
• Masterpage
• Page Layouts
• Display Templates
• JSLink
• Manipulation with JavaScript
• PnP Solutions
Tools
• Design Manager
• Color Palette Tool
• UI and JS Frameworks
• PowerShell
• SPFx
![Page 31: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/31.jpg)
Pretty Up My
SharePoint Rocks!
![Page 32: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/32.jpg)
Pretty Up My
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/
SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive
SPFx 40 Fantastics Web Parts, https://github.com/OlivierCC/spfx-40-fantastics
PnP SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive
![Page 33: Pretty Up My SharePoint](https://reader031.fdocuments.net/reader031/viewer/2022030306/58cf036d1a28ab5f2b8b45f7/html5/thumbnails/33.jpg)
Pretty Up My
Please visit our sponsors who made this day possible!
Thank you!
Rate this session with the event app
http://app.spsmuc.com