Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SPFx: Working with SharePoint Content

87 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SPFx: Working with SharePoint Content

  1. 1. IIS Express Project Templates
  2. 2. 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"]; }); }
  3. 3. 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[]>; }
  4. 4. 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(); })
  5. 5. 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}`); });
  6. 6. 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}`); });
  7. 7.  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
  8. 8. 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

×