Skip to content

Commit e0773a2

Browse files
estruyfestruyf
committed
Updated documentation + code of the ListItemPicker
1 parent 33ae585 commit e0773a2

3 files changed

Lines changed: 35 additions & 102 deletions

File tree

‎docs/documentation/docs/controls/ListItemPicker.md‎

Lines changed: 22 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ListItemPicker control
22

3-
This control allows you to select one or more item from list, based in a column value, the control suggest values based on characters typed
3+
This control allows you to select one or more items from a list. The item selection is based from a column value. The control will suggest items based on the inserted value.
44

55
Here is an example of the control:
66

@@ -16,110 +16,44 @@ Here is an example of the control:
1616
- Import the control into your component:
1717

1818
```TypeScript
19-
2019
import { ListItemPicker } from '@pnp/spfx-controls-react/listItemPicker';
2120
```
2221
- Use the `ListItemPicker` control in your code as follows:
2322

2423
```TypeScript
25-
<ListItemPicker
26-
listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
27-
columnInternalName='Title'
28-
itemLimit={2}
29-
onSelectedItem={this.onSelectedItem}
30-
context={this.props.context}
31-
/>
24+
<ListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
25+
columnInternalName='Title'
26+
itemLimit={2}
27+
onSelectedItem={this.onSelectedItem}
28+
context={this.props.context} />
3229
```
3330

3431
- The `onSelectedItem` change event returns the list items selected and can be implemented as follows:
3532

3633
```TypeScript
3734
private onSelectedItem(data: { key: string; name: string }[]) {
38-
for (const item of data) {
39-
console.log(`Item value: ${item.name}`);
40-
}
35+
for (const item of data) {
36+
console.log(`Item value: ${item.name}`);
4137
}
38+
}
4239
```
4340
## Implementation
4441

4542
The `ListItemPicker` control can be configured with the following properties:
4643

47-
<table style="width: 100%; height: 786px;">
48-
<tbody>
49-
<tr>
50-
<th style="width: 220px;">Property</th>
51-
<th>Type</th>
52-
<th style="width: 85px;">Required</th>
53-
<th>Description</th>
54-
</tr>
55-
<tr>
56-
<td>listId</td>
57-
<td>string</td>
58-
<td>yes</td>
59-
<td>Gui of List</td>
60-
</tr>
61-
<tr>
62-
<td>columnInternalName</td>
63-
<td>string</td>
64-
<td>yes</td>
65-
<td>InternalName of column to search and get values</td>
66-
</tr>
67-
<tr>
68-
<td>onSelectedItem: (item:any) =>void;</td>
69-
<td>function</td>
70-
<td>yes</td>
71-
<td>Callback function</td>
72-
</tr>
73-
<tr>
74-
<td>className</td>
75-
<td>string</td>
76-
<td>no</td>
77-
<td>CSS className</td>
78-
</tr>
79-
<tr>
80-
<td>webUrl</td>
81-
<td>string</td>
82-
<td>no</td>
83-
<td>URL of site if different of current site, user must have permissions</td>
84-
</tr>
85-
<tr>
86-
<td>value</td>
87-
<td>Array</td>
88-
<td>no</td>
89-
<td>Default Value</td>
90-
</tr>
91-
<tr>
92-
<td>disabled</td>
93-
<td>Boolean</td>
94-
<td>no</td>
95-
<td>Disable Control</td>
96-
</tr>
97-
<tr>
98-
<td>itemLimit</td>
99-
<td>number</td>
100-
<td>yes</td>
101-
<td>Number os items to select / return</td>
102-
</tr>
103-
<tr>
104-
<td>context</td>
105-
<td>WebPartContext|ApplicationCustomizerContext</td>
106-
<td>yes</td>
107-
<td>WebPart or Application customiser context</td>
108-
</tr>
109-
<tr>
110-
<td>sugestedHeaderText</td>
111-
<td>string</td>
112-
<td>no</td>
113-
<td>Text header to display</td>
114-
</tr>
115-
<tr>
116-
<td>noresultsFoundTextstring</td>
117-
<td>string</td>
118-
<td>no</td>
119-
<td>Text message when no items</td>
120-
</tr>
121-
</tbody>
122-
</table>
12344

45+
| Property | Type | Required | Description |
46+
| ---- | ---- | ---- | ---- |
47+
| columnInternalName | string | yes | InternalName of column to search and get values. |
48+
| context | WebPartContext \| ApplicationCustomizerContext | yes | SPFx web part or extention context |
49+
| listId | string | yes | Guid of the list. |
50+
| itemLimit | number | yes | Number of items which can be selected |
51+
| onSelectItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
52+
| className | string | no | ClassName for the picker. |
53+
| webUrl | string | no | URL of the site. By default it uses the current site URL. |
54+
| defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. |
55+
| suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
56+
| noResultsFoundText | string | no | The text that should appear when no results are returned. |
57+
| disabled | boolean | no | Specifies if the control is disabled or not. |
12458

12559
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

‎src/controls/listItemPicker/IListItemPickerProps.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@ import { WebPartContext } from "@microsoft/sp-webpart-base";
22
import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
33

44
export interface IListItemPickerProps {
5+
columnInternalName: string;
6+
context: WebPartContext | ApplicationCustomizerContext;
57
listId: string;
6-
columnInternalName:string;
7-
onSelectedItem: (item:any) => void;
8+
itemLimit: number;
9+
810
className?: string;
9-
webUrl?:string;
10-
value?:Array<string>;
11+
webUrl?: string;
12+
defaultSelectedItems?: any[];
1113
disabled?: boolean;
12-
itemLimit: number;
13-
context: WebPartContext | ApplicationCustomizerContext;
14-
sugestedHeaderText?:string;
15-
noresultsFoundText?:string;
14+
suggestionsHeaderText?:string;
15+
noResultsFoundText?:string;
16+
17+
onSelectedItem: (item:any) => void;
1618
}

‎src/controls/listItemPicker/ListItemPicker.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import * as telemetry from '../../common/telemetry';
99

1010

1111
export class ListItemPicker extends React.Component<IListItemPickerProps, IListItemPickerState> {
12-
private _value: any[];
1312
private _spservice: SPservice;
1413
private selectedItems: any[];
1514

@@ -20,17 +19,15 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
2019

2120
// States
2221
this.state = {
23-
noresultsFoundText: !this.props.noresultsFoundText ? strings.genericNoResultsFoundText : this.props.noresultsFoundText,
22+
noresultsFoundText: !this.props.noResultsFoundText ? strings.genericNoResultsFoundText : this.props.noResultsFoundText,
2423
showError: false,
2524
errorMessage: "",
26-
suggestionsHeaderText: !this.props.sugestedHeaderText ? strings.ListItemPickerSelectValue : this.props.sugestedHeaderText
25+
suggestionsHeaderText: !this.props.suggestionsHeaderText ? strings.ListItemPickerSelectValue : this.props.suggestionsHeaderText
2726
};
2827

2928
// Get SPService Factory
3029
this._spservice = new SPservice(this.props.context);
3130

32-
// Test Parameters
33-
this._value = this.props.value !== undefined ? this.props.value : [];
3431
this.selectedItems = [];
3532
}
3633

@@ -55,7 +52,7 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
5552
suggestionsHeaderText: this.state.suggestionsHeaderText,
5653
noResultsFoundText: this.state.noresultsFoundText
5754
}}
58-
defaultSelectedItems={this._value}
55+
defaultSelectedItems={this.props.defaultSelectedItems || []}
5956
onChange={this.onItemChanged}
6057
className={className}
6158
itemLimit={itemLimit}

0 commit comments

Comments
 (0)