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 create portable page components 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, web parts were created to implement portable page components.
In an SharePoint Add-in model scenario, Add-in Parts (App Parts) are created to implement portable page components. Add-in parts use client side code.
High Level Guidelines
As a rule of a thumb, we would like to provide the following high level guidelines regarding Add-in Parts.
- You cannot run server side code in Add-in Parts.
- You cannot create custom editor parts for Add-in Parts.
- Use the Add-in Script Part to link to JavaScript that is used to interact with SharePoint and other services and create a user interface.
- By default, custom properties you add to editor parts are always shown as the final group in an editor part.
- You can use JavaScript to override the look and feel of an editor part for an Add-in Part.
- See the following sample that demonstrates how this is done.
- Core.AppPartPropertyUIOverride (O365 PnP Sample)
Getting Started
Add-in Parts may be easily created by using the out-of-the-box Add-in Script Part. This allows you to provide a link to a JavaScript file hosted anywhere. The JavaScript file uses client side code to interact with SharePoint or other services and render a user interface.
The following article describes the Add-in Script Part pattern and how to use it.
The following sample demonstrates how to use an Add-in Script Part to integrate with Yammer, Bing Maps, and Google Maps.
The following video walks you through the code sample.
Related links
- Introducing app script part pattern for Office365 app model (MSDN Blog Article)
- Core.AppScriptPart (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.AppPartPropertyUIOverride (O365 PnP Sample)
- Core.AppScriptPart (O365 PnP Sample)
- 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