The Patterns and Practices (PnP) is an open source initiative driven by widespread community of Microsoft employees and MVP’s around the globe who collaborate to provide guidance, samples, reusable components that we as a community can use it in our day
to day life to simplify our work. Anyone can contribute to this initiative.
“The new Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint. Currently it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions.
This takes the guess work out of creating REST requests, letting developers focus on the what and less on the how.”
There are different ways in which we can use the PNP library.
1. You can include a CDN link in your code pointing to the js file and then use a content editor webpart.
https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.1/pnp.js
https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.1/pnp.min.js
2. You can download the file to your local and then upload it in your SharePoint site and refer it from there inside of a content editor webpart.
3. You can use NPM to include the relevant package to your project.
npm install sp-pnp-js –save
1. Node.Js - It is a cross platform runtime environment for applications written in JavaScript. It helps in transpiling our .ts files to into .js files. You can install Node.js from https://nodejs.org/en
2. Node Package Manager
- Node JS package manager, helps us to manage all the libraries that our software relies upon. Node comes with npm installed so, we should have a version of npm.
3. Visual Studio Code
- Visual Studio Code is optimized for building and debugging modern web applications. Install Visual Studio Code. Browse
https://code.visualstudio.com/ and follow instructions
4. TypeScript - It is a typed superset of JavaScript that compiles to plain JavaScript. You can use NPM to install TypeScript.
npm install –g typescript
npm install –g gulp
npm install –g typescript
npm install --save-dev gulp-serve
npm install sp-pnp-js –save-dev
var
gulp = require(
'gulp'
)
var
serve = require(
'gulp-serve'
);
gulp.task(
'serve'
, serve([
'app'
]));
{
"compilerOptions"
: {
"target"
:
"es5"
,
"module"
:
"commonjs"
,
"moduleResolution"
:
"node"
,
"sourceMap"
:
true
,
"emitDecoratorMetadata"
:
true
,
"experimentalDecorators"
:
true
,
"noImplicitAny"
:
true
,
"suppressImplicitAnyIndexErrors"
:
true
,
"types"
: [
"node"
],
"typeRoots"
: [
"./node_modules/@types"
]
}
}
<
html
>
<
head
>
}
}
title
>SharePoint PnP Sample </
title
>
</
head
>
<
body
>
<
script
type
=
"text/javascript"
src
=
"http://127.0.0.1:3000/scripts/bundle-app.js"
></
script
>
<
div
class
=
"divSample"
>
<
div
class
=
"userInfo"
></
div
>
</
div
>
</
body
>
</
html
>
import pnp from
"sp-pnp-js"
;
function
GetUser() {
pnp.setup({
sp: {
headers: {
"Accept"
:
"application/json; odata=verbose"
}
}
});
pnp.sp.web.currentUser.get().then(result => {
console.log(result);
});
}
});
pnp.sp.web.currentUser.get().then(result => {
function
CheckIfUserBelongsToGroup(groupName: string, userEmail: string) {
pnp.sp.web.siteGroups.getByName(groupName).users.getByEmail(userEmail).get().then(rs => {
console.log(
"user belongs to group"
);
}).
catch
(error => {
console.log(
"user does not belong"
);
})
}
function
getExtendedManagers() {
var
managers: any = [];
pnp.setup({
sp: {
headers: {
"Accept"
:
"application/json; odata=verbose"
}
}
});
pnp.sp.profiles.myProperties.select(
"ExtendedManagers"
).get().then(d
=> {
managers = d.ExtendedManagers.results;
console.log(managers);
});
}
function
getMyProperties() {
pnp.setup({
sp: {
headers: {
"Accept"
:
"application/json; odata=verbose"
}
}
});
pnp.sp.profiles.myProperties.get().then(d => {
var
properties = d.UserProfileProperties.results;
console.log(properties);
});
}
function
getUserProfilePropertyForUser(userLoginName: string, propertyName: string) {
pnp.setup({
sp: {
headers: {
"Accept&qht:bold;">function
getUserProfilePropertyForUser(userLoginName: string, propertyName: string) {
:
"application/json; odata=verbose"
}
}
});
pnp.sp.profiles.getUserProfilePropertyFor(userLoginName, propertyName).then((result: any) => {
console.log(result.GetUserProfilePropertyFor);
});
}
import pnp from
"sp-pnp-js"
;
function
GetUser() {
pnp.setup({
sp: {
headers: {
"Accept"
:
"application/json; odata=verbose"
}
}
});
pnp.sp.web.currentUser.get().then(result => {
console.log(result);
});
}
function
}
pnp.sp.web.siteGroups.getByName(groupName).users.getByEmail(userEmail).get().then(rs => {
console.log(
"user belongs to group"
);
}).
catch
(error => {
console.log(
"user does not belong"
);
})
}
function
getExtendedManagers() {
var
managers: any = [];
pnp.setup({
sp: {
headers: {
"Accept"
:
"application/json; odata=verbose"
}
}
});
pnp.sp.profiles.myProperties.select(
"ExtendedManagers"
).get().then(d
=> {
managers = d.ExtendedManagers.results;
console.log(managers);
});
}
function
getMyProperties() {
pnp.setup({
sp: {
headers: {
"Accept"
:
"application/json; odata=verbose"
}
}
});
pnp.sp.profiles.myProperties.get().then(d => {
var
properties = d.UserProfileProperties.results;
console.log(properties);
});
}
function
getUserProfilePropertyForUser(userLoginName: string, propertyName: string) {
pnp.setup({
sp: {
headers: {
"Accept"
:
"application/json; odata=verbose"
}
}
});
pnp.sp.profiles.getUserProfilePropertyFor(userLoginName, propertyName).then(result => {
console.log(result.GetUserProfilePropertyFor);
});
}
webpack ./app.js bundle-app.js
15. Now if you browse your index.aspx file and check the console of your browser using Developer tools you will find the result retrieved from all the methods above.
1. https://github.com/SharePoint/PnP-JS-Core
2. https://github.com/SharePoint/PnP-JS-Core/wiki/Install-and-Use
3. https://angular.io/guide/webpack
4. https://github.com/SharePoint/PnP-JS-Core/wiki/Developer-Guide
5. https://gulpjs.com/
6. https://webpack.js.org/concepts/
7. https://docs.npmjs.com/getting-started/using-a-package.json
8. https://angular.io/guide/typescript-configuration