Add Hyperlink at property pane description area

Question

I am building an SPFX web-part and I want to put my company URL in the description of the property pane, like in the Microsoft docs snippet:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane

But I cant find the way to do this and I googled for hours. Description always return the string and not the link.

Code below (already tried to override the description property to assume HTML but without success:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
  pages: [
    {
      header: {
        description: strings.PropertyPaneDescription
      },
      displayGroupsAsAccordion: true,
      groups: [
        
        {
          groupName: strings.BasicGroupName,
          isCollapsed: true,
          groupFields: [
            PropertyPaneTextField('siteurl', {
              label: strings.SiteUrl
            }),
            PropertyPaneTextField('listname', {
              label: strings.List
            })

          ]
        },
        {
          groupName: strings.NewsDefinitions,
          isCollapsed: true,
          groupFields: [
            PropertyPaneTextField('iconText', {
              label: strings.IconText
            }),
            PropertyPaneSlider('sliderproperty', {
              label: strings.Speed,
              min: 5,
              max: 60,
              value: 60,
              showValue: true,
              step: 1
            }),

          ]

        },
        {
          groupName: strings.ColorDefinitions,
          isCollapsed: true,
          groupFields: [
            PropertyFieldColorPicker('iconTextColor', {
              label: strings.IconTextColor,
              selectedColor: this.properties.iconTextColor,
              onPropertyChange: this.onPropertyPaneFieldChanged,
              properties: this.properties,
              disabled: false,
              isHidden: false,
              alphaSliderHidden: false,
              style: PropertyFieldColorPickerStyle.Full,
              iconName: 'Precipitation',
              key: 'colorFieldId'
            }),

            PropertyFieldColorPicker('mainColor', {
              label: strings.MainColor,
              selectedColor: this.properties.mainColor,
              onPropertyChange: this.onPropertyPaneFieldChanged,
              properties: this.properties,
              disabled: false,
              isHidden: false,
              alphaSliderHidden: false,
              style: PropertyFieldColorPickerStyle.Full,
              iconName: 'Precipitation',
              key: 'colorFieldId'
            }),
            PropertyFieldColorPicker('innerColor', {
              label: strings.InnerColor,
              selectedColor: this.properties.innerColor,
              onPropertyChange: this.onPropertyPaneFieldChanged,
              properties: this.properties,
              disabled: false,
              isHidden: false,
              alphaSliderHidden: false,
              style: PropertyFieldColorPickerStyle.Full,
              iconName: 'Precipitation',
              key: 'innercolorFieldId'
            })
          ]
        },
        {
          isCollapsed:false,
          groupFields: [
            PropertyFieldLinkWithCallout('fakeProp', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'linkWithCalloutFieldId',
              calloutContent: React.createElement('p', {}, 'Click the link to open a new page with Application Terms & Conditions'),
              calloutWidth: 200,
              text: 'Terms & Conditions',
              href: 'https://github.com/pnp/sp-dev-fx-property-controls',
              target: '_blank'
            })
          ]
        }
      ]
    }
  ]
};

}

Answer 1

Figured out how to do. Just have to add a React.createElement() and it renders with a hyperlink.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    if(this.properties.listOrDocument==="3"){
      this.isList=false;
    }

    return {
      pages: [
        {
            header:{
              description:React.createElement("div",{},["Developed by ",React.createElement("a",{href:'https://www.torpedo.pt'},"Torpedo")]) 
            },
(..)

The best way is to assign multiple elements to variables and then put inside the array where we want to render them.

Answer 2

You can use @pnp/spfx-property-controls which has PropertyFieldLinkWithCallout control.

This control generates a link control with a callout.

Example code:

1. Import the following modules to your component:

import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
import { PropertyFieldLinkWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLinkWithCallout';

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

PropertyFieldLinkWithCallout('fakeProp', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'linkWithCalloutFieldId',
  calloutContent: React.createElement('p', {}, 'Click the link to open a new page with Application Terms & Conditions'),
  calloutWidth: 200,
  text: 'Terms & Conditions',
  href: 'https://github.com/pnp/sp-dev-fx-property-controls',
  target: '_blank'
})

Reference: PropertyFieldLinkWithCallout control