diff --git a/docs/documentation/docs/controls/ListItemPicker.md b/docs/documentation/docs/controls/ListItemPicker.md
index 4d58b85b9..0a725810c 100644
--- a/docs/documentation/docs/controls/ListItemPicker.md
+++ b/docs/documentation/docs/controls/ListItemPicker.md
@@ -23,6 +23,7 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
```TypeScript
@@ -33,7 +34,8 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
```TypeScript
private onSelectedItem(data: { key: string; name: string }[]) {
for (const item of data) {
- console.log(`Item value: ${item.name}`);
+ console.log(`Item value: ${item.key}`);
+ console.log(`Item text: ${item.name}`);
}
}
```
@@ -45,6 +47,7 @@ The `ListItemPicker` control can be configured with the following properties:
| Property | Type | Required | Description |
| ---- | ---- | ---- | ---- |
| columnInternalName | string | yes | InternalName of column to search and get values. |
+| valueColumnInternalName | string | no | InternalName of column to use as the value or key for the selection. Must be a column with unique values. |
| context | WebPartContext \| ApplicationCustomizerContext | yes | SPFx web part or extention context |
| listId | string | yes | Guid of the list. |
| itemLimit | number | yes | Number of items which can be selected |
diff --git a/src/controls/listItemPicker/IListItemPickerProps.ts b/src/controls/listItemPicker/IListItemPickerProps.ts
index 96e2499ab..fc6b4c332 100644
--- a/src/controls/listItemPicker/IListItemPickerProps.ts
+++ b/src/controls/listItemPicker/IListItemPickerProps.ts
@@ -3,6 +3,7 @@ import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
export interface IListItemPickerProps {
columnInternalName: string;
+ valueColumnInternalName?: string;
context: WebPartContext | ApplicationCustomizerContext;
listId: string;
itemLimit: number;
diff --git a/src/controls/listItemPicker/ListItemPicker.tsx b/src/controls/listItemPicker/ListItemPicker.tsx
index 449720a39..9ca7658df 100644
--- a/src/controls/listItemPicker/ListItemPicker.tsx
+++ b/src/controls/listItemPicker/ListItemPicker.tsx
@@ -114,13 +114,14 @@ export class ListItemPicker extends React.Component => {
let { listId, columnInternalName, webUrl } = this.props;
let arrayItems: { key: string; name: string }[] = [];
+ let valueColumn: string = columnInternalName || 'Id';
try {
let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, webUrl);
// Check if the list had items
if (listItems.length > 0) {
for (const item of listItems) {
- arrayItems.push({ key: item.Id, name: item[columnInternalName] });
+ arrayItems.push({ key: item[valueColumn], name: item[columnInternalName] });
}
}
return arrayItems;
diff --git a/src/services/SPService.ts b/src/services/SPService.ts
index ccb247582..10c62d528 100644
--- a/src/services/SPService.ts
+++ b/src/services/SPService.ts
@@ -47,12 +47,12 @@ export default class SPService implements ISPService {
/**
* Get List Items
*/
- public async getListItems(filterText: string, listId: string, internalColumnName: string, webUrl?: string): Promise {
+ public async getListItems(filterText: string, listId: string, internalColumnName: string, valueInternalColumnName?: string, webUrl?: string): Promise {
let returnItems: any[];
-
+
try {
const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
- const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=Id,${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}')`;
+ const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${valueInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}')`;
const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
if (data.ok) {
const results = await data.json();