introduction to the office dev sharepoint pnp core libraries

Introduction to the Office Dev SharePoint PnP

Core Libraries

Rob Windsor

rwindsor@paitgroup.com

@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

rwindsor@paitgroup.com

@robwindsor

blogs.msmvps.com/windsor