Updated teams webpart to display webpart title like OOTB

Updated teams webpart to display webpart title like OOTB
This commit is contained in:
Siddharth 2020-05-30 23:48:11 +05:30
parent 500cce2fa1
commit a6b1b83401
3 changed files with 15 additions and 4 deletions

View File

@ -27,7 +27,11 @@ export default class MyTeamsWebPart extends BaseClientSideWebPart <IMyTeamsWebPa
context: this.context, context: this.context,
webparttitle:this.properties.WebpartTitle, webparttitle:this.properties.WebpartTitle,
showdescription:this.properties.ShowDescription, showdescription:this.properties.ShowDescription,
openpopuponselectingchannel:this.properties.OpenPopupOnSelectingChannel openpopuponselectingchannel:this.properties.OpenPopupOnSelectingChannel,
displayMode: this.displayMode,
updateProperty: (value: string) => {
this.properties.WebpartTitle = value;
}
} }
); );

View File

@ -1,8 +1,10 @@
import { WebPartContext } from "@microsoft/sp-webpart-base"; import { WebPartContext } from "@microsoft/sp-webpart-base";
import { DisplayMode } from "@microsoft/sp-core-library";
export interface IMyTeamsProps { export interface IMyTeamsProps {
context: WebPartContext; context: WebPartContext;
webparttitle: string; webparttitle: string;
showdescription:boolean; showdescription:boolean;
openpopuponselectingchannel:boolean; openpopuponselectingchannel:boolean;
displayMode:DisplayMode;
updateProperty:(value: string) => void;
} }

View File

@ -6,6 +6,7 @@ import { ServiceProvider } from '../../../shared/services/ServiceProvider';
import { TreeView, ITreeItem, TreeItemActionsDisplayMode, TreeViewSelectionMode } from "@pnp/spfx-controls-react/lib/TreeView"; import { TreeView, ITreeItem, TreeItemActionsDisplayMode, TreeViewSelectionMode } from "@pnp/spfx-controls-react/lib/TreeView";
import { PrimaryButton, DefaultButton, Dialog, DialogFooter, DialogType, TextField, MessageBar,MessageBarType } from 'office-ui-fabric-react'; import { PrimaryButton, DefaultButton, Dialog, DialogFooter, DialogType, TextField, MessageBar,MessageBarType } from 'office-ui-fabric-react';
import { initializeIcons } from '@uifabric/icons'; import { initializeIcons } from '@uifabric/icons';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
export interface IMyTeamsState { export interface IMyTeamsState {
myteams: any[]; myteams: any[];
@ -127,9 +128,13 @@ export default class MyTeams extends React.Component<IMyTeamsProps, IMyTeamsStat
<React.Fragment> <React.Fragment>
<div className={styles.myTeams}> <div className={styles.myTeams}>
<i className="ms-Icon ms-Icon--TeamsLogo" aria-hidden="true"></i> <i className="ms-Icon ms-Icon--TeamsLogo" aria-hidden="true"></i>
<h1 className={styles.webpartitle}> {/* <h1 className={styles.webpartitle}>
{this.props.webparttitle}</h1> {this.props.webparttitle}</h1> */}
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.webparttitle}
updateProperty={this.props.updateProperty} />
{this.state.showMessage && {this.state.showMessage &&
<React.Fragment> <React.Fragment>