Skip to content

Commit 783568e

Browse files
nsoethNiels SoethAJIXuMuK
authored
Fix #1721 (#1722)
* More than 100 lookup values * remove top5000 from getLookupValue * Format date in lookup fields * add itemsQueryCountLimit property to ListItemPicker, DynamicField * update NaN check, add $top, change param order --------- Co-authored-by: Niels Soeth <Niels.Soeth@ottogroup.com> Co-authored-by: Alex Terentiev <aleksei.terentiev@gmail.com>
1 parent 511dd5e commit 783568e

6 files changed

Lines changed: 46 additions & 29 deletions

File tree

‎docs/documentation/docs/controls/ListItemPicker.md‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Here is an example of the control:
1818
```TypeScript
1919
import { ListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
2020
```
21+
2122
- Use the `ListItemPicker` control in your code as follows:
2223

2324
```TypeScript
@@ -41,30 +42,31 @@ private onSelectedItem(data: { key: string; name: string }[]) {
4142
}
4243
}
4344
```
45+
4446
## Implementation
4547

4648
The `ListItemPicker` control can be configured with the following properties:
4749

48-
49-
| Property | Type | Required | Description |
50-
| ---- | ---- | ---- | ---- |
51-
| columnInternalName | string | yes | InternalName of column to search and get values. |
52-
| keyColumnInternalName | string | no | InternalName of column to use as the key for the selection. Must be a column with unique values. Default: Id |
53-
| context | BaseComponentContext | yes | SPFx web part or extention context |
54-
| listId | string | yes | Guid or title of the list. |
55-
| itemLimit | number | yes | Number of items which can be selected |
56-
| onSelectedItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
57-
| className | string | no | ClassName for the picker. |
58-
| webUrl | string | no | URL of the site. By default it uses the current site URL. |
59-
| defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. |
60-
| suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
61-
| noResultsFoundText | string | no | The text that should appear when no results are returned. |
62-
| disabled | boolean | no | Specifies if the control is disabled or not. |
63-
| filter | string | no | condition to filter list Item, same as $filter ODATA parameter|
64-
| orderBy | string | no | condition to order by list Item, same as $orderby ODATA parameter|
65-
| placeholder | string | no | Short text hint to display in empty picker |
66-
| substringSearch | boolean | no | Specifies if substring search should be used |
67-
| label | string | no | Specifies the text describing the ListItemPicker. |
68-
| enableDefaultSuggestions | boolean | no | Enable default suggestions. All options are displayed by default when clicking on the control. |
50+
| Property | Type | Required | Description |
51+
| ------------------------ | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------ |
52+
| columnInternalName | string | yes | InternalName of column to search and get values. |
53+
| keyColumnInternalName | string | no | InternalName of column to use as the key for the selection. Must be a column with unique values. Default: Id |
54+
| context | BaseComponentContext | yes | SPFx web part or extention context |
55+
| listId | string | yes | Guid or title of the list. |
56+
| itemLimit | number | yes | Number of items which can be selected |
57+
| onSelectedItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
58+
| className | string | no | ClassName for the picker. |
59+
| webUrl | string | no | URL of the site. By default it uses the current site URL. |
60+
| defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. |
61+
| suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
62+
| noResultsFoundText | string | no | The text that should appear when no results are returned. |
63+
| disabled | boolean | no | Specifies if the control is disabled or not. |
64+
| filter | string | no | condition to filter list Item, same as $filter ODATA parameter |
65+
| orderBy | string | no | condition to order by list Item, same as $orderby ODATA parameter |
66+
| placeholder | string | no | Short text hint to display in empty picker |
67+
| substringSearch | boolean | no | Specifies if substring search should be used |
68+
| label | string | no | Specifies the text describing the ListItemPicker. |
69+
| enableDefaultSuggestions | boolean | no | Enable default suggestions. All options are displayed by default when clicking on the control. |
70+
| itemsQueryCountLimit | number | no | Number of items to display in a lookup field |
6971

7072
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

‎src/controls/dynamicForm/dynamicField/DynamicField.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
8080
description,
8181
maximumValue,
8282
minimumValue,
83+
itemsQueryCountLimit,
8384
customIcon,
8485
orderBy
8586
} = this.props;
@@ -245,6 +246,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
245246
itemLimit={1}
246247
onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
247248
context={context}
249+
itemsQueryCountLimit={itemsQueryCountLimit}
248250
orderBy={orderBy}
249251
/>
250252
{descriptionEl}
@@ -270,6 +272,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
270272
itemLimit={100}
271273
onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
272274
context={context}
275+
itemsQueryCountLimit={itemsQueryCountLimit}
273276
/>
274277
{descriptionEl}
275278
{errorTextEl}

