Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample custom property pane field for SharePoint Framework
import * as React from "react";
import * as ReactDom from 'react-dom';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Label } from 'office-ui-fabric-react/lib/Label';
import {
IPropertyPaneField,
PropertyPaneFieldType
} from '@microsoft/sp-webpart-base';
/**************
* Interfaces *
**************/
// Public properties
export interface ISampleInsecurePasswordProps {
key: string;
label?: string;
description?: string;
initialValue?: string;
properties: any;
/**
* @function
* Defines a onPropertyChange function to raise when the selected value changed.
* Normally this function must be always defined with the 'this.onPropertyChange'
* method of the web part object.
*/
onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;
}
// Private properties
export interface ISampleInsecurePasswordPropsInternal extends ISampleInsecurePasswordProps {
label: string;
description: string;
initialValue: string;
properties: any;
onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;
targetProperty: string;
onRender(elem: HTMLElement, ctx, changeCallback): void;
onDispose(elem: HTMLElement): void;
onChanged(targetProperty: string, value: any): void;
}
// React component properties
export interface ISampleInsecurePasswordHostProps extends ISampleInsecurePasswordPropsInternal { }
// React component state
export interface ISampleInsecurePasswordHostState {
currentPassword: string;
}
/***************************************
* SampleInsecurePasswordBuilder class *
***************************************/
class SampleInsecurePasswordBuilder implements IPropertyPaneField<ISampleInsecurePasswordPropsInternal> {
// Properties defined by IPropertyPaneField
public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
public targetProperty: string;
public properties: ISampleInsecurePasswordPropsInternal;
// Custom properties
private label: string;
private description: string;
private initialValue: string;
private customProperties: any;
private onPropertyChange: (propertyPath: string, oldValue: any, newValue: any) => void;
public constructor(_targetProperty: string, _properties: ISampleInsecurePasswordPropsInternal) {
this.label = _properties.label;
this.description = _properties.description;
this.initialValue = _properties.initialValue;
this.customProperties = _properties.properties;
this.onPropertyChange = _properties.onPropertyChange;
this.properties = _properties;
this.properties.onRender = this.render;
this.properties.onDispose = this.dispose;
}
/**
* @function
* Renders the picker field content
*/
private render(elem: HTMLElement, ctx?, changeCallback?: (targetProperty: string, value: any) => void): void {
const props: ISampleInsecurePasswordHostProps = {
key: this.properties.key,
label: typeof this.label === "undefined" ? null : this.label,
description: typeof this.description === "undefined" ? null : this.description,
initialValue: typeof this.initialValue === "undefined" ? null : this.initialValue,
properties: this.properties,
targetProperty: this.targetProperty,
onRender: this.render,
onChanged: changeCallback,
onDispose: this.dispose,
onPropertyChange: this.onPropertyChange
};
// Construct the JSX properties
const element: React.ReactElement<ISampleInsecurePasswordProps> = React.createElement(SampleInsecurePasswordHost, props);
// Calls the REACT content generator
ReactDom.render(element, elem);
}
/**
* @function
* Disposes the current object
*/
private dispose(elem: HTMLElement): void { }
}
/*******************
* React component *
*******************/
export class SampleInsecurePasswordHost extends React.Component<ISampleInsecurePasswordHostProps, ISampleInsecurePasswordHostState> {
constructor(props: ISampleInsecurePasswordHostProps) {
super(props);
this.state = {
currentPassword: this.props.initialValue
};
this.onValueChanged = this.onValueChanged.bind(this);
this.notifyAfterValidate = this.notifyAfterValidate.bind(this);
}
private onValueChanged(newValue: any): void {
if (this.props.initialValue !== newValue) {
this.setState({
currentPassword: newValue
});
this.notifyAfterValidate(this.props.initialValue, newValue);
}
}
private notifyAfterValidate(oldValue: string, newValue: string) {
this.props.properties[this.props.targetProperty] = newValue;
this.props.onPropertyChange(this.props.targetProperty, oldValue, newValue);
if (typeof this.props.onChanged !== "undefined") {
this.props.onChanged(this.props.targetProperty, newValue);
}
}
public render(): JSX.Element {
return (
<div style={{ marginBottom: '8px' }}>
{
(() => {
if (this.props.label !== null) {
return <Label>{this.props.label}</Label>;
}
})()
}
<TextField type="password"
name="password"
value={this.state.currentPassword !== null ? this.state.currentPassword.toString() : ''}
onChanged={this.onValueChanged}
placeholder={this.props.description !== null ? this.props.description : ''} />
</div>
);
}
}
/***********************************
* SampleInsecurePassword function *
***********************************/
export default function SampleInsecurePassword(targetProperty: string, properties: ISampleInsecurePasswordProps): IPropertyPaneField<ISampleInsecurePasswordPropsInternal> {
var newProperties: ISampleInsecurePasswordPropsInternal = {
key: properties.key,
label: properties.label,
description: properties.description,
initialValue: properties.initialValue,
properties: properties.properties,
targetProperty: targetProperty,
onPropertyChange: properties.onPropertyChange,
onDispose: null,
onRender: null,
onChanged: null
};
// Calles the SampleInsecurePasswordBuilder builder object
// This object will simulate a PropertyFieldCustom to manage his rendering process
return new SampleInsecurePasswordBuilder(targetProperty, newProperties);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.