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();