spfx-async-dropdown

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