Merge pull request #611 from NishkalankBezawada/feature/ContentTypePi…

…cker

[New Property Control] - PropertyFieldContentTypePicker - Fixes 598

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Releases
 
+## 3.17.0
+
+### Enhancements
+
+- `fast-serve`: ast-serve update to match the most recent changes. [#606](https://github.com/pnp/sp-dev-fx-property-controls/pull/606)
+
+### Contributors
+
+Special thanks to our contributor: [Sergei Sergeev](https://github.com/s-KaiNet).
+
 ## 3.16.0
 
 ### Enhancements

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

@@ -1,5 +1,15 @@
 # Releases
 
+## 3.17.0
+
+### Enhancements
+
+- `fast-serve`: ast-serve update to match the most recent changes. [#606](https://github.com/pnp/sp-dev-fx-property-controls/pull/606)
+
+### Contributors
+
+Special thanks to our contributor: [Sergei Sergeev](https://github.com/s-KaiNet).
+
 ## 3.16.0
 
 ### Enhancements

docs/documentation/docs/controls/PropertyFieldContentTypePicker.md

@@ -0,0 +1,146 @@
+# PropertyFieldContentTypePicker control
+
+This control generates a ContentType picker field that can be used in the property pane of your SharePoint Framework web parts.
+
+The control automatically retrieves the ContentType for a given SharePoint Site or selected SharePoint list:
+
+![ContentType picker](../assets/contentTypePicker.png)
+
+## How to use this control in your solutions
+
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../../#getting-started) page for more information about installing the dependency.
+2. Import the following modules to your component:
+
+```TypeScript
+import { PropertyFieldContentTypePicker, PropertyFieldContentTypePickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldContentTypePicker';
+```
+
+3. You'll probably want to use this control in combination with the [PropertyFieldListPicker](./PropertyFieldListPicker.md). Make sure to select the `multiSelect` prop to `false`, as this control is designed to work with a single list. Store the list id in your web part properties, as follows:
+```TypeScript
+export interface IPropertyControlsTestWebPartProps {
+  list: string; // Stores the list ID
+}
+```
+
+3. Create a new property for your web part, as indicated between the `BEGIN:` and `END:` comments below:
+
+
+```TypeScript
+export interface IPropertyControlsTestWebPartProps {
+  list: string; // Stores the list ID
+
+  // BEGIN: Added
+  view: string; // Stores the view ID
+  contentType : string // stores the contenttype ID
+  // END: Added
+}
+```
+
+4. Add the custom property control to the `groupFields` of the web part property pane configuration:
+
+```TypeScript
+PropertyFieldContentTypePicker('contentType', {
+  label: 'Select a Content Type',
+  context: this.context,
+  selectedContentType: this.properties.contentType,
+  disabled: false,
+  orderBy: PropertyFieldContentTypeOrderBy.Name,
+  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+  properties: this.properties,
+  onGetErrorMessage: null,
+  deferredValidationTime: 0,
+  key: 'contentTypePickerFieldId'
+})
+
+```
+
+5. To fetch the contentTypes of a particular site, change the property pane configuration as follows:
+
+```TypeScript
+PropertyFieldContentTypePicker('contentType', {
+  label: 'Select a Content Type',
+  context: this.context,
+  selectedContentType: this.properties.contentType,
+  disabled: false,
+  webAbsoluteUrl:"https://****.sharepoint.com/sites/*****",
+  orderBy: PropertyFieldContentTypeOrderBy.Name,
+  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+  properties: this.properties,
+  onGetErrorMessage: null,
+  deferredValidationTime: 0,
+  key: 'contentTypePickerFieldId'
+})
+```
+![ContentType picker for site ](../assets/contentTypes-for-Site.gif)
+
+6. To fetch the contentTypes of selected list, change the property pane configuration as follows:
+
+```TypeScript
+PropertyFieldContentTypePicker('contentType', {
+  label: 'Select a Content Type',
+  context: this.context,
+  selectedContentType: this.properties.contentType,
+  listId: {list-guid} //"0da3b4b7-8ebd-4f15-87ee-afae5cacadad"
+  disabled: false,
+  orderBy: PropertyFieldContentTypeOrderBy.Name,
+  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+  properties: this.properties,
+  onGetErrorMessage: null,
+  deferredValidationTime: 0,
+  key: 'contentTypePickerFieldId'
+})
+
+```
+
+![ContentType picker for selected list ](../assets/contentTypePicker1.png)
+
+7. If ListID specified in the propertiesc is not available in the selected site, the control will error out as follows
+```TypeScript
+PropertyFieldContentTypePicker('contentType', {
+  label: 'Select a Content Type',
+  context: this.context,
+  selectedContentType: this.properties.contentType,
+  listId: {list-guid} //"0da3b4b7-8ebd-4f15-87ee-afae5cacadad"
+  disabled: false,
+  orderBy: PropertyFieldContentTypeOrderBy.Name,
+  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+  properties: this.properties,
+  onGetErrorMessage: null,
+  deferredValidationTime: 0,
+  key: 'contentTypePickerFieldId'
+})
+
+```
+![ContentType picker Error ](../assets/contentTypePicker-Error.png)
+
+## Implementation
+
+The `PropertyFieldContentTypePicker` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| label | string | yes | Property field label displayed on top. |
+| listId | string | no | The ID of the list or library you wish to select a contentType from. |
+| disabled | boolean | no | Specify if the control needs to be disabled. |
+| context | BaseComponentContext | yes | Context of the current web part. |
+| selectedContentType | string | string[] | no | IDefines ContentType titles which should be excluded from the ContentType picker control. |
+| orderBy | PropertyFieldContentTypeOrderBy | no | Specify the property on which you want to order the retrieve set of ContentTypes. |
+| webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions) |
+| onPropertyChange | function | yes | Defines a onPropertyChange function to raise when the date gets changed. |
+| properties | any | yes | Parent web part properties, this object is use to update the property value.  |
+| key | string | yes | An unique key that indicates the identity of this control. |
+| onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. |
+| deferredValidationTime | number | no | Control will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default value is 200. |
+| contentTypesToExclude | string[] | no | Defines contentTypes by which should be excluded from the contentType picker control. You can specify contentType titles or IDs |
+| filter | string | no | Filter contentTypes from OData query. |
+| onContentTypesRetrieved | (contentType: ISPContentType[]) => PromiseLike<ISPContentType[]> \| ISPContentType[] | no | Callback that is called before the dropdown is populated. |
+
+
+Enum `PropertyFieldContentTypePickerOrderBy`
+
+| Name | Description |
+| ---- | ---- |
+| Id | Sort by contentType ID |
+| Title | Sort by contentType title |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyFieldContentTypePicker)

fast-serve/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
+  "cli": {
+    "isLibraryComponent": false
+  }
+}

fast-serve/webpack.extend.js

@@ -0,0 +1,31 @@
+/*
+* User webpack settings file. You can add your own settings here.
+* Changes from this file will be merged into the base webpack configuration file.
+* This file will not be overwritten by the subsequent spfx-fast-serve calls.
+*/
+
+/**
+ * you can add your project related webpack configuration here, it will be merged using webpack-merge module
+ * i.e. plugins: [new webpack.Plugin()]
+ */
+const webpackConfig = {
+
+}
+
+/**
+ * For even more fine-grained control, you can apply custom webpack settings using below function
+ * @param {object} initialWebpackConfig - initial webpack config object
+ * @param {object} webpack - webpack object, used by SPFx pipeline
+ * @returns webpack config object
+ */
+const transformConfig = function (initialWebpackConfig, webpack) {
+  // transform the initial webpack config here, i.e.
+  // initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
+
+  return initialWebpackConfig;
+}
+
+module.exports = {
+  webpackConfig,
+  transformConfig
+}

package.json

@@ -9,7 +9,7 @@
     "build": "gulp build",
     "clean": "gulp clean",
     "test": "gulp test",
-    "serve": "fast-serve",
+    "serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve",
     "versionUpdater": "gulp versionUpdater",
     "prepublishOnly": "gulp",
     "changelog": "node scripts/create-changelog.js && node scripts/sync-changelogs.js && gulp versionUpdater",
@@ -69,7 +69,7 @@
     "husky": "^6.0.0",
     "request-promise": "4.2.6",
     "sonarqube-scanner": "2.8.2",
-    "spfx-fast-serve-helpers": "1.18.11",
+    "spfx-fast-serve-helpers": "~1.18.0",
     "typescript": "4.7.4",
     "uuid": "^9.0.1"
   },
