https://github.com/clarktozer/spfx-async-dropdown
Asynchronous dropdown component for the SPFx property pane
https://github.com/clarktozer/spfx-async-dropdown
office365 react sharepoint sharepoint-framework spfx
Last synced: 10 months ago
JSON representation
Asynchronous dropdown component for the SPFx property pane
- Host: GitHub
- URL: https://github.com/clarktozer/spfx-async-dropdown
- Owner: clarktozer
- License: mit
- Created: 2019-12-01T07:10:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T22:44:10.000Z (about 3 years ago)
- Last Synced: 2024-04-26T12:20:23.281Z (over 1 year ago)
- Topics: office365, react, sharepoint, sharepoint-framework, spfx
- Language: TypeScript
- Homepage:
- Size: 3.48 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## spfx-async-dropdown
[](https://www.npmjs.com/package/spfx-async-dropdown)
Asynchronous dropdown component for the SPFx property pane
## Installation
```bash
npm install spfx-async-dropdown
```
```bash
import { PropertyPaneAsyncDropdown } from "spfx-async-dropdown"
```
## Examples
#### Get lists that are in the root web using [pnpjs](https://pnp.github.io/pnpjs/)
```bash
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 |
| 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](https://developer.microsoft.com/en-us/fabric#/styles/web/icons) |
| placeholder | string |
| description | string |