search

pnp / sp-dev-fx-property-controls

Reusable SPFx property pane controls - Open source initiative
https://pnp.github.io/sp-dev-fx-property-controls/
MIT License
233 stars 151 forks source link

[New Property Control] - PropertyFieldContentTypePicker - Fixes 598 #611

Closed NishkalankBezawada closed 2 months ago

NishkalankBezawada commented 2 months ago
Q A
Bug fix? [ ]
New feature? [x]
New sample? [ ]
Related issues? fixes #598

What's in this Pull Request?

New Property Control - PropertyFieldContentTypePicker - Fixing #598

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:

image

How to use this control in your solutions

  1. Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
  2. Import the following modules to your component:
import { PropertyFieldContentTypePicker, PropertyFieldContentTypePickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldContentTypePicker';

  1. You'll probably want to use this control in combination with the PropertyFieldListPicker. 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:

    export interface IPropertyControlsTestWebPartProps {
list: string; // Stores the list ID
}

  2. Create a new property for your web part, as indicated between the BEGIN: and END: comments below:

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
}
  1. Add the custom property control to the groupFields of the web part property pane configuration:
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'
})
  1. To fetch the contentTypes of a particular site, change the property pane configuration as follows:
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'
})

contentTypes-for-Site

  1. To fetch the contentTypes of selected list, change the property pane configuration as follows:
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'
})
contentTypePicker1
  1. If ListID specified in the propertiesc is not available in the selected site, the control will error out as follows 
    
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'
})

<img width="148" alt="contentTypePicker-Error" src="https://github.com/pnp/sp-dev-fx-property-controls/assets/47456098/9f4f2571-3f97-44ee-a0f1-bed8077f07d1">

## 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)

Thanks,
Nishkalank Bezawada