Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated documentation #1310

Merged
merged 3 commits into from
Aug 7, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions docs/authentication/adaljsclient.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# @pnp/common/adalclient

This module contains the AdalClient class which can be used to authenticate to any AzureAD secured resource. It is designed to work seamlessly with
SharePoint Framework's permissions.
This module contains the AdalClient class which can be used to authenticate to any AzureAD secured resource. It is designed to work seamlessly with SharePoint Framework's permissions.

> Where possible it is recommended to use the [MSAL client](./msaljsclient.md).

Expand All @@ -13,7 +12,7 @@ Install the library and required dependencies

## Setup and Use inside SharePoint Framework

Using the SharePoint Framework is the preferred way to make use of the AdalClient as we can use the AADTokenProvider to efficiently get tokens on your behalf. You can also read more about how this process works and the necessary SPFx configurations in the [SharePoint Framework 1.6 release notes](https://github.com/SharePoint/sp-dev-docs/wiki/SharePoint-Framework-v1.6-release-notes#moving-from-beta-to-public---webapi). This method only work for SharePoint Framework >= 1.6. For earlier versions of SharePoint Framework you can still use the AdalClient as outlined above using the constructor to specify the values for an AAD Application you have setup.
Using the SharePoint Framework is the preferred way to make use of the AdalClient as we can use the AADTokenProvider to efficiently get tokens on your behalf. You can also read more about how this process works and the necessary SPFx configurations in the [SharePoint Framework 1.6 release notes](https://github.com/SharePoint/sp-dev-docs/wiki/SharePoint-Framework-v1.6-release-notes#moving-from-beta-to-public---webapi). This method will only work for SharePoint Framework >= 1.6. For earlier versions of SharePoint Framework you can still use the AdalClient as outlined below using the constructor to specify the values for an AAD Application you have setup.

### Calling the graph api

Expand Down Expand Up @@ -54,7 +53,7 @@ public render(): void {

#### Calling the SharePoint API

This example shows how to use the ADALClient with the @pnp/sp library to call an API secured with AAD from within SharePoint framework.
This example shows how to use the ADALClient with the @pnp/sp library to call an API secured with AAD from within SharePoint Framework.

```TypeScript
import { SPFxAdalClient } from "@pnp/common";
Expand Down
2 changes: 1 addition & 1 deletion docs/authentication/client-spa.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Authentication in Single Page Application

If you are writing a single page appliation deployed outside SharePoint it is recommended to use the MSAL client. You can find further details on the settings in the [MSAL docs](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-overview). You will need to ensure that you grant the permissions required to the application you are trying to use.
If you are writing a single page application deployed outside SharePoint it is recommended to use the MSAL client. You can find further details on the settings in the [MSAL docs](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-overview). You will need to ensure that you grant the permissions required to the application you are trying to use.

```TypeScript
import { MsalClientSetup } from "@pnp/msaljsclient";
Expand Down
8 changes: 4 additions & 4 deletions docs/authentication/client-spfx.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Auth as Current User

PnPjs is designed to work as easily as possible within SharePoint framework so the authentication setup is very simple for the base case. Supply the current SharePoint Framework context to the library. This works for both SharePoint authentication and Graph authentication using the current user. Graph permissions are controlled by the permissions granted to the SharePoint shared application within your tenant.
PnPjs is designed to work as easily as possible within the SharePoint Framework so the authentication setup is very simple for the base case. Supply the current SharePoint Framework context to the library. This works for both SharePoint authentication and Graph authentication using the current user. Graph permissions are controlled by the permissions granted to the SharePoint shared application within your tenant.

The below example is taken from a SharePoint Framework webpart.

Expand Down Expand Up @@ -50,7 +50,7 @@ protected async onInit(): Promise<void> {

## MSAL Client

You might want/need to use a client configured to use your own AAD application and not the shared SharePoint application. You can do so using the [MSAL client](./msaljsclient.md). Here we show this using graph, this works the same with any of the [setup strategies](../getting-started.md). Please see the [MSAL library docs](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-overview) for more details on what values to supply in configuration.
You might want/need to use a client configured to use your own AAD application and not the shared SharePoint application. You can do so using the [MSAL client](./msaljsclient.md). Here we show this using graph, this works the same with any of the [setup strategies](../getting-started.md). Please see the [MSAL library docs](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-overview) for more details on what values to supply in the configuration.

> Note: you must install the @pnp/msaljsclient client package before using it

Expand Down Expand Up @@ -85,9 +85,9 @@ protected async onInit(): Promise<void> {
// ...
```

## Adal Client
## ADAL Client

You can use the ADAL client from within SPFX, though it is recommened to transition to the MSAL client.
You can use the ADAL client from within SPFx, though it is recommended to transition to the MSAL client.

> Note: you must install the @pnp/adaljsclient client package before using it

Expand Down
2 changes: 1 addition & 1 deletion docs/authentication/msaljsclient.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ You need to install the MSAL client before using it. This is in addition to inst

## Configure

The pnp client is a very thin wrapper around the MSAL library and you can supply any of the arguments supported. These are described in the [MSAL docs](https://azuread.github.io/microsoft-authentication-library-for-js/ref/msal-core/modules/_configuration_.html).
The PnP client is a very thin wrapper around the MSAL library and you can supply any of the arguments supported. These are described in the [MSAL docs](https://azuread.github.io/microsoft-authentication-library-for-js/ref/msal-core/modules/_configuration_.html).

The basic configuration values you need (at least from our testing) are client id, authority, and redirectUri. The other options are settable but not required. This article is not intended to be an exhaustive discussion of all the MSAL configuration possibilities, please see the official docs to understand all of the available options.

Expand Down
2 changes: 1 addition & 1 deletion docs/authentication/server-nodejs.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const w = await sp.web.get();

## MSAL

We do not currently have support for MSAL in node. At the time of writing this article the [@Azure/msal-node](https://www.npmjs.com/package/@azure/msal-node) package is in alpha and we have chosen to wait until it is more stable before taking that dependecy.
We do not currently have support for MSAL in node. At the time of writing this article the [@Azure/msal-node](https://www.npmjs.com/package/@azure/msal-node) package is in alpha and we have chosen to wait until it is more stable before taking on that dependency.


## ADAL
Expand Down
6 changes: 3 additions & 3 deletions docs/authentication/sp-app-registration.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ Before you can begin running tests you need to register a low-trust add-in with
1. Navigation to {site url}/_layouts/appregnew.aspx
1. Click "Generate" for both the Client Id and Secret values
1. Give you add-in a title, this can be anything but will let you locate it in the list of add-in permissions
2. Provide a fake value for app domain and redirect uri
3. Click "Create"
4. Copy the returned block of text containing the client id and secret as well as app name for your records and later in this article.
1. Provide a fake value for app domain and redirect uri
1. Click "Create"
1. Copy the returned block of text containing the client id and secret as well as app name for your records and later in this article.

## Grant Your Add-In Permissions

Expand Down
2 changes: 1 addition & 1 deletion docs/common/collections.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const map = objectToMap({ a: "b", c: "d"});

## mergeMaps

Merges two or more maps, overwiting values with the same key. Last value in wins.
Merges two or more maps, overwriting values with the same key. Last value in wins.

```TypeScript
const m1 = new Map();
Expand Down
8 changes: 2 additions & 6 deletions docs/common/libconfig.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,7 @@ used to track the configuration values. The keys will match the values in the in

### assign

The assign method is used to add configuration to the global configuration instance. You can pass it any plain object with string keys and those values will be added. Any
existing values will be overwritten based on the keys. Last value in wins. For a more detailed scenario of using the RuntimeConfig instance in your own application please
see the section below "Using RuntimeConfig within your application". Note there are no methods to remove/clear the global config as it should be considered fairly static
as frequent updates may have unpredictable side effects as it is a global shared object. Generally it should be set at the start of your application.
The assign method is used to add configuration to the global configuration instance. You can pass it any plain object with string keys and those values will be added. Any existing values will be overwritten based on the keys. Last value in wins. For a more detailed scenario of using the RuntimeConfig instance in your own application please see the section below "Using RuntimeConfig within your application". Note there are no methods to remove/clear the global config as it should be considered fairly static as frequent updates may have unpredictable side effects as it is a global shared object. Generally it should be set at the start of your application.

```TypeScript
import { RuntimeConfig } from "@pnp/common";
Expand All @@ -72,8 +69,7 @@ const v = RuntimeConfig.get("myKey1"); // "value 1"

## Using RuntimeConfig within your Application

If you have a set of properties you will access very frequently it may be desirable to implement your own configuration object and expose those values as properties. To
do so you will need to create an interface for your configuration (optional) and a wrapper class for RuntimeConfig to expose your properties
If you have a set of properties you will access very frequently it may be desirable to implement your own configuration object and expose those values as properties. To do so you will need to create an interface for your configuration (optional) and a wrapper class for RuntimeConfig to expose your properties

```TypeScript
import { ILibraryConfiguration, RuntimeConfig, ITypedHash } from "@pnp/common";
Expand Down
4 changes: 2 additions & 2 deletions docs/common/netutil.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# @pnp/common/netutil

This module contains a set of classes and interfaces used to caracterize shared http interactions and configuration of the libraries. Some of the interfaces
This module contains a set of classes and interfaces used to characterize shared http interactions and configuration of the libraries. Some of the interfaces
are described below (many have no use outside the library) as well as several classes.

## Interfaces

### HttpClientImpl

Defines an implementation of an Http Client within the context of @pnp. This being a class with a a single method "fetch" take a URL and options and returning a `Promise<Response>`. Used primarily with the shared request pipeline to define the client used to make the actual request. You can write your own [custom implementation](custom-httpclientimpl.md) if needed.
Defines an implementation of an Http Client within the context of @pnp. This being a class with a a single method "fetch" takes a URL and options. It returns a `Promise<Response>`. Used primarily with the shared request pipeline to define the client used to make the actual request. You can write your own [custom implementation](custom-httpclientimpl.md) if needed.

### RequestClient

Expand Down
175 changes: 137 additions & 38 deletions docs/common/util.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,62 @@ import {
getRandomString,
} from "@pnp/common";

// use from individual;y imported method
// use from individually imported method
console.log(getRandomString(10));
```

## assign

Merges a source object's own enumerable properties into a single target object. Similar to Object.assign, but allows control of overwriting of existing
properties.

```TypeScript
import { assign } from "@pnp/common";

let obj1 = {
prop: 1,
prop2: 2,
};

const obj2 = {
prop: 4,
prop3: 9,
};

const example1 = assign(obj1, obj2);
// example1 = { prop: 4, prop2: 2, prop3: 9 }

//noOverwrite = true stops overwriting existing properties
const example2 = assign(obj1, obj2, true);
// example2 = { prop: 1, prop2: 2, prop3: 9 }
```

## combine

Combines any number of paths, normalizing the slashes as required

```TypeScript
import { combine } from "@pnp/common";

// "https://microsoft.com/something/more"
const paths = combine("https://microsoft.com", "something", "more");

// "also/works/with/relative"
const paths2 = combine("/also/", "/works", "with/", "/relative\\");
```

## dateAdd

Manipulates a date, please see the [Stack Overflow discussion](https://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object) from where this method was taken.

```TypeScript
import { dateAdd } from "@pnp/common";

const testDate = new Date();

dateAdd(testDate,'minute',10);
```

## getCtxCallback

Gets a callback function which will maintain context across async calls.
Expand Down Expand Up @@ -40,27 +92,19 @@ function theFunction2(g: number) {
return this.myProp + g;
}

const callback2 = getCtxCallback(contextThis, theFunction, 4);
const callback2 = getCtxCallback(contextThis, theFunction2, 4);

callback2(); // returns 10 (6 + 4)
```

## dateAdd

Manipulates a date, please see the [Stack Overflow discussion](https://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object) from where this method was taken.

## combine
## getGUID

Combines any number of paths, normalizing the slashes as required
Creates a random guid, please see the [Stack Overflow discussion](https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript) from where this method was taken.

```TypeScript
import { combine } from "@pnp/common";

// "https://microsoft.com/something/more"
const paths = combine("https://microsoft.com", "something", "more");
import { getGUID } from "@pnp/common";

// "also/works/with/relative"
const paths2 = combine("/also/", "/works", "with/", "/relative\\");
const newGUID = getGUID();
```

## getRandomString
Expand All @@ -73,54 +117,109 @@ import { getRandomString } from "@pnp/common";
const randomString = getRandomString(10);
```

## getGUID
## hOP

Creates a random guid, please see the [Stack Overflow discussion](https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript) from where this method was taken.
Shortcut for Object.hasOwnProperty. Determines if an object has a specified property.

## isFunc
```TypeScript
import { HttpRequestError } from "@pnp/odata";
import { hOP } from "@pnp/common";

Determines if a supplied variable represents a function.
export async function handleError(e: Error | HttpRequestError): Promise<void> {

## objectDefinedNotNull
//Checks to see if the error object has a property called isHttpRequestError. Returns a bool.
if (hOP(e, "isHttpRequestError")) {
// Handle this type or error
} else {
// not an HttpRequestError so we do something else

Determines if an object is defined and not null.
}
}
```

## isArray

Determines if a supplied variable represents an array.

## assign
```TypeScript
import { isArray } from "@pnp/common";

Merges a source object's own enumerable properties into a single target object. Similar to Object.assign, but allows control of overwriting of existing
properties.
let x:String[] = [1,2,3]];

```TypeScript
import { assign } from "@pnp/common";
if (isArray(x)){
console.log("I am an array");
}else{
console.log("I am not an array");
}
```

let obj1 = {
prop: 1,
prop2: 2,
};
## isFunc

const obj2 = {
prop: 4,
prop3: 9,
};
Determines if a supplied variable represents a function.

const example1 = assign(obj1, obj2);
// example1 = { prop: 4, prop2: 2, prop3: 9 }
```TypeScript
import { isFunc } from "@pnp/common";

const example2 = assign(obj1, obj2, true);
// example2 = { prop: 1, prop2: 2, prop3: 9 }
public testFunction() {
console.log("test function");
return
}

if (isFunc(testFunction)){
console.log("this is a function");
testFunction();
}
```

## isUrlAbsolute

Determines if a supplied url is absolute and returns true; otherwise returns false.

```TypeScript
import { isUrlAbsolute } from "@pnp/common";

const webPath = 'https://{tenant}.sharepoint.com/sites/dev/';

if (isUrlAbsolute(webPath)){
console.log("URL is absolute");
}else{
console.log("URL is not absolute");
}
```

## objectDefinedNotNull

Determines if an object is defined and not null.

```TypeScript
import { objectDefinedNotNull } from "@pnp/common";

let obj = {
prop: 1
};

if (objectDefinedNotNull(obj)){
console.log("Not null");
}else{
console.log("Null");
}
```

## stringIsNullOrEmpty

Determines if a supplied string is null or empty
Determines if a supplied string is null or empty.

```TypeScript
import { stringIsNullOrEmpty } from "@pnp/common";

let x:String = "hello";

if (stringIsNullOrEmpty(x)){
console.log("Null or empty");
}else{
console.log("Not null or empty");
}
```

## Removed

Expand Down
4 changes: 2 additions & 2 deletions docs/concepts/custom-bundle.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ With the introduction of [selective imports](./selective-imports.md) it is now p
Scenarios could include:

- Deploying a company-wide PnPjs custom bundle shared by all your components so it only needs to be downloaded once.
- Creating SPFx libraries either for one project or a single project
- Create a single library containing the PnPjs code you need bundled along with your customer [extensions](../odata/extensions.md).
- Creating SPFx libraries either for one project or a single webpart.
- Create a single library containing the PnPjs code you need bundled along with your custom [extensions](../odata/extensions.md).

## Create a custom bundle

Expand Down
2 changes: 1 addition & 1 deletion docs/concepts/error-handling.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Error Handling

This article describes the most common type of error generated by the library, provides context on the error object, and some ways to handle it. As always you should tailor your error handling to what your application needs. These are some idea that can be applied to many differnt patterns.
This article describes the most common types of errors generated by the library. It provides context on the error object, and ways to handle the errors. As always you should tailor your error handling to what your application needs. These are ideas that can be applied to many different patterns.

> For 429, 503, and 504 errors we include retry logic within the library

Expand Down
Loading