@@ -94,4 +94,4 @@
   "main": "lib/index.js",
   "maintainers": [],
   "contributors": []
-}
+}

src/PropertyFieldContentTypePicker.ts

@@ -0,0 +1,2 @@
+export * from './propertyFields/contentTypePicker/index';
+export * from './propertyFields/contentTypePicker/index';

src/propertyFields/contentTypePicker/IPropertyFieldContentTypePicker.ts

@@ -0,0 +1,127 @@
+import { IPropertyPaneCustomFieldProps } from '@microsoft/sp-property-pane';
+import { BaseComponentContext } from '@microsoft/sp-component-base';
+import { ISPContentType } from './ISPContentType';
+
+
+/**
+ * Enum for specifying how the ContentTypes should be sorted
+ */
+export enum PropertyFieldContentTypeOrderBy {
+  Id = 1,
+  Name
+}
+
+/**
+ * Public properties of the PropertyFieldContentTypePicker custom field
+ */
+export interface IPropertyFieldContentTypePickerProps {
+  /**
+   * Context of the current web part
+   */
+  context: BaseComponentContext;
+
+  /**
+   * Custom Field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
+   * Default value is 200.
+   */
+  deferredValidationTime?: number;
+
+  /**
+   * Whether the property pane field is enabled or not.
+   */
+  disabled?: boolean;
+
+  /**
+   * Filter ContentTypes from Odata query
+   */
+  filter?: string;
+
+  /**
+   * An UNIQUE key indicates the identity of this control
+   */
+  key?: string;
+
+  /**
+   * Property field label displayed on top
+   */
+  label: string;
+  /**
+   * The List Id of the list where you want to get the ContentTypes
+   */
+  listId?: string;
+
+  /**
+   * Specify the property on which you want to order the retrieve set of ContentTypes.
+   */
+  orderBy?: PropertyFieldContentTypeOrderBy;
+
+  /**
+   * Parent Web Part properties
+   */
+  properties: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  /**
+   * Initial selected ContentType of the control
+   */
+  selectedContentType?: string | string[];
+
+  /**
+   * Defines ContentType titles which should be excluded from the ContentType picker control
+   */
+  contentTypesToExclude?: string[];
+
+  /**
+   * Absolute Web Url of target site (user requires permissions)
+   */
+  webAbsoluteUrl?: string;
+
+  /**
+   * The method is used to get the validation error message and determine whether the input value is valid or not.
+   *
+   *   When it returns string:
+   *   - If valid, it returns empty string.
+   *   - If invalid, it returns the error message string and the text field will
+   *     show a red border and show an error message below the text field.
+   *
+   *   When it returns Promise<string>:
+   *   - The resolved value is display as error message.
+   *   - The rejected, the value is thrown away.
+   *
+   */
+  onGetErrorMessage?: (value: string) => string | Promise<string>;
+  /**
+   * Defines a onPropertyChange function to raise when the selected value changed.
+   * Normally this function must be always defined with the 'this.onPropertyChange'
+   * method of the web part object.
+   */
+  onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void; // eslint-disable-line @typescript-eslint/no-explicit-any
+  /**
+    * Callback that is called before the dropdown is populated
+    */
+  onContentTypesRetrieved?: (contentTypes: ISPContentType[]) => PromiseLike<ISPContentType[]> | ISPContentType[];
+}
+
+/**
+ * Private properties of the PropertyFieldContentTypePicker custom field.
+ * We separate public & private properties to include onRender & onDispose method waited
+ * by the PropertyFieldCustom, without asking to the developer to add it when he's using
+ * the PropertyFieldContentTypePicker.
+ */
+export interface IPropertyFieldContentTypePickerPropsInternal extends IPropertyFieldContentTypePickerProps, IPropertyPaneCustomFieldProps {
+  context: BaseComponentContext;
+  deferredValidationTime?: number;
+  disabled?: boolean;
+  filter?: string;
+  orderBy?: PropertyFieldContentTypeOrderBy;
+  key: string;
+  label: string;
+  listId?: string;
+  properties: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  selectedContentType?: string;
+  targetProperty: string;
+  contentTypesToExclude?: string[];
+  webAbsoluteUrl?: string;
+  onGetErrorMessage?: (value: string | string[]) => string | Promise<string>;
+  onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void; // eslint-disable-line @typescript-eslint/no-explicit-any
+  onContentTypesRetrieved?: (contentTypes: ISPContentType[]) => PromiseLike<ISPContentType[]> | ISPContentType[];
+}