TransWikia.com

Add Hyperlink at property pane description area

SharePoint Asked by Henrique Serafim on October 25, 2021

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'
            })
          ]
        }
      ]
    }
  ]
};

}

enter image description here

2 Answers

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.

enter image description here

enter image description here

Answered by Henrique Serafim on October 25, 2021

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';
  1. 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

Answered by Ganesh Sanap on October 25, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP