Merge branch 'kunj-sangani-master' into dev

Author: AJIXuMuK

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

@@ -68,23 +68,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>
     );
   }
@@ -144,15 +144,15 @@ 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;
     const {
       field
     } = this.state;
     let arrayItems: { key: string; name: string }[] = [];
     let keyColumn: string = keyColumnInternalName || 'Id';
 
     try {
-      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, field, keyColumn, webUrl, filter, substringSearch); // JJ - 20200613 - find by substring as an option
+      let listItems = await this._spservice.getListItems(filterText, listId, 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) {

src/services/SPService.ts

@@ -75,14 +75,25 @@ export default class SPService implements ISPService {
   /**
    * Get List Items
    */
-  public async getListItems(filterText: string, listId: string, internalColumnName: string, field: ISPField | undefined, keyInternalColumnName?: string, webUrl?: string, filter?: string, substringSearch: boolean = false): Promise<any[]> {
+  public async getListItems(filterText: string, listId: string, internalColumnName: string, field: ISPField | undefined, keyInternalColumnName?: string, webUrl?: string, filter?: string, substringSearch: boolean = false, orderBy?: string): Promise<any[]> {
     let returnItems: any[];
     const webAbsoluteUrl = !webUrl ? this._webAbsoluteUrl : webUrl;
     let apiUrl = '';
     let isPost = false;
 
     if (field && field.TypeAsString === 'Calculated') { // for calculated fields we need to use CAML query
-      const camlQuery = `<View><Query><Where>${substringSearch ? '<Contains>' : '<BeginsWith>'}<FieldRef Name="${internalColumnName}"/><Value Type="${field.ResultType}">${filterText}</Value>${substringSearch ? '</Contains>' : '</BeginsWith>'}</Where></Query></View>`;
+      let orderByStr = '';
+
+      if (orderBy) {
+        const orderByParts = orderBy.split(' ');
+        let ascStr = '';
+        if (orderByParts[1] && orderByParts[1].toLowerCase() === 'desc') {
+          ascStr = `Ascending="FALSE"`;
+        }
+        orderByStr = `<OrderBy><FieldRef Name="${orderByParts[0]}" ${ascStr} />`;
+      }
+
+      const camlQuery = `<View><Query><Where>${substringSearch ? '<Contains>' : '<BeginsWith>'}<FieldRef Name="${internalColumnName}"/><Value Type="${field.ResultType}">${filterText}</Value>${substringSearch ? '</Contains>' : '</BeginsWith>'}</Where>${orderByStr}</Query></View>`;
 
       apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/GetItems(query=@v1)?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&@v1=${JSON.stringify({ ViewXml: camlQuery })}`;
       isPost = true;
@@ -91,7 +102,7 @@ export default class SPService implements ISPService {
       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}` : '';
-      apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}`;
+      apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}&$orderby=${orderBy}`;
     }
 
     try {

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1298,6 +1298,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   columnInternalName="Title"
                   keyColumnInternalName="Id"
                   filter={"Title eq 'SPFx'"}
+                  orderBy={'Title desc'}
                   itemLimit={5}
                   context={this.props.context}
                   placeholder={'Select list items'}