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'
})
]
}
]
}
]
};
}
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.
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:
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/Callout';
import { PropertyFieldLinkWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldLinkWithCallout';
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP