Your Intranet, Your Way
Download as PPTX, PDF2 likes979 views
This document discusses various approaches for customizing SharePoint intranets, both for on-premises and Office 365 environments. It outlines a continuum from basic configuration options like themes and alternate CSS, to more advanced customizations like client-side rendering, display templates, and full single page applications built with frameworks like Angular.js. Key customization points covered include master pages, page layouts, JavaScript injection, and full-page experiences. Examples are provided for custom list views, search results, and homepages built with techniques like these.
Your Intranet, Your Way
- 1. Your Intranet, Your Way By: Dave Feldman and D’arce Hess
- 2. Custom Master Pages Agenda Introduction Challenges Themes Display TemplatesAngular.js Alternate CSS Client-Side Rendering Questions
- 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. Custom Master Pages Different Approaches for cloud or onprem Client Side Avoid Master Pages New Extensibility Capabilities Single Page Applications
- 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. 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. Custom Master Pages SharePoint Customization Continuum Extend Configure Customize Extend Custom JavaScript Embedding (Injection)
- 11. Custom Master Pages SharePoint Customization Continuum Custom Experiences Configure Customize Extend Custom Full Page Experiences
- 12. Themes
- 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. 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. 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. 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. 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. Custom Master Pages Configure Customize Extend Custom Custom Page Layout Code Sample
- 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. Custom Master Pages Configure Customize Extend Custom JSLink Client Side Rendering Real world examples: Custom News List
- 21. Custom Master Pages Configure Customize Extend Custom JSLink Client Side Rendering Real world examples: Upcoming Events Calendar
- 22. Custom Master Pages Configure Customize Extend Custom JSLink Client Side Rendering Real world examples: Custom Links
- 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. 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. 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. 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. Custom Master Pages Configure Customize Extend Custom Display Templates Add interactivity
- 28. Custom Master Pages Configure Customize Extend Custom Display Templates https://mytenant.sharepoint.com/_catalogs/masterpage/Display%20Templates/Search
- 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. 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. Custom Master Pages Configure Customize Extend Custom JavaScript Embedding (Injection) Add a custom header or footer without master page customizations
- 32. Custom Master Pages Configure Customize Extend Custom JavaScript Embedding (Injection) Hide / Replace the Create SubSite link
- 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. 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. Custom Master Pages Configure Customize Extend Custom Full Page Experiences Full Responsive Employee Directory
- 36. Custom Master Pages Configure Customize Extend Custom Full Page Experiences Site Catalog
- 37. Custom Master Pages Configure Customize Extend Custom Full Page Experiences Fully Customized Homepage with Background Video, Animation, PowerBI and more