|
| 1 | +# PropertyFieldTeamPicker control |
| 2 | +This control generates a team picker that can be used in the property pane of your SharePoint Framework web parts. |
| 3 | + |
| 4 | +**Searching for teams** |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +**Selected teams** |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | +## How to use this control in your solutions |
| 13 | + |
| 14 | +1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../../#getting-started) page for more information about installing the dependency. |
| 15 | +2. Request Microsoft Graph permissions in `config/package-solution.json`: |
| 16 | +```json |
| 17 | +{ |
| 18 | + "solution": { |
| 19 | + "webApiPermissionRequests": [ |
| 20 | + { |
| 21 | + "resource": "Microsoft Graph", |
| 22 | + "scope": "Team.ReadBasic.All" |
| 23 | + }, { |
| 24 | + "resource": "Microsoft Graph", |
| 25 | + "scope": "Files.Read" |
| 26 | + }] |
| 27 | + } |
| 28 | +} |
| 29 | +``` |
| 30 | +!!! Note |
| 31 | + `Team.ReadBasic.All` and `Files.Read` is a minimum set of permissions needed for the component. For other options please see [List Joined Teams](https://docs.microsoft.com/en-us/graph/api/user-list-joinedteams?view=graph-rest-1.0&tabs=http) and [Get Drive](https://docs.microsoft.com/en-us/graph/api/drive-get?view=graph-rest-1.0&tabs=http) documentation. |
| 32 | + |
| 33 | +3. Import the following modules to your component: |
| 34 | + |
| 35 | +```TypeScript |
| 36 | +import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker'; |
| 37 | +``` |
| 38 | + |
| 39 | +4. Create a new property for your web part, for example: |
| 40 | + |
| 41 | +```TypeScript |
| 42 | +import { IPropertyFieldTeam } from '../../PropertyFieldTeamPicker'; |
| 43 | + |
| 44 | +export interface IPropertyControlsTestWebPartProps { |
| 45 | + teams: IPropertyFieldTeam[]; |
| 46 | +} |
| 47 | +``` |
| 48 | + |
| 49 | +5. Add the custom property control to the `groupFields` of the web part property pane configuration: |
| 50 | + |
| 51 | +```TypeScript |
| 52 | +PropertyFieldTeamPicker('teams', { |
| 53 | + key: 'teamsPicker', |
| 54 | + context: this.context, |
| 55 | + label: 'Select teams', |
| 56 | + onPropertyChange: this.onPropertyPaneFieldChanged, |
| 57 | + properties: this.properties, |
| 58 | + initialTeams: this.properties.teams, |
| 59 | + multiSelect: true |
| 60 | +}) |
| 61 | +``` |
| 62 | + |
| 63 | +## Implementation |
| 64 | + |
| 65 | +The `PropertyFieldTeamPicker` control can be configured with the following properties: |
| 66 | + |
| 67 | +| Property | Type | Required | Description | |
| 68 | +| ---- | ---- | ---- | ---- | |
| 69 | +| label | string | yes | Property field label displayed on top. | |
| 70 | +| disabled | boolean | no | Specify if the control needs to be disabled. | |
| 71 | +| context | WebPartContext | yes | Context of the current web part. | |
| 72 | +| initialTeams | IPropertyFieldTeam[] | no | Initial teams to load in the site picker (optional). | |
| 73 | +| multiSelect | boolean | no | Define if you want to allow multiple teams selection. (optional, false by default). | |
| 74 | +| onPropertyChange | function | yes | Defines a `onPropertyChange` function to raise when the teams get changed. | |
| 75 | +| properties | any | yes | Parent web part properties, this object is used to update the property value. | |
| 76 | +| key | string | yes | An unique key that indicates the identity of this control. | |
| 77 | +| onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. | |
| 78 | +| deferredValidationTime | number | no | Control will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default value is 200. | |
| 79 | + |
| 80 | +Interface `IPropertyFieldTeam` |
| 81 | + |
| 82 | +| Property | Type | Required | Description | |
| 83 | +| ---- | ---- | ---- | ---- | |
| 84 | +| id | string | no | The ID of the team (group) | |
| 85 | +| title | string | no | Teams's display name | |
| 86 | +| url | string | no | URL to the underlying site | |
| 87 | + |
| 88 | + |
0 commit comments