|
| 1 | +# ContentTypePicker control |
| 2 | + |
| 3 | +This control allows you to select one or multiple available site content types or list content types. |
| 4 | + |
| 5 | +Here is an example of the control: |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | +`ContentTypePicker` single selection mode: |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +`ContentTypePicker` multi selection mode: |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | +## How to use this control in your solutions |
| 18 | + |
| 19 | +- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. |
| 20 | +- Import the control into your component: |
| 21 | + |
| 22 | +```TypeScript |
| 23 | +import { ContentTypePicker } from "@pnp/spfx-controls-react/lib/ContentTypePicker"; |
| 24 | +``` |
| 25 | + |
| 26 | +- Use the `ContentTypePicker` control in your code as follows: |
| 27 | + |
| 28 | +```TypeScript |
| 29 | +<ContentTypePicker |
| 30 | + context={this.props.context} |
| 31 | + group="Content Feedback" |
| 32 | + includeHidden={false} |
| 33 | + includeReadOnly={false} |
| 34 | + label="Select your content type" |
| 35 | + multiSelect={false} |
| 36 | + orderBy={ContentTypesOrderBy.Name} |
| 37 | + listId="00000000-0000-0000-0000-000000000000" |
| 38 | + onSelectionChanged={this.onContentTypePickerChanged} |
| 39 | + showBlankOption={true} |
| 40 | +/> |
| 41 | +``` |
| 42 | + |
| 43 | +- The `onSelectionChanged` change event returns the content type(s) and can be implemented as follows: |
| 44 | + |
| 45 | +```TypeScript |
| 46 | +private onContentTypePickerChanged (contentTypes: ISPContentType | ISPContentType[]) { |
| 47 | + console.log("Content types:", contentTypes); |
| 48 | +} |
| 49 | +``` |
| 50 | + |
| 51 | +## Implementation |
| 52 | + |
| 53 | +The `ContentTypePicker` control can be configured with the following properties: |
| 54 | + |
| 55 | +| Property | Type | Required | Description | |
| 56 | +| --- | --- | --- | --- | |
| 57 | +| context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. | |
| 58 | +| listId | string | no | The ID of the list or library you wish to select content type(s) from. When not specified, picker will be populated with site content types.| |
| 59 | +| className | string | no | If provided, additional class name to provide on the dropdown element. | |
| 60 | +disabled | boolean | no | Whether or not the control is disabled. | |
| 61 | +includeHidden | boolean | no | Whether or not to include hidden content types. Default is true. | |
| 62 | +includeReadOnly | boolean | no | Whether or not to include read-only content types. Default is true. | |
| 63 | +group | string | no | Only show content types of a certain group. | |
| 64 | +filter | string | no | Filter content types from OData query (takes the upperhand of `hidden`, `readOnly` and `group` Filters). | |
| 65 | +orderBy | ContentTypesOrderBy | no | How to order the content types. | |
| 66 | +selectedContentTypes | string \| string[] | no | IDs of the selected item(s). If you provide this, you must maintain selection state by observing `onSelectionChanged` events and passing a new value in when changed. |
| 67 | +multiSelect | boolean | no | Indicates if multi-choice selections is allowed. Default is false. | |
| 68 | +label | string | no | The label to display. | |
| 69 | +placeholder | string | no | Input placeholder text. Displayed until option is selected. | |
| 70 | +onSelectionChanged | (newValue: ISPContentType \| ISPContentType[]): void | no | Callback issued when the selected option changes. | |
| 71 | +filterItems | (contentTypes: ISPContentType[]): ISPContentType[] | no | This function is invoked after the filtering has been done. This allows you to add additional custom filtering. |
| 72 | +webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). | |
| 73 | +showBlankOption | boolean | no | Whether or not to show a blank option. Default is false. Works only when `multiSelect` is false. | |
| 74 | + |
| 75 | +Enum `ContentTypesOrderBy` |
| 76 | + |
| 77 | +| Value | |
| 78 | +| ---- | |
| 79 | +| Name | |
| 80 | +| Id | |
| 81 | + |
| 82 | + |
0 commit comments