PropertyFieldMessage – Display Informational Messages in the SPFx Property Pane

The PropertyFieldMessage control from PnP SPFx Property Controls allows you to display informational messages directly inside the Property Pane of a SharePoint Framework (SPFx) Web Part.

Unlike most Property Controls, PropertyFieldMessage does not collect or store user input. Its only purpose is to provide visual feedback, instructions, warnings, or error messages while the user configures the Web Part.

This makes it an excellent choice for improving usability and guiding users through configuration steps.

Official Documentation

PnP SPFx Property Controls

When should you use PropertyFieldMessage?

Typical scenarios include:

• Displaying configuration instructions.
• Warning users about missing settings.
• Showing validation messages.
• Informing users about required permissions.
• Explaining why another property is disabled.
• Displaying success messages after a configuration step.

Since the control is rendered inside the Property Pane, users receive immediate feedback without interacting with the Web Part itself.

Installing the PnP Property Controls

If you have not installed the library yet:

npm install @pnp/spfx-property-controls --save

Importing the control

import {
  PropertyFieldMessage
} from '@pnp/spfx-property-controls/lib/PropertyFieldMessage';

MessageBarType Import

The official documentation still references the legacy office-ui-fabric-react package.

Current SPFx projects (SPFx 1.22/1.23+) use Fluent UI React, therefore the correct import is:

import { MessageBarType } from '@fluentui/react/lib/MessageBar';

If you use:

import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';

you will likely receive compilation errors because modern SPFx templates no longer install the legacy Office UI Fabric package.

Adding the control to the Property Pane

Example:

PropertyFieldMessage('', {
  key: 'MessageKey',
  text: 'Something went wrong... try later.',
  messageType: MessageBarType.error,
  isVisible: true
})

This adds an error message inside the Property Pane.

Available Properties

key

Unique identifier of the control.

key: 'MessageKey'

text

The message displayed to the user.

text: 'Configuration completed successfully.'

messageType

Defines the visual style.

Example:

messageType: MessageBarType.success

isVisible

Shows or hides the message.

isVisible: true

Since this property accepts a boolean, it can easily be connected to your own validation logic.

Example:

isVisible: this.properties.siteUrl === ''

Available Message Types

Information

MessageBarType.info

Displays general information.

Success

MessageBarType.success

Used after successful operations.

Warning

MessageBarType.warning

Alerts users without blocking the configuration.

Error

MessageBarType.error

Highlights configuration problems.

Severe Warning

MessageBarType.severeWarning

Draws extra attention to critical situations.

Dynamic Validation Example

A common scenario is warning the user that a required property has not yet been configured.

PropertyFieldMessage('', {
  key: 'SiteWarning',
  text: 'Please select a SharePoint site before continuing.',
  messageType: MessageBarType.warning,
  isVisible: !this.properties.siteUrl
})

As soon as the user selects the site, the message automatically disappears.

Practical Examples

Missing configuration

MessageBarType.warning

“Please configure a SharePoint List.”

Invalid configuration

MessageBarType.error

“The selected list does not exist.”

Successful configuration

MessageBarType.success

“Configuration completed successfully.”

Informational message

MessageBarType.info

“This Web Part supports multiple SharePoint sites.”

Does PropertyFieldMessage store values?

No.

Unlike controls such as:

• PropertyFieldText
• PropertyFieldPeoplePicker
• PropertyFieldColorPicker
• PropertyFieldListPicker

PropertyFieldMessage never writes anything to the Web Part properties.

It is purely a visual component.

Advantages

• Extremely lightweight.
• Improves Property Pane usability.
• Excellent for validation.
• Easy to enable or disable.
• Supports multiple message types.
• Integrates perfectly with Fluent UI MessageBar styles.

Limitations

• Does not receive user input.
• Does not save values.
• Cannot replace validation logic.
• Only appears inside the Property Pane.

Best Practices

✔ Display clear, concise messages.

✔ Use Warning before showing Error whenever possible.

✔ Hide messages automatically after the user fixes the issue.

✔ Avoid displaying multiple error messages simultaneously.

✔ Use Success messages only when they provide meaningful feedback.

Complete Example

PropertyFieldMessage('', {
  key: 'ConfigurationMessage',
  text: 'Please configure all required properties.',
  messageType: MessageBarType.warning,
  isVisible: true
})

Conclusion

Although PropertyFieldMessage is one of the simplest controls in the PnP Property Controls library, it can significantly improve the configuration experience of an SPFx Web Part.

Instead of forcing users to guess why something is not working, the control provides immediate visual feedback directly inside the Property Pane. When combined with conditional visibility and Fluent UI message styles, it becomes an effective way to guide users through configuration, reduce mistakes, and create a more intuitive editing experience.

For modern SPFx projects, remember to import MessageBarType from @fluentui/react, as the older office-ui-fabric-react package is no longer used by recent SharePoint Framework templates.

References

PnP PropertyFieldMessage

PnP SPFx Property Controls

Fluent UI MessageBar

SharePoint Framework Documentation