spfx-async-dropdown

Asynchronous dropdown component for the SPFx property pane

Installation

npm install spfx-async-dropdown

import { PropertyPaneAsyncDropdown } from "spfx-async-dropdown"

Examples

Get lists that are in the root web using pnpjs

new PropertyPaneAsyncDropdown("list", {
    label: "List",
    onLoad: async () => {
        const lists = await sp.site.rootWeb.lists.select("Id", "Title").get();
        return lists.map(list => {
            return {
                key: list.Id,
                text: list.Title
            }
        })
    },
    onPropertyChange: (property: string, newValue: any) => {
        const oldValue = get(this.properties, property);
        update(this.properties, property, () => newValue);
        this.onPropertyPaneFieldChanged(property, oldValue, newValue);
        this.render();
    },
    selectedKey: this.properties.list,
    required: true,
    tooltip: {
        content: "Testing Tooltip",
        iconName: "List"
    },
    placeholder: "Select an item...",
    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua"
})

Props

| Prop | Type | | :-------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------: | | label(required) | string | | onLoad(required) | () => Promise<IDropdownOption[]> | | onPropertyChange(required) | (property: string, newValue: any) => void | | selectedKey(required) | string or number | | disabled | boolean | | required | boolean | | tooltip | IToolTip ({ content: string, iconName: string}). iconName is a Fabric icon | | placeholder | string | | description | string |