4

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

2 Answers 2

4

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:

enter image description here

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

3
  • Thanks for this excellent solution
    – JJD
    Commented May 14, 2020 at 7:38
  • What is the use of key: 'LabelWithCalloutFieldId' for?
    – JJD
    Commented May 14, 2020 at 7:50
  • It is used to uniquely identify the property pane control, think of it as unique Id which you can use in your webpart. If this info is helpful, you can mark it as answer. Cheers ! Commented May 14, 2020 at 8:25
4

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:

enter image description here

Check below article for more information:

SharePoint client-side web part configurable properties in Property Pane using spfx

2
  • Hi @JJD, Have you tried this? is it working for you?? Commented May 8, 2020 at 13:50
  • Yes it works perfectly, thanks Ganesh
    – JJD
    Commented May 14, 2020 at 7:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.