Skip to content

Commit

Permalink
Merge pull request #3048 from pnp/version-4
Browse files Browse the repository at this point in the history
PR for docs
  • Loading branch information
juliemturner authored Jun 3, 2024
2 parents 3026360 + 74f1783 commit c439a5d
Show file tree
Hide file tree
Showing 9 changed files with 1,940 additions and 5,684 deletions.
10 changes: 9 additions & 1 deletion docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,17 @@ Next we can import and use the functionality within our application. Below is a

## Getting Started with SharePoint Framework

### Quick References (v3 and v4 are the same for getting started)

- [Code Sample: SharePoint Framework 1.19.0 with PnPjs v4](https://github.com/pnp/pnpjs/tree/version-4/samples/spfx-react-components/README.md)
- [Code Sample: SharePoint Framework 1.15.2 with PnPjs v3 utilizing ReactJS Hooks](https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-hooks)
- [Getting started with PnPjs 3.0: 5-part series](https://youtube.com/playlist?list=PLR9nK3mnD-OWvmtj9TKE6tM7ZrUosV_vB)

### More Details

The @pnp/sp and @pnp/graph libraries are designed to work seamlessly within SharePoint Framework projects with a small amount of upfront configuration. If you are running in 2016 or 2019 on-premises you will need to use [version 2](./v2/SPFx-on-premises/index.html) of the library. If you are targeting SharePoint online you may need to take the additional steps outlined below based on the version of the SharePoint Framework you are targeting.

We've created two Getting Started samples. The first uses the more traditional React Component classes and can be found in the [spfx-react-components](../samples/spfx-react-components/README.md) sample project, utilizing SPFx 1.18.2 and PnPjs V4.
We've created two Getting Started samples. The first uses the more traditional React Component classes and can be found in the [spfx-react-components](https://github.com/pnp/pnpjs/tree/version-4/samples/spfx-react-components/README.md) sample project, utilizing SPFx 1.18.2 and PnPjs V4.

Although original created for V3, this 5 part video series is similar enough to v4 to give good direction for getting started with PnPjs:

Expand Down
19 changes: 19 additions & 0 deletions docs/sp/search.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,25 @@ console.log(results3.RowCount);
console.log(results3.PrimarySearchResults);
```

## People Search Example

```TypeScript
import { spfi } from "@pnp/sp";
import "@pnp/sp/search";
import { SearchQueryInit, SearchResults, SearchQueryBuilder } from "@pnp/sp/search";

const sp = spfi(...);

// Where source id is the built in Search Source for People and is the same for every tenant.
const q: SearchQueryInit = SearchQueryBuilder(`Joe`)
.sourceId("B09A7990-05EA-4AF9-81EF-EDFAB16C4E31")
.rowLimit(500)
.rowsPerPage(500)
.selectProperties("SipAddress", "PreferredName", "AccountName", "Department", "JobTitle")
.trimDuplicates;
const people: SearchResults = await this._sp.search(q);
```

## Search Result Caching

Starting with v3 you can use any of the caching behaviors with search and the results will be cached. Please see here [for more details on caching options](https://pnp.github.io/pnpjs/queryable/behaviors/#caching).
Expand Down
349 changes: 348 additions & 1 deletion samples/spfx-react-components/.eslintrc.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion samples/spfx-react-components/.yo-rc.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"@microsoft/generator-sharepoint": {
"plusBeta": false,
"isCreatingSolution": true,
"version": "1.18.2",
"version": "1.19.0",
"libraryName": "pnpjs",
"libraryId": "44a7bfd5-a98a-4efc-9536-6a18af1b8477",
"environment": "spo",
Expand Down
7,133 changes: 1,507 additions & 5,626 deletions samples/spfx-react-components/package-lock.json

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions samples/spfx-react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
"dependencies": {
"react": "17.0.1",
"react-dom": "17.0.1",
"@microsoft/sp-core-library": "1.18.2",
"@microsoft/sp-property-pane": "1.18.2",
"@microsoft/sp-webpart-base": "1.18.2",
"@microsoft/sp-lodash-subset": "1.18.2",
"@microsoft/sp-office-ui-fabric-core": "1.18.2",
"@microsoft/sp-adaptive-card-extension-base": "1.18.2",
"@microsoft/sp-core-library": "1.19.0",
"@microsoft/sp-property-pane": "1.19.0",
"@microsoft/sp-webpart-base": "1.19.0",
"@microsoft/sp-lodash-subset": "1.19.0",
"@microsoft/sp-office-ui-fabric-core": "1.19.0",
"@microsoft/sp-adaptive-card-extension-base": "1.19.0",
"tslib": "2.3.1",
"@pnp/sp": "^4.0.1",
"@pnp/graph": "^4.0.1",
Expand All @@ -29,14 +29,14 @@
"devDependencies": {
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@microsoft/sp-build-web": "1.18.2",
"@microsoft/sp-module-interfaces": "1.18.2",
"@microsoft/sp-build-web": "1.20.1",
"@microsoft/sp-module-interfaces": "1.20.1",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"gulp": "~4.0.2",
"ajv": "6.12.5",
"@types/webpack-env": "1.18.2",
"@microsoft/eslint-plugin-spfx": "1.18.2",
"@microsoft/eslint-config-spfx": "1.18.2",
"@microsoft/eslint-plugin-spfx": "1.20.1",
"@microsoft/eslint-config-spfx": "1.20.1",
"typescript": "4.7.4",
"@rushstack/eslint-config": "2.5.1",
"eslint": "8.7.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ export default class pnpjs extends React.PureComponent<IpnpjsProps, IpnpjsState>
}

public componentDidMount(): void {
this._readAllFilesSize();
/*eslint no-void: ["error", { "allowAsStatement": true }]*/
void this._readAllFilesSize();
}

private _readAllFilesSize = async (): Promise<void> => {
Expand Down Expand Up @@ -94,7 +95,8 @@ export default class pnpjs extends React.PureComponent<IpnpjsProps, IpnpjsState>
.items
.getById(items[i].Id)
.update({ Title: `${items[i].Name}-Updated` })
.then(r => res.push(r));
.then(r => res.push(r))
.catch(e => console.log(`Error: ${e}`));
}

await execute();
Expand Down Expand Up @@ -171,7 +173,7 @@ export default class pnpjs extends React.PureComponent<IpnpjsProps, IpnpjsState>
);
} catch (err) {
Logger.write(`${this.LOG_SOURCE} (render) - ${JSON.stringify(err)}`, LogLevel.Error);
return null;
return <></>;
}
}
}
15 changes: 7 additions & 8 deletions samples/spfx-react-components/src/webparts/pnPjs/pnpjsConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,30 @@
import { WebPartContext } from "@microsoft/sp-webpart-base";

// import pnp and pnp logging system
import { spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph";
import { LogLevel, PnPLogging } from "@pnp/logging";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/batching";

var _sp: SPFI = null;
var _graph: GraphFI = null;
var _sp: SPFI;
var _graph: GraphFI;

export const getSP = (context?: WebPartContext): SPFI => {
if (_sp === null) {
if (_sp === undefined || _sp === null) {
//You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
// The LogLevel set's at what level a message will be written to the console
_sp = spfi().using(spSPFx(context)).using(PnPLogging(LogLevel.Warning));
_sp = spfi().using(spSPFx(context as ISPFXContext));
}
return _sp;
};

export const getGraph = (context?: WebPartContext): GraphFI => {
if (_graph === null) {
if (_graph === undefined || _graph === null) {
//You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
// The LogLevel set's at what level a message will be written to the console
_graph = graphfi().using(graphSPFx(context)).using(PnPLogging(LogLevel.Warning));
_graph = graphfi().using(graphSPFx(context as ISPFXContext));
}
return _graph;
};
68 changes: 34 additions & 34 deletions samples/spfx-react-components/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"noImplicitAny": true,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection",
"es2015.promise"
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"noImplicitAny": true,

"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection",
"es2015.promise"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
]
}
}

0 comments on commit c439a5d

Please sign in to comment.