Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
Core.EmbedJavaScript.HeaderFooter
Core.EmbedJavaScript.HeaderFooter.sln
README.md Added sample readme tracking to all components, samples and solutions. Sep 6, 2016

README.md

Header & Footer SharePoint Add-In

Summary

The Core.EmbedJavaScript.HeaderFooter sample provides a provision page to include a custom Header and Footer. The Header and Footer sample includes custom Global Breadcrumbs (SharePoint or JSON Data) and custom Global Ribbons that are acessible in all sites and subsites associated to Site Collection. The Custom Breadcrumb is able to Navigate betweeen all Site Collection Sites and sub folders where user is located, the Site Collection Navigation is an custom Breadcrumb stored in PropertyBag base in JSON Data. The Breadcrumb & Ribbon is available in all SharePoint Pages using an Scriptlink file stored in Site Collection, both features keep Minimal Download Strategy "MDS" enable.

Notice. Techniques shown in this sample do require full permission to web or site collection level, so this is not a suitable model for apps designed to be distributed from the SharePoint store.

Applies to

  • Office 365 Multi Tenant (MT)
  • Office 365 Dedicated (D)
  • SharePoint 2013 on-premises

Prerequisites

None

Solution

Solution Author(s)
Core.EmbedJavaScript.HeaderFooter André Lage

Version history

Version Date Comments
1.0 Jun 18th 2015 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Installation

The Solution is an SharePoint Add-In that can be deployed in the app catalog site of the Tenant and then installed in the SharePoint Site using "Add an app" Option.

Provisioning Head and Footer

The Add-in provides a Page to support the different steps of the provisioning of Header and Footer and associated features such us Global Breadcrumbs (SharePoint or JSON Data) and Custom Global Ribbon acessible in all Sites and Folders in the Site Collection.

UI of the add-in

The Page has 1 JSON Editor and 2 buttons for provision of Features associated to Header and Footer.

  1. JSON Editor Area, this feature allow to customize the JSON data to create and Custom Breadcumb acessible in the HostWeb Site.
  2. The Add provision option includes the Objects "PropertyBag/JSON/JSFile/ScripLink" in the RootHostWeb.
  3. The Remove provision option removes the Objects "PropertyBag/JSON/JSFile/ScripLink" from the RootHostWeb.

Provision Sequence

  • PropertyBag PnPGlobalBreadcrumbRibbon is created in RootWeb of the SiteCollection, this item will have the JSON data from the JSON Editor Area, if the JSON is not correct format then assumes the default JSON Data: {"Breadcrumb": [{"title": "Home","description": "Home","url":"https://github.com/OfficeDev"},{"title": "Product Category","description": "Product Category","url":"https://github.com/OfficeDev"},{"title": "Product","description": "Product","url":"https://github.com/OfficeDev"},{"title": "Example","description": "Example","url":"https://github.com/OfficeDev"}]}
  • A file from the AppWeb PnPGlobal.js is copied to folder "_catalogs/masterpage/Display Template", the JS file includes the code for the creation of the Global Breadcrumb (SharePoint or JSON Data) & Ribbon.
  • A ScriptLink is created in SiteCollection with name PnPGlobalBreadcrumbRibbon and linked to JS file PnPGlobal.js.

JSOn Editor picture

Header and Footer Add-In functionalities

  1. Custom Header with Following Features:
    • Global BreadCrumb (SharePoint or JSON Data) is included bellow the Ribbon Banner.
    • Global Ribbon with custom Actions is included in Ribbon Banner ().
  2. Custom Footer with Following Feature:
    • Global BreadCrumb by SharePoint Data (Path where user is located)

Custom header and footer

Breadcrumb & Ribbon functionality

  • Breadcumb is generated by SharePoint Data or JSON stored in "RootWeb" propertybag "PnPGlobalBreadcrumbRibbon"
  • Minimal Download Strategy (MDS) is enable without issues.
  • Breadcumb & Ribbon are available in all Sub Sites of the Site Collection.
  • Ribbons Custom Actions can be included in the Global Ribbon.

Custom breadcrumb and ribbon

Support Links for some actions:

SP Ribbon Objects https://paulbuzzblog.wordpress.com/2012/11/23/how-to-hide-the-sharepoint-ribbon/

Provision Files AppWeb to HostWeb http://www.sharepointnutsandbolts.com/2013/05/sp2013-host-web-apps-provisioning-files.html