

PropertyFieldGuid control

This control generates an input field for GUID. Incorrect GUID entered will result into an invalid input.

PropertyFieldGuid example usage

How to use this control in your solutions

• Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
• Import the following modules to your component:

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

• Create a new property for your web part, for example:

export interface IPropertyControlsTestWebPartProps {
  guid: string;
}

• Add the custom property control to the groupFields of the web part property pane configuration:

PropertyFieldGuid('guid', {
  key: 'guid',
  label: "GUID",
  value: this.properties.guid
})

• You can also implement the property your own error message with the errorMessage property with the following syntax:

PropertyFieldGuid('guid', {
  key: 'guid',
  label: "GUID",
  value: this.properties.guid,
  errorMessage: "Please enter a correct GUID"
})

Implementation

The PropertyFieldGuid control can be configured with the following properties:

Property	Type	Required	Description
key	string	yes	An unique key that indicates the identity of this control.
label	string	yes	Property field label displayed on top.
value	string	no	Value to be displayed in the Guid field.
errorMessage	string	no	If set, this will be displayed as an error message.