1

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

1
  • have you tried it? I see that only strings are allowed. Here's the type class. export declare interface IPropertyPanePageHeader { /** * Header to display. / description: string; /* * Image url for the background image. */ image?: string; }
    – Abhijit
    Oct 9, 2020 at 12:20

4 Answers 4

1

In case anyone comes looking for this years later, I found a way to do this using PropertyPaneLink

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description:"View the Azure DevOps Board for details on usage and configuration" 
          },
          groups: [
            {
              groupName: "Configure this Webpart",
              groupFields: [
                PropertyPaneTextField('listNameProperty', {
                  description: "xxx",
                  label: "List URL"
                }),
                PropertyPaneLink('linkProperty', {
                href: 'http://www.google.com',
                text: 'Click to view usage and configuration details',
                target: '_blank'})
              ]
            }
          ]
        }
      ]
    };
  }

Scroll down to the PropertyPaneLink section for example: https://www.sharepointnutsandbolts.com/2017/02/sharepoint-framework-web-part-properties-button-toggle-slider.html

1
  • +1 for not adding an entire framework like React to solve a tiny issue. Aug 21 at 15:52
0

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

8
  • Hi Ganesh, thanks for the fast response.. that i've already tried and indeed it shows the link but i wanted something like the link i gave from Microsoft docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/… .. the first image where you can see the "learn more" link is at the header of the property pane. Every time i tried to put some 'a' tag it shows as a string ie (<a href="google.com">Google</a> it should show only "Google" but it shows the html tag..) Jul 20, 2020 at 13:20
  • This is because the header expects the string and it treats it as a string only. So, instead of giving description to header, keep it blank and then use this control at the top of property pane. it should give you the same feel as the image you are referring to. Jul 20, 2020 at 13:26
  • is there some way to avoid this property of getting in the accordion group?? imgur.com/a/xsQ9298 i dont want the empty group name neither the collapse arrow Jul 20, 2020 at 13:31
  • I think it is showing like this because you are using multiple groups inside your property pane. Need to check if we can remove the collapse arrow. Can you please add the code you are using inside getPropertyPaneConfiguration()? Jul 20, 2020 at 13:45
  • 1
    just post the answer.. it was quite easy.. after i found the solution ^^ thanks for your help tho Jul 23, 2020 at 8:16
0

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

2
  • @Ganesh, I don't think it works. I see that only strings are allowed. Here's the type class. export declare interface IPropertyPanePageHeader { /** * Header to display. / description: string; /* * Image url for the background image. */ image?: string; }
    – Abhijit
    Oct 9, 2020 at 12:23
  • Hi Ganesh, sorry for the late reply.. Yes it did work but i had to change the type for IPropertyPaneField (added image above) Dec 24, 2020 at 13:44
0

How we can overwrite IPropertyPanePageHeader interface, even if i try to declare the interface in the webpart.ts file, its still refering to index-internal.ts file for the IpropertyPanePageHEader interface. can someone suggest? enter image description here

1

Your Answer

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

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