Home - AJIXuMuK/generator-spfx-proppane-control GitHub Wiki

Welcome to the Yeoman generator for SharePoint Framework Property Pane Controls!

Adding New Property Pane Control to the Web Part Project

This is not a standalone generator and should be used for the SharePoint Framework projects that were previously scaffolded using SPFx generators: yo @microsoft/sharepoint

• install the generator globally

npm i -g generator-spfx-proppane-control

• scaffold new property pane control as many times as you like

yo spfx-proppane-control

• follow the prompts from the generator

Adding the Control to the Property Pane

Add the control to the property pane using helper function from PropertyField<ComponentName>ts file:

import { PropertyFieldComponentName } from '../../propertyFields/<componentName>/PropertyField<ComponentName>';
//...
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
//...
PropertyField<ComponentName>(targetProperty, {...})
}

Available Frameworks Options

• No Framework
• React
• Vue.js

Versions

version	description
0.9.0	Initial version No Framework and React Framework support
0.9.2	NPM package fix to include subgenerators folders
1.0.0	Vue.js support
1.1.0	1. Fix for Vue.js SFC with no code splitting2. Support of Yarn and pnpm package managers