FieldCollectionData enhancements

Author: RicoNL

docs/documentation/docs/controls/FieldCollectionData.md

@@ -96,7 +96,7 @@ The `FieldCollectionData` control can be configured with the following propertie
 | saveAndAddBtnLabel | string | yes | Label of the save and add button. | |
 | cancelBtnLabel | string | yes | Label of the cancel button. | |
 | fields | ICustomCollectionField[] | yes | The fields to be used for the list of collection data. | |
-| value | string | yes | The collection data value. | |
+| value | any[] | yes | The collection data value. | |
 | enableSorting | boolean | no | Specify if you want to be able to sort the items in the collection. | false |
 | disabled | boolean | no | Specify if the control is disabled. | false |
 | disableItemCreation | boolean | no | Allows you to specify if user can create new items. | false |
@@ -106,6 +106,9 @@ The `FieldCollectionData` control can be configured with the following propertie
 | itemsPerPage | number | no | Allows you to specify the amount of items displayed per page. Paging control is added automatically. | |
 | executeFiltering | (searchFilter: string, item: any) => boolean | no | Allows you to show Search Box and specify own filtering logic. | |
 | panelProps | IPanelProps | no | Allows you to pass in props of the panel such as type and customWidth to control the underlying panel. | |
+| context | WebpartContext | no | Needed if **peoplepicker** field type is used | |
+| usePanel | boolean | no | Specify if you want the control to opened in a panel or directly on the page | true | 
+| noDataMessage | string | no | Specify the message when no items are added to the collection ||
 
 Interface `ICustomCollectionField`
 
@@ -116,13 +119,18 @@ Interface `ICustomCollectionField`
 | type | CustomCollectionFieldType | yes | Specifies the type of field to render. |
 | disableEdit | boolean | no | Allows you to specify if a field is disabled for editing. |
 | required | boolean | no | Specify if the field is required. |
-| options | [IDropdownOption[]](https://developer.microsoft.com/en-us/fabric#/components/dropdown) | no | Dropdown options. Only necessary when dropdown type is used. |
+| options | [IDropdownOption[]](https://developer.microsoft.com/en-us/fabric#/components/dropdown) [IComboboxOption[]](https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox) | no | Dropdown options. Only necessary when dropdown or combobox type is used. |
 | onRenderOption | IRenderFunction<ISelectableOption> | no | Dropdown custom options render method. Only for the **dropdown** field type. |
 | placeholder | string | no | Placehoder text which will be used for the input field. If not provided the input title will be used. |
 | defaultValue | any | no | Specify a default value for the input field. |
 | deferredValidationTime | number | no | Field will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default: 200ms. |
 | onGetErrorMessage | (value: any, index: number, crntItem: any): string \| Promise<string> | no | The method is used to get the validation error message and determine whether the input value is valid or not. It provides you the current row index and the item you are currently editing. |
 | onCustomRender | (field: ICustomCollectionField, value: any, onUpdate: (fieldId: string, value: any) => void, item: any, itemUniqueId: string, onCustomFieldValidation: (fieldId: string, errorMessage: string) => void) => JSX.Element | no | This property is only required if you are using the `custom` field type and it can be used to specify the custom rendering of your control in the collection data. |
+| multiSelect | boolean| no | Specifies multiple options can be selected (**combobox**) or mutliple users can be selected (**peoplepicker**) |
+| allowFreeform | boolean | no | Specifies that own options can be entered. Only for **combobox** field type |
+| minimumUsers| number | no | Specifies the minimum number of users to has to be entered for **peoplepicker** field type |
+| minimumUsersMessage| string | no | Specifies the message to be displayed if minimumUsers are not entered for **peoplepicker** field type |
+| maximumUsers | number | no | Specifies the maximum number of users to be entered for **peoplepicker** field type |
 
 Enum `CustomCollectionFieldType`
 
@@ -132,8 +140,10 @@ Enum `CustomCollectionFieldType`
 | number | Number field |
 | boolean | Checkbox |
 | dropdown | Dropdown field. You will have to specify the `options` property when using this field type |
+| combobox | Combobox field. You wil have to specify the `options` property, optional specify `allowFreeform` and `multiSelect` |
 | fabricIcon | Name of the [Office UI Fabric icon](https://developer.microsoft.com/en-us/fabric#/styles/icons) |
 | url | URL field |
+| peoplepicker | Peoplepicker control |
 | custom | This gives you control over the whole field rendering. Be sure to provide the `onCustomRender` method to render your control in the collection data. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/FieldCollectionData)

src/controls/fieldCollectionData/FieldCollectionData.module.scss

@@ -177,3 +177,7 @@
     border-bottom: 1px solid $ms-color-neutralTertiary;
   }
 }
+
+.peoplePicker {
+  background-color: #fff;
+}

src/controls/fieldCollectionData/FieldCollectionData.tsx

