6

you can use it by doing the following import Web from 'sp-pnp-js'; let web = new Web(this.context.pageContext.site.absoluteUrl); let curruser = web.currentUser.get().then(function(res){ console.log(res.Title); })


6

You need to use it as below in typescript: pnp.Web(this.url).select("Title", "AllProperties").expand("AllProperties").get().then(r =>{ console.log(r); }); So pure javascript would be as below: $pnp.sp.web.select("AllProperties").expand("AllProperties").get().then(function(result){ // Select the AllProperties from the result console....


6

You need to initialize the pnp library with the SPFx context. For that you need to add the below code in your webpart's .ts (TypeScript) file: 1) Add the below import statement import pnp from "sp-pnp-js"; 2) Add/Update the onInit method: public onInit(): Promise<void> { return super.onInit().then(_ => { pnp.setup({ spfxContext: ...


5

It is indeed possible to use PnP JS with SP OnPremise. It supports both 2013 and 2016 as well as the upcoming 2019 environment. Under the hood, it is just a wrapper over the existing REST API endpoints. Reference - Getting started with PnP JS


5

You can use it as below: $pnp.sp.web.lists.getByTitle("Test").items.add({ Title: "test", MultiUserId: { results: [ 9, 6 ] // User/Groups ids as an array of numbers } }).then(i => { console.log(i); }); You need to pass an array of user ids or group ids. Also, if your internal column name is MultiUser you need to set the ...


5

UPDATE JUNE 2019: Some things were changed in regards to PnPjs library and nodejs integration. Please read below updated guidance on how to use it with on-prem SharePoint and Nodejs: mkdir pnp_test cd pnp_test npm init -y npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp @pnp/graph @pnp/nodejs --save In order to send requests to on-prem ...


5

Change this part: table.append(`<td>${item.Title}</td>`); table.append(`<td>${item.Rank}</td>`); table.append(`<td>${item.Franchises}</td>`) to this: table.append(`<td>${item.Title}</td>`); table.append(`<td>${item.Description}</td>`); table.append(`<td>${item.Link}</td>`);


5

In the previous versions 'web' was still present in the rest.d.ts file of the @pnp/sp package. That's not the case anymore. In your main webpart TypeScript file, you have to use the import as follow: import { sp } from "@pnp/sp/presets/all";


5

You will need to do both the REST orderBy, and then use JavaScript to reverse the array of items in the returned results. The problem is thus: In order for the REST API to return only the n most recent items, you have to provide the ODATA orderBy the created date in Descending order. But, if you want to use or display those same n items in any other order ...


4

You can use the lists.ensure method to check if the list exists or not. Add the below import statement: import pnp, { List, ListEnsureResult } from "sp-pnp-js"; In your method, you can use it as below: // Use lists.ensure to always have the list available pnp.sp.web.lists.ensure("Custom List").then((ler: ListEnsureResult) => { if (ler.created) { ...


4

No, pnpjs uses the OOTB batching functionality that is not found in SP2013. Depends on what you are doing, but if you need to add a lot of items using JSOM might be your best bet as you can batch multiple requests this way. HTH, Patrick


4

You can use the displayLoadingIndicator method available in SPFx. Using it you can show the loading indicator on a DOM element and clear it out using clearLoadingIndicator method once the data is retrieved. You can use the below sample code: public render(): void { // show indicator this.context.statusRenderer.displayLoadingIndicator(...


3

You Will find in the following link all available operations of PnP-JS-Core and how to use them with SharePoint Framework. https://github.com/SharePoint/PnP-JS-Core/wiki/Developer-Guide


3

We have taken multiple initiatives where in we are developing client side web-parts using react for our clients. Traditionally we had been using jquery for making ajax requests in script editors. But with Typescript we are able to use ES6(which is compiled to ES5 at runtime). Using PnP-JS Core with Typescript, we have not only saved a lot of time( by ...


3

SPFx for SharePoint 2016 currently uses Typescript 2.1.x. The pnp compatible version for that is version 2.0.8. The latest version 3.0.0 throws some errors because of some breaking changes. To install that, you need to run the below command: npm install sp-pnp-js@2.0.8 --save Update - the latest version 3.0.x works just fine, just that you need to setup ...


3

I have tested the PnP List existence check against SP Online. You may try the same with SPFx without SP.SOD <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/2.0.7/pnp.js"> </script> <script language="javascript" ...


3

As i understand your question, you need to handle the response data outside of given function. In this case you can simply return the pnp func call, so it returns a Promise: function GetServiceListData():Promise<any> { return pnp.sp.web.lists.getByTitle('Test').items .select('Title,FullName,DOJ,ManagerName/Title') .expand('...


3

You need to ensure that your function is async. Only if its async can you use await inside that function. You can modify the below code: private async GetServiceListData():any { var resultData: any = await pnp.sp.web.lists .getByTitle('Test') .items ...


3

Looks likely that your document library does not have a Description field, i.e. a field with the internal name "Description". PnP wants you to specify the internal name, not the display name of the fields to set. Does the field perhaps have a different internal name and only the display name is "Description"? Try checking by going into the List Settings ...


3

Use one of "unused Managed Properties" named Int00 - Int49. https://docs.microsoft.com/en-us/sharepoint/search/manage-the-search-schema#Schema_Tenant_SiteColl_Alias Basic steps: Create a new Site Column in one of your Site Collections. Add this column to a list or library and add at least one item to the list with data in the new column. Wait for, or ...


2

For similar ajax calls to SP REST API try use noncache factor on your request url. Example: https://tenant.sharepoint.com/sites/Test/_api/web/getFileByServerRelativeUrl('/sites/Test/Documents/Doc1.docx')/listItemAllFields?$select=Id,Title + "?" + new Date().getTime()


2

Unfortunately, when referencing external libraries declaratively in config.json, you have to use fixed absolute URLs and there is no way to inject them, unless you would build a custom gulp task. An alternative would be to load these scripts in code using the SPComponentLoader, e.g.: import { SPComponentLoader } from '@microsoft/sp-loader'; export default ...


2

You can specify it as below: $pnp.sp.search({ Querytext: "Documents", RowLimit: 10, RefinementFilters : ["and(Author:Gautam,fileExtension:equals('docx'))"] }).then(function(data){ console.log(data.PrimarySearchResults); });


2

Check the PnP Js documentation Work with Items here User field will set the value based on the user/group id, very similiar with lookup field: pnp.sp.web.lists.getByTitle("PeopleFields").items.add({ Title: Util.getGUID(), User1Id: 9, // allows a single user User2Id: { results: [ 16, 45 ] // allows multiple users } }).then(i => { ...


2

You should get it by looking for the EncodedAbsUrl var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Shared Documents')/items?$select=EncodedAbsUrl&$filter=Id eq 123"; var requestHeaders = { "accept": "application/json;odata=verbose"} $.ajax({ url: requestUri, type: 'GET', dataType: 'json', headers: ...


2

Your code tell the TypeScript that the state object is empty object with no members. React.Component accepts two generic types - properties object and state object. You have to change this line export default class ReactPnP extends React.Component<IReactPnPProps, {}> { to export default class ReactPnP extends React.Component<IReactPnPProps, any&...


2

I finally figured out the issue,i was using the wrong internal name. what i did was to go library setting-->select column-->Have a look at the link and look for field=something. This was the wrong way of looking for the internal name. The correct way was var item =pnp.sp.web.getFolderByServerRelativeUrl("Shared%20Documents").files.getByName("test.jpg") ...


2

Code looks fine. 1) Just ensure that you are using the correct internal name of the column. 2) Secondly, ensure that you have set the column to Allow multiple values as below. This error usually occurs when you try to update the column when this setting not present and only allows a single user value :


2

Try to use catch in the code snippet to get the exception in the code snippet like below: import { default as pnp, ItemAddResult } from "sp-pnp-js"; private PnPAddItem():void { pnp.sp.web.lists.getByTitle("Jerry").items.add({ EmployeeName : document.getElementById('EmployeeName')["value"], Experience : document.getElementById('Experience')["...


2

Looks like you are missing the inital setup which is necessary to determine the request URLs in SPFx context. In your webpart.ts file, add the below piece of code: import { sp } from "@pnp/sp/presets/all"; // ... protected onInit(): Promise<void> { return super.onInit().then(_ => { // other init code may be present sp.setup({ ...


Only top voted, non community-wiki answers of a minimum length are eligible