The document outlines a series of methods and configurations for interacting with SharePoint lists using SPHttpClient in a web part context. It includes functions for retrieving, creating, updating, and deleting list items, as well as guidance on using Office UI Fabric components and best practices for managing web part data and status. Additionally, it emphasizes the use of reusable components and required libraries such as SP PnP JS within the SharePoint framework.

2. IIS Express
Project Templates

5. private _getListItemEntityTypeFullName(context: IWebPartContext):Promise<string> {
if (this._listItemEntityTypeFullName){
return Promise.resolve(this._listItemEntityTypeFullName);
}
return context.spHttpClient.get(context.pageContext["web"]["absoluteUrl"]
+ `/_api/web/lists/GetByTitle('${this._listName}')`, SPHttpClientConfigurations.v1)
.then((response: Response) => {
return response.json()
})
.then((value) => {
this._listItemEntityTypeFullName = value["ListItemEntityTypeFullName"];
return value["ListItemEntityTypeFullName"];
});
}

6. export interface IListItem {
Id: number;
Title: string;
}
public getListItems(): Promise<IListItem[]> {
return this.context.spHttpClient.get(this.context.pageContext["web"]["absoluteUrl"]
+ `/_api/web/lists/GetByTitle('${this._listName}')/items?$select=Id,Title`, SPHttpClient.configurations.v1
)
.then((response: Response): Promise<any> => {
return response.json();
})
.then((data: any) : IListItem[] =>{
this._showSuccess(`Successfully loaded ${data.value.length} items`);
return data.value;
}, (error: any): void => {
this._showError(`Loading all items failed with error: ${error}`);
}) as Promise<IListItem[]>;
}

7. const reqJSON: any = JSON.parse(
`{
"@odata.type": "${this._listItemEntityTypeFullName}",
"Title": "${title}"
}`);
this.context.spHttpClient.post(
this.context.pageContext["web"]["absoluteUrl"] +
`/_api/web/lists/GetByTitle('${this._listName}')
/items?$expand=ListItemAllFields`,
SPHttpClient.configurations.v1,
{
body: JSON.stringify(reqJSON),
headers: {
"accept": "application/json",
"content-type": "application/json"
}
}
)
.then((response: SPHttpClientResponse): Promise<IListItem> => {
return response.json();
})

8. const reqJSON: any = JSON.parse(
`{
"@odata.type": "${this._listItemEntityTypeFullName}",
"Title": "${title}"
}`);
this.context.spHttpClient.post(
this.context.pageContext["web"]["absoluteUrl"] +
`/_api/web/lists/GetByTitle('${this._listName}')/items(${Id})`,
SPHttpClient.configurations.v1,
{
body: JSON.stringify(reqJSON),
headers: {
"IF-MATCH": "*",
"X-HTTP-Method":"MERGE",
"accept": "application/json",
"content-type": "application/json"
}
})
.then((response: SPHttpClientResponse): void => {
this._showSuccess(`Item with ID: ${Id} successfully updated`);
}, (error: any): void => {
this._showError(`Error updating item: + ${error}`);
});

9. this.context.spHttpClient.post(
this.context.pageContext["web"]["absoluteUrl"] +
`/_api/web/lists/GetByTitle('${this._listName}')/items(${Id})`,
SPHttpClient.configurations.v1,
{
headers: {
"IF-MATCH": "*",
"X-HTTP-Method":"DELETE",
"accept": "application/json",
"content-type": "application/json"
}
})
.then((response: SPHttpClientResponse): void => {
ContainerNode.parentNode.removeChild(ContainerNode);
this._showSuccess(`Item with ID: ${Id} successfully deleted`);
}, (error: any): void => {
this._showError(`Error deleting item: ${error}`);
});

10.  Use Office UI Fabric React
components
 Use state to keep track of Web
Part status and data
 Use the web part's HttpClient in a
React component
 Load Angular
and ngOfficeUIFabric from CDN
 Use conditional rendering for
one-time web part setup
 Pass web oart configuration to
Angular and react to
configuration changes in the
Angular application
 Use the SP PnP JS library with
SharePoint Framework Client-
Side web parts
 Configure global request headers
and override them for specific
requests, as needed
 Sort and select the top n items
from a list with the fluent API

12. Code samples and
solutions
Reusable components
Guidance documentation
Monthly community calls
SharePoint Framework
SharePoint add-ins
Microsoft Graph
Office 365 APIs
Sharing is caring…
http://aka.ms/SharePointPnP