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

Code SharePoint WebPart und Liste in HelloWorld Online

16.03.2020 (👁16683)

SharePoint Liste in Webpart, Code

SharePoint WebPart Code des HelloWorld Sample

TypeScript, React

 

WebPart Code

WebPart01WebPart.ts

Verzeichnis: .\src\webparts\WebPart01\WebPart01WebPart.ts

React, TypeScript Code

//====< Import >====

import * as React from 'react';

import * as ReactDom from 'react-dom';

import { Version } from '@microsoft/sp-core-library';

import {

  BaseClientSideWebPart,

  IPropertyPaneConfiguration,

  PropertyPaneTextField

from '@microsoft/sp-webpart-base';

import * as strings from 'WebPart01WebPartStrings';

import WebPart01 from './components/WebPart01';

import { IWebPart01Props } from './components/IWebPart01Props';

import { WebPartContext } from "@microsoft/sp-webpart-base";  //*get pageContext

import  List01Client  from './List01';                          //*get Interface to List

import {

  SPHttpClient,

  SPHttpClientResponse

from '@microsoft/sp-http';

//*Environment of SharePoint, Shows Workbench

import {

  Environment,

  EnvironmentType

from '@microsoft/sp-core-library';

import styles from './components/WebPart01.module.scss'

//====</ Import >====



//======< Export >======

//*Listen zugriff Sharepoint

//#region export_interfaces

//< Listen >

export interface ISPLists {

  valueISPList[];

}

export interface ISPList {

  Titlestring;

  Idstring;

}

//</ Listen >

export interface IWebPart01WebPartProps {

  descriptionstring,

  ctx:   WebPartContext;

}

export default class WebPart01WebPart extends BaseClientSideWebPart<IWebPart01WebPartProps> {

//#endregion export_interfaces

//======</ Export >======



//==========< Methods >==========

//IWebPart01Props->any

//======< Methods: webpart+Render >======

//#region webpart_methods

//----< Render() >----

public render(): void {

  const elementReact.ReactElement<any > = React.createElement(

    WebPart01,

    {

      description: this.properties.description,

      ctx: this.context        

    }

  );

  this._renderListAsync();

  ReactDom.render(elementthis.domElement);

}

//----</ Render() >----

  protected onDispose(): void {

    ReactDom.unmountComponentAtNode(this.domElement);

  }

  protected get dataVersion(): Version {

    return Version.parse('1.0');

  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField('description', {

                  label: strings.DescriptionFieldLabel

                })

              ]

            }

          ]

        }

      ]

    };

  }

