Following the steps from the above url or the ones from https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/#implementation, VS Code gives two errors: In the inserted PropertyFieldListPicker in the getPropertyPaneConfiguration, context gives this error:
Type 'WebPartContext' is not assignable to type 'BaseComponentContext'.
Types have separate declarations of a private property '_serviceScope'.ts(2322)
IPropertyFieldListPicker.d.ts(39, 5): The expected type comes from property 'context' which is declared here on type 'IPropertyFieldListPickerProps'
And onGetErrorMessage give this error:
Type 'null' is not assignable to type '((value: string) => string | Promise) | undefined'.ts(2322)
IPropertyFieldListPicker.d.ts(107, 5): The expected type comes from property 'onGetErrorMessage' which is declared here on type 'IPropertyFieldListPickerProps'
Changing context to context: this.context as any;
and changing onGetErrorMessage to onGetErrorMessage: undefined:
removes the erros and makes it possible to run a gulp serve
Trying to add the webpart gives an error:
Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
ERROR:
Cannot read properties of undefined (reading 'id')
Follow the steps to build a list picker as described in above urls, correct the context and the OnGetErrorMessage, run a gulp serve and add the web part.
Full code of ListPickerWebPart.ts:
import { Version } from '@microsoft/sp-core-library';
import {
type IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import type { IReadonlyTheme } from '@microsoft/sp-component-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
import styles from './ListPickerWebPart.module.scss';
import * as strings from 'ListPickerWebPartStrings';
export interface IListPickerWebPartProps {
description: string;
lists: string | string[]; // Stores the list ID(s)
}
export default class ListPickerWebPart extends BaseClientSideWebPart {
public render(): void {
this.domElement.innerHTML = `
Well done, ${escape(this.context.pageContext.user.displayName)}!
${this._environmentMessage}
Web part property value: ${escape(this.properties.description)}
Welcome to SharePoint Framework!
The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
Category
Version
Please specify what version of the library you are using: [ "@pnp/spfx-property-controls": "3.17.0", ]
Expected / Desired Behavior / Question
To create a new solution, e.g like described in https://nanddeepnachanblogs.com/posts/2019-05-14-pnp-property-pane-controls-for-spfx/ and get the list picker function to work.
Observed Behavior
Following the steps from the above url or the ones from https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/#implementation, VS Code gives two errors: In the inserted PropertyFieldListPicker in the getPropertyPaneConfiguration, context gives this error: Type 'WebPartContext' is not assignable to type 'BaseComponentContext'. Types have separate declarations of a private property '_serviceScope'.ts(2322) IPropertyFieldListPicker.d.ts(39, 5): The expected type comes from property 'context' which is declared here on type 'IPropertyFieldListPickerProps'
And onGetErrorMessage give this error: Type 'null' is not assignable to type '((value: string) => string | Promise) | undefined'.ts(2322)
IPropertyFieldListPicker.d.ts(107, 5): The expected type comes from property 'onGetErrorMessage' which is declared here on type 'IPropertyFieldListPickerProps'
Changing context to context: this.context as any; and changing onGetErrorMessage to onGetErrorMessage: undefined: removes the erros and makes it possible to run a gulp serve
Trying to add the webpart gives an error: Something went wrong If the problem persists, contact the site administrator and give them the information in Technical Details. TECHNICAL DETAILS ERROR: Cannot read properties of undefined (reading 'id')
CALL STACK: TypeError: Cannot read properties of undefined (reading 'id') at https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_75d50594e595fa477e6cc5378ce44605.js:196:10988 at new Promise ()
at e.loadComponent (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_75d50594e595fa477e6cc5378ce44605.js:196:10956)
at https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_75d50594e595fa477e6cc5378ce44605.js:196:13164
at async Promise.all (index 1)
Steps to Reproduce
Follow the steps to build a list picker as described in above urls, correct the context and the OnGetErrorMessage, run a gulp serve and add the web part.
Full code of ListPickerWebPart.ts: import { Version } from '@microsoft/sp-core-library'; import { type IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import type { IReadonlyTheme } from '@microsoft/sp-component-base'; import { escape } from '@microsoft/sp-lodash-subset'; import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker'; import styles from './ListPickerWebPart.module.scss'; import * as strings from 'ListPickerWebPartStrings';
export interface IListPickerWebPartProps { description: string; lists: string | string[]; // Stores the list ID(s)
}
export default class ListPickerWebPart extends BaseClientSideWebPart {
private _isDarkTheme: boolean = false; private _environmentMessage: string = '';
public render(): void { this.domElement.innerHTML = `
Well done, ${escape(this.context.pageContext.user.displayName)}!
Welcome to SharePoint Framework!
The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
Learn more about SPFx development: