Description
Target SharePoint environment
SharePoint Online
What SharePoint development model, framework, SDK or API is this about?
💥 SharePoint Framework
Developer environment
Windows
What browser(s) / client(s) have you tested
- 💥 Internet Explorer
- 💥 Microsoft Edge
- 💥 Google Chrome
- 💥 FireFox
- 💥 Safari
- mobile (iOS/iPadOS)
- mobile (Android)
- not applicable
- other (enter in the "Additional environment details" area below)
Additional environment details
- SPFx version: 1.18.2
- Node.js version: v18.19.0
- NPM package used: @pnp/spfx-property-controls
Describe the bug / error
I'm unable to apply Viva connections ACE card icon change functionality using the PnP PropertyFieldIconPicker control.
ACE card is working the boilerplate code where edit property Title is present.
PropertyPane is coming as blank/white area after adding the PropertyFieldIconPicker control.
I have taken reference from: https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-My-Notifications
Steps to reproduce
I have used below code to implement the functionality.
Source Code
File: IconPickerAceAdaptiveCardExtension.ts
`
import type { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base';
import { CardView } from './cardView/CardView';
import { QuickView } from './quickView/QuickView';
import { IconPickerAcePropertyPane } from './IconPickerAcePropertyPane';
export interface IIconPickerAceAdaptiveCardExtensionProps {
title: string;
iconPicker: string;
}
export interface IIconPickerAceAdaptiveCardExtensionState {
title: string;
iconPicker: string;
}
const CARD_VIEW_REGISTRY_ID: string = 'IconPickerAce_CARD_VIEW';
export const QUICK_VIEW_REGISTRY_ID: string = 'IconPickerAce_QUICK_VIEW';
export default class IconPickerAceAdaptiveCardExtension extends BaseAdaptiveCardExtension< IIconPickerAceAdaptiveCardExtensionProps, IIconPickerAceAdaptiveCardExtensionState> {
private _deferredPropertyPane: IconPickerAcePropertyPane;
public onInit(): Promise {
this.state = {
title: this.properties.title,
iconPicker: this.properties.iconPicker
};
// registers the card view to be shown in a dashboard
this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
// registers the quick view to open via QuickView action
this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
return Promise.resolve();
}
protected loadPropertyPaneResources(): Promise {
return import(
/* webpackChunkName: 'IconPickerAce-property-pane'*/
'./IconPickerAcePropertyPane'
)
.then(
(component) => {
this._deferredPropertyPane = new component.IconPickerAcePropertyPane(
this.context,
this.properties,
this.onPropertyPaneFieldChanged
);
}
);
}
protected renderCard(): string | undefined {
return CARD_VIEW_REGISTRY_ID;
}
public get iconProperty(): string {
return this.properties.iconPicker;
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return this._deferredPropertyPane?.getPropertyPaneConfiguration();
}
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
if (propertyPath === 'iconPicker' && newValue !== oldValue) {
this.properties.iconPicker = newValue;
}
this.context.propertyPane?.refresh(); // Notify SPFx that properties have changed
}
}
`
File: IconPickerAcePropertyPane.ts
`
import { AdaptiveCardExtensionContext } from '@microsoft/sp-adaptive-card-extension-base';
import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
import * as strings from 'IconPickerAceAdaptiveCardExtensionStrings';
import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';
import { IIconPickerAceAdaptiveCardExtensionProps } from './IconPickerAceAdaptiveCardExtension';
export class IconPickerAcePropertyPane {
private context: AdaptiveCardExtensionContext;
private properties: IIconPickerAceAdaptiveCardExtensionProps;
private onPropertyPaneFieldChanged: (propertyPath: string, oldValue: any, newValue: any) => void;
constructor(
context: AdaptiveCardExtensionContext,
properties: IIconPickerAceAdaptiveCardExtensionProps,
onPropertyPaneFieldChanged: (propertyPath: string, oldValue: any, newValue: any) => void
) {
this.context = context;
this.properties = properties;
this.onPropertyPaneFieldChanged = onPropertyPaneFieldChanged;
}
public getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: { description: strings.PropertyPaneDescription },
groups: [
{
groupFields: [
PropertyPaneTextField('title', {
label: strings.TitleFieldLabel
}),
PropertyFieldIconPicker('iconPicker', {
currentIcon: this.properties.iconPicker,
key: "iconPickerId",
onSave: (icon: string) => {
this.context.propertyPane?.refresh();
this.properties.iconPicker = icon;
},
onChanged:(icon: string) => {
this.context.propertyPane?.refresh();
this.properties.iconPicker = icon;
},
buttonLabel: "Icon",
renderOption: "panel",
properties: this.properties,
onPropertyChange: this.onPropertyPaneFieldChanged,
label: "Icon Picker"
})
]
}
]
}
]
};
}
}
`
Expected behavior
PropertyPane should appear with PropertyFieldIconPicker control.
The selected the icon should appear in Viva Connections ACE card icon.