Skip to content

Commit 7a58eda

Browse files
committed
ComboboxListItemPicker onSelectedItem doc update
1 parent bb5bd9a commit 7a58eda

File tree

1 file changed

+36
-1
lines changed

1 file changed

+36
-1
lines changed

docs/documentation/docs/controls/ComboBoxListItemPicker.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,45 @@ import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPic
6161
- The `onSelectedItem` change event returns the list items selected and can be implemented as follows:
6262

6363
```TypeScript
64-
private onSelectedItem(items:[]) {
64+
private onSelectedItem(items: []) {
6565
console.log("selected items:", items);
6666
}
6767
```
68+
69+
If you can provide typing details to the implementation based on `columnInternalName` and `keyColumnInternalName`.
70+
For example above:
71+
72+
```typescript
73+
columnInternalName='Title'
74+
keyColumnInternalName='Id'
75+
// ...
76+
private onSelectedItem(items: { Title: string, Id: string }[]) {
77+
console.log("selected items:", items);
78+
}
79+
```
80+
81+
If you use variables for `columnInternalName` and `keyColumnInternalName` the typing will look as follow:
82+
``` typescript
83+
const columnInternalName = 'Title';
84+
const keyColumnInternalName = 'Id';
85+
86+
<ComboBoxListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
87+
columnInternalName={columnInternalName}
88+
keyColumnInternalName={keyColumnInternalName}
89+
filter="Title eq 'SPFx'"
90+
defaultSelectedItems: [2]
91+
onSelectedItem={this.onSelectedItem}
92+
webUrl={this.context.pageContext.web.absoluteUrl}
93+
spHttpClient={this.context.spHttpClient} />
94+
95+
private onSelectedItem(items: {
96+
[columnInternalName]: string,
97+
[keyColumnInternalName]: string
98+
}[]) {
99+
console.log("selected items:", items);
100+
}
101+
```
102+
68103
## Implementation
69104

70105
The `ComboBoxListItemPicker` control can be configured with the following properties:

0 commit comments

Comments
 (0)