Merge pull request pnp#1371 from ekapic/feature/listitempicker-support-listname

Feature/listitempicker support listname

Author: joelfmrodrigues

docs/documentation/docs/controls/ComboBoxListItemPicker.md

@@ -112,7 +112,7 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
 | keyColumnInternalName | string | no | InternalName of column to use as the key for the selection. Must be a column with unique values. Default: Id |
 | webUrl | string | yes | Url to web hosting list |
 | spHttpClient | RequestClient | yes | Any implementation of PnPJS RequestClient |
-| listId | string | yes | Guid of the list. |
+| listId | string | yes | Guid or title of the list. |
 | onSelectItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
 | className | string | no | ClassName for the picker. |
 | defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. Support objects and Ids only |

docs/documentation/docs/controls/ListItemPicker.md

@@ -51,7 +51,7 @@ The `ListItemPicker` control can be configured with the following properties:
 | columnInternalName | string | yes | InternalName of column to search and get 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 | BaseComponentContext | yes | SPFx web part or extention context |
-| listId | string | yes | Guid of the list. |
+| listId | string | yes | Guid or title of the list. |
 | itemLimit | number | yes | Number of items which can be selected |
 | onSelectItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
 | className | string | no | ClassName for the picker. |

src/common/dal/ListItemRepository.ts

@@ -42,4 +42,22 @@ export class ListItemRepository {
       return Promise.reject(error);
     }
   }
+
+  public async getListId(
+    listName: string,
+    webUrl?: string,
+  ): Promise<string> {
+
+    const webAbsoluteUrl = !webUrl ? this.SiteUrl : webUrl;  
+    const apiUrl = `${webAbsoluteUrl}/_api/web/lists/getByTitle(@listName)/Id?@listName='${encodeURIComponent(listName)}'`;
+    const data = await this.SPClient.get(apiUrl, SPHttpClient.configurations.v1);
+    if (data.ok) {
+      const results = await data.json();
+      if (results) {
+        return results.value;
+      }
+    }
+
+    return;
+}
 }

src/controls/listItemPicker/ComboBoxListItemPicker.tsx

@@ -8,6 +8,7 @@ import { ListItemRepository } from '../../common/dal/ListItemRepository';
 import styles from './ComboBoxListItemPicker.module.scss';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import { cloneDeep, isEqual } from 'lodash';
+import { Guid } from '@microsoft/sp-core-library';
 
 
 export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPickerProps, IComboBoxListItemPickerState> {
@@ -26,6 +27,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
       errorMessage: "",
       suggestionsHeaderText: !this.props.suggestionsHeaderText ? strings.ListItemPickerSelectValue : this.props.suggestionsHeaderText,
       selectedItems: this.props.defaultSelectedItems || [],
+      safeListId: this.props.listId,
     };
 
     // Get SPService Factory
