Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

SPO: SharePoint Listen im WebPart verwenden

16.03.2020 (👁8405)

SPO: eine Liste verwenden

#3

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 _itemsISPList[] = [{ 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((dataISPList[]) => {

        var listDataISPLists = { 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 {

  valueISPList[];

}

export interface ISPList {

  Titlestring;

  Idstring;

}

//</ Listen >

export interface IWebPart01WebPartProps {

  descriptionstring,

  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