Merge pull request #940 from pnp/v2-dev

Merge for 2.8.0

CHANGELOG.JSON

@@ -1,5 +1,29 @@
 {
   "versions": [
+    {
+      "version": "2.8.0",
+      "changes": {
+        "new": [
+          "`DynamicForm`: New Control: Dynamic form [#878](https://github.com/pnp/sp-dev-fx-controls-react/issues/878)",
+          "`LocationPicker`: New Control - Location Picker [#915](https://github.com/pnp/sp-dev-fx-controls-react/issues/915)"
+        ],
+        "enhancements": [
+          "`ComboBoxListItemPicker` and `ListItemPicker`: Add label to control [#910](https://github.com/pnp/sp-dev-fx-controls-react/pull/910)",
+          "`PeoplePicker`: new property `groupId`. [#917](https://github.com/pnp/sp-dev-fx-controls-react/pull/917)"
+        ],
+        "fixes": [
+          "`SitePicker`: `SitePicker` does not display initial sites until you click the dropdown to select [#895](https://github.com/pnp/sp-dev-fx-controls-react/issues/895)",
+          "`FilePicker`: invalid CSS: relative in quotes. [#930](https://github.com/pnp/sp-dev-fx-controls-react/pull/930)",
+          "`FieldCollectionData`: FieldCollectionData is not setting sortIdx on resulting collection when using 'Add and Save' [#929](https://github.com/pnp/sp-dev-fx-controls-react/issues/929)"
+        ]
+      },
+      "contributions": [
+        "[Nikolay Belykh](https://github.com/nbelyh)",
+        "[Patrik Hellgren](https://github.com/patrikhellgren)",
+        "[Peter Paul Kirschner](https://github.com/petkir)",
+        "[Ravichandran Krishnasamy](https://github.com/ravichandran-blog)"
+      ]
+    },
     {
       "version": "2.7.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Releases
 
+## 2.8.0
+
+### New control(s)
+
+- `DynamicForm`: New Control: Dynamic form [#878](https://github.com/pnp/sp-dev-fx-controls-react/issues/878)
+- `LocationPicker`: New Control - Location Picker [#915](https://github.com/pnp/sp-dev-fx-controls-react/issues/915)
+
+### Enhancements
+
+- `ComboBoxListItemPicker` and `ListItemPicker`: Add label to control [#910](https://github.com/pnp/sp-dev-fx-controls-react/pull/910)
+- `PeoplePicker`: new property `groupId`. [#917](https://github.com/pnp/sp-dev-fx-controls-react/pull/917)
+
+### Fixes
+
+- `SitePicker`: `SitePicker` does not display initial sites until you click the dropdown to select [#895](https://github.com/pnp/sp-dev-fx-controls-react/issues/895)
+- `FilePicker`: invalid CSS: relative in quotes. [#930](https://github.com/pnp/sp-dev-fx-controls-react/pull/930)
+- `FieldCollectionData`: FieldCollectionData is not setting sortIdx on resulting collection when using 'Add and Save' [#929](https://github.com/pnp/sp-dev-fx-controls-react/issues/929)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Nikolay Belykh](https://github.com/nbelyh), [Patrik Hellgren](https://github.com/patrikhellgren), [Peter Paul Kirschner](https://github.com/petkir), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog).
+
 ## 2.7.0
 
 ### New control(s)

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

@@ -1,5 +1,27 @@
 # Releases
 
+## 2.8.0
+
+### New control(s)
+
+- `DynamicForm`: New Control: Dynamic form [#878](https://github.com/pnp/sp-dev-fx-controls-react/issues/878)
+- `LocationPicker`: New Control - Location Picker [#915](https://github.com/pnp/sp-dev-fx-controls-react/issues/915)
+
+### Enhancements
+
+- `ComboBoxListItemPicker` and `ListItemPicker`: Add label to control [#910](https://github.com/pnp/sp-dev-fx-controls-react/pull/910)
+- `PeoplePicker`: new property `groupId`. [#917](https://github.com/pnp/sp-dev-fx-controls-react/pull/917)
+
+### Fixes
+
+- `SitePicker`: `SitePicker` does not display initial sites until you click the dropdown to select [#895](https://github.com/pnp/sp-dev-fx-controls-react/issues/895)
+- `FilePicker`: invalid CSS: relative in quotes. [#930](https://github.com/pnp/sp-dev-fx-controls-react/pull/930)
+- `FieldCollectionData`: FieldCollectionData is not setting sortIdx on resulting collection when using 'Add and Save' [#929](https://github.com/pnp/sp-dev-fx-controls-react/issues/929)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Nikolay Belykh](https://github.com/nbelyh), [Patrik Hellgren](https://github.com/patrikhellgren), [Peter Paul Kirschner](https://github.com/petkir), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog).
+
 ## 2.7.0
 
 ### New control(s)

docs/documentation/docs/controls/ComboBoxListItemPicker.md

@@ -122,5 +122,6 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
 | multiSelect | boolean | no | Allows multiple selection|
 | onInitialized | () => void | no | Calls when component is ready|
 | itemLimit | number | no | Maximum number of items to be displayed in the combobox. Default: 100 |
+| label | string | no | Specifies the text describing the combobox ListItemPicker. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ComboBoxListItemPicker)

docs/documentation/docs/controls/DynamicForm.md

@@ -0,0 +1,43 @@
+# Dynamic Form
+
+This control can dynamically generate SharePoint list or SharePoint document library form and everything controlled through list setting.
+
+## 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 following modules to your component:
+
+```TypeScript
+import { DynamicForm } from "fx-controls-react/lib/DynamicForm";
+```
+
+- Use the DynamicForm control in your code as follows:
+
+```jsx
+<DynamicForm 
+          context={this.props.context} 
+          listId={"3071c058-549f-461d-9d73-8b9a52049a80"}  
+          listItemId={1}>
+          onCancelled={() => { console.log('Cancelled') }}
+          onBeforeSubmit={(async listItem) => { return true; }}
+          onSubmitError={(listItem, error) => { alert(error.message); }}
+          onSubmitted={async (listItemData) => { console.log(listItemData); }}>
+</DynamicForm>
+```
+![DynamicForm](../assets/DynamicForm.png)
+
+## Implementation
+
+The `DynamicForm` can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext or ExtensionContext  | yes | The context object of the SPFx loaded webpart or customizer. |
+| listId | string | yes | Guid of the list.|
+| listItemId | number | no | list item ID. |
+| contentTypeId | string | no | content type ID |
+| disabled | boolean | no | Option allow to be enable or disable. Default value is `false`|
+| onBeforeSubmit | (listItemData: any) => Promise&lt;boolean&gt; | no | Before submit handler. Allows to modify the object to be submitted or cancel the submission. |
+| onSubmitted | (listItem: any) => void | no | Method that returns listItem data JSON object. |
+| onSubmitError | (listItemData: any, error: Error) => void | no | Handler of submission error. |
+| onCancelled | () => void | no | Handler when form has been cancelled. |

docs/documentation/docs/controls/ListItemPicker.md

@@ -64,5 +64,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | 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 |
+| label | string | no | Specifies the text describing the ListItemPicker. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

docs/documentation/docs/controls/LocationPicker.md

@@ -0,0 +1,74 @@
+# Location Picker
+
+
+
+This control allows you to search and select the Location, also allows enter a custom location.
+
+
+## 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 following modules to your component:
+
+
+
+```TypeScript
+
+import { LocationPicker,ILocationPickerItem } from  "fx-controls-react/lib/LocationPicker";
+
+```
+
+
+
+- Use the LocationPicker control in your code as follows:
+
+
+
+```jsx
+
+<LocationPicker
+          context={this.props.context}
+          label="Location"
+          onSelectionChanged={(locValue: ILocationPickerItem) => {
+            console.log(locValue.DisplayName + ", " + locValue.Address.Street)
+          }
+          }/>
+
+
+```
+
+| *Location searching mode* |
+|:--:| 
+|![Location Picker search](../assets/location1.png)|
+
+| *Entering into edit mode* |
+|:--:| 
+|![Location Picker Edit](../assets/location2.png)|
+
+| *Readonly mode* |
+|:--:| 
+|![Location Picker Read](../assets/location3.png)|
+
+
+
+## Implementation
+
+
+
+The `LocationPicker` can be configured with the following properties:
+
+
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext or ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
+| disabled | boolean | no | Option allows to be enable or disable. Default value is `false`|
+| defaultValue | ILocationPickerItem | no | Option allows set default value|
+| errorMessage | string  | no | Static error message displayed below the picker.|
+| className | string  | no | Applies custom styling |
+| label | string  | no | Label to use for the control. |
+| placeholder | string  | no | Placeholder label to show in the dropdown. |
+| onChange | (locItem: ILocationPickerItem) => void | no | The method that returns location data JSON object. |

docs/documentation/docs/controls/PeoplePicker.md

@@ -57,7 +57,8 @@ The People picker control can be configured with the following properties:
 | ---- | ---- | ---- | ---- | ---- |
 | context | WebPartContext | yes | Context of the current web part. | |
 | titleText | string | no | Text to be displayed on the control | |
-| groupName | string | no | group from which users are fetched. Leave it blank if need to filter all users | _none_ |
+| groupName | string | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupName and groupId specified groupName takes precedence. | _none_ |
+| groupId | number | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupId and groupName specified groupName takes precedence. | _none_ |
 | personSelectionLimit | number | no | Defines the limit of people that can be selected in the control | 1 |
 | required | boolean | no | Set if the control is required or not | false |
 | disabled | boolean | no | Set if the control is disabled or not | false |

docs/documentation/docs/index.md

@@ -61,6 +61,7 @@ The following controls are currently available:
 - [Dashboard](./controls/Dashboard) (Control to render dashboard in Microsoft Teams)
 - [DragDropFiles](./controls/DragDropFiles) (Allow drag and drop of files in selected areas)
 - [DateTimePicker](./controls/DateTimePicker) (DateTime Picker)
+- [DynamicForm](./controls/DynamicForm) (Dynamic Form component)
 - [FieldCollectionData](./controls/FieldCollectionData) (control gives you the ability to insert a list / collection data which can be used in your web part / application customizer)
 - [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places)
 - [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application)

docs/documentation/mkdocs.yml

@@ -27,6 +27,7 @@ nav:
     - Dashboard: 'controls/Dashboard.md'
     - DateTimePicker: 'controls/DateTimePicker.md'
     - DragDropFiles: 'controls/DragDropFiles.md'
+    - DynamicForm: 'controls/DynamicForm.md'
     - FieldCollectionData: 'controls/FieldCollectionData.md'
     - FilePicker: 'controls/FilePicker.md'
     - FileTypeIcon: 'controls/FileTypeIcon.md'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "engines": {
     "node": ">=10"
   },
@@ -28,7 +28,7 @@
     "@microsoft/sp-lodash-subset": "1.11.0",
     "@microsoft/sp-office-ui-fabric-core": "1.11.0",
     "@microsoft/sp-webpart-base": "1.11.0",
-    "@pnp/sp": "2.0.6",
+    "@pnp/sp": "2.5.0",
     "@pnp/telemetry-js": "2.0.0",
     "@uifabric/icons": "7.3.0",
     "animate.css": "^4.1.1",

src/DynamicForm.ts

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

src/LocationPicker.ts

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

src/common/SPEntities.ts

@@ -169,3 +169,9 @@ export interface ICultureInfo {
     dateTimeFormat: ICultureDateTimeFormat;
     numberFormat: ICultureNumberFormat;
 }
+
+export interface IUploadImageResult {
+  Name: string;
+  ServerRelativeUrl: string;
+  UniqueId: string;
+}