Merge pull request #416 from SharePoint/joaojmendes-AddNewPropertyFilterList

Merge of #392

Author: AJIXuMuK

docs/documentation/docs/controls/ListItemPicker.md

@@ -1,6 +1,6 @@
 # ListItemPicker control
 
-This control allows you to select one or more items from a list. The item selection is based from a column value. The control will suggest items based on the inserted value.
+This control allows you to select one or more items from a list. The List can be filtered to allow select items from a subset of items The item selection is based from a column value. The control will suggest items based on the inserted value.
 
 Here is an example of the control:
 
@@ -24,6 +24,7 @@ import { ListItemPicker } from '@pnp/spfx-controls-react/lib/listItemPicker';
 <ListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
                 columnInternalName='Title'
                 valueColumnInternalName='Id'
+                filter="Title eq 'SPFx'"
                 itemLimit={2}
                 onSelectedItem={this.onSelectedItem}
                 context={this.props.context} />
@@ -58,5 +59,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | 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|
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

package-lock.json

@@ -7,7 +7,7 @@ export interface IListItemPickerProps {
   context: WebPartContext |  ApplicationCustomizerContext;
   listId: string;
   itemLimit: number;
-
+  filter?: string;
   className?: string;
   webUrl?: string;
   defaultSelectedItems?: any[];

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -112,12 +112,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 } = this.props;
+    let { listId, columnInternalName, keyColumnInternalName, webUrl, filter } = 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);
+      let listItems = await this._spservice.getListItems(filterText, listId, columnInternalName, keyColumn, webUrl, filter);
       // Check if the list had items
       if (listItems.length > 0) {
         for (const item of listItems) {

src/controls/listItemPicker/ListItemPicker.tsx

@@ -47,12 +47,12 @@ export default class SPService implements ISPService {
   /**
    * Get List Items
    */
-  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string): Promise<any[]> {
+  public async getListItems(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, filter?: string ): Promise<any[]> {
     let returnItems: any[];
-    
+    const filterStr = `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'","''"))}')${filter ? ' and ' + filter : ''}`; //string = filterList  ? `and ${filterList}` : '';
     try {
       const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
-      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=startswith(${internalColumnName},'${filterText}')`;
+      const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}`;
       const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
       if (data.ok) {
         const results = await data.json();

src/services/SPService.ts

@@ -693,11 +693,15 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               </div>
 
               <div className="ms-font-m">Field picker list data tester:
-                <ListItemPicker listId={this.state.selectedList}
+
+                <ListItemPicker listId={'76a8231b-35b6-4703-b1f4-5d03d3dfb1ca'}
                   columnInternalName="Title"
+                  keyColumnInternalName="Id"
+                  filter={"Title eq 'SPFx'"}
                   itemLimit={5}
                   context={this.props.context}
                   onSelectedItem={this.listItemPickerDataSelected} />
+
               </div>
 
               <div className="ms-font-m">Services tester: