Merge branch 'dev' into patch-fieldcollectiondata

CHANGELOG.json

@@ -4,13 +4,27 @@
       "version": "3.16.0",
       "changes": {
         "new": [
+          "`ViewPicker`: new control ViewPicker [#1439](https://github.com/pnp/sp-dev-fx-controls-react/issues/1439)"
         ],
         "enhancements": [
+          "`FieldCollectionData`: render on page instead of panel and added combobox and peoplepicker controls [#1588](https://github.com/pnp/sp-dev-fx-controls-react/pull/1588)"
         ],
         "fixes": [
+          "`AccessibleAccordion`: fix typo in documentation [#1634](https://github.com/pnp/sp-dev-fx-controls-react/pull/1634)",
+          "`DynamicForm`: fix issue with MultiChoice field [#1510](https://github.com/pnp/sp-dev-fx-controls-react/issues/1510)",
+          "`Localization`: Update dutch translations [#1635](https://github.com/pnp/sp-dev-fx-controls-react/issues/1635)",
+          "`TaxonomyPicker`: suggested item contains double termset name [#1597](https://github.com/pnp/sp-dev-fx-controls-react/issues/1597)",
+          "`DynamicForm`: DynamicForm does not properly handle NULL default values for Taxonomy fields [#1267](https://github.com/pnp/sp-dev-fx-controls-react/issues/1267)",
+          "`DynamicForm`: DynamicForm errors when submitting blank Taxonomy field values [#1268](https://github.com/pnp/sp-dev-fx-controls-react/issues/1268)"
         ]
       },
       "contributions": [
+        "[Guido Zambarda](https://github.com/GuidoZam)",
+        "[Michaël Maillot](https://github.com/michaelmaillot)",
+        "[Nils Andresen](https://github.com/nils-a)",
+        "[Nishkalank Bezawada](https://github.com/NishkalankBezawada)",
+        "[Rico van de Ven](https://github.com/RicoNL)",
+        "[wuxiaojun514](https://github.com/wuxiaojun514)"
       ]
     },
     {

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Releases
 
+## 3.16.0
+
+### New control(s)
+
+- `ViewPicker`: new control ViewPicker [#1439](https://github.com/pnp/sp-dev-fx-controls-react/issues/1439)
+
+### Enhancements
+
+- `FieldCollectionData`: render on page instead of panel and added combobox and peoplepicker controls [#1588](https://github.com/pnp/sp-dev-fx-controls-react/pull/1588)
+
+### Fixes
+
+- `AccessibleAccordion`: fix typo in documentation [#1634](https://github.com/pnp/sp-dev-fx-controls-react/pull/1634)
+- `DynamicForm`: fix issue with MultiChoice field [#1510](https://github.com/pnp/sp-dev-fx-controls-react/issues/1510)
+- `Localization`: Update dutch translations [#1635](https://github.com/pnp/sp-dev-fx-controls-react/issues/1635)
+- `TaxonomyPicker`: suggested item contains double termset name [#1597](https://github.com/pnp/sp-dev-fx-controls-react/issues/1597)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Nils Andresen](https://github.com/nils-a), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Rico van de Ven](https://github.com/RicoNL), [wuxiaojun514](https://github.com/wuxiaojun514).
+
 ## 3.15.0
 
 ### New control(s)

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,26 @@
 # Releases
 
+## 3.16.0
+
+### New control(s)
+
+- `ViewPicker`: new control ViewPicker [#1439](https://github.com/pnp/sp-dev-fx-controls-react/issues/1439)
+
+### Enhancements
+
+- `FieldCollectionData`: render on page instead of panel and added combobox and peoplepicker controls [#1588](https://github.com/pnp/sp-dev-fx-controls-react/pull/1588)
+
+### Fixes
+
+- `AccessibleAccordion`: fix typo in documentation [#1634](https://github.com/pnp/sp-dev-fx-controls-react/pull/1634)
+- `DynamicForm`: fix issue with MultiChoice field [#1510](https://github.com/pnp/sp-dev-fx-controls-react/issues/1510)
+- `Localization`: Update dutch translations [#1635](https://github.com/pnp/sp-dev-fx-controls-react/issues/1635)
+- `TaxonomyPicker`: suggested item contains double termset name [#1597](https://github.com/pnp/sp-dev-fx-controls-react/issues/1597)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Nils Andresen](https://github.com/nils-a), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Rico van de Ven](https://github.com/RicoNL), [wuxiaojun514](https://github.com/wuxiaojun514).
+
 ## 3.15.0
 
 ### New control(s)

docs/documentation/docs/controls/AdaptiveCardDesignerHost.md

@@ -30,11 +30,13 @@ Here is an example of the control in action inside a Web Part:
 * Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
 
 * In your component file, import the `AdaptiveCardDesignerHost` control as follows:
+
 ```Typescript  
 import { AdaptiveCardDesignerHost, HostContainer, BindingPreviewMode, Versions } from "@pnp/spfx-controls-react/lib/AdaptiveCardDesignerHost";
 ```
 
 - Example on use the `AdaptiveCardDesignerHost` control with only required properties:
+
 ```Typescript
 <AdaptiveCardDesignerHost
   headerText="Adaptive Card Designer"
@@ -45,6 +47,7 @@ import { AdaptiveCardDesignerHost, HostContainer, BindingPreviewMode, Versions }
 ```
 
 - Example on use the `AdaptiveCardDesignerHost` control with all properties:
+
 ```Typescript
 <AdaptiveCardDesignerHost
   headerText="Adaptive Card Designer"
@@ -72,6 +75,7 @@ import { AdaptiveCardDesignerHost, HostContainer, BindingPreviewMode, Versions }
   snippets={snippets}
 />
 ```
+
 ## Implementation
 
 The `AdaptiveCardDesignerHost` control can be configured with the following properties:

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 | BaseComponentContext | 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 (only useful within webpart) | 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 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)

docs/documentation/docs/controls/ViewPicker.md

@@ -0,0 +1,74 @@
+# ViewPicker control
+
+This control allows you to select available views from lists/libraries of the current site.
+
+Here is an example of the control:
+
+![ViewPicker initial](../assets/ViewPicker1.PNG)
+
+`ViewPicker` single selection mode:
+
+![ViewPicker single selection](../assets/ViewPicker2.png)
+
+`ViewPicker` multi selection mode:
+
+![ViewPicker multi selection](../assets/ViewPicker-multi.png) 
+
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+
+```TypeScript
+import { ViewPicker } from "@pnp/spfx-controls-react/lib/ViewPicker";
+```
+
+- Use the `ViewPicker` control in your code as follows:
+
+```TypeScript
+    <ViewPicker context={this.props.context}
+        listId={"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9"}
+        placeholder={'Select list view(s)'}
+        orderBy={orderBy.Title}
+        multiSelect={true}
+        onSelectionChanged={this.onViewPickerChange} />
+```
+
+- The `onSelectionChanged` change event returns the selected view(s) and can be implemented as follows in your webpart:
+
+```TypeScript
+  private onViewPickerChange = (views: string | string[]) => {
+    console.log("Views:", views);
+  }
+```
+
+
+## Implementation
+
+The `ViewPicker` control can be configured with the following properties
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. |
+| className | string | no | If provided, additional class name to provide on the dropdown element. |
+| disabled | boolean | no | Whether or not the view picker control is disabled. |
+| filter | string | no | Filter views from Odata query. |
+| label | string | no | Label to use for the control. |
+| listId | string | no | The List Id of the list. |
+| placeholder | string | no | Placeholder label to show in the dropdown. |
+| orderBy | Enum | no | How to order the set of views (By ID or Title). |
+| selectedView | string OR string[] | no | Keys(View Ids) of the selected item(s). If you provide this, you must maintain selection state by observing onSelectionChanged events and passing a new value in when changed. |
+| multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default to `false`. |
+| showBlankOption | boolean | no | Whether or not to show a blank option. Default to `false`. |
+| viewsToExclude | string[] | no | Defines view titles which should be excluded from the view picker control. |
+| webAbsoulteUrl | string | no | Absolute Web Url of target site (user requires permissions) |
+| onSelectionChanged | (newValue: string OR string[]): void | no | Callback function when the selected option changes. |
+
+Enum `orderBy`
+
+| Value |
+| ---- |
+| Id |
+| Title |

docs/documentation/docs/index.md

@@ -61,7 +61,7 @@ telemetry.optOut();
 
 The following controls are currently available:
 
-- [AccessibleAccordion](./controls/AccessibleAccordion) (Control to render an accordion. React `AccessibleAccourdion`-based implementation)
+- [AccessibleAccordion](./controls/AccessibleAccordion) (Control to render an accordion. React `AccessibleAccordion`-based implementation)
 - [Accordion](./controls/Accordion) (Control to render an accordion)
 - [AdaptiveCardHost](./controls/AdaptiveCardHost.md) (Control to render Adaptive Cards)
 - [AdaptiveCardDesignerHost](./controls/AdaptiveCardDesignerHost.md) (Control to render Adaptive Cards Designer)

src/ViewPicker.ts

@@ -0,0 +1 @@
+export * from './controls/viewPicker/index';

src/common/SPEntities.ts

@@ -206,3 +206,15 @@ export interface IUploadImageResult {
   ServerRelativeUrl: string;
   UniqueId: string;
 }
+
+export interface ISPView {
+    Id: string;
+    Title: string;
+}
+
+  /**
+ * Defines a collection of SharePoint list views
+ */
+export interface ISPViews {
+    value: ISPView[];
+}

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "3.15.0";
+export const version: string = "3.16.0";

src/controls/dynamicForm/DynamicForm.tsx

@@ -255,8 +255,8 @@ export class DynamicForm extends React.Component<
           } else if (fieldType === "TaxonomyFieldType") {
             objects[columnInternalName] = {
               __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
-              Label: value[0].name,
-              TermGuid: value[0].key,
+              Label: value[0]?.name ?? "",
+              TermGuid: value[0]?.key ?? "11111111-1111-1111-1111-111111111111",
               WssId: "-1",
             };
           } else if (fieldType === "TaxonomyFieldTypeMulti") {
@@ -414,6 +414,7 @@ export class DynamicForm extends React.Component<
   // trigger when the user change any value in the form
   private onChange = async (
     internalName: string,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     newValue: any,
     additionalData?: FieldChangeAdditionalData
   ): Promise<void> => {
@@ -774,6 +775,7 @@ export class DynamicForm extends React.Component<
     listId: string,
     contentTypeId: string | undefined,
     webUrl?: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): Promise<any> => {
     // eslint-disable-line @typescript-eslint/no-explicit-any
     try {

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -22,6 +22,7 @@ import { IPickerTerms, TaxonomyPicker } from '../../taxonomyPicker';
 import styles from '../DynamicForm.module.scss';
 import { IDynamicFieldProps } from './IDynamicFieldProps';
 import { IDynamicFieldState } from './IDynamicFieldState';
+import { isArray } from 'lodash';
 
 
 export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFieldState> {
@@ -646,14 +647,16 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
 
     try {
       let selectedItemArr;
+
       if (changedValue === null && this.props.fieldDefaultValue !== null) {
         selectedItemArr = [];
         this.props.fieldDefaultValue.forEach(element => {
           selectedItemArr.push(element);
         });
       }
-      else
-        selectedItemArr = !changedValue ? [] : changedValue;
+      else {
+        selectedItemArr = !changedValue ? [] : isArray(changedValue) ? changedValue : [ changedValue ];
+      }
 
       if (item.selected) {
         selectedItemArr.push(item.key);

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;
   }
 }