|
//====< 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 >==========
|