Updates to PR #355

Author: AJIXuMuK

docs/documentation/docs/controls/ListItemPicker.md

@@ -47,7 +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. |
+| keyColumnInternalName | string | no | InternalName of column to use as the key for the selection. Must be a column with unique values. Default: Id |
 | 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 |

package-lock.json

@@ -3,7 +3,7 @@ import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
 
 export interface IListItemPickerProps {
   columnInternalName: string;
-  valueColumnInternalName?: string;
+  keyColumnInternalName?: string;
   context: WebPartContext |  ApplicationCustomizerContext;
   listId: string;
   itemLimit: number;

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -112,16 +112,16 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
    * Function to load List Items
    */
   private loadListItems = async (filterText: string): Promise<{ key: string; name: string }[]> => {
-    let { listId, columnInternalName, webUrl } = this.props;
+    let { listId, columnInternalName, keyColumnInternalName, webUrl } = this.props;
     let arrayItems: { key: string; name: string }[] = [];
-    let valueColumn: string = columnInternalName || 'Id';
+    let keyColumn: string = keyColumnInternalName || 'Id';
 
     try {
-      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, webUrl);
+      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, keyColumn, webUrl);
       // Check if the list had items
       if (listItems.length > 0) {
         for (const item of listItems) {
-          arrayItems.push({ key: item[valueColumn], name: item[columnInternalName] });
+          arrayItems.push({ key: item[keyColumn], name: item[columnInternalName] });
         }
       }
       return arrayItems;

src/controls/listItemPicker/ListItemPicker.tsx

@@ -21,5 +21,5 @@ export interface ISPService {
      * @param options Options used to order and filter during the API query
      */
     getLibs(options?: ILibsOptions): Promise<ISPLists>;
-    getListItems?(filterText: string, listId: string, internalColumnName: string, webUrl?: string) : Promise<any[]>;
+    getListItems?(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string) : Promise<any[]>;
 }

src/services/ISPService.ts

@@ -47,12 +47,12 @@ export default class SPService implements ISPService {
   /**
    * Get List Items
    */
-  public async getListItems(filterText: string, listId: string, internalColumnName: string, valueInternalColumnName?: string, webUrl?: string): Promise<any[]> {
+  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: 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=${valueInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}')`;
+      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || '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();