1. Branding Without MasterPages, the Future of UX in SharePoint Online

3. Alec McCauley amccauley@itgroove.net @itgroove_alec
4/16/2018 8:04 PM
Alec McCauley
Team Lead, Senior Consultant
itgroove Professional Services
@itgroove_alec
mccalec.itgroove.net

4. Victoria, British Columbia, Canada
4/16/2018 8:04 PM
From Canada “eh”
We like being close to our clients, but having a nice body of water between us
We have clients from around the world
Victoria, British Columbia, Canada

5. 4/16/2018 8:04 PM
Quality of life “island life”
Family and spouses
“Cloud ready” / embracing the cloud
Tired of patching… we want to go home at 6 whenever possible … and so do our clients

7. Branding / UX in SharePoint Isn’t Dead

8. The goal (always): Keep it simple. KISS
Keep your project simple, keep this presentation simple.

9. What I’m not saying: That everything done up until now is wrong, that you need to drop everything and do this.

10. Carefully dipping in your toe Getting your foot bitten off Self Doubt
Skepticism
Carefully dipping in your toe
Getting your foot bitten off
Self Doubt
Self Looting
Searching for alternate careers
Gentle Rocking
Acceptance
Seeing the Power
Full on love

11. Three Important Questions: Should we brand. How much do we brand
Three Important Questions: Should we brand? How much do we brand? Where should we brand?

12. Intranet Many Readers few Authors Collaboration Site All Authors

13. Travelling Intranet

14. The scale of branding…

15. The last (most important) question: Where should we brand?

16. The SharePoint Framework (the future)…

17. SharePoint SharePoint 2007, 2010 Sandbox Solutions
WSPs, Full Trust Code

18. Display Templates, JSLink
SharePoint 2013
Display Templates, JSLink
Overrides
SharePoint

19. SharePoint Framework
SharePoint UX
Custom UX
SharePoint Platform

20. Old Model OOTB OOTB Custom OOTB OOTB OOTB Custom Custom Custom OOTB

21. New Model
OOTB
Custom

22. What are MasterPages? An ASP.net Concept
SharePoint Renders
Site Collection MasterPage defines UI and Content Placeholders
ContentPlaceHolders get populated by SP or Page Layouts

23. In SharePoint Online why is it recommended that we don’t take this approach?

24. Cloud Implications
If you take a copy of the MasterPage your site is stamped out at that point in time (forever frozen). Microsoft has stated that they could in the future change the underlying structure which could break your Custom MasterPage. Office 365 / SharePoint Online is moving away from its ASP.net roots, and more to client side modern Web Development.

25. So what do we do instead?

26. Injecting …. Embedding UI

27. How does it work?
The SharePoint Page renders on the SharePoint server and is outputted to the client browser
Using a Custom Action we load a JavaScript file along with the page rendered from the Server
Using DOM Events we can bind code to the different points of the page load lifecycle
We embed our additional UI elements into the SharePoint Page
We can manipulate the SharePoint UI itself
We can load CSS etc

28. What’s a Custom Action?

29. How do we apply the Custom Action?
Any language that can call into CSOM (we tend to use PowerShell) SharePoint Provider Hosted Add-Ins, Windows App, C# Command Line

30. The Benefits
We don’t have to reinvent the wheel, we don’t have to stamp it out. We can be far more responsive to the user. We can use modern development patterns, platforms and technologies. Hybrid (2013, to 2016, to Online)

31. The Challenges
We have to think different. Timing, timing, timing, and more timing problems. We don’t want to make the browser do twice the work. Sometimes SharePoint crashes into you and crushes your dreams.

32. A note about Browsers…

33. Responsive Design (Bootstrap)

34. Go as far as you possibly can with CSS

35. Compiled CSS

36. Apply a Custom Action to load it Write some JS and some CSS
Create a JS and CSS file
Apply a Custom Action to load it
Write some JS and some CSS

37. Use Yoeman to Scaffold your solution Use GIT to work with your team
Use JS Frameworks to create your solution
Write Unit Tests
In JavaScript bind you UX to the DOM
Use Gulp to Deploy to UX Site Collection
Use PowerShell to Apply to Site Collection

38. Having a UX site collection EVERYONE read, nobody write, for branding testing, message on the front page that says “GO AWAY!”

39. CDN

40. JQuery is you best friend.

41. Sometimes it’s the little things…

43. The Toolkit Visual Studio Code TypeScript Node.JS (NPM)
KnockoutJS, React, Angular
Gulp
LESS

44. The JavaScript: 2 custom actions Loader.js Core.js Load loader.js
Load JQuery
Loader.js
Load CSS
Wait for JQuery
Load core.js
Load custom.js
Core.js
Bind to DOM events
Create UX / UI
Call custom.js

45. Important: Namespace

47. Think about the Page Lifecycle, create your own Lifecycle

48. Stay out of SharePoint’s way.

49. Graceful Degradation

54. = templating

55. So what about SharePoint on-prem

56. itgroove.net/insights
Where to find more?
mccalec.itgroove.net
itgroove.net/insights
blogs.office.com

58. 4/16/2018 8:04 PM
Questions?
Change this up a bit… ask you a question.

59. Have a great day, ‘eh