SPFx Fundamentals:

All About Web Part Properties

Understanding how to best use web part properties is an essential skill in developing great SharePoint Framework web parts. In this lesson, we’ll take a tour of the standard web part property controls available in SharePoint Framework web parts, as well as an external library of controls we can easily import into our solution.

Important Update

In the latest version of SharePoint Framework and React, you may encounter an issue when applying the headerAlignment as a textAlign CSS property as shown in this lesson. The textAlign property can no longer be assigned as type string, but rather now requires type TextAlignProperty. You can fix this issue by changing your code as follows:

import { TextAlignProperty } from 'csstype';

// ...

<header style={​{ textAlign: this.props.headerAlignment as TextAlignProperty }}>

Learn More

  1. @microsoft/sp-webpart-base
  2. @pnp/spfx-property-controls
  3. Property Architecture Diagram
  4. Property Value Types
  5. Property Validation
  6. Lesson Source Code

Terminal Commands Used in This Lesson

  1. npm install @pnp/spfx-property-controls --save --save-exact
  2. gulp serve
Lesson 8 of 26