1

I have a SPFx web part with one property named Department:-

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('department', {
                  label: 'Department'
                })
              ]
            }
          ]
        }
      ]
    };
  }

and it is a free text. so how i can make this property field Drop-down and populate its choices from a field named Department inside a list named Contacts?

enter image description here

Thanks

John John
  • 1
  • 72
  • 238
  • 501

1 Answers1

1
import {sp} from '@pnp/sp';
import { PropertyPaneDropdown, IPropertyPaneDropdownOption} from '@microsoft/sp-webpart-base';
// Shp online  import {PropertyPaneDropdown, IPropertyPaneDropdownOption} from @microsoft/sp-property-pane
export default class YourClassName extends BaseClientSideWebPart<IYourClassNameWebPartProps> {
  private viewModeOptions: IPropertyPaneDropdownOption[] = null;
  public onInit(): Promise<void> {
    return super.onInit().then(async _ => {
      sp.setup({
        spfxContext: this.context
      });
      const choice = await 
      sp.web.lists.getByTitle('Contacts').fields.getByTitle('Department').get();
      console.log (choice);
      this.viewModeOptions = choice.Choices.map((choice: string, idx: number) => 
      {
        return {
         key: idx,
         text: choice
        }
      })
   });
  }

And then (do not use PropertyPaneTextField. Use PropertyPaneDropdown):

PropertyPaneDropdown('department', {
 label: 'Department',
 options: this.viewModeOptions,
 selectedKey: this.viewModeOptions[0].key,
 disabled: !this.viewModeOptions
}),

SP version used

"@pnp/common": "^1.3.10",
"@pnp/logging": "^1.3.10",
"@pnp/odata": "^1.3.10",
"@pnp/polyfill-ie11": "^1.0.2",
"@pnp/sp": "^1.3.10",
"@pnp/sp-clientsvc": "^1.3.10",
Matej
  • 396
  • 1
  • 9
  • thanks for the reply .. so the first block of code should be a new class inside my SPFx correct? – John John Nov 30 '21 at 16:36
  • also i am getting that `'PropertyPaneDropdown' is deprecated`... – John John Nov 30 '21 at 21:05
  • i tried your code but i am getting `Property 'Choices' does not exist on type 'Promise'.ts` – John John Nov 30 '21 at 22:07
  • Hi, this code was tested on Sharepoint 2019 on premise. As I can see your are on Sharepoint online. Property dropdown is deprecated - for online improt it from @microsoft/sp-property-pane not '@microsoft/sp-webpart-base'. For Choices is undefined. I have just tested it on online and it works. I am using this version of sp: "@pnp/common": "^1.3.10", "@pnp/logging": "^1.3.10", "@pnp/odata": "^1.3.10", "@pnp/polyfill-ie11": "^1.0.2", "@pnp/sp": "^1.3.10", "@pnp/sp-clientsvc": "^1.3.10", "@pnp/sp-taxonomy": "^1.3.10", – Matej Dec 01 '21 at 07:29
  • I have modified answer to accommodate your comments. For the first comment. No the above code is part of your main class witch extends BaseClientSideWebPart. – Matej Dec 01 '21 at 07:35
  • Result for call (browser network devtools) await sp.web.lists.getByTitle('Contacts').fields.getByTitle('Department').get(); in my sharepoint online enviroment is object with property Choices – Matej Dec 01 '21 at 07:37
  • There is typing error: const choice = sp.web.lists.getByTitle('Contacts').fields.getByTitle('Department').get(); replace for (you need await to load it otherwise you get only Promise) const choice = await sp.web.lists.getByTitle('Contacts').fields.getByTitle('Department').get – Matej Dec 01 '21 at 14:57