Skip to content

Commit b99f45e

Browse files
russgoverussgove
committed
sort comboboxlistitemppicker
1 parent 66f0362 commit b99f45e

File tree

5 files changed

+62
-165
lines changed

5 files changed

+62
-165
lines changed

‎docs/documentation/docs/controls/ComboBoxListItemPicker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPic
2525
```TypeScript
2626
<ComboBoxListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
2727
columnInternalName='Title'
28+
orderBy='Title asc'
2829
keyColumnInternalName='Id'
2930
filter="Title eq 'SPFx'"
3031
onSelectedItem={this.onSelectedItem}
@@ -123,5 +124,6 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
123124
| onInitialized | () => void | no | Calls when component is ready|
124125
| itemLimit | number | no | Maximum number of items to be displayed in the combobox. Default: 100 |
125126
| label | string | no | Specifies the text describing the combobox ListItemPicker. |
127+
| orderBy | string | no | Specifies the sequence of the items in the comboBox ,same as $orderBy ODATA parameter|
126128

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

‎src/common/dal/ListItemRepository.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ export class ListItemRepository {
1212
* @param keyInternalColumnName
1313
* @param webUrl
1414
* @param top
15+
* @param orderBy text value of the filter part of oData query 'Title desc, Created'
1516
*/
16-
public async getListItemsByFilterClause(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, top?: number): Promise<any[]> {
17-
let returnItems: any[];
17+
public async getListItemsByFilterClause(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, top?: number, orderBy?: string): Promise<any[]> {
1818
try {
1919
const webAbsoluteUrl = !webUrl ? this.SiteUrl : webUrl;
20-
const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterText}&$top=${top}`;
20+
const apiUrl = orderBy ? `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterText}&$top=${top}&$orderBy=${orderBy}`
21+
: `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterText}&$top=${top}`;
2122
const data = await this.SPClient.get(apiUrl, SPHttpClient.configurations.v1);
2223
if (data.ok) {
2324
const results = await data.json();

‎src/controls/listItemPicker/ComboBoxListItemPicker.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import * as strings from 'ControlStrings';
2-
import * as React from "react";
2+
import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
3+
import { ComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
34
import { Label } from "office-ui-fabric-react/lib/Label";
5+
import * as React from "react";
6+
47
import { IComboBoxListItemPickerProps, IComboBoxListItemPickerState } from ".";
5-
import * as telemetry from '../../common/telemetry';
6-
import { ComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
78
import { ListItemRepository } from '../../common/dal/ListItemRepository';
9+
import * as telemetry from '../../common/telemetry';
810
import styles from './ComboBoxListItemPicker.module.scss';
9-
import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
10-
1111

1212
export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPickerProps, IComboBoxListItemPickerState> {
1313
private _listItemRepo: ListItemRepository;
@@ -45,7 +45,8 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
4545
webUrl,
4646
itemLimit,
4747
defaultSelectedItems,
48-
onInitialized
48+
onInitialized,
49+
orderBy
4950
} = props;
5051
let query = filter || "";
5152
//query += filter;
@@ -55,7 +56,8 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
5556
columnInternalName,
5657
keyColumnInternalName,
5758
webUrl,
58-
itemLimit || 100);
59+
itemLimit || 100,
60+
orderBy);
5961

6062
let options = listItems.map(option => {
6163
return {

‎src/controls/listItemPicker/IComboBoxListItemPickerProps.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,5 @@ export interface IComboBoxListItemPickerProps {
2929
onInitialized?: () => void;
3030
onSelectedItem: (item: any) => void;
3131
label?: string;
32+
orderBy?:string;
3233
}

‎src/webparts/controlsTest/components/ControlsTest.tsx

Lines changed: 46 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,184 +1,74 @@
1-
import * as React from "react";
2-
import {
3-
ITag,
4-
} from "office-ui-fabric-react/lib/Pickers";
5-
import {
6-
Stack,
7-
} from "office-ui-fabric-react/lib/Stack";
8-
import {
9-
Text,
10-
} from "office-ui-fabric-react/lib/Text";
11-
import {
12-
TextField
13-
} from "office-ui-fabric-react/lib/TextField";
14-
import {
15-
DefaultButton,
16-
PrimaryButton
17-
} from "office-ui-fabric-react/lib/components/Button";
18-
import { DialogType, DialogFooter, IDialogContentProps } from "office-ui-fabric-react/lib/components/Dialog";
19-
import { IModalProps } from "office-ui-fabric-react/lib/Modal";
20-
import {
21-
Dropdown,
22-
IDropdownOption
23-
} from "office-ui-fabric-react/lib/components/Dropdown";
1+
import { ExclamationCircleIcon, Flex, Text as NorthstarText, ScreenshareIcon, ShareGenericIcon } from "@fluentui/react-northstar";
2+
import { DisplayMode, Environment, EnvironmentType } from "@microsoft/sp-core-library";
3+
import { SPHttpClient } from "@microsoft/sp-http";
4+
import { SPPermission } from "@microsoft/sp-page-context";
5+
import { DefaultButton, PrimaryButton } from "office-ui-fabric-react/lib/components/Button";
6+
import { DialogFooter, DialogType, IDialogContentProps } from "office-ui-fabric-react/lib/components/Dialog";
7+
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/components/Dropdown";
248
import { Link } from "office-ui-fabric-react/lib/components/Link";
25-
import {
26-
DocumentCard,
27-
DocumentCardActivity,
28-
DocumentCardLocation,
29-
DocumentCardPreview,
30-
DocumentCardTitle,
31-
DocumentCardType,
32-
IDocumentCardPreviewProps
33-
} from "office-ui-fabric-react/lib/DocumentCard";
9+
import { DocumentCard, DocumentCardActivity, DocumentCardLocation, DocumentCardPreview, DocumentCardTitle, DocumentCardType, IDocumentCardPreviewProps } from "office-ui-fabric-react/lib/DocumentCard";
3410
import { IIconProps } from "office-ui-fabric-react/lib/Icon";
35-
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
3611
import { ImageFit } from "office-ui-fabric-react/lib/Image";
12+
import { IModalProps } from "office-ui-fabric-react/lib/Modal";
3713
import { PanelType } from "office-ui-fabric-react/lib/Panel";
14+
import { ITag } from "office-ui-fabric-react/lib/Pickers";
15+
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
16+
import { Stack } from "office-ui-fabric-react/lib/Stack";
3817
import { mergeStyles } from "office-ui-fabric-react/lib/Styling";
18+
import { Text } from "office-ui-fabric-react/lib/Text";
19+
import { TextField } from "office-ui-fabric-react/lib/TextField";
3920
import { ISize } from "office-ui-fabric-react/lib/Utilities";
40-
import {
41-
DayOfWeek
42-
} from "office-ui-fabric-react/lib/utilities/dateValues/DateValues";
43-
44-
import {
45-
ExclamationCircleIcon,
46-
Flex,
47-
ScreenshareIcon,
48-
ShareGenericIcon,
49-
Text as NorthstarText
50-
} from "@fluentui/react-northstar";
51-
import {
52-
DisplayMode,
53-
Environment,
54-
EnvironmentType
55-
} from "@microsoft/sp-core-library";
56-
import { SPHttpClient } from "@microsoft/sp-http";
57-
import { SPPermission } from "@microsoft/sp-page-context";
21+
import { DayOfWeek } from "office-ui-fabric-react/lib/utilities/dateValues/DateValues";
22+
import * as React from "react";
5823

24+
import { AnimatedDialog } from "../../../AnimatedDialog";
25+
import { ChartControl, ChartType } from "../../../ChartControl";
26+
import { Accordion as AccessibleAccordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from "../../../controls/accessibleAccordion";
5927
import { Accordion } from "../../../controls/accordion";
60-
import {
61-
ChartControl,
62-
ChartType
63-
} from "../../../ChartControl";
64-
import {
65-
Accordion as AccessibleAccordion,
66-
AccordionItem,
67-
AccordionItemButton,
68-
AccordionItemHeading,
69-
AccordionItemPanel
70-
} from "../../../controls/accessibleAccordion";
71-
import {
72-
Carousel,
73-
CarouselButtonsDisplay,
74-
CarouselButtonsLocation,
75-
CarouselIndicatorsDisplay,
76-
CarouselIndicatorShape
77-
} from "../../../controls/carousel";
78-
import {
79-
Dashboard,
80-
WidgetSize
81-
} from "../../../controls/dashboard";
82-
import {
83-
TimeDisplayControlType
84-
} from "../../../controls/dateTimePicker/TimeDisplayControlType";
28+
import { Carousel, CarouselButtonsDisplay, CarouselButtonsLocation, CarouselIndicatorsDisplay, CarouselIndicatorShape } from "../../../controls/carousel";
29+
import { Dashboard, WidgetSize } from "../../../controls/dashboard";
30+
import { TimeDisplayControlType } from "../../../controls/dateTimePicker/TimeDisplayControlType";
31+
import { DynamicForm } from '../../../controls/dynamicForm';
8532
import { IconPicker } from "../../../controls/iconPicker";
86-
import {
87-
ComboBoxListItemPicker
88-
} from "../../../controls/listItemPicker/ComboBoxListItemPicker";
33+
import { ComboBoxListItemPicker } from "../../../controls/listItemPicker/ComboBoxListItemPicker";
34+
import { ILocationPickerItem } from "../../../controls/locationPicker/ILocationPicker";
35+
import { LocationPicker } from "../../../controls/locationPicker/LocationPicker";
36+
import { MyTeams } from "../../../controls/MyTeams";
8937
import { Pagination } from "../../../controls/pagination";
38+
import { SitePicker }​​ from "../../../controls/sitePicker/SitePicker";
9039
import { TermActionsDisplayStyle } from "../../../controls/taxonomyPicker";
91-
import {
92-
TermActionsDisplayMode
93-
} from "../../../controls/taxonomyPicker/termActions";
40+
import { TermActionsDisplayMode } from "../../../controls/taxonomyPicker/termActions";
9441
import { Toolbar } from "../../../controls/toolbar";
95-
import {
96-
ITreeItem,
97-
TreeItemActionsDisplayMode,
98-
TreeView,
99-
TreeViewSelectionMode
100-
} from "../../../controls/treeView";
101-
import {
102-
DateConvention,
103-
DateTimePicker,
104-
TimeConvention
105-
} from "../../../DateTimePicker";
106-
import {
107-
CustomCollectionFieldType,
108-
FieldCollectionData
109-
} from "../../../FieldCollectionData";
110-
import {
111-
FilePicker,
112-
IFilePickerResult
113-
} from "../../../FilePicker";
114-
import {
115-
ApplicationType,
116-
FileTypeIcon,
117-
IconType,
118-
ImageSize
119-
} from "../../../FileTypeIcon";
120-
import {
121-
FolderExplorer,
122-
IBreadcrumbItem,
123-
IFolder
124-
} from "../../../FolderExplorer";
42+
import { ITreeItem, TreeItemActionsDisplayMode, TreeView, TreeViewSelectionMode } from "../../../controls/treeView";
43+
import { DateConvention, DateTimePicker, TimeConvention } from "../../../DateTimePicker";
44+
import { DragDropFiles }​​ from "../../../DragDropFiles";
45+
import { CustomCollectionFieldType, FieldCollectionData } from "../../../FieldCollectionData";
46+
import { FilePicker, IFilePickerResult } from "../../../FilePicker";
47+
import { ApplicationType, FileTypeIcon, IconType, ImageSize } from "../../../FileTypeIcon";
48+
import { FolderExplorer, IBreadcrumbItem, IFolder } from "../../../FolderExplorer";
12549
import { FolderPicker } from "../../../FolderPicker";
12650
import { GridLayout } from "../../../GridLayout";
12751
import { IFrameDialog } from "../../../IFrameDialog";
12852
import { IFramePanel } from "../../../IFramePanel";
12953
import { ListItemPicker } from "../../../ListItemPicker";
13054
import { ListPicker } from "../../../ListPicker";
131-
import {
132-
GroupOrder,
133-
IGrouping,
134-
IViewField,
135-
ListView,
136-
SelectionMode
137-
} from "../../../ListView";
138-
import {
139-
Map,
140-
MapType
141-
} from "../../../Map";
142-
import {
143-
PeoplePicker,
144-
PrincipalType
145-
} from "../../../PeoplePicker";
55+
import { GroupOrder, IGrouping, IViewField, ListView, SelectionMode } from "../../../ListView";
56+
import { Map, MapType } from "../../../Map";
57+
import { PeoplePicker, PrincipalType } from "../../../PeoplePicker";
14658
import { Placeholder } from "../../../Placeholder";
147-
import {
148-
IProgressAction,
149-
Progress
150-
} from "../../../Progress";
59+
import { IProgressAction, Progress } from "../../../Progress";
15160
import { RichText } from "../../../RichText";
152-
import {
153-
PermissionLevel,
154-
SecurityTrimmedControl
155-
} from "../../../SecurityTrimmedControl";
61+
import { PermissionLevel, SecurityTrimmedControl } from "../../../SecurityTrimmedControl";
15662
import { ITerm } from "../../../services/ISPTermStorePickerService";
15763
import SPTermStorePickerService
15864
from "../../../services/SPTermStorePickerService";
15965
import { SiteBreadcrumb } from "../../../SiteBreadcrumb";
160-
import {
161-
IPickerTerms,
162-
TaxonomyPicker,
163-
UpdateType
164-
} from "../../../TaxonomyPicker";
66+
import { IPickerTerms, TaxonomyPicker, UpdateType } from "../../../TaxonomyPicker";
67+
import { TeamChannelPicker } from "../../../TeamChannelPicker";
68+
import { TeamPicker } from "../../../TeamPicker";
16569
import { WebPartTitle } from "../../../WebPartTitle";
166-
import { AnimatedDialog } from "../../../AnimatedDialog";
16770
import styles from "./ControlsTest.module.scss";
168-
import {
169-
IControlsTestProps,
170-
IControlsTestState
171-
} from "./IControlsTestProps";
172-
import { MyTeams } from "../../../controls/MyTeams";
173-
import { TeamPicker } from "../../../TeamPicker";
174-
import { TeamChannelPicker } from "../../../TeamChannelPicker";
175-
import {​​ DragDropFiles }​​ from "../../../DragDropFiles";
176-
import {​​ SitePicker }​​ from "../../../controls/sitePicker/SitePicker";
177-
import { DynamicForm } from '../../../controls/dynamicForm';
178-
import { LocationPicker } from "../../../controls/locationPicker/LocationPicker";
179-
import { ILocationPickerItem } from "../../../controls/locationPicker/ILocationPicker";
180-
181-
71+
import { IControlsTestProps, IControlsTestState } from "./IControlsTestProps";
18272

18373
// Used to render document card
18474
/**
@@ -1437,6 +1327,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
14371327
<ComboBoxListItemPicker listId={this.state.comboBoxListItemPickerListId}
14381328
columnInternalName='Title'
14391329
keyColumnInternalName='Id'
1330+
orderBy='Title desc'
14401331
multiSelect={true}
14411332
onSelectedItem={(data) => {
14421333
console.log(`Item(s):`, data);

0 commit comments

Comments
 (0)