‎src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export interface IDynamicFieldProps {
8989
maximumValue?: number;
9090
minimumValue?: number;
9191
showAsPercentage?: boolean;
92+
itemsQueryCountLimit?: number;
9293
customIcon?: string;
9394
orderBy?: string;
9495
}

‎src/controls/listItemPicker/IListItemPickerProps.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,5 @@ export interface IListItemPickerProps {
3535
*/
3636
enableDefaultSuggestions?: boolean;
3737
styles? : IBasePickerStyles;
38-
38+
itemsQueryCountLimit?: number;
3939
}

‎src/controls/listItemPicker/ListItemPicker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,15 +174,15 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
174174
* Function to load List Items
175175
*/
176176
private loadListItems = async (filterText: string): Promise<{ key: string; name: string }[]> => {
177-
const { columnInternalName, keyColumnInternalName, webUrl, filter, orderBy, substringSearch } = this.props;
177+
const { columnInternalName, keyColumnInternalName, webUrl, filter, orderBy, substringSearch, itemsQueryCountLimit } = this.props;
178178
const {
179179
field, safeListId
180180
} = this.state;
181181
const arrayItems: { key: string; name: string }[] = [];
182182
const keyColumn: string = keyColumnInternalName || 'Id';
183183

184184
try {
185-
const listItems = await this._spservice.getListItems(filterText, safeListId, columnInternalName, field, keyColumn, webUrl, filter, substringSearch, orderBy ? orderBy : ''); // JJ - 20200613 - find by substring as an option
185+
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
186186
// Check if the list had items
187187
if (listItems.length > 0) {
188188
for (const item of listItems) {

‎src/services/SPService.ts‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,7 @@ export default class SPService implements ISPService {
221221
filterString?: string,
222222
substringSearch: boolean = false,
223223
orderBy?: string,
224+
top?: number,
224225
cacheInterval: number = 1): Promise<any[]> { // eslint-disable-line @typescript-eslint/no-explicit-any
225226
const webAbsoluteUrl = !webUrl ? this._webAbsoluteUrl : webUrl;
226227
let apiUrl = '';
@@ -248,7 +249,7 @@ export default class SPService implements ISPService {
248249
const filterStr = substringSearch ? // JJ - 20200613 - find by substring as an option
249250
`${filterText ? `substringof('${encodeURIComponent(filterText.replace("'", "''"))}',${internalColumnName})` : ''}${filterString ? (filterText ? ' and ' : '') + filterString : ''}`
250251
: `${filterText ? `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'", "''"))}')` : ''}${filterString ? (filterText ? ' and ' : '') + filterString : ''}`; //string = filterList ? `and ${filterList}` : '';
251-
apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}&$orderby=${orderBy}`;
252+
apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}&$orderby=${orderBy}${top ? `&$top=${top}` : ''}`;
252253
}
253254
else { // we need to get FieldValuesAsText and cache them
254255
const mapKey = `${webAbsoluteUrl}##${listId}##${internalColumnName}##${keyInternalColumnName || 'Id'}`;
@@ -259,7 +260,7 @@ export default class SPService implements ISPService {
259260
return filteredItems;
260261
}
261262

262-
apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName},FieldValuesAsText/${internalColumnName}&$expand=FieldValuesAsText&$orderby=${orderBy}${filterString ? '&$filter=' + filterString : ''}`;
263+
apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName},FieldValuesAsText/${internalColumnName}&$expand=FieldValuesAsText&$orderby=${orderBy}${filterString ? '&$filter=' + filterString : ''}${top ? `&$top=${top}` : ''}`;
263264
isPost = false;
264265

265266
//eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -559,14 +560,24 @@ export default class SPService implements ISPService {
559560
const isArray = Array.isArray(result[fieldName]);
560561
//multiselect lookups are arrays
561562
if (isArray) {
562-
result[fieldName].forEach(element => {
563-
lookups.push({ key: element.ID, name: element[lookupFieldName || 'Title'] });
563+
result[fieldName].forEach(element => {
564+
let value = element[lookupFieldName || 'Title'];
565+
const dateVal = Date.parse(value);
566+
if (!Number.isNaN(dateVal)) {
567+
value = new Date(value).toLocaleDateString();
568+
}
569+
lookups.push({ key: element.ID, name: value });
564570
});
565571
}
566572
//single select lookups are objects
567573
else {
568574
const singleItem = result[fieldName];
569-
lookups.push({ key: singleItem.ID, name: singleItem[lookupFieldName || 'Title'] });
575+
let value = singleItem[lookupFieldName || 'Title'];
576+
const dateVal = Date.parse(value);
577+
if (!Number.isNaN(dateVal)) {
578+
value = new Date(value).toLocaleDateString();
579+
}
580+
lookups.push({ key: singleItem.ID, name: value });
570581
}
571582
return lookups;
572583
}

0 commit comments

Comments
 (0)