Updated code for Bug #829

Updated code for Bug #829

Author: kunj-sangani

docs/documentation/docs/controls/ListItemPicker.md

@@ -25,6 +25,7 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
                 columnInternalName='Title'
                 keyColumnInternalName='Id'
                 filter="Title eq 'SPFx'"
+                orderBy={"Id desc"}
                 itemLimit={2}
                 onSelectedItem={this.onSelectedItem}
                 context={this.props.context} />
@@ -60,6 +61,7 @@ The `ListItemPicker` control can be configured with the following properties:
 | 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 |
 

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -8,6 +8,7 @@ export interface IListItemPickerProps {
   listId: string;
   itemLimit: number;
   filter?: string;
+  orderBy?: string;
   className?: string;
   webUrl?: string;
   defaultSelectedItems?: any[];

src/controls/listItemPicker/ListItemPicker.tsx

@@ -58,23 +58,23 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
     return (
       <div>
         <TagPicker onResolveSuggestions={this.onFilterChanged}
-                   //   getTextFromItem={(item: any) => { return item.name; }}
-                   getTextFromItem={this.getTextFromItem}
-                   pickerSuggestionsProps={{
-                     suggestionsHeaderText: suggestionsHeaderText,
-                     noResultsFoundText: noresultsFoundText
-                   }}
-                   selectedItems={selectedItems}
-                   onChange={this.onItemChanged}
-                   className={className}
-                   itemLimit={itemLimit}
-                   disabled={disabled}
-                   inputProps={{
-                    placeholder: placeholder
-                  }} />
+          //   getTextFromItem={(item: any) => { return item.name; }}
+          getTextFromItem={this.getTextFromItem}
+          pickerSuggestionsProps={{
+            suggestionsHeaderText: suggestionsHeaderText,
+            noResultsFoundText: noresultsFoundText
+          }}
+          selectedItems={selectedItems}
+          onChange={this.onItemChanged}
+          className={className}
+          itemLimit={itemLimit}
+          disabled={disabled}
+          inputProps={{
+            placeholder: placeholder
+          }} />
 
         {!!errorMessage &&
-          (<Label style={{color:'#FF0000'}}> {errorMessage} </Label>)}
+          (<Label style={{ color: '#FF0000' }}> {errorMessage} </Label>)}
       </div>
     );
   }
@@ -134,12 +134,12 @@ 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, keyColumnInternalName, webUrl, filter, substringSearch } = this.props;
+    let { listId, columnInternalName, keyColumnInternalName, webUrl, filter, orderBy, substringSearch } = this.props;
     let arrayItems: { key: string; name: string }[] = [];
     let keyColumn: string = keyColumnInternalName || 'Id';
 
     try {
-      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, keyColumn, webUrl, filter, substringSearch); // JJ - 20200613 - find by substring as an option
+      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, 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) {

src/services/SPService.ts

@@ -10,7 +10,7 @@ export default class SPService implements ISPService {
 
   constructor(private _context: WebPartContext | ExtensionContext, webAbsoluteUrl?: string) {
     this._webAbsoluteUrl = webAbsoluteUrl ? webAbsoluteUrl : this._context.pageContext.web.absoluteUrl;
-   }
+  }
 
   /**
    * Get lists or libraries
@@ -50,14 +50,14 @@ export default class SPService implements ISPService {
   /**
    * Get List Items
    */
-  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, filter?: string, substringSearch: boolean = false ): Promise<any[]> {
+  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, filter?: string, substringSearch: boolean = false, orderBy?: string): Promise<any[]> {
     let returnItems: any[];
     const filterStr = substringSearch ? // JJ - 20200613 - find by substring as an option
-                        `substringof('${encodeURIComponent(filterText.replace("'","''"))}',${internalColumnName})${filter ? ' and ' + filter : ''}`
-                        : `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'","''"))}')${filter ? ' and ' + filter : ''}`; //string = filterList  ? `and ${filterList}` : '';
+      `substringof('${encodeURIComponent(filterText.replace("'", "''"))}',${internalColumnName})${filter ? ' and ' + filter : ''}`
+      : `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'", "''"))}')${filter ? ' and ' + filter : ''}`; //string = filterList  ? `and ${filterList}` : '';
     try {
       const webAbsoluteUrl = !webUrl ? this._webAbsoluteUrl : webUrl;
-      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}`;
+      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}&$orderby=${orderBy}`;
       const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
       if (data.ok) {
         const results = await data.json();
@@ -74,16 +74,16 @@ export default class SPService implements ISPService {
 
 
 
-     /**
-   * Gets list items for list item picker
-   * @param filterText
-   * @param listId
-   * @param internalColumnName
-   * @param [keyInternalColumnName]
-   * @param [webUrl]
-   * @param [filterList]
-   * @returns list items for list item picker
-   */
+  /**
+* Gets list items for list item picker
+* @param filterText
+* @param listId
+* @param internalColumnName
+* @param [keyInternalColumnName]
+* @param [webUrl]
+* @param [filterList]
+* @returns list items for list item picker
+*/
   public async getListItemsForListItemPicker(
     filterText: string,
     listId: string,