introduction to the office dev sharepoint pnp core libraries
TRANSCRIPT
Introduction to the Office Dev SharePoint PnP
Core Libraries
Rob Windsor
@robwindsor
About Me
Lead SharePoint Consultant at PAIT Group
Technical Contributor to the Pluralsight On-Demand Library
Microsoft MVP, MCPD, MCT
Founder and Past-President of the North Toronto .NET UG
Co-author of Prof. Visual Basic 2012 and .NET 4.5 (Wrox)
What is SharePoint PnP?
Started as an internal initiative
Collect learnings around Add-in model
Went public as Office Dev PnP
Shared Add-in model learnings
Grew and evolved
Added components, included community
Changed name to SharePoint PnP
Now SP PnP = SP Developer Ecosystem
Manages all guidance and community activities
Motto: Learn, Reuse, Share
Documentation and guidance aka.ms/spdev-docs
• Consolidated location for
documentation and guidance
• SharePoint Framework,
including API reference
• SharePoint add-ins
• Declarative customizations
etc.
Videos and webcastsaka.ms/spdev-videos
• Web cast recordings
• Quick Guidance Videos
• Tutorial Videos
• Training Videos
• Weekly and monthly
community call recordings
>200 videos already
Samples and solutionsgithub.com/sharepoint
• SharePoint Framework
• Provider hosted Add-ins
• Reusable controls and
components
• PnP PowerShell and Scripts
• Build extensions
>300 samples
aka.ms/sppnp
Links
Main Site
aka.ms/sppnp
Docs and Guidance
aka.ms/spdev-docs
Videos
aka.ms/spdev-videos
Samples
github.com/sharepoint
PnP Developer Community Site
aka.ms/sppnp-community
Managed Core Library Repo
github.com/SharePoint/PnP-Sites-Core
JavaScript Core Library Repo
github.com/SharePoint/PnP-JS-Core
What is the PnP Core Managed Library?
Open source “extensions” to the Managed Client Object Model
Simplifies the use of existing capabilities
Does not add any new capabilities
Three versions
SharePoint 2013
SharePoint 2016
SharePoint Online
Creating a List with CSOM
private void CreateListButton_Click(object sender, EventArgs e)
{
using (var context = new ClientContext(SharePointTextBox.Text))
{
var web = context.Web;
var lci = new ListCreationInformation();
lci.Title = "CSOM Sample List";
lci.TemplateType = (int)ListTemplateType.GenericList;
CreateList(web, lci);
AddStatus("Operation complete");
}
}
private void CreateList(Web web, ListCreationInformation lci)
{
var context = web.Context;
var query = web.Lists.Where(l => l.Title == lci.Title);
var lists = context.LoadQuery(query);
context.ExecuteQuery();
if (lists.Count() == 0)
{
web.Lists.Add(lci);
context.ExecuteQuery();
AddStatus("Created list: " + lci.Title);
}
}
Creating a List with the PnP Core Library
private void CreateListButton_Click(object sender, EventArgs e)
{
using (var context = new ClientContext(SharePointTextBox.Text))
{
var web = context.Web;
var listName = "PnP Sample List";
var exists = web.ListExists(listName);
if (exists == false)
{
web.CreateList(ListTemplateType.GenericList, listName, false, true);
AddStatus("Created list: " + listName);
}
AddStatus("Operation complete");
}
}
What is the PnP JavaScript Core Library?
Open source wrapper around the JavaScript REST API
Simplifies the use of existing capabilities
Does not add any new capabilities
PnP JavaScript Core Library
pnp.js
ES6 Polyfills
fetch.js
es6-promise.min.js
Creating a List the REST API
function createList() {
UpdateFormDigest(_spPageContextInfo.webServerRelativeUrl, _spFormDigestRefreshInterval);
var call = jQuery.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists",
type: "POST",
data: JSON.stringify({
"__metadata": { type: "SP.List" },
BaseTemplate: SP.ListTemplateType.tasks,
Title: "Tasks"
}),
headers: {
Accept: "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
}
});
call.done(function (data, textStatus, jqXHR) {
var message = jQuery("#message");
message.text("List added");
});
call.fail(failHandler);
}
Creating a List with the PnP JS Core Library
function createList() {
var call = $pnp.sp.web.lists.add("TasksPnp", "Description", SP.ListTemplateType.tasks);
call.then(function (data) {
var message = jQuery("#message");
if (data.data.Created) {
message.text("List added");
}
});
call.catch(failHandler);
}
Using JS Core Library with SPFx
Import package
npm install sp-pnp-js –save
Import in TypeScript file
import pnp from "sp-pnp-js";
import { Web } from "sp-pnp-js";
Use JS Core Library
let web = new Web(this.context.pageContext.web.absoluteUrl);
result = web.lists.filter("(Hidden eq false)").get()
.then((response) => {
return {
value: response
}
});
Thank You
Big thanks to the organizers, sponsors and you for
making this event possible
Please fill out your evaluation
Please keep in touch
@robwindsor
blogs.msmvps.com/windsor