Fix #1721

docs/documentation/docs/controls/ListItemPicker.md

@@ -18,6 +18,7 @@ Here is an example of the control:
 ```TypeScript
 import { ListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
 ```
+
 - Use the `ListItemPicker` control in your code as follows:
 
 ```TypeScript
@@ -41,30 +42,31 @@ private onSelectedItem(data: { key: string; name: string }[]) {
   }
 }
 ```
+
 ## Implementation
 
 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. |
-| 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 or title of the list. |
-| itemLimit | number | yes | Number of items which can be selected |
-| onSelectedItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
-| className | string | no | ClassName for the picker. |
-| webUrl | string | no | URL of the site. By default it uses the current site URL. |
-| defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. |
-| suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
-| noResultsFoundText | string | no | The text that should appear when no results are returned. |
-| disabled | boolean | no | Specifies if the control is disabled or not. |
-| filter | string | no | condition to filter list Item, same as $filter ODATA parameter|
-| orderBy | string | no | condition to order by list Item, same as $orderby ODATA parameter|
-| placeholder | string | no | Short text hint to display in empty picker |
-| substringSearch | boolean | no | Specifies if substring search should be used |
-| label | string | no | Specifies the text describing the ListItemPicker. |
-| enableDefaultSuggestions | boolean | no | Enable default suggestions. All options are displayed by default when clicking on the control. |
+| Property                 | Type                   | Required | Description                                                                                                  |
+| ------------------------ | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------ |
+| 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 or title of the list.                                                                                   |
+| itemLimit                | number                 | yes      | Number of items which can be selected                                                                        |
+| onSelectedItem           | (items: any[]) => void | yes      | Callback function which returns the selected items.                                                          |
+| className                | string                 | no       | ClassName for the picker.                                                                                    |
+| webUrl                   | string                 | no       | URL of the site. By default it uses the current site URL.                                                    |
+| defaultSelectedItems     | any[]                  | no       | Initial items that have already been selected and should appear in the people picker.                        |
+| suggestionsHeaderText    | string                 | no       | The text that should appear at the top of the suggestion box.                                                |
+| noResultsFoundText       | string                 | no       | The text that should appear when no results are returned.                                                    |
+| disabled                 | boolean                | no       | Specifies if the control is disabled or not.                                                                 |
+| filter                   | string                 | no       | condition to filter list Item, same as $filter ODATA parameter                                               |
+| orderBy                  | string                 | no       | condition to order by list Item, same as $orderby ODATA parameter                                            |
+| placeholder              | string                 | no       | Short text hint to display in empty picker                                                                   |
+| substringSearch          | boolean                | no       | Specifies if substring search should be used                                                                 |
+| label                    | string                 | no       | Specifies the text describing the ListItemPicker.                                                            |
+| enableDefaultSuggestions | boolean                | no       | Enable default suggestions. All options are displayed by default when clicking on the control.               |
+| itemsQueryCountLimit     | number                 | no       | Number of items to display in a lookup field                                                                 |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -80,6 +80,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
       description,
       maximumValue,
       minimumValue,
+      itemsQueryCountLimit,
       customIcon,
       orderBy
     } = this.props;
@@ -245,6 +246,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             itemLimit={1}
             onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
             context={context}
+            itemsQueryCountLimit={itemsQueryCountLimit}
             orderBy={orderBy}
           />
           {descriptionEl}
@@ -270,6 +272,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             itemLimit={100}
             onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
             context={context}
+            itemsQueryCountLimit={itemsQueryCountLimit}
           />
           {descriptionEl}
           {errorTextEl}

src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts

@@ -89,6 +89,7 @@ export interface IDynamicFieldProps {
   maximumValue?: number;
   minimumValue?: number;
   showAsPercentage?: boolean;
+  itemsQueryCountLimit?: number;
   customIcon?: string;
   orderBy?: string;
 }

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -35,5 +35,5 @@ export interface IListItemPickerProps {
     */
    enableDefaultSuggestions?: boolean;
    styles? : IBasePickerStyles;
-
+   itemsQueryCountLimit?: number;
 }

