Configure properties in pnp

Below is the example how can we change the baseurl or other properties in pnp and connect to specific web using pnp in spfx

private pnpSPConfiguration():void

{

let headerOption:any=["Accept","application/json;odata=verbose"];

pnp.sp.configure(headerOption,this.context.pageContext.web.absoluteUrl+"/demo")

.web.lists.get().then(function(response)

{

console.log(response);

});

}

spfx commands

Below are some basic commands to work with SharePoint framework with visual studio code tool.

//to create new solution

md SPHellowWebpart

cd SPHellowWebpart

yo @microsoft/sharepoint

//to add new webpart/Extension

//start new terminal and

//run below command

yo @microsoft/sharepoint

//to start the host on local machine

gulp serve

//to trust the certificate on local host

gulp trust-dev-cert

//to install libary/package

npm install libararyName

gulp serve --nobrowser // if already runing local host

gulp budle --ship //before package run this command for dev without ship

gulp package-solution --ship //to create package run this command for dev without

ship

Batch Operation using pnp

private BatcOperation():void

{

let batchResults = [];

let batch=pnp.sp.createBatch();

pnp.sp.web.lists.getByTitle("Test").items.inBatch(batch).add({Title:"1"})

.then(function(response){

console.log(1);

batchResults.push(response);

});

pnp.sp.web.lists.getByTitle("Test").items.inBatch(batch).add({Title:"2"})

.then(function(response){

console.log(2);

batchResults.push(response);

});;

pnp.sp.web.lists.getByTitle("Test").items.inBatch(batch).add({Title:"3"})

.then(function(response){

console.log(3);

batchResults.push(response);

});;

pnp.sp.web.lists.getByTitle("Test").items.inBatch(batch).add({Title:"4"})

.then(function(response){

console.log(4);

batchResults.push(response);

});;

batch.execute().then(function(){

console.log("Final");

console.log(batchResults);

}).catch(function(exception){

alert("Something went wrong :"+exception);

});

}

spfx Get Files and Folder using pnp

private GetFilesFolder():void

{

pnp.sp.web.lists.getByTitle("Site Assets").items.getAll().then(function(response)

{

console.log(response);

}).catch(function(exception)

{

alert("Something went wrong :"+exception);

});

}

spfx pnp delete folder

private DeleteFolder():void

{

//id of content type

pnp.sp.web.getFolderByServerRelativePath("SiteAssets/NewFolder").delete()

.then(function(response)

{

console.log("Folder Deleted !");

}).catch(function(exception)

{

alert("Something went wrong :"+exception);

});

}

spfx pnp add folder

private AddNewFolder():void

{

//id of content type

pnp.sp.web.folders.add("SiteAssets/NewFolder").then(function(response)

{

console.log("New Folder added !");

}).catch(function(exception)

{

alert("Something went wrong :"+exception);

});

}

spfx Add Content type to List/Library using pnp

private AddSiteToContentTypeToList():void

{

//id of content type

pnp.sp.web.lists.getByTitle("Test").contentTypes

.add("0x01002189FE08454A7F4ABA16A6F0D0E030FE","CustomContentType")

.then(function(response)

{

console.log("Content Type added to List!");

}).catch(function(exception)

{

alert("Something went wrong :"+exception);

});

}

spfx pnp create site content type

private CreateContentType():void

{

pnp.sp.site.rootWeb.contentTypes.add("CustomContentType","CustomContentType")

.then(function(response){

console.log("New Content Type created!");

}).catch(function(exception)

{

alert("Something went wrong :"+exception);

});

}

Add Site Columns using pnp

private AddSiteColumn():void

{

pnp.sp.site.rootWeb.fields.addText("DepartmentName").then(function(response){

console.log("New Site Column Added!");

}).catch(function(exception)

{

alert("Something went wrong :"+exception);

});

}

spfx delete list column using pnp

private DeleteSPListColumn():void

{

pnp.sp.web.lists.getByTitle("Test").fields.getByTitle("EmployeeName")

.delete().then(function(response){

console.log("Column Deleted!");

}).catch(function(exception)

{

alert("Something went wrong :"+exception);

});

}