How to let custom property pane fields enable the apply button in SharePoint Framework

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * @function
 * Renders the custom field
 */
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);
}

1
2
3
4
5
6
7
8
9

private notifyAfterValidate(oldValue: string, newValue: string) {
  this.props.properties[this.props.targetProperty] = newValue;
  this.props.onPropertyChange(this.props.targetProperty, oldValue, newValue);

  // Trigger the onChanged callback
  if (typeof this.props.onChanged !== "undefined") {
    this.props.onChanged(this.props.targetProperty, newValue);
  }
}