Select a column for the key / value of the selection

Author: Mello

docs/documentation/docs/controls/ListItemPicker.md

@@ -23,6 +23,7 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
 ```TypeScript
 <ListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
                 columnInternalName='Title'
+                valueColumnInternalName='Id'
                 itemLimit={2}
                 onSelectedItem={this.onSelectedItem}
                 context={this.props.context} />
@@ -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 |

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;

src/controls/listItemPicker/ListItemPicker.tsx

@@ -114,13 +114,14 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
   private loadListItems = async (filterText: string): Promise<{ key: string; name: string }[]> => {
     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;

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<any[]> {
+  public async getListItems(filterText: string, listId: string, internalColumnName: string, valueInternalColumnName?: string, webUrl?: string): Promise<any[]> {
     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();