@@ -48,26 +48,36 @@ export class FieldCollectionData extends React.Component<IFieldCollectionDataPro
   }
 
   public render(): JSX.Element {
+    const _element: JSX.Element = this.getElement()
     return (
+      _element
+    );
+  }
+
+  private getElement(): JSX.Element {
+    const _element: JSX.Element = typeof this.props.usePanel === "boolean" && this.props.usePanel === false 
+      ? 
+      <CollectionDataViewer {...this.props} fOnSave={this.onSave} fOnClose={this.closePanel} /> 
+      : 
       <div>
         <Label>{this.props.label}</Label>
 
         <DefaultButton text={this.props.manageBtnLabel}
-                       onClick={this.openPanel}
-                       disabled={this.props.fields.length === 0 || this.props.disabled} />
+                      onClick={this.openPanel}
+                      disabled={this.props.fields.length === 0 || this.props.disabled} />
 
         {
           (!this.props.fields || this.props.fields.length === 0) && //<FieldErrorMessage errorMessage={strings.CollectionDataEmptyFields} />
           <MessageBar messageBarType={MessageBarType.error}>{strings.CollectionDataItemMissingFields}</MessageBar>
         }
 
         <Panel isOpen={this.state.panelOpen}
-               onDismiss={this.closePanel}
-               type={PanelType.large}
-               headerText={this.props.panelHeader}
-               onOuterClick={()=>{ /* no-op; */}}
-               className={`FieldCollectionData__panel ${this.props.panelClassName || ""}`}
-               { ...this.props.panelProps ?? {}} >
+              onDismiss={this.closePanel}
+              type={PanelType.large}
+              headerText={this.props.panelHeader}
+              onOuterClick={()=>{ /* no-op; */}}
+              className={`FieldCollectionData__panel ${this.props.panelClassName || ""}`}
+              { ...this.props.panelProps ?? {}} >
           {
             this.props.panelDescription && (
               <p className="FieldCollectionData__panel__description">{this.props.panelDescription}</p>
@@ -77,6 +87,7 @@ export class FieldCollectionData extends React.Component<IFieldCollectionDataPro
           <CollectionDataViewer {...this.props} fOnSave={this.onSave} fOnClose={this.closePanel} />
         </Panel>
       </div>
-    );
+
+  return _element;
   }
 }

src/controls/fieldCollectionData/ICustomCollectionField.ts

@@ -1,6 +1,7 @@
 import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { IRenderFunction } from '@uifabric/utilities/lib/IRenderFunction';
 import { ISelectableOption } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+import { IComboBoxOption } from 'office-ui-fabric-react';
 
 export interface ICustomCollectionField {
   /**
@@ -24,9 +25,17 @@ export interface ICustomCollectionField {
    */
   required?: boolean;
   /**
-   * Dropdown options. Only nescessary when dropdown type is used.
+   * Dropdown / combobox options. Only nescessary when dropdown or combobox type is used.
    */
-  options?: IDropdownOption[];
+  options?: IDropdownOption[] | IComboBoxOption[];
+  /**
+   * Whether multiple options can be selcted. Only when combobox or peoplepicker is used. Defaults to false (combobox) and true (peoplepicker)
+   */
+  multiSelect?: boolean
+  /**
+   * Whether own options can be added. Only when combobox is used. Defaults to false
+   */
+  allowFreeform?: boolean
   /**
    * Dropdown custom options render method.
    */
@@ -35,6 +44,18 @@ export interface ICustomCollectionField {
    * Input placeholder text.
    */
   placeholder?: string;
+  /**
+   * Minimum users to be selected. Only when people picker is used.
+   */
+  minimumUsers?: number;
+    /**
+   * The message to be displayed when minimum users is not met. Only when people picker is used. If omitted, the default value is displayed
+   */
+  minimumUsersMessage?: string;
+  /**
+   * Maximum users to be selected. Only when people picker is used.
+   */
+  maximumUsers?: number;
   /**
    * Default value for the field
    */
@@ -50,7 +71,7 @@ export interface ICustomCollectionField {
    * - If valid, it returns empty string.
    * - If invalid, the field will show a red border
    */
-  onGetErrorMessage?: (value: any, index: number, currentItem: any) => string | Promise<string>; // eslint-disable-line @typescript-eslint/no-explicit-any
+   onGetErrorMessage?: (value: any, index: number, currentItem: any) => string | Promise<string>; // eslint-disable-line @typescript-eslint/no-explicit-any
 
   /**
    * Custom field rendering support
@@ -72,6 +93,8 @@ export enum CustomCollectionFieldType {
   number,
   boolean,
   dropdown,
+  combobox,
+  peoplepicker,
   fabricIcon,
   url,
   custom

src/controls/fieldCollectionData/IFieldCollectionData.ts

@@ -1,3 +1,4 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base";
 import { ICustomCollectionField } from "./ICustomCollectionField";
 import { IPanelProps } from "office-ui-fabric-react";
 
@@ -80,6 +81,19 @@ export interface IFieldCollectionDataProps {
   executeFiltering?: (searchFilter: string, item: any) => boolean; // eslint-disable-line @typescript-eslint/no-explicit-any
 
   onChanged: (value: any[]) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
+  /**
+   * Used for CustomCollectionFieldType peoplepicker 
+   */
+  context?: BaseComponentContext;
+  /**
+   * Show the collectionDataViewer inside the panel, defaults to true 
+   */
+  usePanel?: boolean;
+  /**
+   * The message when no data is added
+   */
+  noDataMessage?: string;
+
 }
 
 export interface IFieldCollectionDataState {