SPO: eine Liste verwenden
Hierzu erstellt man im Ordner src\webparts\webpart01 eine neue .ts Datei als Zugriff auf die
Liste
Hier im Beispiel
List01.ts
Dann wird eine Schnittstelle zur SharePoint Liste erstellt
Zugriff zur SharePoint Liste
Typescript
Code, React:
|
//< Imports >
import { ISPList } from './WebPart01WebPart'; //I Interface as: SharePoint List
//</ Imports >
export default class List01Client {
//----------< List01Client() >------------
//* creates a list
//--< List-Items-Array >--
private static _items: ISPList[] = [{ Title: 'Todo Item 1', Id: '1' },
{ Title: 'Todo Item 2', Id: '2' },
{ Title: 'Todo Item 3', Id: '3' }];
//--</ List-Items-Array >--
//--< get_Items() >--
//*async get methode do get the list from outside
public static get(): Promise<ISPList[]> {
return new Promise<ISPList[]>((resolve) => {
resolve(List01Client._items);
});
}
//----------</ List01Client() >------------
}
|
In der Webpart-Datei .ts fügt man eine methode ein zum lesen
der SharePoint liste
|
//----< GetList() >----
private _getListData(): Promise<ISPLists> {
return List01Client.get()
.then((data: ISPList[]) => {
var listData: ISPLists = { value: data };
return listData;
}) as Promise<ISPLists>;
}
//----</ GetList() >----
|
Verweise zu Listen einbinden
Damit der Zugriff auf die SharePoint Listen und die Übergabe
zur Liste funktioniert, muss im Dateikopf die Schnittstelle zu SharePoint
Listen ISPList eingefügt werden, der SharePoint httpClient SPHttpClient und ein
Bezug zur externen Datei Liste.ts, welche zuvor erstellt wurde
Code Typescript / React / SharePoint zum einbinden der
Listen
|
import { List01Client } from './List'; //*get Interface to List
import {
SPHttpClient,
SPHttpClientResponse
} from '@microsoft/sp-http';
//----</ Import >----
//----< Export >----
//*Listen zugriff Sharepoint
//< Listen >
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}
//</ Listen >
export interface IWebPart01WebPartProps {
description: string,
ctx: WebPartContext;
}
export default class WebPart01WebPart extends BaseClientSideWebPart<IWebPart01WebPartProps> {
//----</ Export >----
|
Test der SharePoint Listen mit
gulp serve
Zum Testen, ob der Code soweit fehlerfrei ist, sollte man gulp serve ausführen
