Demostración del paso a paso para conectarse a los datos de una lista de SharePoint utilizando llamadas a la API desde una WebPart de SharePoint Framework, realizando las tareas de Creación, Actualización, Eliminación y Consulta de Datos.

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