//#endregion webpart_methods

  //======</ Methods: webpart >======

  //======< Methods: User >======

  private _renderListAsync(): void {

    //------< _renderListAsync() >------

    //*Aufruf der _renderList abhaengig von Local oder SPO SharePointOnline 

    // Local environment

    if (Environment.type === EnvironmentType.Local) {

      this._getListData_local().then((response=> { //*get_Data

        this._renderList(response.value);      //*render_Data

      });

    }

    //SharePoint-Online

    else if (Environment.type == EnvironmentType.SharePoint ||

              Environment.type == EnvironmentType.ClassicSharePoint) {

      this._getListData()                   //*get_Data

        .then((response=> {

          this._renderList(response.value); //*render_Data

        });

    }

    //------</ _renderListAsync() >------

  }

  private _renderList(itemsISPList[]): void {

    //------< _renderList() >------

    let htmlstring = '';

    items.forEach((itemISPList=> {

      html += `

    <ul class="${styles.list}">

      <li class="${styles.listItem}">

        <span class="ms-font-l">${item.Title}</span>

      </li>

    </ul>`;

    });

  

    const listContainerElement = this.domElement.querySelector('#spListContainer');

    listContainer.innerHTML = html;

    //------</ _renderList() >------

  }

  //----< GetList() >----

  private _getListData_local(): Promise<ISPLists> {

    return List01Client.get()

      .then((dataISPList[]) => {

        var listDataISPLists = { value: data };

        return listData;

      }) as Promise<ISPLists>;

  }

  

  private _getListData(): Promise<ISPLists> {

    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`SPHttpClient.configurations.v1)

      .then((responseSPHttpClientResponse=> {

        return response.json();

      });

  }

  //----</ GetList() >----

  //======</ Methods: User >======

}

//==========</ Methods >==========

Ausgabe HTML Container

WebPart01.tsx

.\src\webparts\components

WebPart01.tsx

Code

HTML AusgabeCode in React/TypeScript zum Erzeugen der Ausgabe

Wichtig ist hier, der Ausgabe-Div Container, in welchen das HTML der Liste gerendert wird mit _render()

import * as React from 'react';

import styles from './WebPart01.module.scss';

import { IWebPart01Props } from './IWebPart01Props';

import { escape } from '@microsoft/sp-lodash-subset';

export default class WebPart01 extends React.Component<IWebPart01Props, {}> {

  public render(): React.ReactElement<IWebPart01Props> {

    return (

      <div className={ styles.webPart01 }>

        <div className={ styles.container }>

          <div className={ styles.row }>

            <div className={ styles.column }>

              <span className={ styles.title }>SharePoint WebPart React</span>

              <p className={ styles.subTitle }>Test01: Get Page Context</p>

              <p className={ styles.description }>Description: {escape(this.props.description)}</p>

              

              <p>URL={this.props.ctx.pageContext.web.absoluteUrl}</p>    

              <p>Title={this.props.ctx.pageContext.web.title}</p>    

              

            </div>

          </div>

          <div id="spListContainer" />

        </div>

      </div>

    );

  }

}

CSS Style Klassen in SharePoint WebPart

Datei: WebPart01.module.css

Wichtig : hier sind die List und ListItem Klassen, zur farblichen Darstellung der Listen-Elemente

@import '~office-ui-fabric-react/dist/sass/References.scss';

.webPart01 {

  .container {

    max-width700px;

    margin0px auto;

    box-shadow0 2px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

  }

  .row {

    @include ms-Grid-row;

    @include ms-fontColor-white;

    background-color$ms-color-themeDark;

    padding20px;

  }

  .column {

    @include ms-Grid-col;

    @include ms-lg10;

    @include ms-xl8;

    @include ms-xlPush2;

    @include ms-lgPush1;

  }

  .title {

    @include ms-font-xl;

    @include ms-fontColor-white;

  }

  .subTitle {

    @include ms-font-l;

    @include ms-fontColor-white;

  }

  .description {

    @include ms-font-l;

    @include ms-fontColor-white;

  }

  .button {

    // Our button

    text-decorationnone;

    height32px;

    // Primary Button

    min-width80px;

    background-color$ms-color-themePrimary;

    border-color$ms-color-themePrimary;

    color$ms-color-white;

    // Basic Button

    outlinetransparent;

    positionrelative;

    font-family"Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;

    -webkit-font-smoothingantialiased;

    font-size$ms-font-size-m;

    font-weight$ms-font-weight-regular;

    border-width0;

    text-aligncenter;

    cursorpointer;

    displayinline-block;

    padding0 16px;

    }

    

.test {

  margin100px;

}

    .label {

      font-weight$ms-font-weight-semibold;

      font-size$ms-font-size-m;

      height32px;

      line-height32px;

      margin0 4px;

      vertical-aligntop;

      displayinline-block;

    }

 

  //--< Style: List >---    

    .list {

      color#333333;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin10;

      padding10;

      line-height50px;

      list-style-typenone;

      box-shadow0 4px 4px 0 rgba(0000.2), 0 25px 50px 0 rgba(0000.1);

    }

    

    .listItem {

      color#333333;

      vertical-aligncenter;

      font-family'Segoe UI Regular WestEuropean''Segoe UI'TahomaArialsans-serif;

      font-size14px;

      font-weightnormal;

      box-sizingborder-box;

      margin0;

      padding0;

      box-shadownone;

      *zoom1;

      padding9px 28px 3px;

      positionrelative;

    }

  //--</ Style: List >---

  

}

Code Beipiel zu

Erstellen Ihres ersten clientseitigen SharePoint-Webparts („Hello World“ Teil 1)

Verbinden Ihres clientseitigen Webparts mit SharePoint („Hello World“ Teil 2)