Add informative text to PropertyPaneConfiguration
-
08-02-2021 - |
Question
I'd like to write some lines of text to clarify the use specific properties, like a hint below the field or as a separate text block, or even as an (i) icon next to the field
Is this at all possible?
for example
Field name
[_______]
some additional note
or
Field name 1
[_______]
Field name 2
[_______]
About field 1 and 2: here's how to use them
Solution
You can use PnP SPFx property pane controls in your solution.
They provide callout value for standard property pane controls like button, text, dropdown etc.
Example:
To install them, you can do that as below:
npm install @pnp/spfx-property-controls --save --save-exact
After that in your project you can use it as below:
1) add the necessary import statement:
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
import { PropertyFieldLabelWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLabelWithCallout';
2) Add custom property control:
PropertyFieldLabelWithCallout('fakeProp', {
calloutTrigger: CalloutTriggers.Click,
key: 'LabelWithCalloutFieldId',
calloutContent: 'Use dropdowns below to select list and list\'s field to work with',
calloutWidth: 200,
text: 'Select List and Field'
})
Reference - PnP SPFx property pane controls
These callouts are there for standard controls mentioned below:
Label with callout - Property Pane label control with callout
Checkbox with callout - Property Pane checkbox control with callout
Choice group with callout - Property Pane choice group control with callout
Toggle with callout - Property pane toggle control with callout
OTHER TIPS
Yes, you can use PropertyPaneLabel
for that.
Something Like:
{
groupName: "Custom group",
groupFields: [
PropertyPaneTextField('textboxField', {
label: "Enter a custom value"
}),
PropertyPaneLabel('labelField', {
text: "This is a custom text in PropertyPaneLabel"
})
]
}
Output:
Check below article for more information:
SharePoint client-side web part configurable properties in Property Pane using spfx