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 { value: ISPList[]; }
export interface ISPList { Title: string; Id: string; } //</ Listen >
export interface IWebPart01WebPartProps { description: string, 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 element: React.ReactElement<any > = React.createElement( WebPart01, { description: this.properties.description, ctx: this.context } );
this._renderListAsync(); ReactDom.render(element, this.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(items: ISPList[]): void { //------< _renderList() >------ let html: string = ''; items.forEach((item: ISPList) => { html += ` <ul class="${styles.list}"> <li class="${styles.listItem}"> <span class="ms-font-l">${item.Title}</span> </li> </ul>`; });
const listContainer: Element = this.domElement.querySelector('#spListContainer'); listContainer.innerHTML = html; //------</ _renderList() >------ }
//----< GetList() >---- private _getListData_local(): Promise<ISPLists> { return List01Client.get() .then((data: ISPList[]) => { var listData: ISPLists = { 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((response: SPHttpClientResponse) => { 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-width: 700px; margin: 0px auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); }
.row { @include ms-Grid-row; @include ms-fontColor-white; background-color: $ms-color-themeDark; padding: 20px; }
.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-decoration: none; height: 32px;
// Primary Button min-width: 80px; background-color: $ms-color-themePrimary; border-color: $ms-color-themePrimary; color: $ms-color-white;
// Basic Button outline: transparent; position: relative; font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; -webkit-font-smoothing: antialiased; font-size: $ms-font-size-m; font-weight: $ms-font-weight-regular; border-width: 0; text-align: center; cursor: pointer; display: inline-block; padding: 0 16px; }
.test { margin: 100px; }
.label { font-weight: $ms-font-weight-semibold; font-size: $ms-font-size-m; height: 32px; line-height: 32px; margin: 0 4px; vertical-align: top; display: inline-block; }
//--< Style: List >--- .list { color: #333333; font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 14px; font-weight: normal; box-sizing: border-box; margin: 10; padding: 10; line-height: 50px; list-style-type: none; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); }
.listItem { color: #333333; vertical-align: center; font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 14px; font-weight: normal; box-sizing: border-box; margin: 0; padding: 0; box-shadow: none; *zoom: 1; padding: 9px 28px 3px; position: relative; } //--</ Style: List >---
}
|
Code Beipiel zu
Verbinden Ihres clientseitigen Webparts mit SharePoint („Hello World“ Teil 2)