Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
The approach you take to implement custom controls in your code is different in the new SharePoint Add-in model than it was with Full Trust Code. In a typical Full Trust Code (FTC) / Farm Solution scenario, custom controls were built as user controls or web controls and deployed via SharePoint Solutions.
In a SharePoint Add-in model scenario, the JavaScript is embedded in SharePoint pages to implement custom controls.
High-level guidelines
As a rule of a thumb, we would like to provide the following high-level guidelines for creating custom controls in the new SharePoint Add-in model.
- Use embedded JavaScript to create custom controls.
- Use the SharePoint ECMA Client Side Object Model (CSOM), and/or the SharePoint/Office 365 REST APIs to interact with SharePoint data and services.
Options to embed JavaScript in SharePoint pages
You have a few options to embed JavaScript in SharePoint pages.
- Use custom user actions
- Embed JavaScript directly into page layouts
- Embed JavaScript directly into custom master pages (not recommended)
Use custom user actions
In this pattern, custom user actions are used to embed JavaScript into a page at run time.
- This approach is absolutely supported and is a valid approach.
When is it a good fit?
When you need to embed JavaScript into all of your SharePoint pages, this option is a good fit.
Getting started
The following article and accompanying video demonstrates how to use custom user actions to embed JavaScript into SharePoint pages.
- Core.EmbedJavaScript (O365 PnP Sample)
- OD4B.NavLinksInjection (O365 PnP Sample)
- Cross site collection navigation (O365 PnP Video)
Embed JavaScript directly into page layouts
In this pattern, JavaScript is embedded directly in page layouts in publishing sites.
- This approach is absolutely supported and is a valid approach.
- This approach works with publishing sites.
When is it a good fit?
When you need to embed JavaScript into specific SharePoint page layouts in publishing sites in a WCM scenario, this option is a good fit.
Embed JavaScript directly into custom master pages
In this pattern, JavaScript is embedded directly in custom master pages.
- This approach is not recommended.
- This approach is a valid approach.
- You can embed JavaScript directly in custom master pages, but keep in mind this will cause you additional long-term costs and challenges with future updates.
- If you chose to use custom master pages, be prepared to apply changes to the custom master pages when major functional updates are applied to Office 365.
When is it a good fit?
When you need to embed JavaScript on a per master page basis, this is a good option because it allows you to control which master pages the JavaScript is embedded in.
Related links
- Cross site collection navigation (O365 PnP Video)
- Guidance articles at https://aka.ms/OfficeDevPnPGuidance
- References in MSDN at https://aka.ms/OfficeDevPnPMSDN
- Videos at https://aka.ms/OfficeDevPnPVideos
PnP samples
- Core.EmbedJavaScript (O365 PnP Sample)
- OD4B.NavLinksInjection (O365 PnP Sample)
- Core.EmbedJavaScript.WeekNumbers (O365 PnP Sample)
- Core.EmbedJavaScriptJSOM (O365 PnP Sample)
- Core.JavaScriptCustomization (O365 PnP Scenario using PnP Core component)
- Samples and content at Microsoft 365 Patterns and Practices (PnP)
Applies to
- Office 365 Multi Tenant (MT)
- Office 365 Dedicated (D)
- SharePoint 2013 on-premises