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

401 views

Published on

A guide to understanding your options for custom development in SharePoint and Office365 presented with Dave Feldman at SPTechCon D.C. 2017

Published in: Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ▲▲▲ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report  https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Your Intranet, Your Way

  1. 1. Your Intranet Your Way By: Dave Feldman & D’arce Hess SPTechCon Washington D.C. 2017
  2. 2. David Feldman @bostonmusicdave https://www.linkedin.com/in/bostonmusicdave bostonmusicdave.com
  3. 3. Introductions D’arce Hess, MVP President | DH Consulting LLC dhess@dhconsulting.me https://darcehess.com @darcehess https://www.linkedin.com/in/darcehess
  4. 4. Agenda Configure Customize Extend Custom Roadmap
  5. 5. Classic SharePoint
  6. 6. Modern SharePoint
  7. 7. Traditional SharePoint Customization Approaches Master Pages Custom .NET Application Pages Farm Solutions Custom .NET Web Parts Many of the traditional approaches are unavailable or not recommended for Office 365.
  8. 8. Extend • Javascript Embedding • SharePoint Framework Extensions Customize • Custom SharePoint Theme • Alternate CSS • Custom Page Layouts • jsLink Client-Side Rendering • Display Templates Configure • Theming • O365 • SharePoint • Office365 Logo • Custom Tiles in App Launcher • WebParts on Page • Authored Content Custom • HTML/JS Full Page Experiences • HTML/JS Widgets • SharePoint Framework (SPFX) SharePoint Customization Continuum No Code Full Code Modern Classic
  9. 9. Configurable Capabilities
  10. 10. Office365 Themes 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. O365 Themes are used to brand the Suite of O365 applications. Modern Classic
  11. 11. SharePoint Themes on classic sites 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 Primary way to brand Collaboration Sites in SharePoint. Classic
  12. 12. SharePoint Color Palette Tool https://www.microsoft.com/en- us/download/details.aspx?id=38182 Grab the complete PowerShell from: http://dfeldman.me/ModernTheming You must upload them to site assets and apply the theme using PNP PowerShell Consist of the following: • .spcolor file • Background Image SharePoint Themes on modern team sites Classic
  13. 13. SharePoint Themes on modern team sites Change the color theme to one of eight out-of- the-box themes. Site Actions > Change the Look Modern
  14. 14. https://docs.microsoft.com/en- us/sharepoint/dev/declarative-customization/site- theming/sharepoint-site-theming-overview Custom Themes can be deployed using the following methods: • JSON • Powershell • CSOM • REST API Modern Theme Generator Modern
  15. 15. Customization Capabilities
  16. 16. 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. Classic
  17. 17. Custom Page Layouts are available in both on premeses 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 Custom Page Layouts Classic
  18. 18. Page Layout Code Sample Classic
  19. 19. jsLink: Client-side Rendering Fields Edit FormsValidation List Views Control the rendering of SharePoint data with JavaScript on Classic Sites http://dev.office.com/patterns-and- practices-detail/1851 Classic
  20. 20. jsLink: Real Worl Examples Classic
  21. 21. jsLink: Code Sample Overrides rendering of: • Header • Item • Footer Create any HTML/CSS Applies to all lists on page* Use the list title for targeting Creates an alternative to: • Custom .NET WebParts • Custom .NET Application Pages • Script Editor Hacks Classic
  22. 22. 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 Classic
  23. 23. Display Templates: Add interactivity Works great for: • Search results • People results • Personal Experiences: Actions, Files, Appointments, Tasks • ECM Style Solutions • Template Center • P&P Center Classic
  24. 24. Display Template: Code Sample https://mytenant.sharepoint.com/_c atalogs/masterpage/Display%20Te mplates/Search Classic
  25. 25. Extension Capabilities
  26. 26. Javascript Injection (Embedding) Customize any aspect of any SharePoint page using JavaScript Add banners, headers, footers, ribbons, or modify any page in SharePoint Custom Headers and FooterHide Create Subsite Link Classic
  27. 27. Javascript Injection (Embedding) https://github.com/OfficeDev/PnP/tree/master/Sa mples/Core.EmbedJavaScript/Core.EmbedJavaScri ptWeb Classic
  28. 28. SharePoint Framework Extensions allow for developers to code additional functionality such as: 1) Custom Navigation 2) Footer 3) List Field Controls. https://docs.microsoft.com/en- us/sharepoint/dev/spfx/extensions/ overview-extensions SharePoint Framework Extensions Modern
  29. 29. Fully Custom Experiences
  30. 30. SharePoint Framework (SPFx) Used to create custom webparts that will work in following versions of SharePoint: • SharePoint 2016 • SharePoint Online – Classic Sites • SharePoint Online – Modern Team Sites • SharePoint Online – Communication Sites https://github.com/SPShire/sp-dev- solutions/tree/master/solutions/LinksAndHandlebarsTemplate Use our web parts from Shire Javascript-based using frameworks: • React.js • Handlebar.js Modern Classic
  31. 31. SharePoint Framework Generator The Yeoman Generator provides the back-end tooling in conjunction with Gulp to create Modern Web Parts. Tooling capability is not currently supported in Visual Studio. The SharePoint Workbench now allows for developers to create and work with Modern web parts without needing to have an instance of SharePoint installed locally. Modern Classic
  32. 32. Roadmap
  33. 33. OOB Configure Extend Custom Stop • Meeting Workspace • SharePoint Workspace Client • Legacy OneDrive Client • InfoPath Forms / Designer • Coded Sandbox Solutions • Master Pages • Farm Solutions Sunset • SharePoint OOB Workflow • Blog Template • Site News Feed • SharePoint Designer • Traditional SP Publishing • Designer – Workflow • Desgner – BCS • JS Embedding • JSLink • Display Templates • User Profile Customization • No Code Sandbox Solutions • Alternate CSS • Custom BCS Models Current • SharePoint App • Modern Team Sites (w/O365 Groups) • Yammer w/O365 Groups • Modern Libraries & Lists • Delve • Metadata Taxonomy / Folksonomy • Video Portal / Sway • Planner • OneDrive • Office 2016 • Next Gen OneDrive Sync • Communication Sites • PowerBI • Script Editor • SharePoint Framework WebParts • SharePoint REST API • Microsoft Graph API • Azure AD Apps • SharePoint Apps (Registered) • Oauth • Xamarin • Client Side JS Frameworks • Provider Hosted Addins • SharePoint Framework • React • TypeScript • Office UI Fabric Horizon • Azure B2B / B2C • Stream • Company News • Hub Sites • Site Analyics • PowerApps • PowerApp List Views • Modern Search • SharePoint Framework Extensions SP2007-2013TechSP2016TechRefresh
  34. 34. Site usage page Out-of-box site theming and branding Custom site themes and site designs News and pages in Microsoft Teams adds reach Personalized search in SharePoint Home Communication sites work with hub sites Additional insights on site and content usage Content categorization More branding options and site design actions New search experiences across web and mobile REST API for remote provisioning (available now) New SharePoint admin UX (preview) Branding in modern web experiences Custom site designs and site theming SharePoint Android for SharePoint 2013 & 2016 SharePoint hub sites New SharePoint admin UX (GA) More branding options and site design actions Roadmap for Communication Site Owners Roadmap for SharePoint Admins End 2017 Q1-Q2 2018
  35. 35. • Please thank our sponsors and staff. Without them, this event would not be possible. • Please fill out your evaluations. We want to know what we can do better.

×