src/controls/listItemPicker/ListItemPicker.tsx

@@ -174,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 { columnInternalName, keyColumnInternalName, webUrl, filter, orderBy, substringSearch } = this.props;
+    const { columnInternalName, keyColumnInternalName, webUrl, filter, orderBy, substringSearch, itemsQueryCountLimit } = this.props;
     const {
       field, safeListId
     } = this.state;
     const arrayItems: { key: string; name: string }[] = [];
     const keyColumn: string = keyColumnInternalName || 'Id';
 
     try {
-      const listItems = await this._spservice.getListItems(filterText, safeListId, 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 : '', itemsQueryCountLimit); // JJ - 20200613 - find by substring as an option
       // Check if the list had items
       if (listItems.length > 0) {
         for (const item of listItems) {

src/services/SPService.ts

@@ -221,6 +221,7 @@ export default class SPService implements ISPService {
     filterString?: string,
     substringSearch: boolean = false,
     orderBy?: string,
+    top?: number,
     cacheInterval: number = 1): Promise<any[]> { // eslint-disable-line @typescript-eslint/no-explicit-any
     const webAbsoluteUrl = !webUrl ? this._webAbsoluteUrl : webUrl;
     let apiUrl = '';
@@ -248,7 +249,7 @@ export default class SPService implements ISPService {
       const filterStr = substringSearch ? // JJ - 20200613 - find by substring as an option
         `${filterText ? `substringof('${encodeURIComponent(filterText.replace("'", "''"))}',${internalColumnName})` : ''}${filterString ? (filterText ? ' and ' : '') + filterString : ''}`
         : `${filterText ? `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'", "''"))}')` : ''}${filterString ? (filterText ? ' and ' : '') + filterString : ''}`; //string = filterList  ? `and ${filterList}` : '';
-      apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}&$orderby=${orderBy}`;
+      apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}&$orderby=${orderBy}${top ? `&$top=${top}` : ''}`;
     }
     else { // we need to get FieldValuesAsText and cache them
       const mapKey = `${webAbsoluteUrl}##${listId}##${internalColumnName}##${keyInternalColumnName || 'Id'}`;
@@ -259,7 +260,7 @@ export default class SPService implements ISPService {
         return filteredItems;
       }
 
-      apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName},FieldValuesAsText/${internalColumnName}&$expand=FieldValuesAsText&$orderby=${orderBy}${filterString ? '&$filter=' + filterString : ''}`;
+      apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName},FieldValuesAsText/${internalColumnName}&$expand=FieldValuesAsText&$orderby=${orderBy}${filterString ? '&$filter=' + filterString : ''}${top ? `&$top=${top}` : ''}`;
       isPost = false;
 
       //eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -559,14 +560,24 @@ export default class SPService implements ISPService {
            const isArray = Array.isArray(result[fieldName]);
            //multiselect lookups are arrays
            if (isArray) {
-            result[fieldName].forEach(element => {
-              lookups.push({ key: element.ID, name: element[lookupFieldName || 'Title'] });
+            result[fieldName].forEach(element => {                
+              let value = element[lookupFieldName || 'Title'];
+              const dateVal = Date.parse(value);
+              if (!Number.isNaN(dateVal)) {
+                  value = new Date(value).toLocaleDateString();
+              }        
+              lookups.push({ key: element.ID, name: value });
             });
            }
            //single select lookups are objects
            else {
              const singleItem = result[fieldName];
-             lookups.push({ key: singleItem.ID, name: singleItem[lookupFieldName || 'Title'] });
+             let value = singleItem[lookupFieldName || 'Title'];
+              const dateVal = Date.parse(value);
+              if (!Number.isNaN(dateVal)) {
+                  value = new Date(value).toLocaleDateString();
+              }       
+             lookups.push({ key: singleItem.ID, name: value });
            }
           return lookups;
         }