@@ -34,26 +36,37 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
   }
 
   public componentDidMount(): void {
-    this.loadOptions(this.props).then(() => { /* no-op; */}).catch(() => { /* no-op; */});
+    if(!Guid.tryParse(this.props.listId)) {
+      this._listItemRepo.getListId(this.props.listId)
+        .then((value) => {
+            this.setState({...this.state,
+              safeListId: value });
+              this.loadOptions(this.props).then(() => { /* no-op; */}).catch(() => { /* no-op; */});          
+        })
+        .catch(() => { /* no-op; */ });    
+    } else {
+      this.loadOptions(this.props).then(() => { /* no-op; */}).catch(() => { /* no-op; */});
+    }
   }
 
   protected async loadOptions(props: IComboBoxListItemPickerProps, isInitialLoad?: boolean): Promise<void> {
     const {
       filter,
-      keyColumnInternalName,
       listId,
+      keyColumnInternalName,
       columnInternalName,
       webUrl,
       itemLimit,
       onInitialized,
       orderBy
     } = props;
+    const { safeListId } = this.state;
     const query = filter || "";
     const keyColumnName = keyColumnInternalName || "Id";
 
     if (!this._options || listId !== this.props.listId|| filter !== this.props.filter) {
       const listItems = await this._listItemRepo.getListItemsByFilterClause(query,
-        listId,
+        safeListId,
         columnInternalName,
         keyColumnInternalName,
         webUrl,

src/controls/listItemPicker/IListItemPickerState.ts

@@ -7,4 +7,5 @@ export interface IListItemPickerState {
   suggestionsHeaderText:string;
   selectedItems?: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
   field?: ISPField;
+  safeListId: string;
 }

src/controls/listItemPicker/ListItemPicker.tsx

@@ -10,7 +10,7 @@ import * as telemetry from '../../common/telemetry';
 import isEqual from 'lodash/isEqual';
 import { ITag } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker.types';
 import { SPHelper } from '../../common/utilities/SPHelper';
-
+import { Guid } from "@microsoft/sp-core-library"
 
 export class ListItemPicker extends React.Component<IListItemPickerProps, IListItemPickerState> {
   private _spservice: SPservice;
@@ -27,17 +27,33 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
       showError: false,
       errorMessage: "",
       suggestionsHeaderText: !this.props.suggestionsHeaderText ? strings.ListItemPickerSelectValue : this.props.suggestionsHeaderText,
-      selectedItems: props.defaultSelectedItems || []
+      selectedItems: props.defaultSelectedItems || [],
+      safeListId: props.listId,
     };
 
     // Get SPService Factory
     this._spservice = new SPservice(this.props.context);
   }
 
-  public componentDidMount(): void {
+  private ensureLoadField(): void {
     this.loadField(this.props).then(() => { /* no-op; */ }).catch(() => { /* no-op; */ });
   }
 
+  public componentDidMount(): void {
+    // Ensure list ID if a list name is passed in listId parameter
+    if(!Guid.tryParse(this.props.listId)) {
+      this._spservice.getListId(this.props.listId)
+        .then((value) => {
+            this.setState({...this.state,
+              safeListId: value });
+            this.ensureLoadField();
+        })
+        .catch(() => { /* no-op; */ });    
+    } else {
+      this.ensureLoadField();
+    }
+  }
+
   public UNSAFE_componentWillReceiveProps(nextProps: IListItemPickerProps): void {
     let newSelectedItems: any[] | undefined; // eslint-disable-line @typescript-eslint/no-explicit-any
     if (this.props.listId !== nextProps.listId) {
@@ -54,8 +70,8 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
     if (this.props.listId !== nextProps.listId
       || this.props.columnInternalName !== nextProps.columnInternalName
       || this.props.webUrl !== nextProps.webUrl) {
-      this.loadField(nextProps).then(() => { /* no-op; */ }).catch(() => { /* no-op; */ });
-    }
+        this.ensureLoadField();
+      }
   }
 
   /**
@@ -158,15 +174,15 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
    * Function to load List Items
    */
   private loadListItems = async (filterText: string): Promise<{ key: string; name: string }[]> => {
-    const { listId, columnInternalName, keyColumnInternalName, webUrl, filter, orderBy, substringSearch } = this.props;
+    const { columnInternalName, keyColumnInternalName, webUrl, filter, orderBy, substringSearch } = this.props;
     const {
-      field
+      field, safeListId
     } = this.state;
     const arrayItems: { key: string; name: string }[] = [];
     const keyColumn: string = keyColumnInternalName || 'Id';
 
     try {
-      const listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, field, keyColumn, webUrl, filter, substringSearch, orderBy ? orderBy : ''); // JJ - 20200613 - find by substring as an option
+      const listItems = await this._spservice.getListItems(filterText, safeListId, columnInternalName, field, keyColumn, webUrl, filter, substringSearch, orderBy ? orderBy : ''); // JJ - 20200613 - find by substring as an option
       // Check if the list had items
       if (listItems.length > 0) {
         for (const item of listItems) {
@@ -190,7 +206,7 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
       field: undefined
     });
 
-    const field = await this._spservice.getField(props.listId, props.columnInternalName, props.webUrl);
+    const field = await this._spservice.getField(this.state.safeListId, props.columnInternalName, props.webUrl);
 
     this.setState({
       field

src/services/SPService.ts

@@ -190,6 +190,23 @@ export default class SPService implements ISPService {
     }
   }
 
+  public async getListId(
+      listName: string,
+  ): Promise<string> {
+
+    const webAbsoluteUrl = this._webAbsoluteUrl
+    const apiUrl = `${webAbsoluteUrl}/_api/web/lists/getByTitle(@listName)/Id?@listName='${encodeURIComponent(listName)}'`;
+    const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
+    if (data.ok) {
+      const results = await data.json();
+      if (results) {
+        return results.value;
+      }
+    }
+
+    return;
+  }
+
   /**
    * Get List Items
    */