Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Your Intranet, Your Way

644 views

Published on

Presented by David Feldman and D'arce Hess at SPTechCon Austin, TX, February 2016

Published in: Technology
  • Be the first to comment

Your Intranet, Your Way

  1. 1. Your Intranet, Your Way By: Dave Feldman and D’arce Hess
  2. 2. Custom Master Pages Agenda Introduction Challenges Themes Display TemplatesAngular.js Alternate CSS Client-Side Rendering Questions
  3. 3. Custom Master Pages Introduction
  4. 4. Custom Master Pages David Feldman @bostonmusicdave https://www.linkedin.com/in/bostonmusicdaveboston musicdave@gmail.com
  5. 5. Custom Master Pages D’arce Hess @darcehess https://www.linkedin.com/in/darcehess Darce.Hess@avepoint.com
  6. 6. Custom Master Pages Custom Master Pages Farm Solutions Master Pages Custom .NET Web Parts Custom .NET Application Pages Traditional SharePoint Customization ApproachesMany of the traditional approaches are unavailable or not recommended for Office 365.
  7. 7. Custom Master Pages Different Approaches for cloud or onprem Client Side Avoid Master Pages New Extensibility Capabilities Single Page Applications
  8. 8. Custom Master Pages SharePoint Customization Continuum Configure Configure Customize Extend Custom Theming • O365 • SharePoint Office 365 Logo Custom Tiles in the App Launcher Web Parts on Page Authored Content
  9. 9. Custom Master Pages SharePoint Customization Continuum Customize Configure Customize Extend Custom • Custom SharePoint Theme • Alternate CSS • Custom Page Layouts • JSLink Client-side Rendering • Display Templates
  10. 10. Custom Master Pages SharePoint Customization Continuum Extend Configure Customize Extend Custom JavaScript Embedding (Injection)
  11. 11. Custom Master Pages SharePoint Customization Continuum Custom Experiences Configure Customize Extend Custom Full Page Experiences
  12. 12. Themes
  13. 13. Custom Master Pages Configure Customize Extend Custom You can: • change the color of the Suite bar • Add a logo in center of the Suite Bar • Add a background image • Change color of App Launcher icon Functionality is available through the Central Admin tile in the App Launcher menu. The theme cannot be uninstalled once applied. If a SharePoint theme is applied, it will overwrite the tenant theme. Office 365 Themes O365 Themes are used to brand the Suite of O365 applications.
  14. 14. Custom Master Pages Configure Customize Extend Custom SharePoint comes with several Themes/Composed Looks OOTB. You can create your own custom Theme using the SharePoint Color Palette Tool. Consist of the following: • Master Page • .spcolor file • .spfont file • Background Image SharePoint Themes Primary way to brand Collaboration Sites in SharePoint.
  15. 15. Custom Master Pages Configure Customize Extend Custom The SharePoint Color Palette Tool allows for an interface to create the .spcolor file that is a part of the composed look in Sharepoint. SharePoint Color Palette Tool: https://www.microsoft.com/en- us/download/details.aspx?id=38182 SharePoint Color Palette Tool Easily customize .spcolor files
  16. 16. Custom Master Pages Configure Customize Extend Custom Alternate CSS Alternate CSS allows for additional customization without the need for customizing the Master Page. Some of the items Alternate CSS can be used for: • Responsive Web Design (RWD) • Additional Color Changes un the UI • Additional Font and Font Size Changes • Styling of Custom Page Layouts Added in through the Master Page Site Settings vs Registration in the Master Page. Only one field, so multiple Style Sheets may need to be @import into the one file.
  17. 17. Custom Master Pages Configure Customize Extend Custom Custom Page Layouts Custom Page Layouts are available in both on prem and O365 versions of SharePoint. The styling for the look and feel for the layouts is complete using Alternate CSS. Page Layouts can be associated with a Content Type for additional functionality. Custom Page Layouts are available to be used in tenants where Publishing features have been activated. They are not able to be used in Collaboration Sites such as Team Sites
  18. 18. Custom Master Pages Configure Customize Extend Custom Custom Page Layout Code Sample
  19. 19. Custom Master Pages Configure Customize Extend Custom Fields Edit Forms Validation List Views http://dev.office.com/patterns-and-practices-detail/1851 JSLink Client Side Rendering Control the rendering of SharePoint data with JavaScript
  20. 20. Custom Master Pages Configure Customize Extend Custom JSLink Client Side Rendering Real world examples: Custom News List
  21. 21. Custom Master Pages Configure Customize Extend Custom JSLink Client Side Rendering Real world examples: Upcoming Events Calendar
  22. 22. Custom Master Pages Configure Customize Extend Custom JSLink Client Side Rendering Real world examples: Custom Links
  23. 23. Custom Master Pages Configure Customize Extend Custom Overrides rendering of • Header • Item • Footer Create any HTML/CSS Applies to all lists on page* Use the list title for targeting JSLink Client Side Rendering Code Sample *of same list type
  24. 24. Custom Master Pages Configure Customize Extend Custom • Custom .NET WebParts • Custom .NET Application Pages • Script Editor Hacks JSLink Client Side Rendering Provides an alternative to:
  25. 25. Custom Master Pages Configure Customize Extend Custom Control Template It’s the container around your results where you refer to any custom CSS or JS files you may want to use. This is the part does not get repeated as each items gets loaded in the Search Results. Item Template This is where you design how each item will look like, which managed properties from the result item will be used and the html used to display them. Display Templates Two kinds of display templates
  26. 26. Custom Master Pages Configure Customize Extend Custom Display Templates are used to display data from SharePoint search. Search is the best way to aggregate data from across SharePoint or even integrate data from outside SharePoint. Display Templates provide a framework to create a custom experiences with data from the search engine. This is a custom card template used to make a Site Catalog experience in an intranet Display Templates Custom Search Experiences
  27. 27. Custom Master Pages Configure Customize Extend Custom Display Templates Add interactivity
  28. 28. Custom Master Pages Configure Customize Extend Custom Display Templates https://mytenant.sharepoint.com/_catalogs/masterpage/Display%20Templates/Search
  29. 29. Custom Master Pages Configure Customize Extend Custom • Search results • People results • Personal Experiences: Actions, Files, Appointments, Tasks • ECM Style Solutions • Template Center • P&P Center Display Templates Work great for
  30. 30. Custom Master Pages Configure Customize Extend Custom Customize any aspect of any SharePoint page using JavaScript Add banners, headers, footers, ribbons, or modify any page in SharePoint JavaScript Embedding (Injection) User Custom Actions
  31. 31. Custom Master Pages Configure Customize Extend Custom JavaScript Embedding (Injection) Add a custom header or footer without master page customizations
  32. 32. Custom Master Pages Configure Customize Extend Custom JavaScript Embedding (Injection) Hide / Replace the Create SubSite link
  33. 33. Custom Master Pages Configure Customize Extend Custom JavaScript Embedding (Injection) Code Sample https://github.com/OfficeDev/PnP/tree/master/Samples/Core.EmbedJavaScript/Core.EmbedJavaScriptWeb
  34. 34. Custom Master Pages Configure Customize Extend Custom • Full page HTML / JavaScript Applications • Hosted inside SharePoint • No constraints - Leverage your frameworks of choice Full Page Experiences Custom Experiences with AngularJS Video Portal Delve Blogs OneDrive for Business Your Custom Experiences
  35. 35. Custom Master Pages Configure Customize Extend Custom Full Page Experiences Full Responsive Employee Directory
  36. 36. Custom Master Pages Configure Customize Extend Custom Full Page Experiences Site Catalog
  37. 37. Custom Master Pages Configure Customize Extend Custom Full Page Experiences Fully Customized Homepage with Background Video, Animation, PowerBI and more
  38. 38. Custom Master Pages Demos
  39. 39. Custom Master Pages Questions ?? ?

×