It is mandatory when triggerPageEvent is used. | | canMovePrev | boolean | no | Property indicates if the previous item button can be clicked. If not provided, status of the button is calculated based on the current index.
It is mandatory when triggerPageEvent is used. | -| buttonsLocation | CarouselButtonsLocation | yes | Specifies the location of the buttons inside the container. | -| buttonsDisplay | CarouselButtonsDisplay | yes | Specifies the buttons container display mode. | +| buttonsLocation | CarouselButtonsLocation | no | Specifies the location of the buttons inside the container. Default: center | +| buttonsDisplay | CarouselButtonsDisplay | no | Specifies the buttons container display mode. Default: block | | containerStyles | ICssInput | no | Allows to specify own styles for carousel container. | | loadingComponentContainerStyles | ICssInput | no | Allows to specify own styles for loading component. | | contentContainerStyles | ICssInput | no | Allows to specify own styles for elements container. | @@ -115,7 +115,7 @@ The Carousel component can be configured with the following properties: | prevButtonIconName | string | no | Name of the icon to be used for PreviousItem button. Default 'ChevronLeft'. | | nextButtonIconName | string | no | Name of the icon to be used for NextItem button. Default 'ChevronRight'. | | triggerPageEvent | (index: number) => void | no | Triggers parent control to provide new element to be displayed. After the method is executed, carousel control switches to processing mode and loadingComponent is displayed. | -| element | JSX.Element \| JSX.Element[] | yes | Fixed array of elemenets to be displayed in carousel - if triggerPageEvent is not used.
In case triggerPageEvent is in use, JSX.Element has to be provided. Elements are distinguished based on the 'key' property. | +| element | JSX.Element \| JSX.Element[] | yes | Fixed array of elements to be displayed in carousel - if triggerPageEvent is not used.
In case triggerPageEvent is in use, JSX.Element has to be provided. Elements are distinguished based on the 'key' property. | | loadingComponent | JSX.Element | no | Allows to inject custom component when the carousel is in processing state. If not provided, Spinner is displayed. | | onMoveNextClicked | (currentIndex: number) => void | no | Callback function called after the next item button is clicked. Not used when triggerPageEvent is specified. | | onMovePrevClicked | (currentIndex: number) => void | no | Callback function called after the previous item button is clicked. Not used when triggerPageEvent is specified. | @@ -134,14 +134,15 @@ The Carousel component can be configured with the following properties: | indicatorsContainerStyles | ICssInput | no | Allows to specify own styles for indicators container when indicatorsDisplay is set to "block" | | prevButtonAriaLabel | string | no | Aria label of the PreviousItem button. Default 'Previous item'. | | nextButtonAriaLabel | string | no | Aria label of the NextItem button. Default 'Next item'. | +| contentHeight | number | no | Allows to specify the height of the content. Can be used instead of providing styles for the content container (`contentContainerStyles`). | enum `CarouselButtonsLocation` Provides options for carousel buttons location. -| Value | Description | -| ---- | ---- | -| top | Buttons are going to be placed in the top of the control. | +| Value | Description | +| ------ | ------------------------------------------------------------ | +| top | Buttons are going to be placed in the top of the control. | | center | Buttons are going to be placed in the center of the control. | | bottom | Buttons are going to be placed in the bottom of the control. | @@ -149,30 +150,30 @@ enum `CarouselButtonsDisplay` Provides options for carousel buttons display mode. -| Value | Description | -| ---- | ---- | -| block | Reserves space for buttons on both sides of the control. | -| buttonsOnly | Only icon buttons are displayed. | -| hidden | Buttons are not displayed. They appear onhover event. | +| Value | Description | +| ----------- | -------------------------------------------------------- | +| block | Reserves space for buttons on both sides of the control. | +| buttonsOnly | Only icon buttons are displayed. | +| hidden | Buttons are not displayed. They appear `onHover` event. | enum `CarouselIndicatorShape` Provides options for carousel indicators' shape. -| Value | Description | -| ---- | ---- | -| circle | Indicators displayed as cirlces | -| square | Indicators displayed as squares | +| Value | Description | +| --------- | ---------------------------------- | +| circle | Indicators displayed as circles | +| square | Indicators displayed as squares | | rectangle | Indicators displayed as rectangles | enum `CarouselIndicatorsDisplay` Provides options for carousel indicators display mode. -| Value | Description | -| ---- | ---- | +| Value | Description | +| ------- | ------------------------------------------------------- | | overlap | Indicators are displayed on top of the carousel content | -| block | Reserves space for indicators | +| block | Reserves space for indicators | Interface `ICarouselImageProps` diff --git a/docs/documentation/docs/controls/ChartControl.md b/docs/documentation/docs/controls/ChartControl.md index 50010d07a..67f55fa8d 100644 --- a/docs/documentation/docs/controls/ChartControl.md +++ b/docs/documentation/docs/controls/ChartControl.md @@ -261,7 +261,7 @@ The ChartControl will automatically expand to fit its container. If you wish to ### Accessibility -As long as you provide labels for all your data elements, the ChartControl will render a hidden table. Users who are visually impaired and use a screen reader will hear a description of the data in the chart. +As long as you provide labels for all your data elements, the ChartControl will render a hidden table. Users who are visually impaired and use a screen reader will hear a description of the data in the chart. You can improve the accessible table by adding an `alternateText`, a `caption` and a `summary`. If you do not provide a `caption`, the control will attempt to use the chart's title. @@ -304,16 +304,16 @@ The ChartControl can be configured with the following properties: | className | string | no | Optional property to specify a custom class that allows you to change the chart's styles. | | data | ChartData | no | The data you wish to display. | | datapromise | Promise
() => JSX.Element | no | The HTML to display while waiting to resolve the `datapromise` | +| loadingtemplate | JSX.Element
() => JSX.Element | no | The HTML to display while waiting to resolve the `datapromise` | | options | ChartOptions | no | Optional property to set the chart's additional options. | -| palette | [ChartPalette](#chartpalette) | no | Optional property to set the desired Office color paette | +| palette | [ChartPalette](#chartpalette) | no | Optional property to set the desired Office color palette | | plugins | object[] | no | Optional property to set an array of objects implementing the IChartPlugin interface | -| rejectedtemplate | JSX.Element
() => JSX.Element | no | The HTML to display if the `datapromise` promise returns an error. -| useTheme | boolean | no | Optional property to set whether the ChartControl should attempt to use theme colors. Setting it to false will use the startard Chart.js colors and fonts. | +| rejectedtemplate | JSX.Element
() => JSX.Element | no | The HTML to display if the `datapromise` promise returns an error. +| useTheme | boolean | no | Optional property to set whether the ChartControl should attempt to use theme colors. Setting it to false will use the standard Chart.js colors and fonts. | | type | [ChartType](#charttype) or string | yes | The type of chart you wish to render. You can also use the string equivalent. | | onClick | (event?: MouseEvent, activeElements?: Array<{}>) => void | no | Optional callback method that get called when a user clicks on the chart | | onHover | (chart: Chart, event: MouseEvent, activeElements: Array<{}>) => void | no | Optional callback method that get called when a user hovers the chart | -| onResize | (chart: Chart, newSize: ChartSize) => void | no | Optional callback method that get called when the window containing the ChartXontrol resizes | +| onResize | (chart: Chart, newSize: ChartSize) => void | no | Optional callback method that get called when the window containing the ChartControl resizes | You can call the following methods to interact with the chart after it has been initialized: @@ -334,17 +334,17 @@ You can call the following methods to interact with the chart after it has been Defines the type of chart that will be rendered. For more information what data structure is required for each type of chart, review the Chart.js documentation ( links below ). -| Name | Chart.js Equivalent | Description | -| ---- | ---- | ---- | -| [Bar](./charts/BarChart.md) | [bar](https://www.chartjs.org/docs/latest/charts/bar.html) | Vertical bar chart | -| [Bubble](./charts/BubbleChart.md) | [bubble](https://www.chartjs.org/docs/latest/charts/bubble.html) | Bubble chart | -| [Doughnut](./charts/DoughnutChart.md) | [doughnut](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Doughnut chart | +| Name | Chart.js Equivalent | Description | +| -------------------------------------------------------- | ----------------------------------------------------------------------------------------- | -------------------- | +| [Bar](./charts/BarChart.md) | [bar](https://www.chartjs.org/docs/latest/charts/bar.html) | Vertical bar chart | +| [Bubble](./charts/BubbleChart.md) | [bubble](https://www.chartjs.org/docs/latest/charts/bubble.html) | Bubble chart | +| [Doughnut](./charts/DoughnutChart.md) | [doughnut](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Doughnut chart | | [HorizontalBar](./charts/BarChart.md#horizontalbarchart) | [horizontalBar](https://www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart) | Horizontal bar chart | -| [Line](./charts/LineChart.md) | [line](https://www.chartjs.org/docs/latest/charts/line.html) | Line chart | -| [Pie](./charts/PieChart.md) | [pie](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Pie chart | -| [PolarArea](./charts/PolarAreaChart.md) | [polarArea](https://www.chartjs.org/docs/latest/charts/polar.html) | Polar area chart | -| [Radar](./charts/RadarChart.md) | [radar](https://www.chartjs.org/docs/latest/charts/radar.html) | Radar chart | -| [Scatter](./charts/ScatterChart.md) | [scatter](https://www.chartjs.org/docs/latest/charts/scatter.html) | Scatter graph | +| [Line](./charts/LineChart.md) | [line](https://www.chartjs.org/docs/latest/charts/line.html) | Line chart | +| [Pie](./charts/PieChart.md) | [pie](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Pie chart | +| [PolarArea](./charts/PolarAreaChart.md) | [polarArea](https://www.chartjs.org/docs/latest/charts/polar.html) | Polar area chart | +| [Radar](./charts/RadarChart.md) | [radar](https://www.chartjs.org/docs/latest/charts/radar.html) | Radar chart | +| [Scatter](./charts/ScatterChart.md) | [scatter](https://www.chartjs.org/docs/latest/charts/scatter.html) | Scatter graph | ### IChartAccessibility @@ -363,25 +363,25 @@ The `IChartAccessibility` interface implements the following properties: Defines one of the possible Office color palette to use in a chart. The color palettes are the same that you find within Office. -| Name | Office Name | Description | Example | -| ---- | ---- | ---- | ---- | -| OfficeColorful1 | Office Colorful Palette 1 | Blue, Orange, Grey, Gold, Blue, Green |  | -| OfficeColorful2 | Office Colorful Palette 2 | Blue, Grey, Blue, Dark Blue, Dark Grey, Dark Blue |  | -| OfficeColorful3 | Office Colorful Palette 3 | Orange, Gold, Green, Brown, Dark Yellow, Dark Green |  | -| OfficeColorful4 | Office Colorful Palette 4 | Green, Blue, Gold, Dark Green, Dark Blue, Dark Yellow |  | -| OfficeMonochromatic1 | Monochromatic Palette 1 | Blue gradient, dark to light |  | -| OfficeMonochromatic2 | Monochromatic Palette 2 | Orange gradient, dark to light |  | -| OfficeMonochromatic3 | Monochromatic Palette 3 | Grey gradient, dark to light |  | -| OfficeMonochromatic4 | Monochromatic Palette 4 | Gold gradient, dark to light |  | -| OfficeMonochromatic5 | Monochromatic Palette 5 | Blue gradient, dark to light |  | -| OfficeMonochromatic6 | Monochromatic Palette 6 | Green gradient, dark to light |  | -| OfficeMonochromatic7 | Monochromatic Palette 7 | Dark Grey, Light Grey, Grey, Dark Grey, Light Grey, Grey |  | -| OfficeMonochromatic8 | Monochromatic Palette 8 | Blue gradient, light to dark |  | -| OfficeMonochromatic9 | Monochromatic Palette 9 | Orange gradient, light to dark |  | -| OfficeMonochromatic10 | Monochromatic Palette 10 | Grey gradient, light to dark |  | -| OfficeMonochromatic11 | Monochromatic Palette 11 | Gold gradient, light to dark |  | -| OfficeMonochromatic12 | Monochromatic Palette 12 | Blue gradient, light to dark |  | -| OfficeMonochromatic13 | Monochromatic Palette 13 | Green gradient, light to dark |  | +| Name | Office Name | Description | Example | +| --------------------- | ------------------------- | -------------------------------------------------------- | ------------------------------------------------------ | +| OfficeColorful1 | Office Colorful Palette 1 | Blue, Orange, Grey, Gold, Blue, Green |  | +| OfficeColorful2 | Office Colorful Palette 2 | Blue, Grey, Blue, Dark Blue, Dark Grey, Dark Blue |  | +| OfficeColorful3 | Office Colorful Palette 3 | Orange, Gold, Green, Brown, Dark Yellow, Dark Green |  | +| OfficeColorful4 | Office Colorful Palette 4 | Green, Blue, Gold, Dark Green, Dark Blue, Dark Yellow |  | +| OfficeMonochromatic1 | Monochromatic Palette 1 | Blue gradient, dark to light |  | +| OfficeMonochromatic2 | Monochromatic Palette 2 | Orange gradient, dark to light |  | +| OfficeMonochromatic3 | Monochromatic Palette 3 | Grey gradient, dark to light |  | +| OfficeMonochromatic4 | Monochromatic Palette 4 | Gold gradient, dark to light |  | +| OfficeMonochromatic5 | Monochromatic Palette 5 | Blue gradient, dark to light |  | +| OfficeMonochromatic6 | Monochromatic Palette 6 | Green gradient, dark to light |  | +| OfficeMonochromatic7 | Monochromatic Palette 7 | Dark Grey, Light Grey, Grey, Dark Grey, Light Grey, Grey |  | +| OfficeMonochromatic8 | Monochromatic Palette 8 | Blue gradient, light to dark |  | +| OfficeMonochromatic9 | Monochromatic Palette 9 | Orange gradient, light to dark |  | +| OfficeMonochromatic10 | Monochromatic Palette 10 | Grey gradient, light to dark |  | +| OfficeMonochromatic11 | Monochromatic Palette 11 | Gold gradient, light to dark |  | +| OfficeMonochromatic12 | Monochromatic Palette 12 | Blue gradient, light to dark |  | +| OfficeMonochromatic13 | Monochromatic Palette 13 | Green gradient, light to dark |  | ### IChartPlugin @@ -397,7 +397,7 @@ If a hook is listed as cancellable, you can return `false` to cancel the event. | afterEvent | (chartInstance: Chart, event: Event, options?: {}) => void | no | Called after an event occurs on the chart. | | afterInit | (chartInstance: Chart, options?: {}) => void | no | Called after a chart initializes | | afterLayout | (chartInstance: Chart, options?: {}) => void | no | Called after the chart layout was rendered. | -| afterRender | (chartInstance: Chart, options?: {}) => void | no | Called after a rander. | +| afterRender | (chartInstance: Chart, options?: {}) => void | no | Called after a render. | | afterTooltipDraw | (chartInstance: Chart, tooltipData?: {}, options?: {}) => void | no | Called after drawing the `tooltip`. Note that this hook will not be called if the tooltip drawing has been previously cancelled. | | afterUpdate | (chartInstance: Chart, options?: {}) => void | no | Called after a chart updates | | beforeDatasetsDraw | (chartInstance: Chart, easing: string, options?: {}) => void | no | Called before the datasets are drawn but after scales are drawn. Cancellable. | diff --git a/docs/documentation/docs/controls/ComboBoxListItemPicker.md b/docs/documentation/docs/controls/ComboBoxListItemPicker.md index e683b30db..edfe04fc6 100644 --- a/docs/documentation/docs/controls/ComboBoxListItemPicker.md +++ b/docs/documentation/docs/controls/ComboBoxListItemPicker.md @@ -20,6 +20,7 @@ Here is an example of the control: ```TypeScript import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker'; ``` + - Use the `ComboBoxListItemPicker` control in your code as follows: ```TypeScript @@ -40,7 +41,7 @@ import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPic columnInternalName='Title' keyColumnInternalName='Id' filter="Title eq 'SPFx'" - defaultSelectedItems=[{Id: 2, Title:"Test"}] + defaultSelectedItems={[{Id: 2, Title:"Test"}]} onSelectedItem={this.onSelectedItem} webUrl={this.context.pageContext.web.absoluteUrl} spHttpClient={this.context.spHttpClient} /> @@ -80,6 +81,7 @@ private onSelectedItem(items: { Title: string, Id: string }[]) { ``` If you use variables for `columnInternalName` and `keyColumnInternalName` the typing will look as follow: + ``` typescript const columnInternalName = 'Title'; const keyColumnInternalName = 'Id'; @@ -105,25 +107,24 @@ private onSelectedItem(items: { The `ComboBoxListItemPicker` control can be configured with the following properties: - | Property | Type | Required | Description | | ---- | ---- | ---- | ---- | | columnInternalName | string | yes | InternalName of column to search and get values. | | keyColumnInternalName | string | no | InternalName of column to use as the key for the selection. Must be a column with unique values. Default: Id | | webUrl | string | yes | Url to web hosting list | | spHttpClient | RequestClient | yes | Any implementation of PnPJS RequestClient | -| listId | string | yes | Guid of the list. | -| onSelectItem | (items: any[]) => void | yes | Callback function which returns the selected items. | +| listId | string | yes | Guid or title of the list. | +| onSelectedItem | (items: any[]) => void | yes | Callback function which returns the selected items. | | className | string | no | ClassName for the picker. | | defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. Support objects and Ids only | | suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. | | noResultsFoundText | string | no | The text that should appear when no results are returned. | | disabled | boolean | no | Specifies if the control is disabled or not. | -| filter | string | no | Condition to filter list Item, same as $filter ODATA parameter| +| filter | string | no | Condition to filter list Item, same as $filter OData parameter| | 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. | -| orderBy | string | no | Specifies the sequence of the items in the comboBox ,same as $orderBy ODATA parameter| +| orderBy | string | no | Specifies the sequence of the items in the comboBox ,same as $orderBy OData parameter|  diff --git a/docs/documentation/docs/controls/ContentTypePicker.md b/docs/documentation/docs/controls/ContentTypePicker.md index c8defd44e..f8b7c6930 100644 --- a/docs/documentation/docs/controls/ContentTypePicker.md +++ b/docs/documentation/docs/controls/ContentTypePicker.md @@ -57,20 +57,20 @@ The `ContentTypePicker` control can be configured with the following properties: | context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. | | listId | string | no | The ID of the list or library you wish to select content type(s) from. When not specified, picker will be populated with site content types.| | className | string | no | If provided, additional class name to provide on the dropdown element. | -disabled | boolean | no | Whether or not the control is disabled. | -includeHidden | boolean | no | Whether or not to include hidden content types. Default is true. | -includeReadOnly | boolean | no | Whether or not to include read-only content types. Default is true. | -group | string | no | Only show content types of a certain group. | -filter | string | no | Filter content types from OData query (takes the upperhand of `hidden`, `readOnly` and `group` Filters). | -orderBy | ContentTypesOrderBy | no | How to order the content types. | -selectedContentTypes | string \| string[] | no | 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 | Indicates if multi-choice selections is allowed. Default is false. | -label | string | no | The label to display. | -placeholder | string | no | Input placeholder text. Displayed until option is selected. | -onSelectionChanged | (newValue: ISPContentType \| ISPContentType[]): void | no | Callback issued when the selected option changes. | -filterItems | (contentTypes: ISPContentType[]): ISPContentType[] | no | This function is invoked after the filtering has been done. This allows you to add additional custom filtering. -webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). | -showBlankOption | boolean | no | Whether or not to show a blank option. Default is false. Works only when `multiSelect` is false. | +| disabled | boolean | no | Whether or not the control is disabled. | +| includeHidden | boolean | no | Whether or not to include hidden content types. Default is true. | +| includeReadOnly | boolean | no | Whether or not to include read-only content types. Default is true. | +| group | string | no | Only show content types of a certain group. | +| filter | string | no | Filter content types from OData query (takes the upper hand of `hidden`, `readOnly` and `group` Filters). | +| orderBy | ContentTypesOrderBy | no | How to order the content types. | +| selectedContentTypes | string \| string[] | no | 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 | Indicates if multi-choice selections is allowed. Default is false. | +| label | string | no | The label to display. | +| placeholder | string | no | Input placeholder text. Displayed until option is selected. | +| onSelectionChanged | (newValue: ISPContentType \| ISPContentType[]): void | no | Callback issued when the selected option changes. | +| filterItems | (contentTypes: ISPContentType[]): ISPContentType[] | no | This function is invoked after the filtering has been done. This allows you to add additional custom filtering. | +| webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). | +| showBlankOption | boolean | no | Whether or not to show a blank option. Default is false. Works only when `multiSelect` is false. | Enum `ContentTypesOrderBy` diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md index 83b2b50b1..37e959012 100644 --- a/docs/documentation/docs/controls/Dashboard.md +++ b/docs/documentation/docs/controls/Dashboard.md @@ -22,6 +22,12 @@ import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard'; ```TypeScript const linkExample = { href: "#" }; +const customizedLinkExample = { + href: "#", + title: "This is a customized link!", + color: "red", + target: "_top" + }; const calloutItemsExample = [ { id: "action_1", @@ -71,7 +77,7 @@ const calloutItemsExample = [ { title: "Card 2", size: WidgetSize.Single, - link: linkExample, + link: customizedLinkExample, }, { title: "Card 3", @@ -90,7 +96,7 @@ The Dashboard component can be configured with the following properties: | allowHidingWidget | boolean | no | Specifies if widgets can be hidden from the dashboard. | | onWidgetHiding | (widget: IWidget) => void | no | Handler of widget hiding event. | | toolbarProps | IToolbarProps | no | Dashboard toolbar props. See [Toolbar](./Toolbar). | -| WidgetContentWrapper | React.ComponentType\
+ 
+
+ ),
+ tooltipStyle: {
+ backgroundColor: 'white',
+ border: '1px solid #ccc',
+ borderRadius: '8px',
+ padding: '12px',
+ maxWidth: '160px',
+ textAlign: 'center'
+ }
+ }}
+ />
+ );
+};
+
+export default AdvancedMapExample;
+```
+
+### Minimal Example
+
+```tsx
+{item.name}
++ Click marker to visit location page +
+`'round'`
`'square'` | Specifies the end of the lines. Default is `'butt`'. | | borderJoinStyle | `'bevel'`
`'round'`
`'miter'` | Determines the shape used to join two line segments where they meet. Default is `'miter'`. | -| cubicInterpolationMode | `'default'`
`'monotone'` | Determins which algorithm is used to interpolate a smooth curve between data points. | +| cubicInterpolationMode | `'default'`
`'monotone'` | Determines which algorithm is used to interpolate a smooth curve between data points. | | data | number[]
Point[] | The chart's data. Required. | | fill | `false`
number
string
`'start'`
`'end'`
`'origin'` | Controls how the dataset's area is filled. | -| lineTension | number | Ttension of the Bezier curve line. `0` renders straight lines. Ignored if `cubicInterpolationMode` is set to `monotone`. | +| lineTension | number | Tension of the Bézier curve line. `0` renders straight lines. Ignored if `cubicInterpolationMode` is set to `monotone`. | | pointBackgroundColor | Color OR Color[] | The point's fill color. | | pointBorderColor | Color OR Color[] | The point's border color. | | pointBorderWidth | number OR number[] | The point's border width. | | pointRadius | number OR number[] | The point's fill color. | | pointStyle | `'circle'`
`'cross'`
`'crossRot'`
`'dash'`
`'line'`
`'rect'`
`'rectRounded'`
`'rectRot'`
`'star'`
`'triangle'`
HTMLImageElement
HTMLCanvasElement
HTMLImageElement[]
HTMLCanvasElement[] | Style of point. | -| pointRotation | number OR number[] | The point's roation, in degrees. | +| pointRotation | number OR number[] | The point's rotation, in degrees. | | pointHitRadius | number OR number[] | The point's border width. | | pointHoverBackgroundColor | Color OR Color[] | The point's background color when a mouse hovers over it. | | pointHoverBorderColor | Color OR Color[] | The point's border color when a mouse hovers over it. | diff --git a/docs/documentation/docs/controls/charts/PieChart.md b/docs/documentation/docs/controls/charts/PieChart.md index e55249b9f..8b99988e0 100644 --- a/docs/documentation/docs/controls/charts/PieChart.md +++ b/docs/documentation/docs/controls/charts/PieChart.md @@ -69,7 +69,7 @@ return (  -By default, pie charts (and doughnut charts) render a whole circle. You can change the chart's `circumference` option to render partial circles. +By default, pie charts (and doughnut charts) render a whole circle. You can change the chart's `circumference` option to render partial circles. The default `circumference` value is `2 * Math.PI`. To render a half-moon, specify a half value (i.e.: `Math.PI`), as follows: @@ -110,11 +110,11 @@ To rotate the pie chart 90 degrees to the left, specify a `rotation` value in th ### Doughnut charts -Technically, doughnut charts and pie charts are derived from the same class in [Chart.js](https://github.com/), where a doughnut chart's `cutoutPercentage` is set to 50. +Technically, doughnut charts and pie charts are derived from the same class in [Chart.js](https://github.com/), where a doughnut chart's `cutoutPercentage` is set to 50. If you wish to render simple doughnut charts, use the [Doughnut Chart type](./DoughnutChart.md). -However, if you wish to customize how the pie/doughtnut chart is rendered, you can set the cutout percentage to a different value. +However, if you wish to customize how the pie/doughnut chart is rendered, you can set the cutout percentage to a different value. For example, you can use the following code to render a custom "fuel-gauge" chart: @@ -144,15 +144,15 @@ Pie charts allow each dataset to have different configuration properties. Properties are provided as arrays. Settings in the array will be applied to each data element in the same order (e.g.: first value applies to first element, second value to second element, etc.) -| Name | Type | Description | -| ---- | ---- | ---- | -| backgroundColor | Color[] | The segment's fill color. | -| borderColor | Color[] | The segment's border color. | -| borderWidth | number[] | The segment's border width. Measured in pixels. | -| data| number[] | The chart's data. Required. | -| hoverBackgroundColor | Color[] | The segment's fill color when a mouse hovers over it | -| hoverBorderColor | Color[] | The segment's border color when a mouse hovers over it. | -| hoverBorderWidth | number[] | The segment's border width when a mouse hovers over it. | +| Name | Type | Description | +| -------------------- | -------- | ------------------------------------------------------- | +| backgroundColor | Color[] | The segment's fill color. | +| borderColor | Color[] | The segment's border color. | +| borderWidth | number[] | The segment's border width. Measured in pixels. | +| data | number[] | The chart's data. Required. | +| hoverBackgroundColor | Color[] | The segment's fill color when a mouse hovers over it | +| hoverBorderColor | Color[] | The segment's border color when a mouse hovers over it. | +| hoverBorderWidth | number[] | The segment's border width when a mouse hovers over it. | ## Data Structure @@ -166,16 +166,16 @@ data: [20, 10, 33, 47] The following configuration options are specific to pie charts: -| Name | Type | Default | Description | -| ---- | ---- | ---- | ---- | -| cutoutPercentage | number | 50 | The percentage of the chart that is cut out of the middle. | -| rotation | number | -0.5 * Math.PI | The angle at which the pie segments start | -| circumference | number | 2 * Math.PI | The total circumference of the donut chart. | -| animation.animateRotate | boolean | true | `true` will animate the chart while rotating it. | -| animation.animateScale | boolean | false | `true` will animate the chart while scaling it. | +| Name | Type | Default | Description | +| ----------------------- | ------- | -------------- | ---------------------------------------------------------- | +| cutoutPercentage | number | 50 | The percentage of the chart that is cut out of the middle. | +| rotation | number | -0.5 * Math.PI | The angle at which the pie segments start | +| circumference | number | 2 * Math.PI | The total circumference of the donut chart. | +| animation.animateRotate | boolean | true | `true` will animate the chart while rotating it. | +| animation.animateScale | boolean | false | `true` will animate the chart while scaling it. | ## For More Information -For more information on what options are available with Pie charts, refer to the [Doughtnut and Pie documentation](https://www.chartjs.org/docs/latest/charts/doughnut.html) on [Chart.js](https://www.chartjs.org). +For more information on what options are available with Pie charts, refer to the [Doughnut and Pie documentation](https://www.chartjs.org/docs/latest/charts/doughnut.html) on [Chart.js](https://www.chartjs.org).  diff --git a/docs/documentation/docs/controls/charts/PolarAreaChart.md b/docs/documentation/docs/controls/charts/PolarAreaChart.md index 5970b7797..39e229ff6 100644 --- a/docs/documentation/docs/controls/charts/PolarAreaChart.md +++ b/docs/documentation/docs/controls/charts/PolarAreaChart.md @@ -68,15 +68,15 @@ Polar area charts allow each dataset to have different configuration properties. Properties are provided as arrays. The settings in the array will be applied to each data element in the same order (e.g.: first value applies to first element, second value to second element, etc.) -| Name | Type | Description | -| ---- | ---- | ---- | -| backgroundColor | Color[] | The segment's fill color. | -| borderColor | Color[] | The segment's border color. | -| borderWidth | number[] | The segment's border width. Measured in pixels. | -| data | number[] | The chart's data. Required. | -| hoverBackgroundColor | Color[] | The segment's fill color when a mouse hovers over it | -| hoverBorderColor | Color[] | The segment's border color when a mouse hovers over it. | -| hoverBorderWidth | number[] | The segment's border width when a mouse hovers over it. | +| Name | Type | Description | +| -------------------- | -------- | ------------------------------------------------------- | +| backgroundColor | Color[] | The segment's fill color. | +| borderColor | Color[] | The segment's border color. | +| borderWidth | number[] | The segment's border width. Measured in pixels. | +| data | number[] | The chart's data. Required. | +| hoverBackgroundColor | Color[] | The segment's fill color when a mouse hovers over it | +| hoverBorderColor | Color[] | The segment's border color when a mouse hovers over it. | +| hoverBorderWidth | number[] | The segment's border width when a mouse hovers over it. | ## Data Structure @@ -90,11 +90,11 @@ data: [20, 10, 33, 47] The following configuration options are specific to polar area charts: -| Name | Type | Default | Description | -| ---- | ---- | ---- | ---- | -| rotation | number | -0.5 * Math.PI | The angle at which the polar segments start | -| animation.animateRotate | boolean | true | `true` will animate the chart while rotating it. | -| animation.animateScale | boolean | false | `true` will animate the chart while scaling it. | +| Name | Type | Default | Description | +| ----------------------- | ------- | -------------- | ------------------------------------------------ | +| rotation | number | -0.5 * Math.PI | The angle at which the polar segments start | +| animation.animateRotate | boolean | true | `true` will animate the chart while rotating it. | +| animation.animateScale | boolean | false | `true` will animate the chart while scaling it. | ## For More Information diff --git a/docs/documentation/docs/controls/charts/RadarChart.md b/docs/documentation/docs/controls/charts/RadarChart.md index 6a985b8c4..eb8e3946a 100644 --- a/docs/documentation/docs/controls/charts/RadarChart.md +++ b/docs/documentation/docs/controls/charts/RadarChart.md @@ -95,13 +95,13 @@ Some properties can be provided as arrays. When arrays are provided, the setting | borderJoinStyle | `'bevel'`
`'round'`
`'miter'` | Determines the shape used to join two line segments where they meet. Default is `'miter'`. | | data | number[] | The chart's data. Required. | | fill | `false`
number
string
`'start'`
`'end'`
`'origin'` | Controls how the dataset's area is filled. | -| lineTension | number | Ttension of the Bezier curve line. `0` renders straight lines. Ignored if `cubicInterpolationMode` is set to `monotone`. | +| lineTension | number | Tension of the Bézier curve line. `0` renders straight lines. Ignored if `cubicInterpolationMode` is set to `monotone`. | | pointBackgroundColor | Color OR Color[] | The point's fill color. | | pointBorderColor | Color OR Color[] | The point's border color. | | pointBorderWidth | number OR number[] | The point's border width. | | pointRadius | number OR number[] | The point's fill color. | | pointStyle | `'circle'`
`'cross'`
`'crossRot'`
`'dash'`
`'line'`
`'rect'`
`'rectRounded'`
`'rectRot'`
`'star'`
`'triangle'`
HTMLImageElement
HTMLCanvasElement
HTMLImageElement[]
HTMLCanvasElement[] | Style of point. | -| pointRotation | number OR number[] | The point's roation, in degrees. | +| pointRotation | number OR number[] | The point's rotation, in degrees. | | pointHitRadius | number OR number[] | The point's border width. | | pointHoverBackgroundColor | Color OR Color[] | The point's background color when a mouse hovers over it. | | pointHoverBorderColor | Color OR Color[] | The point's border color when a mouse hovers over it. | diff --git a/docs/documentation/docs/controls/charts/ScatterChart.md b/docs/documentation/docs/controls/charts/ScatterChart.md index 4cc82df5d..092b65a10 100644 --- a/docs/documentation/docs/controls/charts/ScatterChart.md +++ b/docs/documentation/docs/controls/charts/ScatterChart.md @@ -80,6 +80,7 @@ return ( options={options} />); ``` + ## Dataset Properties Scatter charts allow each dataset to have different configuration properties. @@ -98,16 +99,16 @@ Some properties can be provided as arrays. When arrays are provided, the setting | borderDashOffset | number | The distance to offset dashes. | | borderCapStyle | `'butt'`
`'round'`
`'square'` | Specifies the end of the lines. Default is `'butt`'. | | borderJoinStyle | `'bevel'`
`'round'`
`'miter'` | Determines the shape used to join two line segments where they meet. Default is `'miter'`. | -| cubicInterpolationMode | `'default'`
`'monotone'` | Determins which algorithm is used to interpolate a smooth curve between data points. | +| cubicInterpolationMode | `'default'`
`'monotone'` | Determines which algorithm is used to interpolate a smooth curve between data points. | | data | Point[] | The chart's data. Required. | | fill | `false`
number
string
`'start'`
`'end'`
`'origin'` | Controls how the dataset's area is filled. | -| lineTension | number | Ttension of the Bezier curve line. `0` renders straight lines. Ignored if `cubicInterpolationMode` is set to `monotone`. | +| lineTension | number | Tension of the Bézier curve line. `0` renders straight lines. Ignored if `cubicInterpolationMode` is set to `monotone`. | | pointBackgroundColor | Color OR Color[] | The point's fill color. | | pointBorderColor | Color OR Color[] | The point's border color. | | pointBorderWidth | number OR number[] | The point's border width. | | pointRadius | number OR number[] | The point's fill color. | | pointStyle | `'circle'`
`'cross'`
`'crossRot'`
`'dash'`
`'line'`
`'rect'`
`'rectRounded'`
`'rectRot'`
`'star'`
`'triangle'`
HTMLImageElement
HTMLCanvasElement
HTMLImageElement[]
HTMLCanvasElement[] | Style of point. | -| pointRotation | number OR number[] | The point's roation, in degrees. | +| pointRotation | number OR number[] | The point's rotation, in degrees. | | pointHitRadius | number OR number[] | The point's border width. | | pointHoverBackgroundColor | Color OR Color[] | The point's background color when a mouse hovers over it. | | pointHoverBorderColor | Color OR Color[] | The point's border color when a mouse hovers over it. | @@ -117,7 +118,6 @@ Some properties can be provided as arrays. When arrays are provided, the setting | spanGaps | boolean | The point's radius width when a mouse hovers over it. | | steppedLine | boolean
`'before'`
`'after'`| Determines whether the line is shown as a stepped line. Any value but `false` overrides the `lineTension` setting. | - ## Data Structure The `data` property of each dataset item consists of an array of points. Each point in the array consist of an `x` and `y` coordinate. @@ -133,7 +133,7 @@ data: }] ``` -#### Point Configuration +## Point Configuration Point elements can be configured to change their appearance using the following configuration options: @@ -174,6 +174,7 @@ For example, to render the above chart, use the following code: ``` You can also control point configurations at the dataset level. + ```TypeScript const data: Chart.ChartData = { datasets: [{ diff --git a/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md b/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md index a7e1fe036..18cb31fd5 100644 --- a/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldAttachmentsRenderer.md @@ -7,6 +7,7 @@ This control renders Clip icon based on the provided `count` property is defined **Note:** this control displays correctly starting with SharePoint Framework v1.4 ## Covered Fields + - Attachments ## How to use this control in your solutions @@ -28,10 +29,10 @@ import { FieldAttachmentsRenderer } from "@pnp/spfx-controls-react/lib/FieldAtta The FieldAttachmentsRenderer component can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. | -| className | ICssInput | no | CSS classes to apply to the renderer. | -| count | number | no | Amount of attachments. The icon is displayed if the property is defined and greater than 0 | +| Property | Type | Required | Description | +| --------- | ------------------- | -------- | ------------------------------------------------------------------------------------------ | +| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. | +| className | ICssInput | no | CSS classes to apply to the renderer. | +| count | number | no | Amount of attachments. The icon is displayed if the property is defined and greater than 0 |  diff --git a/docs/documentation/docs/controls/fields/FieldDateRenderer.md b/docs/documentation/docs/controls/fields/FieldDateRenderer.md index 7b6fd94aa..db478fdeb 100644 --- a/docs/documentation/docs/controls/fields/FieldDateRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldDateRenderer.md @@ -5,6 +5,7 @@ This control renders date string as a simple text.  ## Covered Fields + - Date and Time ## How to use this control in your solutions @@ -28,11 +29,10 @@ import { FieldDateRenderer } from "@pnp/spfx-controls-react/lib/FieldDateRendere The FieldDateRenderer component can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. | -| className | ICssInput | no | CSS classes to apply to the renderer. | -| text | string | no | Text to be rendered | +| Property | Type | Required | Description | +| --------- | ------------------- | -------- | ------------------------------------- | +| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. | +| className | ICssInput | no | CSS classes to apply to the renderer. | +| text | string | no | Text to be rendered |  - diff --git a/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md b/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md index 2d66bf4b2..329219c13 100644 --- a/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldFileTypeRenderer.md @@ -7,6 +7,7 @@ This control renders document or folder icon based on file path. Office UI Fabri  ## Covered Fields + - Type (DocIcon) ## How to use this control in your solutions @@ -28,12 +29,11 @@ import { FieldFileTypeRenderer } from "@pnp/spfx-controls-react/lib/FieldFileTyp The FieldFileTypeRenderer component can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. | -| className | ICssInput | no | CSS classes to apply to the renderer. | -| path | string | yes | document/file path | -| isFolder | boolean | no | true if the icon should be rendered for a folder, not file | +| Property | Type | Required | Description | +| --------- | ------------------- | -------- | ---------------------------------------------------------- | +| cssProps | React.CSSProperties | no | CSS styles to apply to the renderer. | +| className | ICssInput | no | CSS classes to apply to the renderer. | +| path | string | yes | document/file path | +| isFolder | boolean | no | true if the icon should be rendered for a folder, not file |  - diff --git a/docs/documentation/docs/controls/fields/FieldLookupRenderer.md b/docs/documentation/docs/controls/fields/FieldLookupRenderer.md index 6993ab58d..e01872542 100644 --- a/docs/documentation/docs/controls/fields/FieldLookupRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldLookupRenderer.md @@ -8,6 +8,7 @@ This control renders lookup values. Each lookup item is clickable. Click on the  ## Covered Fields + - Lookup (single, multi) ## How to use this control in your solutions @@ -36,8 +37,7 @@ The FieldLookupRenderer component can be configured with the following propertie | lookups | ISPFieldLookupValue[] | yes | Lookup field values. | | dispFormUrl | boolean | no | Url of Display form for the list that is referenced by the lookup. | | onClick | (args: ILookupClickEventArgs) => {} | no | Custom event handler of lookup item click. If not set the dialog with Display Form will be shown. | -| fieldId | string | Field's id | -| context | IContext | Customizer context. Must be providede if fieldId is set | +| fieldId | string | Field's id | | +| context | IContext | Customizer context. Must be provided if fieldId is set | |  - diff --git a/docs/documentation/docs/controls/fields/FieldNameRenderer.md b/docs/documentation/docs/controls/fields/FieldNameRenderer.md index 12b6f7b30..2842b895a 100644 --- a/docs/documentation/docs/controls/fields/FieldNameRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldNameRenderer.md @@ -2,12 +2,13 @@ This control renders document's name as a link. The link provides either preview (if it is available) or direct download. Additionally, new documents are marked with "Glimmer" icon. -**Note:** The Name column in document libraries is marked as noneditable. See [this issue](https://github.com/sharepoint/sp-dev-docs/issues/1207) for details. +**Note:** The Name column in document libraries is marked as non-editable. See [this issue](https://github.com/sharepoint/sp-dev-docs/issues/1207) for details. **Note** Glimmer icon displays correctly starting with SharePoint Framework v1.4  ## Covered Fields + - Document Name (LinkFilename, LinkFilenameNomenu, FileLieafRef) ## How to use this control in your solutions @@ -42,4 +43,3 @@ The FieldNameRenderer component can be configured with the following properties: | onDoubleClick | (args: INameClickEventArgs) => {} | no | Custom handler for link double click. If not set link If not set link will use OOTB behavior. Works if `isLink` is set to `true` |  - diff --git a/docs/documentation/docs/controls/fields/FieldRendererHelper.md b/docs/documentation/docs/controls/fields/FieldRendererHelper.md index 503eeea22..1bc06dfbb 100644 --- a/docs/documentation/docs/controls/fields/FieldRendererHelper.md +++ b/docs/documentation/docs/controls/fields/FieldRendererHelper.md @@ -1,7 +1,9 @@ # FieldRendererHelper class + FieldRendererHelper class is used to automatically apply needed Field Control based on current Field parameters. ## How to use this class 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: @@ -26,7 +28,8 @@ public componentWillMount() { } ``` -- Render the requestted `fieldRenderer`: +- Render the requested `fieldRenderer`: + ```TypeScript public render(): React.ReactElement<{}> { return ( @@ -40,17 +43,18 @@ public render(): React.ReactElement<{}> { ## Implementation The FieldRendererHelper class contains single method `getFieldRenderer` with next signature: + ```TypeScript public static getFieldRenderer(fieldValue: any, props: IFieldRendererProps, listItem: ListItemAccessor, context: IContext): Promise
-[https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/18810637-access-to-re-use-modern-field-render-controls](https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/18810637-access-to-re-use-modern-field-render-controls)
-[https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/31530607-field-customizer-ability-to-call-ootb-render-meth](https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/31530607-field-customizer-ability-to-call-ootb-render-meth) ## Usage + The main scenario to use this package is to import `FieldRendererHelper` class and to call `getFieldRenderer` method. This method returns a Promise with a proper field renderer (`Promise
+
+ {showEmojiPicker && (
+ {renderEmoji}
+
+ {fluentEmojiGroups.map((group:IGroup, index) => {
+ const { groupName, emoji } = group;
+ return (
+
+
+ );
+};
diff --git a/src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx b/src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx
new file mode 100644
index 000000000..46cb8c305
--- /dev/null
+++ b/src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx
@@ -0,0 +1,209 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-unused-expressions */
+import * as React from 'react';
+
+import strings from 'ControlStrings';
+
+import { Card, Input, tokens } from '@fluentui/react-components';
+import { Icon } from '@iconify/react';
+
+import emojiList from '../../data/fluentEmojis.json';
+import { useFluentEmojis } from '../../hooks/useFluentEmojis';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside';
+import { IEmojiInfo } from '../../models/IFluentEmoji';
+import { ReactionGroups } from './ReactionGroups';
+import { RenderEmoji } from './RenderEmoji';
+import { useReactionPickerStyles } from './useReactionPickerStyle';
+
+const PICKER_WIDTH = 350;
+const PICKER_HEIGHT = 420;
+
+export interface IReactionProps {
+ onSelect: (emoji: string | undefined, emojiInfo?: IEmojiInfo) => void;
+ isOpen: boolean;
+ onDismiss: () => void;
+ returnType?: 'emoji' | 'image';
+ target?: HTMLDivElement;
+}
+
+const DEFAULT_GROUP = 'Smileys & Emotion';
+
+export const ReactionPicker: React.FunctionComponent
+ {
+ setSearchValue(data?.value || '');
+ if (!ev.currentTarget?.value) {
+ loadEmoji(selectedGroup);
+ } else {
+ searchEmoji(ev.currentTarget.value);
+ }
+ }}
+ type="search"
+ className={styles.searchBox}
+ contentBefore={
+ ) => {
+ if (ev.key === 'Enter') {
+ searchEmoji(ev.currentTarget.value);
+ }
+ }}
+ />
+ {
+ setSelectedGroup(groupName);
+ loadEmoji(groupName);
+ }}
+ />
+ )}
+
+ {renderEmoji}
+ {isSearchingRef.current ? null : (
+
+ {hasChildren ? (
+ <>
+
+
+ {link.name}
+
+ {showContext &&
+
+
+ );
+};
diff --git a/src/controls/TermSetNavigation/RenderNoOptions.tsx b/src/controls/TermSetNavigation/RenderNoOptions.tsx
new file mode 100644
index 000000000..e6d9c3c5b
--- /dev/null
+++ b/src/controls/TermSetNavigation/RenderNoOptions.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import * as strings from 'ControlStrings';
+
+import {
+ Image,
+ Stack,
+ Text,
+} from '@fluentui/react';
+
+export interface IRenderNoOptionsProps {}
+
+export const RenderNoOptions: React.FunctionComponent
+ {daysOfWeek.map((day) => (
+
+ {day}
+
+ ))}
+ {getCalendarDays(currentDate).map((dateObj, index) => {
+ const { day, currentMonth } = dateObj;
+ const dayEvents = currentMonth ? getEventsForDay(dateObj) : [];
+ return (
+
+
+ {hour}:00
+
+
+
+ ));
+ }, [styles.timeCell]);
+
+ const renderDayHeaders = React.useCallback((): JSX.Element => {
+ return (
+ <>
+ {/* Blank Header Cell */}
+
+ {/* Day Headers */}
+ {Array.from({ length: 1 }, (_, dayIndex) => {
+ const day = addDays(currentDay, dayIndex);
+ const isTodayClass = isToday(day) ? styles.todayHeaderCell : '';
+
+ return (
+
+
+ {format(day, 'dd')}
+
+ {format(day, 'LLLL, yyyy')}
+
+ );
+ })}
+
+ );
+ }, [
+ currentDay,
+ styles.blankHeader,
+ styles.dayHeaderCell,
+ styles.todayHeaderCell,
+ ]);
+
+ const renderFullDayEvents = React.useCallback((): JSX.Element => {
+ const weekEvents = getWeekEvents(events,currentDay.toISOString());
+ return (
+ <>
+
+ All Day
+
+ {Array.from({ length: 1 }, (_, dayIndex) => {
+ const weekDay = format(addDays(currentDay, dayIndex), 'yyyy-MM-dd');
+ const dayEvents = weekEvents.find(day => day.date === weekDay);
+ const fullDayEvents = dayEvents?.fullDayEvents || [];
+ return (
+
+ {fullDayEvents.map(event => (
+
+ );
+ })}
+
+ );
+ }, [
+ currentDay,
+ getWeekEvents,
+ styles.fullDayCell,
+ styles.fullDayEvent,
+ styles.fullDayLabel,
+ styles.eventTitle,
+ getCalendarColors,
+ getEventColors,
+ ]);
+ // Render the events for the current day
+ const renderDayCells = React.useCallback((): JSX.Element[] => {
+ const weekEvents = getWeekEvents(events,currentDay.toISOString());
+ // Render the events for the current day
+ return Array.from({ length: 1 }, (_, dayIndex) => {
+ const weekDay = format(addDays(currentDay, dayIndex), 'yyyy-MM-dd');
+ const dayEvents = weekEvents.find(day => day.date === weekDay);
+
+ return (
+ <>
+ {dayEvents?.timeSlots.map((timeSlot, slotIndex) => {
+ const eventCount = timeSlot.events.length; // Total events in the slot
+
+ return (
+
+ {event.title}
+
+ ))}
+
+ {timeSlot.events.map((event, eventIndex) => {
+ const startDate = new Date(event.start);
+ const endDate = new Date(event.end);
+
+ // Calculate the start and end slots based on event times
+ const { spanSlots, startSlot } = getSpanSlots(
+ startDate,
+ endDate
+ );
+
+ // Only render the event in its starting timeslot
+ if (slotIndex === startSlot) {
+ // Event Render
+ return (
+
+ );
+ })}
+
+ );
+ });
+ }, [currentDay, getSpanSlots, getWeekEvents, styles.dayCell]);
+
+ return (
+
+ {/* DayGrid */}
+
+ );
+};
+
+export default DayView;
diff --git a/src/controls/calendar/EventDetailsPopover.tsx b/src/controls/calendar/EventDetailsPopover.tsx
new file mode 100644
index 000000000..bf03ed054
--- /dev/null
+++ b/src/controls/calendar/EventDetailsPopover.tsx
@@ -0,0 +1,167 @@
+import * as React from 'react';
+
+import {
+ AvatarGroup,
+ AvatarGroupItem,
+ AvatarGroupPopover,
+ Badge,
+ Body1,
+ Button,
+ Divider,
+ Subtitle1,
+ partitionAvatarGroupItems,
+} from '@fluentui/react-components';
+import { Card, RenderLabel, Stack } from '@nuvemerudita/react-controls';
+
+import { IEvent } from './models/IEvents';
+import { css } from '@emotion/css';
+import strings from 'ControlStrings';
+import { useUtils } from './hooks/useUtils';
+
+export interface IEventDetailsPopoverProps {
+ event: IEvent;
+}
+
+const PADDING_LEFT = '32px';
+
+interface IUseStyles {
+ styles: {
+ banner: string;
+ fieldContainer: string;
+ };
+}
+
+const useStyles = (): IUseStyles => {
+ const styles = {
+ banner: css({
+ display: 'flex',
+ justifyContent: 'center',
+ alignContent: 'center',
+ alignItems: 'center',
+ padding: `5px 10px 0px 10px`,
+ }),
+ fieldContainer: css({
+ paddingLeft: PADDING_LEFT,
+ }),
+ };
+ return { styles };
+};
+
+const RenderProperty: React.FC<{
+ fieldLabel: string;
+ fieldValue: string;
+ icon: JSX.Element | string;
+}> = ({ fieldLabel, fieldValue, icon }) => {
+ return (
+
+
+ {renderTimeColumn()}
+ {renderDayHeaders()}
+ {renderFullDayEvents()}
+ {renderDayCells()}
+
+ {title}
+
+
+
+
+ {event.title}
+
+
+ {formatDate(event.start, "HH:mm")}H
+ {" - "}
+ {formatDate(event.end, "HH:mm")}H
+
+
+
+ ),
+ [event],
+ );
+
+ return (
+
+ {calEvent.title}}
+ onMouseEnter={() => handleMouseEnter(calEvent.title)}
+ onMouseLeave={() => handleMouseLeave(calEvent.title)}
+ />
+
+ );
+ },
+ [handleMouseEnter, handleMouseLeave, applyEventHouverColorClass],
+ );
+
+ const renderCardWithPopOver = React.useCallback(
+ (calEvent: IEvent, index: number, colors: IEventColors) => {
+ return (
+ <>
+
+ {events.map((calEvent, index) => {
+ const eventStart = startOfDay(new Date(calEvent.start));
+ const eventEnd = endOfDay(new Date(calEvent.end));
+
+ const isEventInDay = isWithinInterval(date, {
+ start: eventStart,
+ end: eventEnd,
+ });
+
+ if (!isEventInDay) return null;
+ let colors: IEventColors | undefined = undefined;
+ if (calEvent.color) {
+ colors = getCalendarColors(calEvent.color);
+ } else {
+ colors = getEventColors(calEvent.category!);
+ }
+ const customRender = calEvent.onRenderInMonthView?.(calEvent);
+ // If the event has a custom renderer, use it
+ if (React.isValidElement(customRender)) {
+ return React.cloneElement(customRender as React.ReactElement, {
+ className: mergeClasses(
+ (customRender.props as any).className,
+ styles.eventCard,
+ ),
+ });
+ }
+ return calEvent.enableOnHover
+ ? renderCardWithPopOver(calEvent, index, colors)
+ : renderCard(index, calEvent, colors);
+ })}
+
+
+ );
+};
diff --git a/src/controls/calendar/SelectCalendarView.tsx b/src/controls/calendar/SelectCalendarView.tsx
new file mode 100644
index 000000000..0bdae4e69
--- /dev/null
+++ b/src/controls/calendar/SelectCalendarView.tsx
@@ -0,0 +1,159 @@
+import * as React from 'react';
+
+import {
+ CalendarDayFilled,
+ CalendarDayRegular,
+ CalendarMonthFilled,
+ CalendarMonthRegular,
+ CalendarWorkWeekFilled,
+ CalendarWorkWeekRegular,
+ bundleIcon,
+} from '@fluentui/react-icons';
+import {
+ Menu,
+ MenuButton,
+ MenuItemRadio,
+ MenuList,
+ MenuPopover,
+ MenuProps,
+ MenuTrigger,
+} from '@fluentui/react-components';
+
+import { ECalendarViews } from './models/ECalendarViews';
+import strings from 'ControlStrings';
+
+export interface ISelectCalendarViewProps {
+ onSelected: (view: ECalendarViews) => void;
+ value?: ECalendarViews;
+}
+
+export const SelectCalendarView: React.FunctionComponent<
+ ISelectCalendarViewProps
+> = (props: React.PropsWithChildren
+ {hour}:00
+
+
+
+ ));
+ }, []);
+
+ const renderDayHeaders = React.useCallback((): JSX.Element => {
+ return (
+ <>
+ {/* Blank Header Cell */}
+
+ {/* Day Headers */}
+ {Array.from({ length: 7 }, (_, dayIndex) => {
+ const day = addDays(weekStart, dayIndex);
+ const isTodayClass = isToday(day) ? styles.todayHeaderCell : '';
+ return (
+
+
+ {formatDate(day.toISOString(), 'dd')}
+
+ {formatDate(day.toISOString(), 'EEE')}
+
+ );
+ })}
+
+ );
+ }, [weekStart, styles]);
+
+ const renderFullDayEvents = React.useCallback((): JSX.Element => {
+ const weekEvents = getWeekEvents(events, weekStart.toISOString());
+ return (
+ <>
+
+ {strings.CalendarControlFullDaylabel}
+
+ {Array.from({ length: 7 }, (_, dayIndex) => {
+ const weekDay = formatDate(
+ addDays(weekStart, dayIndex).toISOString(),
+ 'yyyy-MM-dd'
+ );
+ const dayEvents = weekEvents.find((day) => day.date === weekDay);
+ const fullDayEvents = dayEvents?.fullDayEvents || [];
+
+ return (
+
+ {fullDayEvents.map((event) => (
+
+ );
+ })}
+
+ );
+ }, [
+ weekStart,
+ styles,
+ getWeekEvents,
+ getCalendarColors,
+ getEventColors,
+ events,
+ ]);
+
+ const renderDayCells = React.useCallback((): JSX.Element[] => {
+ const weekEvents = getWeekEvents(events, weekStart.toISOString());
+ return Array.from({ length: 7 }, (_, dayIndex) => {
+ const weekDay = format(addDays(weekStart, dayIndex), 'yyyy-MM-dd');
+ const dayEvents = weekEvents.find((day) => day.date === weekDay);
+
+ return (
+ <>
+ {dayEvents?.timeSlots.map((timeSlot, slotIndex) => {
+ const eventCount = timeSlot.events.length; // Total events in the slot
+
+ return (
+
+
+ {event.title}
+
+
+ ))}
+
+ {timeSlot.events.map((event, eventIndex) => {
+ const startDate = new Date(event.start);
+ const endDate = new Date(event.end);
+ // Calculate the start and end slots based on event times
+ const { spanSlots, startSlot } = getSpanSlots(
+ startDate,
+ endDate
+ );
+ // Only render the event in its starting timeslot
+ if (slotIndex === startSlot) {
+ // Event Render
+ return (
+
+ );
+ })}
+
+ );
+ });
+ }, [weekStart, styles, getWeekEvents, getSpanSlots, rowHeight, events]);
+
+ return (
+
+ {/* Week Grid */}
+
+ );
+};
+
+export default WeekView;
diff --git a/src/controls/calendar/hooks/useCalendar.ts b/src/controls/calendar/hooks/useCalendar.ts
new file mode 100644
index 000000000..f9aac660b
--- /dev/null
+++ b/src/controls/calendar/hooks/useCalendar.ts
@@ -0,0 +1,161 @@
+/* eslint-disable no-unmodified-loop-condition */
+import { IEvent } from '../models/IEvents';
+import { useCallback, } from 'react';
+import { v4 as uuidv4 } from 'uuid'; // Use UUID for generating unique IDs
+
+export interface TimeSlot {
+ time: string;
+ events: IEvent[];
+}
+
+export interface DayEvents {
+ date: string;
+ fullDayEvents: IEvent[]; // Add full-day events for the day
+ timeSlots: TimeSlot[];
+}
+
+export interface IUseCalendar {
+ getMonthCalendar: (
+ events: IEvent[],
+ year: number,
+ month: number
+ ) => Record
+
+ {renderTimeColumn()}
+ {renderDayHeaders()}
+ {renderFullDayEvents()}
+ {renderDayCells()}
+
@@ -97,7 +110,7 @@ export class Carousel extends React.Component {
onClick={() => { this.onCarouselButtonClicked(false); }} />
{
return "";
}
- const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.top;
+ const buttonsLocation = this.props.buttonsLocation ? this.props.buttonsLocation : CarouselButtonsLocation.center;
let buttonsLocationCss = "";
switch (buttonsLocation) {
case CarouselButtonsLocation.top:
diff --git a/src/controls/carousel/CarouselImage.tsx b/src/controls/carousel/CarouselImage.tsx
index e106bda9d..c911a9293 100644
--- a/src/controls/carousel/CarouselImage.tsx
+++ b/src/controls/carousel/CarouselImage.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import styles from './Carousel.module.scss';
-import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
-import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { Image, ImageFit } from '@fluentui/react/lib/Image';
+import { css } from '@fluentui/react/lib/Utilities';
/**
* Carousel Image component props
diff --git a/src/controls/carousel/ICarouselProps.ts b/src/controls/carousel/ICarouselProps.ts
index ffade1ae4..4c30103e5 100644
--- a/src/controls/carousel/ICarouselProps.ts
+++ b/src/controls/carousel/ICarouselProps.ts
@@ -82,12 +82,16 @@ export interface ICarouselProps {
/**
* Specifies the location of the buttons inside the container.
+ *
+ * Default: CarouselButtonsLocation.center
*/
- buttonsLocation: CarouselButtonsLocation;
+ buttonsLocation?: CarouselButtonsLocation;
/**
* Specifies the buttons container display mode.
+ *
+ * Default: CarouselButtonsDisplay.block
*/
- buttonsDisplay: CarouselButtonsDisplay;
+ buttonsDisplay?: CarouselButtonsDisplay;
/**
* Allows to specify own styles for carousel container.
@@ -221,4 +225,9 @@ export interface ICarouselProps {
*/
indicatorsContainerStyles?: ICssInput;
+ /**
+ * Allows to specify the height of the content. Can be used instead of providing styles for the content container.
+ */
+ contentHeight?: number;
+
}
diff --git a/src/controls/carousel/index.ts b/src/controls/carousel/index.ts
index 3a78ce2a4..07d6967c3 100644
--- a/src/controls/carousel/index.ts
+++ b/src/controls/carousel/index.ts
@@ -1,4 +1,4 @@
export * from "./ICarouselProps";
export * from "./ICarouselState";
export * from "./Carousel";
-export { ICarouselImageProps } from "./CarouselImage";
+export type { ICarouselImageProps } from "./CarouselImage";
diff --git a/src/controls/chartControl/AccessibleChartTable.tsx b/src/controls/chartControl/AccessibleChartTable.tsx
index 9b8c23489..389ad2ed5 100644
--- a/src/controls/chartControl/AccessibleChartTable.tsx
+++ b/src/controls/chartControl/AccessibleChartTable.tsx
@@ -3,7 +3,7 @@ import { IAccessibleChartTableState, IAccessibleChartTableProps } from './Access
import styles from './ChartControl.module.scss';
import { ChartDataSets } from 'chart.js';
import { Guid } from '@microsoft/sp-core-library';
-import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { css } from '@fluentui/react/lib/Utilities';
import { escape } from '@microsoft/sp-lodash-subset';
export class AccessibleChartTable extends React.Component {
diff --git a/src/controls/chartControl/ChartControl.module.scss b/src/controls/chartControl/ChartControl.module.scss
index 40eeb94f3..72dfb922b 100644
--- a/src/controls/chartControl/ChartControl.module.scss
+++ b/src/controls/chartControl/ChartControl.module.scss
@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import '~@fluentui/react/dist/sass/References.scss';
//@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
// exporting all these variables allows us to pick-up
// these values from within the code
diff --git a/src/controls/chartControl/ChartControl.tsx b/src/controls/chartControl/ChartControl.tsx
index 894b559f8..50506e5ff 100644
--- a/src/controls/chartControl/ChartControl.tsx
+++ b/src/controls/chartControl/ChartControl.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { IChartControlState, IChartControlProps } from './ChartControl.types';
import styles from './ChartControl.module.scss';
-import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { css } from '@fluentui/react/lib/Utilities';
import { Chart, ChartSize } from 'chart.js';
import { PaletteGenerator } from './PaletteGenerator';
import { AccessibleChartTable } from './AccessibleChartTable';
@@ -336,7 +336,7 @@ export class ChartControl extends React.Component (
{
+ return (
+
this.handleTextChange(e, newValue, textErrorMessage)
}}
diff --git a/src/controls/dateTimePicker/HoursComponent.tsx b/src/controls/dateTimePicker/HoursComponent.tsx
index 558009997..d52ce1912 100644
--- a/src/controls/dateTimePicker/HoursComponent.tsx
+++ b/src/controls/dateTimePicker/HoursComponent.tsx
@@ -2,9 +2,9 @@ import * as strings from 'ControlStrings';
import * as React from 'react';
import { IHoursComponentProps } from './ITimeComponentProps';
import { TimeConvention } from './DateTimeConventions';
-import { MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
+import { MaskedTextField } from '@fluentui/react/lib/TextField';
import { TimeHelper } from './TimeHelper';
-import { IDropdownOption, Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { IDropdownOption, Dropdown } from '@fluentui/react/lib/Dropdown';
import { TimeDisplayControlType } from './TimeDisplayControlType';
/**
diff --git a/src/controls/dateTimePicker/IDateTimePickerProps.ts b/src/controls/dateTimePicker/IDateTimePickerProps.ts
index 3319d16bc..67b73557c 100644
--- a/src/controls/dateTimePicker/IDateTimePickerProps.ts
+++ b/src/controls/dateTimePicker/IDateTimePickerProps.ts
@@ -1,4 +1,4 @@
-import { DayOfWeek } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
+import { DayOfWeek, FirstWeekOfYear } from '@fluentui/react/lib/DateTimeUtilities';
import { TimeConvention, DateConvention } from './DateTimeConventions';
import { IDateTimePickerStrings } from './IDateTimePickerStrings';
import { TimeDisplayControlType } from './TimeDisplayControlType';
@@ -24,6 +24,10 @@ export interface IDateTimePickerProps {
* By defaut date.toDateString() is used.
*/
formatDate?: (date: Date) => string;
+ /**
+ * Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true
+ */
+ parseDateFromString?: (dateStr: string) => Date;
/**
* Defines the date convention to use. The default is date and time.
*/
@@ -36,6 +40,10 @@ export interface IDateTimePickerProps {
* Specify the first day of the week for your locale.
*/
firstDayOfWeek?: DayOfWeek;
+ /**
+ * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
+ */
+ firstWeekOfYear?: FirstWeekOfYear
/**
* An UNIQUE key indicates the identity of this control
*/
@@ -116,9 +124,13 @@ export interface IDateTimePickerProps {
placeholder?: string;
/**
- * The minimum allowable date for the DatePicker
+ * The initial selected date
*/
+ initialPickerDate?: Date;
+ /**
+ * The minimum allowable date for the DatePicker
+ */
minDate?: Date;
/**
@@ -141,4 +153,10 @@ export interface IDateTimePickerProps {
* Icon used for clearDate iconbutton. Defaults to RemoveEvent
*/
showClearDateIcon?: string;
+
+ /**
+ * If set the Calendar will not allow selection of dates in this array.
+ */
+ restrictedDates?: Date[];
+
}
diff --git a/src/controls/dateTimePicker/IDateTimePickerStrings.ts b/src/controls/dateTimePicker/IDateTimePickerStrings.ts
index 2ed03267a..f996f4b7f 100644
--- a/src/controls/dateTimePicker/IDateTimePickerStrings.ts
+++ b/src/controls/dateTimePicker/IDateTimePickerStrings.ts
@@ -1,4 +1,4 @@
-import { IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+import { IDatePickerStrings } from '@fluentui/react/lib/DatePicker';
export interface IDateTimePickerStrings extends IDatePickerStrings {
dateLabel?: string;
diff --git a/src/controls/dateTimePicker/MinutesComponent.tsx b/src/controls/dateTimePicker/MinutesComponent.tsx
index 5b22369d4..0239a19e0 100644
--- a/src/controls/dateTimePicker/MinutesComponent.tsx
+++ b/src/controls/dateTimePicker/MinutesComponent.tsx
@@ -1,9 +1,9 @@
import * as strings from 'ControlStrings';
import * as React from 'react';
import { ITimeComponentProps } from './ITimeComponentProps';
-import { MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
+import { MaskedTextField } from '@fluentui/react/lib/TextField';
import { TimeHelper } from './TimeHelper';
-import { IDropdownOption, Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { IDropdownOption, Dropdown } from '@fluentui/react/lib/Dropdown';
import { TimeDisplayControlType } from './TimeDisplayControlType';
/**
diff --git a/src/controls/dateTimePicker/SecondsComponent.tsx b/src/controls/dateTimePicker/SecondsComponent.tsx
index b41ad33be..154e11c2b 100644
--- a/src/controls/dateTimePicker/SecondsComponent.tsx
+++ b/src/controls/dateTimePicker/SecondsComponent.tsx
@@ -1,9 +1,9 @@
import * as strings from 'ControlStrings';
import * as React from 'react';
import { ITimeComponentProps } from './ITimeComponentProps';
-import { MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
+import { MaskedTextField } from '@fluentui/react/lib/TextField';
import { TimeHelper } from './TimeHelper';
-import { IDropdownOption, Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { IDropdownOption, Dropdown } from '@fluentui/react/lib/Dropdown';
import { TimeDisplayControlType } from './TimeDisplayControlType';
/**
diff --git a/src/controls/dragDropFiles/DragDropFiles.tsx b/src/controls/dragDropFiles/DragDropFiles.tsx
index 7cced26aa..5adc4830a 100644
--- a/src/controls/dragDropFiles/DragDropFiles.tsx
+++ b/src/controls/dragDropFiles/DragDropFiles.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import styles from './DragDropFiles.module.scss';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
import { IDragDropFilesState, IDragDropFilesProps } from './IDragDropFiles';
/**
@@ -14,7 +14,7 @@ export class DragDropFiles extends React.Component) {
super(props);
// Initialize state
this.state = {
diff --git a/src/controls/dynamicForm/CurrencyMap.ts b/src/controls/dynamicForm/CurrencyMap.ts
new file mode 100644
index 000000000..255ec0f9f
--- /dev/null
+++ b/src/controls/dynamicForm/CurrencyMap.ts
@@ -0,0 +1,249 @@
+export default {
+ AD: 'EUR',
+ AE: 'AED',
+ AF: 'AFN',
+ AG: 'XCD',
+ AI: 'XCD',
+ AL: 'ALL',
+ AM: 'AMD',
+ AO: 'AOA',
+ AR: 'ARS',
+ AS: 'USD',
+ AT: 'EUR',
+ AU: 'AUD',
+ AW: 'AWG',
+ AX: 'EUR',
+ AZ: 'AZN',
+ BA: 'BAM',
+ BB: 'BBD',
+ BD: 'BDT',
+ BE: 'EUR',
+ BF: 'XOF',
+ BG: 'BGN',
+ BH: 'BHD',
+ BI: 'BIF',
+ BJ: 'XOF',
+ BL: 'EUR',
+ BM: 'BMD',
+ BN: 'BND',
+ BO: 'BOB',
+ BQ: 'USD',
+ BR: 'BRL',
+ BS: 'BSD',
+ BT: 'BTN',
+ BV: 'NOK',
+ BW: 'BWP',
+ BY: 'BYN',
+ BZ: 'BZD',
+ CA: 'CAD',
+ CC: 'AUD',
+ CD: 'CDF',
+ CF: 'XAF',
+ CG: 'XAF',
+ CH: 'CHF',
+ CI: 'XOF',
+ CK: 'NZD',
+ CL: 'CLP',
+ CM: 'XAF',
+ CN: 'CNY',
+ CO: 'COP',
+ CR: 'CRC',
+ CU: 'CUP',
+ CV: 'CVE',
+ CW: 'ANG',
+ CX: 'AUD',
+ CY: 'EUR',
+ CZ: 'CZK',
+ DE: 'EUR',
+ DJ: 'DJF',
+ DK: 'DKK',
+ DM: 'XCD',
+ DO: 'DOP',
+ DZ: 'DZD',
+ EC: 'USD',
+ EE: 'EUR',
+ EG: 'EGP',
+ EH: 'MAD',
+ ER: 'ERN',
+ ES: 'EUR',
+ ET: 'ETB',
+ FI: 'EUR',
+ FJ: 'FJD',
+ FK: 'FKP',
+ FM: 'USD',
+ FO: 'DKK',
+ FR: 'EUR',
+ GA: 'XAF',
+ GB: 'GBP',
+ GD: 'XCD',
+ GE: 'GEL',
+ GF: 'EUR',
+ GG: 'GBP',
+ GH: 'GHS',
+ GI: 'GIP',
+ GL: 'DKK',
+ GM: 'GMD',
+ GN: 'GNF',
+ GP: 'EUR',
+ GQ: 'XAF',
+ GR: 'EUR',
+ GS: 'GBP',
+ GT: 'GTQ',
+ GU: 'USD',
+ GW: 'XOF',
+ GY: 'GYD',
+ HK: 'HKD',
+ HM: 'AUD',
+ HN: 'HNL',
+ HR: 'EUR',
+ HT: 'HTG',
+ HU: 'HUF',
+ ID: 'IDR',
+ IE: 'EUR',
+ IL: 'ILS',
+ IM: 'GBP',
+ IN: 'INR',
+ IO: 'USD',
+ IQ: 'IQD',
+ IR: 'IRR',
+ IS: 'ISK',
+ IT: 'EUR',
+ JE: 'GBP',
+ JM: 'JMD',
+ JO: 'JOD',
+ JP: 'JPY',
+ KE: 'KES',
+ KG: 'KGS',
+ KH: 'KHR',
+ KI: 'AUD',
+ KM: 'KMF',
+ KN: 'XCD',
+ KP: 'KPW',
+ KR: 'KRW',
+ KW: 'KWD',
+ KY: 'KYD',
+ KZ: 'KZT',
+ LA: 'LAK',
+ LB: 'LBP',
+ LC: 'XCD',
+ LI: 'CHF',
+ LK: 'LKR',
+ LR: 'LRD',
+ LS: 'LSL',
+ LT: 'EUR',
+ LU: 'EUR',
+ LV: 'EUR',
+ LY: 'LYD',
+ MA: 'MAD',
+ MC: 'EUR',
+ MD: 'MDL',
+ ME: 'EUR',
+ MF: 'EUR',
+ MG: 'MGA',
+ MH: 'USD',
+ MK: 'MKD',
+ ML: 'XOF',
+ MM: 'MMK',
+ MN: 'MNT',
+ MO: 'MOP',
+ MP: 'USD',
+ MQ: 'EUR',
+ MR: 'MRO',
+ MS: 'XCD',
+ MT: 'EUR',
+ MU: 'MUR',
+ MV: 'MVR',
+ MW: 'MWK',
+ MX: 'MXN',
+ MY: 'MYR',
+ MZ: 'MZN',
+ NA: 'NAD',
+ NC: 'XPF',
+ NE: 'XOF',
+ NF: 'AUD',
+ NG: 'NGN',
+ NI: 'NIO',
+ NL: 'EUR',
+ NO: 'NOK',
+ NP: 'NPR',
+ NR: 'AUD',
+ NU: 'NZD',
+ NZ: 'NZD',
+ OM: 'OMR',
+ PA: 'PAB',
+ PE: 'PEN',
+ PF: 'XPF',
+ PG: 'PGK',
+ PH: 'PHP',
+ PK: 'PKR',
+ PL: 'PLN',
+ PM: 'EUR',
+ PN: 'NZD',
+ PR: 'USD',
+ PS: 'ILS',
+ PT: 'EUR',
+ PW: 'USD',
+ PY: 'PYG',
+ QA: 'QAR',
+ RE: 'EUR',
+ RO: 'RON',
+ RS: 'RSD',
+ RU: 'RUB',
+ RW: 'RWF',
+ SA: 'SAR',
+ SB: 'SBD',
+ SC: 'SCR',
+ SD: 'SDG',
+ SE: 'SEK',
+ SG: 'SGD',
+ SH: 'SHP',
+ SI: 'EUR',
+ SJ: 'NOK',
+ SK: 'EUR',
+ SL: 'SLL',
+ SM: 'EUR',
+ SN: 'XOF',
+ SO: 'SOS',
+ SR: 'SRD',
+ ST: 'STD',
+ SV: 'SVC',
+ SX: 'ANG',
+ SY: 'SYP',
+ SZ: 'SZL',
+ TC: 'USD',
+ TD: 'XAF',
+ TF: 'EUR',
+ TG: 'XOF',
+ TH: 'THB',
+ TJ: 'TJS',
+ TK: 'NZD',
+ TL: 'USD',
+ TM: 'TMT',
+ TN: 'TND',
+ TO: 'TOP',
+ TR: 'TRY',
+ TT: 'TTD',
+ TV: 'AUD',
+ TW: 'TWD',
+ TZ: 'TZS',
+ UA: 'UAH',
+ UG: 'UGX',
+ UM: 'USD',
+ US: 'USD',
+ UY: 'UYU',
+ UZ: 'UZS',
+ VA: 'EUR',
+ VC: 'XCD',
+ VE: 'VEF',
+ VG: 'USD',
+ VI: 'USD',
+ VN: 'VND',
+ VU: 'VUV',
+ WF: 'XPF',
+ WS: 'WST',
+ YE: 'YER',
+ YT: 'EUR',
+ ZA: 'ZAR',
+ ZM: 'ZMW',
+ ZW: 'ZWL'
+ };
\ No newline at end of file
diff --git a/src/controls/dynamicForm/DynamicForm.module.scss b/src/controls/dynamicForm/DynamicForm.module.scss
deleted file mode 100644
index a480627e9..000000000
--- a/src/controls/dynamicForm/DynamicForm.module.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-@import "~office-ui-fabric-react/dist/sass/References.scss";
-
-.FieldEditor {
- padding: 4px 3px;
-}
-
-.titleContainer {
- display: flex;
-}
-
-.fieldLabel {
- font-weight: 600;
- font-size: 14px;
- padding-top: 5px;
- padding-bottom: 5px;
- font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
- "Helvetica Neue", sans-serif;
- -webkit-font-smoothing: antialiased;
- font-weight: 600;
- color: "[theme:neutralPrimary, default:#323130]";
- box-sizing: border-box;
- box-shadow: none;
- margin: 0px;
- overflow-wrap: break-word;
- display: block;
-}
-
-.fieldDescription {
- font-weight: 400;
- font-size: 12px;
- color: #858585;
- margin-top: 4px;
- font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
- "Helvetica Neue", sans-serif;
- -webkit-font-smoothing: antialiased;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- overflow-wrap: break-word;
- display: block;
- user-select: none;
-}
-
-.fieldIcon {
- align-self: center;
- font-size: 16px;
- color: "[theme:neutralSecondary, default: #605e5c]";
- margin-right: 8px;
-}
-
-.feildDisplayNoPadding {
- display: inline-block;
- vertical-align: top;
- width: 100%;
- font-size: 14px;
- font-weight: 400;
- outline: 0;
-}
-
-.feildDisplay {
- @extend .feildDisplayNoPadding;
- padding: 6px 0 0px 0;
- //border: 2px solid;
- //border-color: "[theme:white, default:#ffffff]";
- //margin-left: -2px;
-}
-
-.fieldRequired::after {
- content: " *";
- color: "[theme:errorText, default:#a4262c]";
- padding-right: 12px;
-}
-
-.buttons {
- padding: 15px 4px;
-}
-
-.filePicker {
- padding: 7px;
- align-items: center;
-}
-
-.richText {
- position: relative;
-}
-
-.errormessage {
- animation-duration: 0.367s;
- animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
- animation-fill-mode: both;
- font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
- "Helvetica Neue", sans-serif;
- -webkit-font-smoothing: antialiased;
- font-size: 12px;
- font-weight: 400;
- color: "[theme:errorText, default:#a4262c]";
- margin: 0px;
- padding-top: 5px;
- display: flex;
- align-items: center;
-}
-
-.fieldContainer {
- padding-bottom: 4px;
-}
-
-.labelContainer {
- padding-bottom: 7px;
-}
-
-.pickersContainer {
- padding: 6px 0 0px;
-}
-
-.thumbnailFieldButtons {
- display: flex;
-}
diff --git a/src/controls/dynamicForm/DynamicForm.styles.ts b/src/controls/dynamicForm/DynamicForm.styles.ts
new file mode 100644
index 000000000..bf60fad61
--- /dev/null
+++ b/src/controls/dynamicForm/DynamicForm.styles.ts
@@ -0,0 +1,152 @@
+import { IStyle } from '@fluentui/react';
+import { getFluentUIThemeOrDefault } from '../../common/utilities/ThemeUtility';
+import { getFieldStyles } from './dynamicField/DynamicField.styles';
+import type {
+ IDynamicFormStyleProps,
+ IDynamicFormStyles,
+} from './IDynamicFormProps';
+
+export const getStyles = (
+ props: IDynamicFormStyleProps
+): IDynamicFormStyles => {
+ const className = props.className;
+ const globalClassNames = {
+ sectionFormField: 'sectionFormField',
+ sectionFormFields: 'sectionFormFields',
+ sectionTitle: 'sectionTitle',
+ sectionLine: 'sectionLine',
+ header:'header',
+ footer:'footer',
+ validationErrorDialog: 'validationErrorDialog',
+ buttons: 'buttons',
+ actions: 'actions',
+ action: 'action',
+ actionsRight: 'actionsRight',
+ };
+ const theme = getFluentUIThemeOrDefault();
+
+ const paddingleft_style: IStyle = {
+ 'padding-left': '20px'
+ };
+
+ return {
+ root: [
+ className,
+ {
+ selectors: {
+ '.sp-field-customFormatter': {
+ 'min-height': 'inherit',
+ display: 'flex',
+ 'align-items': 'center',
+ },
+ },
+ },
+ ],
+ sectionFormField: [
+ globalClassNames.sectionFormField,
+ {
+ selectors: {
+ ':has(div)': {
+ 'max-width': '50vmin',
+ 'min-width': '25vmax',
+ padding: '20px',
+ [`@media (min-width: 480px)`]: {
+ width: '90%',
+ },
+ },
+ },
+ },
+ ],
+ sectionFormFields: [
+ globalClassNames.sectionFormFields,
+ {
+ display: 'flex',
+ 'flex-wrap': 'wrap',
+ },
+ ],
+
+ sectionTitle: [
+ globalClassNames.sectionTitle,
+ {
+ color: '#000000',
+ 'font-weight': '600',
+ 'font-size': '16px',
+ 'margin-top': '6px',
+ 'margin-bottom': '12px',
+ clear: 'both',
+ 'padding-left': '20px'
+ },
+ ],
+ header: [
+ globalClassNames.header,
+ paddingleft_style
+
+ ],
+ footer: [
+ globalClassNames.footer,
+ paddingleft_style
+ ],
+ sectionLine: [
+ globalClassNames.sectionLine,
+ {
+ width: '100%',
+ 'border-top': '1px solid #edebe9',
+ 'border-bottom-width': '0',
+ 'border-left-width': '0',
+ 'border-right-width': '0',
+ clear: 'both',
+ },
+ ],
+ validationErrorDialog: [
+ globalClassNames.validationErrorDialog,
+ {
+ selectors: {
+ '.ms-Dialog-main': {
+ 'max-width': '540px',
+ width: '540px',
+ },
+ },
+ },
+ ],
+ buttons: [
+ globalClassNames.buttons,
+ {
+ padding: '15px 4px',
+ },
+ ],
+ actions: [
+ globalClassNames.actions,
+ {
+ position: 'relative',
+ width: '100%',
+ 'min-height': '24px',
+ 'line-height': '24px',
+ 'margin-top': '20px',
+ 'margin-right': '0px',
+ 'margin-bottom': '0px',
+ 'margin-left': '0px',
+ 'font-size': '0px',
+ },
+ ],
+ action: [
+ globalClassNames.action,
+ {
+ 'margin-top': '0px',
+ 'margin-right': '4px',
+ 'margin-bottom': '0px',
+ 'margin-left': '4px',
+ },
+ ],
+ actionsRight: [
+ globalClassNames.actionsRight,
+ {
+ 'text-align': 'right',
+ 'margin-right': '-4px',
+ 'font-size': '0px',
+ },
+ ],
+ subComponentStyles: {
+ fieldStyles: getFieldStyles({ theme: theme }),
+ },
+ };
+};
diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx
index 6ad406014..dce87e453 100644
--- a/src/controls/dynamicForm/DynamicForm.tsx
+++ b/src/controls/dynamicForm/DynamicForm.tsx
@@ -1,211 +1,565 @@
/* eslint-disable @microsoft/spfx/no-async-await */
-import { SPHttpClient } from '@microsoft/sp-http';
-import { sp } from '@pnp/sp/presets/all';
-import * as strings from 'ControlStrings';
-import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
-import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
-import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
-import * as React from 'react';
-import { IUploadImageResult } from '../../common/SPEntities';
-import SPservice from '../../services/SPService';
-import { IFilePickerResult } from '../filePicker';
-import { DynamicField } from './dynamicField';
-import { DateFormat, FieldChangeAdditionalData, IDynamicFieldProps } from './dynamicField/IDynamicFieldProps';
-import styles from './DynamicForm.module.scss';
-import { IDynamicFormProps } from './IDynamicFormProps';
-import { IDynamicFormState } from './IDynamicFormState';
-
-import '@pnp/sp/lists';
-import '@pnp/sp/content-types';
-import '@pnp/sp/folders';
-import '@pnp/sp/items';
+import * as React from "react";
+import * as strings from "ControlStrings";
+
+// Controls
+import {
+ DefaultButton,
+ PrimaryButton,
+} from "@fluentui/react/lib/Button";
+import {
+ Dialog,
+ DialogFooter,
+ DialogType,
+} from "@fluentui/react/lib/Dialog";
+import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
+import { MessageBar, MessageBarType } from "@fluentui/react/lib/MessageBar";
+import { ProgressIndicator } from "@fluentui/react/lib/ProgressIndicator";
+import { IStackTokens, Stack } from "@fluentui/react/lib/Stack";
+import { DynamicField } from "./dynamicField";
+import {
+ DateFormat,
+ FieldChangeAdditionalData,
+ IDynamicFieldProps,
+ IDynamicFieldStyleProps,
+ IDynamicFieldStyles,
+} from "./dynamicField/IDynamicFieldProps";
+import { FilePicker, IFilePickerResult } from "../filePicker";
+import { Guid } from '@microsoft/sp-core-library';
+// pnp/sp, helpers / utils
+import { sp } from "@pnp/sp";
+import "@pnp/sp/lists";
+import "@pnp/sp/content-types";
+import "@pnp/sp/folders";
+import "@pnp/sp/items";
+import { IFolder } from "@pnp/sp/folders";
+import { IInstalledLanguageInfo, IItemUpdateResult, IList, ITermInfo, ChoiceFieldFormatType } from "@pnp/sp/presets/all";
+import { cloneDeep, isEqual } from "lodash";
+import { ICustomFormatting, ICustomFormattingBodySection, ICustomFormattingNode } from "../../common/utilities/ICustomFormatting";
+import SPservice from "../../services/SPService";
+import { IRenderListDataAsStreamClientFormResult } from "../../services/ISPService";
+import { ISPField, IUploadImageResult } from "../../common/SPEntities";
+import { FormulaEvaluation } from "../../common/utilities/FormulaEvaluation";
+import { Context } from "../../common/utilities/FormulaEvaluation.types";
+import CustomFormattingHelper from "../../common/utilities/CustomFormatting";
+import { SPTaxonomyService } from '../../services/SPTaxonomyService';
+import { getStyles } from "./DynamicForm.styles";
+import { getFluentUIThemeOrDefault } from "../../common/utilities/ThemeUtility";
+import { classNamesFunction, IProcessedStyleSet, styled } from "@fluentui/react";
+
+// Dynamic Form Props / State
+import { IDynamicFormProps, IDynamicFormStyleProps, IDynamicFormStyles } from "./IDynamicFormProps";
+import { IDynamicFormState } from "./IDynamicFormState";
+import { Icon } from "@fluentui/react/lib/Icon";
const stackTokens: IStackTokens = { childrenGap: 20 };
+const getstyles = classNamesFunction();
+const getFieldstyles = classNamesFunction();
+const theme = getFluentUIThemeOrDefault();
+
+const timeout = (ms: number): Promise => {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+};
/**
* DynamicForm Class Control
*/
-export class DynamicForm extends React.Component {
-
+export class DynamicFormBase extends React.Component<
+ IDynamicFormProps,
+ IDynamicFormState
+> {
private _spService: SPservice;
- private webURL = this.props.webAbsoluteUrl ? this.props.webAbsoluteUrl : this.props.context.pageContext.web.absoluteUrl;
+ private _formulaEvaluation: FormulaEvaluation;
+ private _customFormatter: CustomFormattingHelper;
+ private _taxonomyService: SPTaxonomyService;
+ private webURL = this.props.webAbsoluteUrl
+ ? this.props.webAbsoluteUrl
+ : this.props.context.pageContext.web.absoluteUrl;
+ private _classNames: IProcessedStyleSet;
constructor(props: IDynamicFormProps) {
super(props);
// Initialize pnp sp
-
if (this.props.webAbsoluteUrl) {
sp.setup({
sp: {
headers: {
Accept: "application/json;odata=verbose",
},
- baseUrl: this.props.webAbsoluteUrl
+ baseUrl: this.props.webAbsoluteUrl,
},
});
} else {
sp.setup({
- spfxContext: { pageContext: this.props.context.pageContext }
+ spfxContext: { pageContext: this.props.context.pageContext },
});
}
+ // Initialize taxonomy service
+ this._taxonomyService = new SPTaxonomyService(this.props.context);
+
// Initialize state
this.state = {
- fieldCollection: []
+ infoErrorMessages: [],
+ fieldCollection: [],
+ validationFormulas: {},
+ clientValidationFormulas: {},
+ validationErrors: {},
+ hiddenByFormula: [],
+ isValidationErrorDialogOpen: false,
};
+
// Get SPService Factory
- this._spService = this.props.webAbsoluteUrl ? new SPservice(this.props.context, this.props.webAbsoluteUrl) : new SPservice(this.props.context);
+ this._spService = this.props.webAbsoluteUrl
+ ? new SPservice(this.props.context, this.props.webAbsoluteUrl)
+ : new SPservice(this.props.context);
+
+ // Setup Formula Validation utils
+ this._formulaEvaluation = new FormulaEvaluation(this.props.context, this.props.webAbsoluteUrl);
+ // Setup Custom Formatting utils
+ this._customFormatter = new CustomFormattingHelper(this._formulaEvaluation);
}
/**
* Lifecycle hook when component is mounted
*/
public componentDidMount(): void {
- this.getFieldInformations().then(() => { /* no-op; */ }).catch(() => { /* no-op; */ });
+ this.getListInformation()
+ .then(() => {
+ /* no-op; */
+ })
+ .catch((err) => {
+ /* no-op; */
+ console.error(err);
+ });
+ }
+
+ public componentDidUpdate(prevProps: IDynamicFormProps, prevState: IDynamicFormState): void {
+ if (!isEqual(prevProps, this.props)) {
+ // Props have changed due to parent component or workbench config, reset state
+ this.setState({
+ infoErrorMessages: [], // Reset info/error messages
+ validationErrors: {} // Reset validation errors
+ }, () => {
+ // If listId or listItemId have changed, reload list information
+ if (prevProps.listId !== this.props.listId || prevProps.listItemId !== this.props.listItemId) {
+ this.getListInformation()
+ .then(() => {
+ /* no-op; */
+ })
+ .catch((err) => {
+ /* no-op; */
+ console.error(err);
+ });
+ } else {
+ this.performValidation();
+ }
+ });
+ }
}
/**
* Default React component render method
*/
public render(): JSX.Element {
- const {
- fieldCollection,
- isSaving
- } = this.state;
+ const { customFormatting, fieldCollection, hiddenByFormula, infoErrorMessages, isSaving } = this.state;
+
+ const customFormattingDisabled = this.props.useCustomFormatting === false;
+
+ const { className } = this.props;
+ const styles = (this._classNames = getstyles(this.props.styles, { className: className }));
- const fieldOverrides = this.props.fieldOverrides;
+ // Custom Formatting - Header
+ let headerContent: JSX.Element;
+ if (!customFormattingDisabled && customFormatting?.header) {
+ headerContent = ();
+
+ for (const field of fields) {
+ fMap.set(field.columnInternalName.toLowerCase(), field);
+ }
+
+ const sortedFields = customSort
+ .map((sortColumn) => sortColumn.toLowerCase())
+ .filter((normalizedSortColumn) => fMap.has(normalizedSortColumn))
+ .map((normalizedSortColumn) => fMap.get(normalizedSortColumn))
+ .filter((field) => field !== undefined);
+
+ const remainingFields = fields.filter((field) => !sortedFields.includes(field));
+ const uniqueRemainingFields = Array.from(new Set(remainingFields));
+
+ return [...sortedFields, ...uniqueRemainingFields];
+}
+
+ private renderField = (field: IDynamicFieldProps): JSX.Element => {
+ const { fieldOverrides } = this.props;
+ const { hiddenByFormula, isSaving, validationErrors } = this.state;
+ const styles = getFieldstyles(this._classNames.subComponentStyles.fieldStyles(), { theme: theme });
+
+ // If the field is hidden by a formula or field doesn't exist (usually occurs in custom formatting section layout when field display name changed), don't render it
+ if (!field || hiddenByFormula.find(h => h === field.columnInternalName)) {
+ return null;
+ }
+
+ // If validation error, show error message
+ let validationErrorMessage: string = "";
+ if (validationErrors[field.columnInternalName]) {
+ validationErrorMessage = validationErrors[field.columnInternalName];
+ }
+
+ // If field override is provided, use it instead of the DynamicField component
+ if (
+ fieldOverrides &&
+ Object.prototype.hasOwnProperty.call(
+ fieldOverrides,
+ field.columnInternalName
+ )
+ ) {
+ return fieldOverrides[field.columnInternalName]({ ...field,disabled: field.disabled || isSaving} )
+ }
+
+ // Default render
+ return (
+ => {
const {
listId,
listItemId,
- contentTypeId,
onSubmitted,
onBeforeSubmit,
- onSubmitError
+ onSubmitError,
+ enableFileSelection,
+ validationErrorDialogProps,
+ returnListItemInstanceOnSubmit,
+ useModernTaxonomyPicker
} = this.props;
+ let contentTypeId = this.props.contentTypeId;
+ if (this.state.contentTypeId !== undefined) contentTypeId = this.state.contentTypeId;
+
+ const fileSelectRendered = !listItemId && contentTypeId.startsWith("0x0101") && enableFileSelection === true;
+
try {
+
+ /** Set to true to cancel form submission */
let shouldBeReturnBack = false;
+
const fields = (this.state.fieldCollection || []).slice();
- fields.forEach((val) => {
- if (val.required) {
- if (val.newValue === null) {
- if (val.fieldDefaultValue === null || val.fieldDefaultValue === '' || val.fieldDefaultValue.length === 0) {
- if (val.fieldType === "DateTime")
- val.fieldDefaultValue = null;
- else
- val.fieldDefaultValue = '';
+ fields.forEach((field) => {
+
+ // When a field is required and has no value
+ if (field.required) {
+ if ((field.newValue === undefined || field.newValue.length === 0) && (field.value === undefined || field.value.length === 0)) {
+ if (
+ field.defaultValue === null ||
+ field.defaultValue === "" ||
+ field.defaultValue.length === 0 ||
+ field.defaultValue === undefined
+ ) {
+ if (field.fieldType === "DateTime") field.defaultValue = null;
+ else field.defaultValue = "";
shouldBeReturnBack = true;
}
+ } else if (field.newValue === "") {
+ field.defaultValue = "";
+ shouldBeReturnBack = true;
+ } else if (Array.isArray(field.newValue) && field.newValue.length === 0) {
+ field.defaultValue = null;
+ shouldBeReturnBack = true;
}
- else if (val.newValue === '') {
- val.fieldDefaultValue = '';
+ }
+
+ // Check min and max values for number fields
+ if (field.fieldType === "Number" && field.newValue !== undefined && field.newValue.trim() !== "") {
+ if ((field.newValue < field.minimumValue) || (field.newValue > field.maximumValue)) {
shouldBeReturnBack = true;
}
}
});
+
+ // Perform validation
+ const validationDisabled = this.props.useFieldValidation === false;
+ let validationErrors: Record = {};
+ if (!validationDisabled) {
+ validationErrors = await this.evaluateFormulas(this.state.validationFormulas, true, true, this.state.hiddenByFormula) as Record;
+ if (Object.keys(validationErrors).length > 0) {
+ shouldBeReturnBack = true;
+ }
+ }
+
+ // If validation failed, return without saving
if (shouldBeReturnBack) {
- this.setState({ fieldCollection: fields });
+ this.setState({
+ fieldCollection: fields,
+ isValidationErrorDialogOpen:
+ validationErrorDialogProps
+ ?.showDialogOnValidationError === true,
+ });
+ return;
+ }
+
+ if (fileSelectRendered === true && this.state.selectedFile === undefined && this.props.listItemId === undefined) {
+ this.setState({
+ missingSelectedFile: true,
+ isValidationErrorDialogOpen:
+ validationErrorDialogProps
+ ?.showDialogOnValidationError === true,
+ validationErrors
+ });
return;
}
this.setState({
- isSaving: true
+ isSaving: true,
});
+ /** Item values for save / update */
const objects = {};
+
for (let i = 0, len = fields.length; i < len; i++) {
- const val = fields[i];
+ const field = fields[i];
const {
fieldType,
additionalData,
columnInternalName,
- hiddenFieldName
- } = val;
- if (val.newValue !== null && val.newValue !== undefined) {
- let value = val.newValue;
+ hiddenFieldName,
+ } = field;
+ let fieldcolumnInternalName = columnInternalName;
+ if (fieldcolumnInternalName.startsWith('_x') || fieldcolumnInternalName.startsWith('_')) {
+ fieldcolumnInternalName = `OData_${fieldcolumnInternalName}`;
+ }
+ if (field.newValue !== undefined) {
+
+ let value = field.newValue;
+
+ if (["Lookup", "LookupMulti", "User", "UserMulti", "TaxonomyFieldTypeMulti"].indexOf(fieldType) < 0) {
+ objects[columnInternalName] = value;
+ }
+
+ // Choice fields
+
+ if (fieldType === "Choice") {
+ objects[fieldcolumnInternalName] = field.newValue.key;
+ }
+ if (fieldType === "MultiChoice") {
+ objects[fieldcolumnInternalName] = { results: field.newValue };
+ }
+
+ // Lookup fields
+
if (fieldType === "Lookup") {
- objects[`${columnInternalName}Id`] = value[0].key;
+ if (value && value.length > 0) {
+ objects[`${fieldcolumnInternalName}Id`] = value[0].key;
+ } else {
+ objects[`${fieldcolumnInternalName}Id`] = null;
+ }
}
- else if (fieldType === "LookupMulti") {
+ if (fieldType === "LookupMulti") {
value = [];
- val.newValue.forEach(element => {
+ field.newValue.forEach((element) => {
value.push(element.key);
});
- objects[`${columnInternalName}Id`] = { results: value };
- }
- else if (fieldType === "TaxonomyFieldType") {
- objects[columnInternalName] = {
- '__metadata': { 'type': 'SP.Taxonomy.TaxonomyFieldValue' },
- 'Label': value[0].name,
- 'TermGuid': value[0].key,
- 'WssId': '-1'
+ objects[`${fieldcolumnInternalName}Id`] = {
+ results: value.length === 0 ? [] : value,
};
}
- else if (fieldType === "TaxonomyFieldTypeMulti") {
- objects[hiddenFieldName] = val.newValue.map(term => `-1#;${term.name}|${term.key};`).join('#');
- }
- else if (fieldType === "User") {
- objects[`${columnInternalName}Id`] = val.newValue;
- }
- else if (fieldType === "Choice") {
- objects[columnInternalName] = val.newValue.key;
+
+ // User fields
+
+ if (fieldType === "User") {
+ objects[`${fieldcolumnInternalName}Id`] = field.newValue.length === 0 ? null : field.newValue;
}
- else if (fieldType === "MultiChoice") {
- objects[columnInternalName] = { results: val.newValue };
+ if (fieldType === "UserMulti") {
+ objects[`${fieldcolumnInternalName}Id`] = {
+ results: field.newValue.length === 0 ? null : field.newValue,
+ };
}
- else if (fieldType === "Location") {
- objects[columnInternalName] = JSON.stringify(val.newValue);
+
+ // Taxonomy / Managed Metadata fields
+ if(useModernTaxonomyPicker){
+ //Use ITermInfo[] for modern taxonomy picker
+ if (fieldType === "TaxonomyFieldType") {
+ objects[fieldcolumnInternalName] = {
+ __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
+ Label: value[0]?.labels[0]?.name ?? "",
+ TermGuid: value[0]?.id ?? "11111111-1111-1111-1111-111111111111",
+ WssId: "-1",
+ };
+ }
+
+ if (fieldType === "TaxonomyFieldTypeMulti") {
+ objects[hiddenFieldName] = field.newValue
+ .map((term) => `-1#;${term.labels[0]?.name || ""}|${term.id};`)
+ .join("#");
+ }
+
+ } else {
+ //Use IPickerTerms
+ if (fieldType === "TaxonomyFieldType") {
+ objects[fieldcolumnInternalName] = {
+ __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
+ Label: value[0]?.name ?? "",
+ TermGuid: value[0]?.key ?? "11111111-1111-1111-1111-111111111111",
+ WssId: "-1",
+ };
+ }
+ if (fieldType === "TaxonomyFieldTypeMulti") {
+ objects[hiddenFieldName] = field.newValue
+ .map((term) => `-1#;${term.name}|${term.key};`)
+ .join("#");
+ }
}
- else if (fieldType === "UserMulti") {
- objects[`${columnInternalName}Id`] = { results: val.newValue };
+
+ // Other fields
+
+ if (fieldType === "Location") {
+ objects[fieldcolumnInternalName] = JSON.stringify(field.newValue);
}
- else if (fieldType === 'Thumbnail') {
+ if (fieldType === "Thumbnail") {
if (additionalData) {
- const uploadedImage = await this.uplaodImage(additionalData);
- objects[columnInternalName] = JSON.stringify({
- type: 'thumbnail',
+ const uploadedImage = await this.uploadImage(additionalData);
+ objects[fieldcolumnInternalName] = JSON.stringify({
+ type: "thumbnail",
fileName: uploadedImage.Name,
serverRelativeUrl: uploadedImage.ServerRelativeUrl,
- id: uploadedImage.UniqueId
+ id: uploadedImage.UniqueId,
});
+ } else {
+ objects[fieldcolumnInternalName] = null;
}
- else {
- objects[columnInternalName] = null;
- }
- }
- else {
- objects[columnInternalName] = val.newValue;
}
}
}
@@ -215,74 +569,67 @@ export class DynamicForm extends React.Component|?|/|\\||]/g, "_") : // Replace not allowed chars in folder name
- ''; // Empty string will be replaced by SPO with Folder Item ID
- const newFolder = await library.rootFolder.addSubFolderUsingPath(folderTitle);
- const fields = await newFolder.listItemAllFields();
- if (fields[idField]) {
-
- // Read the ID of the just created folder or Document Set
- const folderId = fields[idField];
-
- // Set the content type ID for the target item
- objects[contentTypeIdField] = contentTypeId;
- // Update the just created folder or Document Set
- const iur = await library.items.getById(folderId).update(objects);
- if (onSubmitted) {
- onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false ? iur.item : undefined);
- }
- } else {
- throw new Error('Unable to read the ID of the just created folder or Document Set');
+ const contentTypeIdField = "ContentTypeId";
+ // check if item contenttype is passed, then update the object with content type id, else, pass the object
+ if (contentTypeId !== undefined && contentTypeId.startsWith("0x01")) objects[contentTypeIdField] = contentTypeId;
+ const iar = await sp.web.lists.getById(listId).items.add(objects);
+ if (onSubmitted) {
+ onSubmitted(
+ iar.data,
+ this.props.returnListItemInstanceOnSubmit !== false
+ ? iar.item
+ : undefined
+ );
}
- }
- catch (error) {
+ } catch (error) {
+ apiError = error.message;
if (onSubmitError) {
onSubmitError(objects, error);
}
@@ -290,9 +637,52 @@ export class DynamicForm extends React.Component => {
+ const {
+ selectedFile
+ } = this.state;
+
+ const {
+ listId,
+ contentTypeId,
+ onSubmitted,
+ onSubmitError,
+ returnListItemInstanceOnSubmit
+ } = this.props;
+
+
+ if (selectedFile !== undefined) {
+ try {
+ const idField = "ID";
+ const contentTypeIdField = "ContentTypeId";
+
+ const library = await sp.web.lists.getById(listId);
+ const itemTitle =
+ selectedFile !== undefined && selectedFile.fileName !== undefined && selectedFile.fileName !== ""
+ ? (selectedFile.fileName as string).replace(
+ /["|*|:|<|>|?|/|\\||]/g,
+ "_"
+ ).trim() // Replace not allowed chars in folder name and trim empty spaces at the start or end.
+ : ""; // Empty string will be replaced by SPO with Folder Item ID
+
+ const folder = !this.props.folderPath ? library.rootFolder : await this.getFolderByPath(this.props.folderPath, library.rootFolder);
+ const fileCreatedResult = await folder.files.addChunked(encodeURI(itemTitle), await selectedFile.downloadFileContent());
+ const fields = await fileCreatedResult.file.listItemAllFields();
+
+ if (fields[idField]) {
+ // Read the ID of the just created file
+ const fileId = fields[idField];
+
+ // Set the content type ID for the target item
+ objects[contentTypeIdField] = contentTypeId;
+ // Update the just created file
+ const iur = await this.updateListItemRetry(library, fileId, objects);
+ if (onSubmitted) {
+ onSubmitted(
+ iur.data,
+ returnListItemInstanceOnSubmit !== false
+ ? iur.item
+ : undefined
+ );
+ }
+ } else {
+ throw new Error(
+ "Unable to read the ID of the just created file"
+ );
+ }
+ } catch (error) {
+ if (onSubmitError) {
+ onSubmitError(objects, error);
+ }
+ console.log("Error", error);
+ }
+ }
}
- // trigger when the user change any value in the form
- private onChange = async (internalName: string, newValue: any, additionalData?: FieldChangeAdditionalData): Promise => { // eslint-disable-line @typescript-eslint/no-explicit-any
- // try {
- const fieldCol = (this.state.fieldCollection || []).slice();
- const field = fieldCol.filter((element, i) => { return element.columnInternalName === internalName; })[0];
+ /**
+ * Triggered when the user makes any field value change in the form
+ */
+ private onChange = async (
+ internalName: string,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ newValue: any,
+ validate: boolean,
+ additionalData?: FieldChangeAdditionalData,
+ ): Promise => {
+
+ const fieldCol = cloneDeep(this.state.fieldCollection || []);
+ const field = fieldCol.filter((element, i) => {
+ return element.columnInternalName === internalName;
+ })[0];
+
+ const { useModernTaxonomyPicker } = this.props;
+ // Init new value(s)
field.newValue = newValue;
+ field.stringValue = newValue? newValue.toString():'';
field.additionalData = additionalData;
- if (field.fieldType === "User" && newValue.length !== 0) {
+ field.subPropertyValues = {};
- if (newValue[0].id === undefined || parseInt(newValue[0].id, 10).toString() === "NaN") {
+ // Store string values for various field types
+
+ if (field.fieldType === "Choice") {
+ field.stringValue = newValue.text;
+ }
+ if (field.fieldType === "MultiChoice") {
+ field.stringValue = newValue.join(';#');
+ }
+ if (field.fieldType === "Lookup" || field.fieldType === "LookupMulti") {
+ field.stringValue = newValue.map(nv => nv.key + ';#' + nv.name).join(';#');
+ }
+ if(useModernTaxonomyPicker){
+ if (field.fieldType === "TaxonomyFieldType" || field.fieldType === "TaxonomyFieldTypeMulti") {
+ if (Array.isArray(newValue) && newValue.length > 0) {
+ field.stringValue = newValue.map(nv => nv.labels.map(label => label.name).join(';')).join(';');
+ } else {
+ field.stringValue = "";
+ }
+ }
+ } else {
+ if (field.fieldType === "TaxonomyFieldType" || field.fieldType === "TaxonomyFieldTypeMulti") {
+ field.stringValue = newValue.map(nv => nv.name).join(';');
+ }
+ }
+
+ // Capture additional property data for User fields
+
+ if (field.fieldType === "User" && newValue.length !== 0) {
+ if (
+ newValue[0].id === undefined ||
+ parseInt(newValue[0].id, 10).toString() === "NaN"
+ ) {
let user: string = newValue[0].secondaryText;
- if (user.indexOf('@') === -1) {
+ if (user.indexOf("@") === -1) {
user = newValue[0].loginName;
}
const result = await sp.web.ensureUser(user);
field.newValue = result.data.Id; // eslint-disable-line require-atomic-updates
- }
- else {
+ field.stringValue = user;
+ field.subPropertyValues = {
+ id: result.data.Id,
+ title: result.data.Title,
+ email: result.data.Email,
+ };
+ } else {
field.newValue = newValue[0].id;
}
-
}
- else if (field.fieldType === "UserMulti" && newValue.length !== 0) {
+ if (field.fieldType === "UserMulti" && newValue.length !== 0) {
field.newValue = [];
+ const emails: string[] = [];
for (let index = 0; index < newValue.length; index++) {
const element = newValue[index];
- if (element.id === undefined || parseInt(element.id, 10).toString() === "NaN") {
+ if (
+ element.id === undefined ||
+ parseInt(element.id, 10).toString() === "NaN"
+ ) {
let user: string = element.secondaryText;
- if (user.indexOf('@') === -1) {
+ if (user.indexOf("@") === -1) {
user = element.loginName;
}
const result = await sp.web.ensureUser(user);
field.newValue.push(result.data.Id);
- }
- else {
+ emails.push(user);
+ } else {
field.newValue.push(element.id);
}
}
+ field.stringValue = emails.join(";");
}
+
+ const validationErrors = {...this.state.validationErrors};
+ if (validationErrors[field.columnInternalName]) delete validationErrors[field.columnInternalName];
+
this.setState({
- fieldCollection: fieldCol
+ fieldCollection: fieldCol,
+ validationErrors
+ }, () => {
+ if (validate) this.performValidation();
});
+ };
+
+ /** Validation callback, used when form first loads (getListInformation) and following onChange */
+ private performValidation = (skipFieldValueValidation?: boolean): void => {
+ const { useClientSideValidation, useFieldValidation } = this.props;
+ const { clientValidationFormulas, validationFormulas } = this.state;
+ if (Object.keys(clientValidationFormulas).length || Object.keys(validationFormulas).length) {
+ this.setState({
+ isSaving: true, // Disable save btn and fields while validation in progress
+ }, () => {
+ const clientSideValidationDisabled = useClientSideValidation === false;
+ const fieldValidationDisabled = useFieldValidation === false;
+ const hiddenByFormula: string[] = !clientSideValidationDisabled ? this.evaluateColumnVisibilityFormulas() : [];
+ let validationErrors = { ...this.state.validationErrors };
+ if (!skipFieldValueValidation && !fieldValidationDisabled) validationErrors = this.evaluateFieldValueFormulas(hiddenByFormula);
+ this.setState({ hiddenByFormula, isSaving: false, validationErrors });
+ });
+ }
+ }
+
+ /** Determines visibility of fields that have show/hide formulas set in Edit Form > Edit Columns > Edit Conditional Formula */
+ private evaluateColumnVisibilityFormulas = (): string[] => {
+ return this.evaluateFormulas(this.state.clientValidationFormulas, false) as string[];
+ }
+
+ /** Evaluates field validation formulas set in column settings and returns a Record of error messages */
+ private evaluateFieldValueFormulas = (hiddenFields: string[]): Record => {
+ return this.evaluateFormulas(this.state.validationFormulas, true, true, hiddenFields) as Record;
+ }
+
+ /**
+ * Evaluates formulas and returns a Record of error messages or an array of column names that have failed validation
+ * @param formulas A Record / dictionary-like object, where key is internal column name and value is an object with ValidationFormula and ValidationMessage properties
+ * @param returnMessages Determines whether a Record of error messages is returned or an array of column names that have failed validation
+ * @param requireValue Set to true if the formula should only be evaluated when the field has a value
+ * @returns
+ */
+ private evaluateFormulas = (
+ formulas: Record>,
+ returnMessages = true,
+ requireValue: boolean = false,
+ ignoreFields: string[] = []
+ ): string[] | Record => {
+ const { fieldCollection } = this.state;
+ const results: Record = {};
+ for (let i = 0; i < Object.keys(formulas).length; i++) {
+ const fieldName = Object.keys(formulas)[i];
+ if (formulas[fieldName]) {
+ const field = fieldCollection.find(f => f.columnInternalName === fieldName);
+ if (!field) continue;
+ if (ignoreFields.indexOf(fieldName) > -1) continue; // Skip fields that are being ignored (e.g. hidden by formula)
+ const formula = formulas[fieldName].ValidationFormula;
+ const message = formulas[fieldName].ValidationMessage;
+ if (!formula) continue;
+ const context = this.getFormValuesForValidation();
+ if (requireValue && !context[fieldName]) continue;
+ const result = this._formulaEvaluation.evaluate(formula, context);
+ if (Boolean(result) !== true) {
+ results[fieldName] = message;
+ }
+ }
+ }
+ if (!returnMessages) { return Object.keys(results); }
+ return results;
+ }
+
+ /**
+ * Used for validation. Returns a Record of field values, where key is internal column name and value is the field value.
+ * Expands certain properties and stores many of them as primitives (strings, numbers or bools) so the expression evaluator
+ * can process them. For example: a User column named Person will have values stored as Person, Person.email, Person.title etc.
+ * This is so the expression evaluator can process expressions like '=[$Person.title] == "Contoso Employee 1138"'
+ * @param fieldCollection Optional. Could be used to compare field values in state with previous state.
+ * @returns
+ */
+ private getFormValuesForValidation = (fieldCollection?: IDynamicFieldProps[]): Context => {
+ const { fieldCollection: fieldColFromState } = this.state;
+ if (!fieldCollection) fieldCollection = fieldColFromState;
+ return fieldCollection.reduce((prev, cur) => {
+ let value: boolean | number | object | string | undefined = cur.value;
+ switch (cur.fieldType) {
+ case "Lookup":
+ case "Choice":
+ case "TaxonomyFieldType":
+ case "LookupMulti":
+ case "MultiChoice":
+ case "TaxonomyFieldTypeMulti":
+ case "User":
+ case "UserMulti":
+ value = cur.stringValue;
+ break;
+ case "Currency":
+ case "Number":
+ if (cur.value !== undefined && cur.value !== null) value = Number(cur.value);
+ if (cur.newValue !== undefined && cur.newValue !== null) value = Number(cur.newValue);
+ break;
+ case "URL":
+ if (cur.value !== undefined && cur.value !== null) value = cur.value.Url;
+ if (cur.newValue !== undefined && cur.newValue !== null) value = cur.newValue.Url;
+ value = cur.newValue ? cur.newValue.Url : null;
+ break;
+ default:
+ value = cur.newValue || cur.value;
+ break;
+ }
+ prev[cur.columnInternalName] = value;
+ if (cur.subPropertyValues) {
+ Object.keys(cur.subPropertyValues).forEach((key) => {
+ prev[`${cur.columnInternalName}.${key}`] = cur.subPropertyValues[key];
+ });
+ }
+ return prev;
+ }, {} as Context);
}
- //getting all the fields information as part of get ready process
- private getFieldInformations = async (): Promise => {
- const { listId, listItemId, disabledFields } = this.props;
+ /**
+ * Invoked when component first mounts, loads information about the SharePoint list, fields and list item
+ */
+ private getListInformation = async (): Promise => {
+ const {
+ listId,
+ listItemId,
+ disabledFields,
+ respectETag,
+ customIcons,
+ onListItemLoaded,
+ } = this.props;
let contentTypeId = this.props.contentTypeId;
+
try {
- const spList = await sp.web.lists.getById(listId);
+
+ // Fetch form rendering information from SharePoint
+ const listInfo = await this._spService.getListFormRenderInfo(listId, this.webURL);
+
+ // Fetch additional information about fields from SharePoint
+ // (Number fields for min and max values, and fields with validation)
+ const additionalInfo = await this._spService.getAdditionalListFormFieldInfo(listId, this.webURL);
+ const numberFields = additionalInfo?.filter((f) => f.TypeAsString === "Number" || f.TypeAsString === "Currency");
+
+ // Build a dictionary of validation formulas and messages
+ const validationFormulas: Record> = additionalInfo.reduce((prev, cur) => {
+ if (!prev[cur.InternalName] && cur.ValidationFormula) {
+ prev[cur.InternalName] = {
+ ValidationFormula: cur.ValidationFormula,
+ ValidationMessage: cur.ValidationMessage,
+ };
+ }
+ return prev;
+ }, {});
+
+ // If no content type ID is provided, use the default (first one in the list)
+ if (contentTypeId === undefined || contentTypeId === "") {
+ contentTypeId = Object.keys(listInfo.ContentTypeIdToNameMap)[0];
+ }
+ const contentTypeName: string = listInfo.ContentTypeIdToNameMap[contentTypeId];
+
+ // Build a dictionary of client validation formulas and messages
+ // These are formulas that are added in Edit Form > Edit Columns > Edit Conditional Formula
+ // They are evaluated on the client side, and determine whether a field should be hidden or shown
+ const clientValidationFormulas = listInfo.ClientForms.Edit[contentTypeName].reduce((prev, cur) => {
+ if (cur.ClientValidationFormula) {
+ prev[cur.InternalName] = {
+ ValidationFormula: cur.ClientValidationFormula,
+ ValidationMessage: cur.ClientValidationMessage,
+ };
+ }
+ return prev;
+ }, {} as Record>);
+
+ // Custom Formatting
+ let headerJSON: ICustomFormattingNode, footerJSON: ICustomFormattingNode;
+ let bodySections: ICustomFormattingBodySection[];
+ if (listInfo.ClientFormCustomFormatter && listInfo.ClientFormCustomFormatter[contentTypeId]) {
+ const customFormatInfo = JSON.parse(listInfo.ClientFormCustomFormatter[contentTypeId]) as ICustomFormatting;
+ bodySections = customFormatInfo.bodyJSONFormatter?.sections;
+ headerJSON = customFormatInfo.headerJSONFormatter;
+ footerJSON = customFormatInfo.footerJSONFormatter;
+ }
+
+ // Load SharePoint list item
+ const spList = sp.web.lists.getById(listId);
let item = null;
- if (listItemId !== undefined && listItemId !== null && listItemId !== 0)
- item = await spList.items.getById(listItemId).get();
+ const isEditingItem = listItemId !== undefined && listItemId !== null && listItemId !== 0;
+ let etag: string | undefined = undefined;
+
+ if (isEditingItem) {
+ const spListItem = spList.items.getById(listItemId);
+
+ if (contentTypeId.startsWith("0x0120") || contentTypeId.startsWith("0x0101")) {
+ spListItem.select("*","FileLeafRef"); // Explainer: FileLeafRef is not loaded by default. Load it to show the file/folder name in the field.
+ }
+
+ item = await spListItem.get().catch(err => this.updateFormMessages(MessageBarType.error, err.message));
+
+ if (onListItemLoaded) {
+ await onListItemLoaded(item);
+ }
+
+ if (respectETag !== false) {
+ etag = item["odata.etag"];
+ }
+ }
+
+ // Build the field collection
+ const tempFields: IDynamicFieldProps[] = await this.buildFieldCollection(
+ listInfo,
+ contentTypeName,
+ item,
+ numberFields,
+ listId,
+ listItemId,
+ disabledFields,
+ customIcons
+ );
+
+ const sortedFields = this.props.fieldOrder?.length > 0
+ ? this.sortFields(tempFields, this.props.fieldOrder)
+ : tempFields;
- if (contentTypeId === undefined || contentTypeId === '') {
- const defaultContentType = await spList.contentTypes.select("Id", "Name").get();
- contentTypeId = defaultContentType[0].Id.StringValue;
+ // Get installed languages for Currency fields
+ let installedLanguages: IInstalledLanguageInfo[];
+ if (tempFields.filter(f => f.fieldType === "Currency").length > 0) {
+ installedLanguages = await sp.web.regionalSettings.getInstalledLanguages();
}
- const listFields = await this.getFormFields(listId, contentTypeId, this.webURL);
- const tempFields: IDynamicFieldProps[] = [];
- let order: number = 0;
- const responseValue = listFields.value;
- const hiddenFields = this.props.hiddenFields !== undefined ? this.props.hiddenFields : [];
- let defaultDayOfWeek: number = 0;
- for (let i = 0, len = responseValue.length; i < len; i++) {
- const field = responseValue[i];
-
- // Handle only fields that are not marked as hidden
- if (hiddenFields.indexOf(field.EntityPropertyName) < 0) {
+
+ this.setState({
+ contentTypeId,
+ clientValidationFormulas,
+ customFormatting: {
+ header: headerJSON,
+ body: bodySections,
+ footer: footerJSON
+ },
+ etag,
+ fieldCollection: sortedFields,
+ installedLanguages,
+ validationFormulas
+ }, () => this.performValidation(true));
+
+ } catch (error) {
+ this.updateFormMessages(MessageBarType.error, 'An error occurred while loading: ' + error.message);
+ console.error(`An error occurred while loading DynamicForm`, error);
+ return null;
+ }
+ }
+
+ /**
+ * Builds a collection of fields to be rendered in the form
+ * @param listInfo Data returned by RenderListDataAsStream with RenderOptions = 64 (ClientFormSchema)
+ * @param contentTypeName SharePoint List Content Type
+ * @param item SharePoint List Item
+ * @param numberFields Additional information about Number fields (min and max values)
+ * @param listId SharePoint List ID
+ * @param listItemId SharePoint List Item ID
+ * @param disabledFields Fields that should be disabled due to configuration
+ * @returns
+ */
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ private async buildFieldCollection(listInfo: IRenderListDataAsStreamClientFormResult, contentTypeName: string, item: any, numberFields: ISPField[], listId: string, listItemId: number, disabledFields: string[], customIcons: {[key: string]: string}): Promise {
+ const{ useModernTaxonomyPicker } = this.props;
+ const tempFields: IDynamicFieldProps[] = [];
+ let order: number = 0;
+ const hiddenFields = this.props.hiddenFields !== undefined ? this.props.hiddenFields : [];
+ let defaultDayOfWeek: number = 0;
+
+ for (let i = 0, len = listInfo.ClientForms.Edit[contentTypeName].length; i < len; i++) {
+ const field = listInfo.ClientForms.Edit[contentTypeName][i];
+
+ // Process fields that are not marked as hidden
+ if (hiddenFields.indexOf(field.InternalName) < 0) {
+ if(field.Hidden === false) {
order++;
- const fieldType = field.TypeAsString;
- field.order = order;
let hiddenName = "";
let termSetId = "";
let anchorId = "";
@@ -381,180 +1138,433 @@ export class DynamicForm extends React.Component = {};
let richText = false;
let dateFormat: DateFormat | undefined;
let principalType = "";
- if (item !== null) {
- defaultValue = item[field.EntityPropertyName];
+ let cultureName: string;
+ let minValue: number | undefined;
+ let maxValue: number | undefined;
+ let showAsPercentage: boolean | undefined;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const selectedTags: any = [];
+ let choiceType: ChoiceFieldFormatType | undefined;
+
+ let fieldName = field.InternalName;
+ if (fieldName.startsWith('_x') || fieldName.startsWith('_')) {
+ fieldName = `OData_${fieldName}`;
+ }
+
+ // If a SharePoint Item was loaded, get the field value from it
+ if (item !== null && item[fieldName]) {
+ value = item[fieldName];
+ stringValue = value.toString();
} else {
defaultValue = field.DefaultValue;
}
- if (fieldType === 'Choice' || fieldType === 'MultiChoice') {
- field.Choices.forEach(element => {
- choices.push({key: element, text: element});
+
+ // Store choices for Choice fields
+ if (field.FieldType === "Choice") {
+ field.Choices.forEach((element) => {
+ choices.push({ key: element, text: element });
});
- } else if (fieldType === "Note") {
+
+ if (field.FormatType === 1) {
+ choiceType = ChoiceFieldFormatType.RadioButtons;
+ }
+ else {
+ choiceType = ChoiceFieldFormatType.Dropdown;
+ }
+ }
+ if (field.FieldType === "MultiChoice") {
+ field.MultiChoices.forEach((element) => {
+ choices.push({ key: element, text: element });
+ });
+
+ choiceType = ChoiceFieldFormatType.Dropdown;
+ }
+
+ // Setup Note, Number and Currency fields
+ if (field.FieldType === "Note") {
richText = field.RichText;
- } else if (fieldType === "Lookup") {
- lookupListId = field.LookupList;
- lookupField = field.LookupField;
+ }
+ if (field.FieldType === "Number" || field.FieldType === "Currency") {
+ const numberField = numberFields.find(f => f.InternalName === field.InternalName);
+ if (numberField) {
+ minValue = numberField.MinimumValue;
+ maxValue = numberField.MaximumValue;
+ }
+ showAsPercentage = field.ShowAsPercentage;
+ if (field.FieldType === "Currency") {
+ cultureName = this.cultureNameLookup(numberField.CurrencyLocaleId);
+ }
+ }
+
+ // Setup Lookup fields
+ if (field.FieldType === "Lookup" || field.FieldType === "LookupMulti") {
+ lookupListId = field.LookupListId;
+ lookupField = field.LookupFieldName;
if (item !== null) {
- defaultValue = await this._spService.getLookupValue(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
+ value = await this._spService.getLookupValues(
+ listId,
+ listItemId,
+ field.InternalName,
+ lookupField,
+ this.webURL
+ );
+ stringValue = value?.map(dv => dv.key + ';#' + dv.name).join(';#');
+ if (item[field.InternalName + "Id"]) {
+ subPropertyValues.id = item[field.InternalName + "Id"];
+ subPropertyValues.lookupId = subPropertyValues.id;
+ }
+ subPropertyValues.lookupValue = value?.map(dv => dv.name);
} else {
- defaultValue = [];
+ value = [];
}
+ }
- } else if (fieldType === "LookupMulti") {
- lookupListId = field.LookupList;
- lookupField = field.LookupField;
+ // Setup User fields
+ if (field.FieldType === "User") {
if (item !== null) {
- defaultValue = await this._spService.getLookupValues(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
+ const userEmails: string[] = [];
+ userEmails.push(
+ (await this._spService.getUserUPNFromFieldValue(
+ listId,
+ listItemId,
+ field.InternalName,
+ this.webURL
+ )) + ""
+ );
+ value = userEmails;
+ stringValue = userEmails?.map(dv => dv.split('/').shift()).join(';');
+ if (item[field.InternalName + "Id"]) {
+ subPropertyValues.id = item[field.InternalName + "Id"];
+ }
+ subPropertyValues.title = userEmails?.map(dv => dv.split('/').pop())[0];
+ subPropertyValues.email = userEmails[0];
} else {
- defaultValue = [];
+ value = [];
}
- } else if (fieldType === "TaxonomyFieldTypeMulti") {
- const response = await this._spService.getTaxonomyFieldInternalName(this.props.listId, field.InternalName, this.webURL);
- hiddenName = response.value;
- termSetId = field.TermSetId;
- anchorId = field.AnchorId;
+ principalType = field.PrincipalAccountType;
+ }
+ if (field.FieldType === "UserMulti") {
if (item !== null) {
- item[field.InternalName].forEach(element => {
- selectedTags.push({key: element.TermGuid, name: element.Label});
- });
-
- defaultValue = selectedTags;
+ value = await this._spService.getUsersUPNFromFieldValue(
+ listId,
+ listItemId,
+ field.InternalName,
+ this.webURL
+ );
+ stringValue = value?.map(dv => dv.split('/').pop()).join(';');
} else {
- if (defaultValue !== "") {
- defaultValue.split(/#|;/).forEach(element => {
- if (element.indexOf('|') !== -1)
- selectedTags.push({key: element.split('|')[1], name: element.split('|')[0]});
- });
+ value = [];
+ }
+ principalType = field.PrincipalAccountType;
+ }
- defaultValue = selectedTags;
+ // Setup Taxonomy / Metadata fields
+ if(useModernTaxonomyPicker){
+ if (field.FieldType === "TaxonomyFieldType") {
+ termSetId = field.TermSetId;
+ anchorId = field.AnchorId !== Guid.empty.toString() ? field.AnchorId : null;
+ if (item !== null) {
+ const response = await this._spService.getSingleManagedMetadataLabel(
+ listId,
+ listItemId,
+ field.InternalName,
+ this.webURL
+ );
+ if (response) {
+ const term = await this._taxonomyService.getTermById(Guid.parse(field.TermSetId), Guid.parse(response.TermID));
+ selectedTags.push({
+ key: response.TermID,
+ name: response.Label,
+ });
+ value = term;//selectedTags;
+ stringValue = selectedTags?.map(dv => dv.key + ';#' + dv.name).join(';#');
+ }
+ } else {
+ if (defaultValue !== "") {
+ selectedTags.push({
+ key: defaultValue.split("|")[1],
+ name: defaultValue.split("|")[0].split("#")[1],
+ });
+ value = selectedTags;
+ }
}
+ if (defaultValue === "") defaultValue = null;
}
- if (defaultValue === "")
- defaultValue = null;
- } else if (fieldType === "TaxonomyFieldType") {
+ if (field.FieldType === "TaxonomyFieldTypeMulti") {
+ hiddenName = field.HiddenListInternalName;
+ termSetId = field.TermSetId;
+ anchorId = field.AnchorId !== Guid.empty.toString() ? field.AnchorId : null;
+ if (item && item[field.InternalName]) {
+ const _selectedTags = await this.getTermsForModernTaxonomyPicker(field.TermSetId,item[field.InternalName]);
+ item[field.InternalName].forEach((element) => {
+ selectedTags.push({
+ key: element.TermGuid,
+ name: element.Label,
+ });
+ });
- termSetId = field.TermSetId;
- anchorId = field.AnchorId;
- if (item !== null) {
- const response = await this._spService.getSingleManagedMtadataLabel(listId, listItemId, field.InternalName);
- if (response) {
- selectedTags.push({key: response.TermID, name: response.Label});
- defaultValue = selectedTags;
+ //value = selectedTags; _selectedTags
+ value = _selectedTags;
+ } else {
+ if (defaultValue && defaultValue !== "") {
+ defaultValue.split(/#|;/).forEach((element) => {
+ if (element.indexOf("|") !== -1)
+ selectedTags.push({
+ key: element.split("|")[1],
+ name: element.split("|")[0],
+ });
+ });
+
+ value = selectedTags;
+ stringValue = selectedTags?.map(dv => dv.key + ';#' + dv.name).join(';#');
+ }
}
- } else {
- if (defaultValue !== "") {
- selectedTags.push({key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1]});
- defaultValue = selectedTags;
+ if (defaultValue === "") defaultValue = null;
+ }
+ } else {
+ if (field.FieldType === "TaxonomyFieldType") {
+ termSetId = field.TermSetId;
+ anchorId = field.AnchorId;
+ if (item !== null) {
+ const response = await this._spService.getSingleManagedMetadataLabel(
+ listId,
+ listItemId,
+ field.InternalName,
+ this.webURL
+ );
+ if (response) {
+ selectedTags.push({
+ key: response.TermID,
+ name: response.Label,
+ });
+ value = selectedTags;
+ stringValue = selectedTags?.map(dv => dv.key + ';#' + dv.name).join(';#');
+ }
+ } else {
+ if (defaultValue !== "") {
+ selectedTags.push({
+ key: defaultValue.split("|")[1],
+ name: defaultValue.split("|")[0].split("#")[1],
+ });
+ value = selectedTags;
+ }
+ }
+ if (defaultValue === "") defaultValue = null;
+ }
+ if (field.FieldType === "TaxonomyFieldTypeMulti") {
+ hiddenName = field.HiddenListInternalName;
+ termSetId = field.TermSetId;
+ anchorId = field.AnchorId;
+ if (item && item[field.InternalName]) {
+ item[field.InternalName].forEach((element) => {
+ selectedTags.push({
+ key: element.TermGuid,
+ name: element.Label,
+ });
+ });
+
+ value = selectedTags;
+ } else {
+ if (defaultValue && defaultValue !== "") {
+ defaultValue.split(/#|;/).forEach((element) => {
+ if (element.indexOf("|") !== -1)
+ selectedTags.push({
+ key: element.split("|")[1],
+ name: element.split("|")[0],
+ });
+ });
+
+ value = selectedTags;
+ } else {
+ if (defaultValue && defaultValue !== "") {
+ defaultValue.split(/#|;/).forEach((element) => {
+ if (element.indexOf("|") !== -1)
+ selectedTags.push({
+ key: element.split("|")[1],
+ name: element.split("|")[0],
+ });
+ });
+
+ value = selectedTags;
+ stringValue = selectedTags?.map(dv => dv.key + ';#' + dv.name).join(';#');
+ }
+ }
+ if (defaultValue === "") defaultValue = null;
}
}
- if (defaultValue === "")
- defaultValue = null;
- } else if (fieldType === "DateTime") {
- if (item !== null && item[field.InternalName])
- defaultValue = new Date(item[field.InternalName]);
- else if (defaultValue === '[today]') {
+ }
+
+
+ // Setup DateTime fields
+ if (field.FieldType === "DateTime") {
+
+ if (item !== null && item[fieldName]) {
+
+ value = new Date(item[fieldName]);
+ stringValue = value.toISOString();
+ } else if (defaultValue === "[today]") {
defaultValue = new Date();
+ } else if (defaultValue) {
+ defaultValue = new Date(defaultValue);
}
- const schemaXml = field.SchemaXml;
- const dateFormatRegEx = /\s+Format="([^"]+)"/gmi.exec(schemaXml);
- dateFormat = dateFormatRegEx && dateFormatRegEx.length ? dateFormatRegEx[1] as DateFormat : 'DateOnly';
- defaultDayOfWeek = (await this._spService.getRegionalWebSettings()).FirstDayOfWeek;
+ dateFormat = field.DateFormat || "DateOnly";
+ defaultDayOfWeek = (await this._spService.getRegionalWebSettings(this.webURL)).FirstDayOfWeek;
}
- else if (fieldType === "UserMulti") {
- if (item !== null)
- defaultValue = await this._spService.getUsersUPNFromFieldValue(listId, listItemId, field.InternalName, this.webURL);
- else {
- defaultValue = [];
- }
- principalType = field.SchemaXml.split('UserSelectionMode="')[1];
- principalType = principalType.substring(0, principalType.indexOf('"'));
- } else if (fieldType === "Thumbnail") {
- if (defaultValue !== null) {
- defaultValue = this.webURL.split('/sites/')[0] + JSON.parse(defaultValue).serverRelativeUrl;
+
+ // Setup Thumbnail, Location and Boolean fields
+ if (field.FieldType === "Thumbnail") {
+ if (defaultValue) {
+ defaultValue = JSON.parse(defaultValue).serverRelativeUrl;
}
- } else if (fieldType === "User") {
- if (item !== null) {
- const userEmails: string[] = [];
- userEmails.push(await this._spService.getUserUPNFromFieldValue(listId, listItemId, field.InternalName, this.webURL) + '');
- defaultValue = userEmails;
- } else {
- defaultValue = [];
+ if (value) {
+ value = JSON.parse(value).serverRelativeUrl;
}
- principalType = field.SchemaXml.split('UserSelectionMode="')[1];
- principalType = principalType.substring(0, principalType.indexOf('"'));
- } else if (fieldType === "Location") {
- defaultValue = JSON.parse(defaultValue);
- } else if (fieldType === "Boolean") {
- defaultValue = Boolean(Number(defaultValue));
+ }
+ if (field.FieldType === "Location") {
+ if (defaultValue) defaultValue = JSON.parse(defaultValue);
+ if (value) value = JSON.parse(value);
+ }
+ if (field.FieldType === "Boolean") {
+ if (defaultValue !== undefined && defaultValue !== null) defaultValue = Boolean(Number(defaultValue));
+ if (value !== undefined && value !== null) value = Boolean(Number(value));
}
tempFields.push({
- newValue: null,
+ value,
+ newValue: undefined,
+ stringValue,
+ subPropertyValues,
+ cultureName,
fieldTermSetId: termSetId,
fieldAnchorId: anchorId,
options: choices,
lookupListID: lookupListId,
lookupField: lookupField,
- changedValue: defaultValue,
- fieldType: field.TypeAsString,
- fieldTitle: field.Title,
- fieldDefaultValue: defaultValue,
+ // changedValue: defaultValue,
+ fieldType: field.FieldType,
+ // fieldTitle: field.Title,
+ defaultValue: defaultValue,
context: this.props.context,
- disabled: this.props.disabled || (disabledFields && disabledFields.indexOf(field.InternalName) > -1),
- listId: this.props.listId,
- columnInternalName: field.EntityPropertyName,
+ disabled: this.props.disabled ||
+ (disabledFields &&
+ disabledFields.indexOf(field.InternalName) > -1),
+ // listId: this.props.listId,
+ columnInternalName: field.InternalName,
label: field.Title,
onChanged: this.onChange,
required: field.Required,
hiddenFieldName: hiddenName,
- Order: field.order,
+ Order: order,
isRichText: richText,
dateFormat: dateFormat,
firstDayOfWeek: defaultDayOfWeek,
listItemId: listItemId,
principalType: principalType,
- description: field.Description
+ description: field.Description,
+ minimumValue: minValue,
+ maximumValue: maxValue,
+ showAsPercentage: showAsPercentage,
+ customIcon: customIcons ? customIcons[field.InternalName] : undefined,
+ useModernTaxonomyPickerControl: useModernTaxonomyPicker,
+ choiceType: choiceType
});
+
+ // This may not be necessary now using RenderListDataAsStream
tempFields.sort((a, b) => a.Order - b.Order);
}
}
+ }
+ return tempFields;
+ }
- this.setState({ fieldCollection: tempFields });
- //return arrayItems;
- } catch (error) {
- console.log(`Error get field informations`, error);
- return null;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ private getTermsForModernTaxonomyPicker = async (termsetId: any, terms: any): Promise => {
+ if (!terms || terms.length === 0) {
+ return [];
}
+ const selectedTerms: ITermInfo[] = await Promise.all(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ terms.map(async (fetchedterm: any) => {
+ if (!fetchedterm?.TermGuid) {
+ console.error(`Error: TermGuid is undefined for term`, fetchedterm);
+ return null;
+ }
+
+ try {
+ const response = await this._taxonomyService.getTermById(
+ Guid.parse(termsetId),
+ Guid.parse(fetchedterm.TermGuid)
+ );
+
+ return {
+ id: response.id,
+ labels: [
+ {
+ name: response.labels?.[0]?.name ?? fetchedterm.Label,
+ isDefault: response.labels?.[0]?.isDefault ?? true,
+ languageTag: response.labels?.[0]?.languageTag ?? "en-US",
+ },
+ ],
+ childrenCount: response.childrenCount ?? 0,
+ createdDateTime: response.createdDateTime ?? new Date().toISOString(),
+ lastModifiedDateTime: response.lastModifiedDateTime ?? new Date().toISOString(),
+ descriptions: response.descriptions ?? [],
+ customSortOrder: response.customSortOrder ?? [],
+ properties: response.properties ?? [],
+ localProperties: response.localProperties ?? [],
+ isDeprecated: response.isDeprecated ?? false,
+ isAvailableForTagging: response.isAvailableForTagging ?? [],
+ topicRequested: response.topicRequested ?? false,
+ } as ITermInfo;
+ } catch (error) {
+ console.error(`Error fetching term ${fetchedterm.TermGuid}:`, error);
+ return null;
+ }
+ })
+ );
+
+ return selectedTerms.filter(term => term !== null);
}
- private uplaodImage = async (file: IFilePickerResult): Promise => {
- const {
- listId,
- listItemId
- } = this.props;
+ private cultureNameLookup(lcid: number): string {
+ const pageCulture = this.props.context.pageContext.cultureInfo.currentCultureName;
+ if (!lcid) return pageCulture;
+ return this.state.installedLanguages?.find(lang => lang.Lcid === lcid).DisplayName ?? pageCulture;
+ }
+
+ private uploadImage = async (
+ file: IFilePickerResult
+ ): Promise => {
+ const { listId, listItemId } = this.props;
if (file.fileAbsoluteUrl) {
return {
Name: file.fileName,
ServerRelativeUrl: file.fileAbsoluteUrl,
- UniqueId: ''
+ UniqueId: "",
};
- }
- else {
+ } else {
const fileInstance = await file.downloadFileContent();
const buffer = await this.getImageArrayBuffer(fileInstance);
- return await this._spService.uploadImage(listId, listItemId, file.fileName, buffer, undefined);
+ return await this._spService.uploadImage(
+ listId,
+ listItemId,
+ file.fileName,
+ buffer,
+ undefined,
+ this.webURL
+ );
}
- }
+ };
private getImageArrayBuffer = (file: File): Promise => {
- return new Promise(resolve => {
-
+ return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
@@ -562,37 +1572,182 @@ export class DynamicForm extends React.Component {
+ this.setState({
+ isValidationErrorDialogOpen: false,
+ });
+ };
+
+ private getValidationErrorTitle = (): string => {
+ let errorTitle = strings.DynamicFormDialogValidationErrorTitle;
+ const validationDialogProps = this.props.validationErrorDialogProps;
+
+ if (validationDialogProps?.customTitle) {
+ errorTitle = validationDialogProps.customTitle;
+ }
+
+ return errorTitle;
+ };
+
+ private getValidationErrorMessage = (): string => {
+ let errorMessage = strings.DynamicFormDialogValidationErrorMessage;
+ const validationDialogProps = this.props.validationErrorDialogProps;
+
+ if (validationDialogProps?.customMessage) {
+ errorMessage = validationDialogProps.customMessage;
+ }
+
+ return errorMessage;
+ };
+
+ private renderFileSelectionControl = (): React.ReactElement => {
+ const {
+ selectedFile,
+ missingSelectedFile
+ } = this.state;
+
+ const styles = getFieldstyles(this._classNames.subComponentStyles.fieldStyles(), { theme: theme });
+ const labelEl = ;
+
+ return => { // eslint-disable-line @typescript-eslint/no-explicit-any
+ /**
+ * Returns a pnp/sp folder object based on the folderPath and the library the folder is in.
+ * The folderPath can be a server relative path, but should be in the same library.
+ * @param folderPath The path to the folder coming from the component properties
+ * @param rootFolder The rootFolder object of the library
+ * @returns
+ */
+ private getFolderByPath = async (folderPath: string, rootFolder: IFolder): Promise => {
+ const libraryFolder = await rootFolder();
+ const normalizedFolderPath = decodeURIComponent(folderPath).toLowerCase().replace(/\/$/, "");
+ const serverRelativeLibraryPath = libraryFolder.ServerRelativeUrl.toLowerCase().replace(/\/$/, "");
+
+ // In case of a server relative path in the same library, return the folder
+ if (`${normalizedFolderPath}/`.startsWith(`${serverRelativeLibraryPath}/`)) {
+ return sp.web.getFolderByServerRelativePath(normalizedFolderPath);
+ }
+
+ // In other cases, expect a list-relative path and return the folder
+ const folder = sp.web.getFolderByServerRelativePath(`${serverRelativeLibraryPath}/${normalizedFolderPath}`);
+ return folder;
+ };
+
+ /**
+ * Updates a list item and retries the operation if a 409 (Save Conflict) was thrown.
+ * @param list The list/library on which to execute the operation
+ * @param itemId The item ID
+ * @param objects The values to update the item with
+ * @param retry The retry index
+ * @returns An update result
+ */
+ private updateListItemRetry = async (list: IList, itemId: number, objects: {}, retry: number = 0): Promise => {
try {
- const {
- context
- } = this.props;
- const webAbsoluteUrl = !webUrl ? this.webURL : webUrl;
- let apiUrl = '';
- if (contentTypeId !== undefined && contentTypeId !== '') {
- if (contentTypeId.startsWith('0x0120')) {
- apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/contenttypes('${contentTypeId}')/fields?@listId=guid'${encodeURIComponent(listId)}'&$filter=ReadOnlyField eq false and (Hidden eq false or StaticName eq 'Title') and (FromBaseType eq false or StaticName eq 'Title')`;
- } else {
- apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/contenttypes('${contentTypeId}')/fields?@listId=guid'${encodeURIComponent(listId)}'&$filter=ReadOnlyField eq false and Hidden eq false and (FromBaseType eq false or StaticName eq 'Title')`;
- }
- }
- else {
- apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/fields?@listId=guid'${encodeURIComponent(listId)}'&$filter=ReadOnlyField eq false and Hidden eq false and (FromBaseType eq false or StaticName eq 'Title')`;
- }
- const data = await context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
- if (data.ok) {
- const results = await data.json();
- if (results) {
- return results;
- }
+ return await list.items.getById(itemId).update(objects);
+ }
+ catch (error)
+ {
+ if (error.status === 409 && retry < 3) {
+ await timeout(100);
+ return await this.updateListItemRetry(list, itemId, objects, retry + 1);
}
- return null;
- } catch (error) {
- console.dir(error);
- return Promise.reject(error);
+ throw error;
}
}
+
}
+
+export const DynamicForm = styled(
+ DynamicFormBase,
+ getStyles,
+ undefined,
+ {
+ scope: 'DynamicForm',
+ },
+);
diff --git a/src/controls/dynamicForm/IDynamicFormProps.ts b/src/controls/dynamicForm/IDynamicFormProps.ts
index 6f116ccea..05c010787 100644
--- a/src/controls/dynamicForm/IDynamicFormProps.ts
+++ b/src/controls/dynamicForm/IDynamicFormProps.ts
@@ -1,7 +1,9 @@
import { BaseComponentContext } from '@microsoft/sp-component-base';
import { IItem } from '@pnp/sp/items';
+import { IStyle, IStyleFunctionOrObject } from '@fluentui/react';
import React from 'react';
-import { IDynamicFieldProps } from './dynamicField';
+import { IDynamicFieldProps,IDynamicFieldStyles } from './dynamicField';
+import { IValidationErrorDialogProps } from './IValidationErrorDialogProps';
export interface IDynamicFormProps {
/**
@@ -12,10 +14,19 @@ export interface IDynamicFormProps {
* Specifies if the form is disabled
*/
disabled?: boolean;
+ /**
+ * Specify if save button is disabled.
+ */
+ saveDisabled?: boolean;
/**
* List id
*/
listId: string;
+ /**
+ * List item loaded handler.
+ * Allows to access list item information after it's loaded.
+ */
+ onListItemLoaded?: (listItemData: any) => Promise; // eslint-disable-line @typescript-eslint/no-explicit-any
/**
* Before submit handler.
* Allows to modify the object to be submitted or cancel the submission.
@@ -45,17 +56,19 @@ export interface IDynamicFormProps {
/**
* Key value pair for fields you want to override. Key is the internal field name, value is the function to be called for the custom element to render
*/
- fieldOverrides?: {[columnInternalName: string] : {(fieldProperties: IDynamicFieldProps): React.ReactElement}};
+ fieldOverrides?: {
+ [columnInternalName: string]: {
+ (
+ fieldProperties: IDynamicFieldProps
+ ): React.ReactElement;
+ };
+ };
+
/**
* Specifies if onSubmitted event should pass PnPJS list item (IItem) as a second parameter. Default - true
*/
returnListItemInstanceOnSubmit?: boolean;
- /**
- * Used to execute WebSearch. If not provided SearchTab will not be available.
- */
- //bingAPIKey?: string;
-
/**
* InternalName of fields that should be disabled
*/
@@ -68,6 +81,115 @@ export interface IDynamicFormProps {
/**
* Absolute Web Url of target site (user requires permissions)
- * */
+ */
webAbsoluteUrl?: string;
+
+ /**
+ * Specifies if ETag should be respected when updating the item. Default - true
+ */
+ respectETag?: boolean;
+
+ /**
+ * Specifies whether custom formatting (set when customizing the out of the box form) should be used. Default - true
+ */
+ useCustomFormatting?: boolean;
+
+ /**
+ * Specifies whether client side validation should be used. Default - true
+ */
+ useClientSideValidation?: boolean;
+
+ /**
+ * Specifies whether field validation (set in column settings) should be used. Default - true
+ */
+ useFieldValidation?: boolean;
+
+ /**
+ * Specify validation error dialog properties
+ */
+ validationErrorDialogProps?: IValidationErrorDialogProps;
+
+ /**
+ * Specify if the form should support the creation of a new list item in a document library attaching a file to it.
+ * This option is only available for document libraries and works only when the contentTypeId is specified and has a base type of type Document.
+ * Default - false
+ */
+ enableFileSelection?: boolean;
+
+ /**
+ * Specify the supported file extensions for the file picker. Default - "docx", "doc", "pptx", "ppt", "xlsx", "xls", "pdf"
+ * Only used when enableFileSelection is true
+ */
+ supportedFileExtensions?: string[];
+
+ /**
+ * Specify a set of custom icons to be used.
+ * The key is the field internal name and the value is the Fluent UI icon name.
+ */
+ customIcons?: { [columnInternalName: string]: string };
+
+ /**
+ * Specify fields custom sorting.
+ * The value is the field internal name.
+ */
+ fieldOrder?: string[]
+
+ /**
+ * When uploading files: Specifies if last active tab will be stored after the Upload panel has been closed.
+ * Note: the value of selected tab is stored in the queryString hash.
+ * @default true
+ */
+ storeLastActiveTab?: boolean;
+
+ /**
+ * Library relative folder to create the item in.
+ * This option is only available for document libraries and works only when the contentTypeId is specified and has a base type of type Document or Folder.
+ * Defaults to the root folder.
+ */
+ folderPath?: string;
+
+ /**
+ * Set to true to use the Modern Taxonomy Picker (ModernTaxonomyPicker).
+ * Set to false to use the classic TaxonomyPicker.
+ * Default is false
+ */
+ useModernTaxonomyPicker?: boolean;
+
+ /**
+ * Call to provide customized styling
+ * Read https://github.com/microsoft/fluentui/blob/master/docs/react-wiki-archive/Component-Styling.md#using-a-styleable-component for more information
+ */
+ styles?: IStyleFunctionOrObject;
+
+ /**
+ * CSS Class name to add to the root element.
+ */
+ className?: string;
}
+
+
+
+export type IDynamicFormStyleProps = Pick & { };
+
+export interface IDynamicFormSubComponentStyles {
+ fieldStyles: IDynamicFieldStyles;
+}
+
+export interface IDynamicFormStyles {
+ root: IStyle;
+ sectionTitle: IStyle;
+ sectionFormFields: IStyle;
+ sectionFormField: IStyle;
+ sectionLine: IStyle;
+ header:IStyle;
+ footer:IStyle;
+ validationErrorDialog: IStyle;
+ buttons: IStyle;
+ actions: IStyle;
+ actionsRight: IStyle;
+ action: IStyle;
+ /**
+ * sub component styles for dynamic field
+ */
+ subComponentStyles: IDynamicFormSubComponentStyles;
+}
\ No newline at end of file
diff --git a/src/controls/dynamicForm/IDynamicFormState.ts b/src/controls/dynamicForm/IDynamicFormState.ts
index 2af931233..5818690dc 100644
--- a/src/controls/dynamicForm/IDynamicFormState.ts
+++ b/src/controls/dynamicForm/IDynamicFormState.ts
@@ -1,9 +1,37 @@
-
+import { IInstalledLanguageInfo } from '@pnp/sp/regional-settings';
+import { ISPField } from '../../common/SPEntities';
+import { MessageBarType } from '@fluentui/react/lib/MessageBar';
+import { ICustomFormattingBodySection, ICustomFormattingNode } from '../../common/utilities/ICustomFormatting';
import { IDynamicFieldProps } from './dynamicField/IDynamicFieldProps';
+import { IFilePickerResult } from "../filePicker";
+
export interface IDynamicFormState {
+ infoErrorMessages: {
+ type: MessageBarType;
+ message: string;
+ }[];
+ /** Form and List Item data */
fieldCollection: IDynamicFieldProps[];
+ installedLanguages?: IInstalledLanguageInfo[];
+ /** Validation Formulas set in List Column settings */
+ validationFormulas: Record>;
+ /** Field Show / Hide Validation Formulas, set in Edit Form > Edit Columns > Edit Conditional Formula */
+ clientValidationFormulas: Record>;
+ /** Tracks fields hidden by ClientValidationFormula */
+ hiddenByFormula: string[];
+ /** Populated by evaluation of List Column Setting validation. Key is internal field name, value is the configured error message. */
+ validationErrors: Record;
+ customFormatting?: {
+ header: ICustomFormattingNode;
+ body: ICustomFormattingBodySection[];
+ footer: ICustomFormattingNode;
+ }
+ headerContent?: JSX.Element;
+ footerContent?: JSX.Element;
isSaving?: boolean;
+ etag?: string;
+ isValidationErrorDialogOpen: boolean;
+ selectedFile?: IFilePickerResult;
+ missingSelectedFile?: boolean;
+ contentTypeId?: string;
}
-
-
-
diff --git a/src/controls/dynamicForm/IValidationErrorDialogProps.ts b/src/controls/dynamicForm/IValidationErrorDialogProps.ts
new file mode 100644
index 000000000..3bf5a113c
--- /dev/null
+++ b/src/controls/dynamicForm/IValidationErrorDialogProps.ts
@@ -0,0 +1,14 @@
+export interface IValidationErrorDialogProps {
+ /**
+ * Specifies if a dialog should be shown when validation fails. Default - false
+ */
+ showDialogOnValidationError?: boolean;
+ /**
+ * Specifies a custom title to be shown in the validation dialog. Default - empty
+ */
+ customTitle?: string;
+ /**
+ * Specifies a custom message to be shown in the validation dialog. Default - empty
+ */
+ customMessage?: string;
+}
diff --git a/src/controls/dynamicForm/dynamicField/DynamicField.styles.ts b/src/controls/dynamicForm/dynamicField/DynamicField.styles.ts
new file mode 100644
index 000000000..4f931b3c3
--- /dev/null
+++ b/src/controls/dynamicForm/dynamicField/DynamicField.styles.ts
@@ -0,0 +1,151 @@
+import { IStyle } from '@fluentui/react';
+import {
+ IDynamicFieldStyleProps,
+ IDynamicFieldStyles,
+} from './IDynamicFieldProps';
+
+export const getFieldStyles = (
+ props: IDynamicFieldStyleProps
+): IDynamicFieldStyles => {
+ const { required, theme } = props;
+ const { palette } = theme;
+ const globalClassNames = {
+ titleContainer: 'titleContainer',
+ fieldEditor: 'fieldEditor',
+ fieldIcon: 'fieldIcon',
+ fieldContainer: 'fieldContainer',
+ fieldDisplay: 'fieldDisplay',
+ fieldDisplayNoPadding: 'fieldDisplayNoPadding',
+ fieldDescription: 'fieldDescription',
+ fieldLabel: 'fieldLabel',
+ labelContainer: 'labelContainer',
+ pickersContainer: 'pickersContainer',
+ errormessage: 'errormessage',
+ richText: 'richText',
+ thumbnailFieldButtons: 'thumbnailFieldButtons',
+ selectedFileContainer: 'selectedFileContainer',
+ fieldRequired: 'fieldRequired',
+ };
+
+ const fieldDisplayNoPadding_style: IStyle = {
+ display: 'inline-block',
+ 'vertical-align': 'top',
+ width: '100%',
+ 'font-size': '14px',
+ 'font-weight': '400',
+ outline: '0',
+ };
+
+ const fieldDisplay_style: IStyle = fieldDisplayNoPadding_style && {
+ padding: '6px 0 0px 0',
+ };
+
+ const fieldRequired_style: IStyle = {
+ selectors: {
+ '::after': {
+ content: `' *'`,
+ color: theme.semanticColors.errorText,
+ 'padding-right': '12px',
+ },
+ },
+ };
+
+ const fontfamily =
+ "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto,'Helvetica Neue', 'sans-serif'";
+
+ return {
+ titleContainer: [
+ globalClassNames.titleContainer,
+ {
+ display: 'flex',
+ },
+ ],
+ fieldIcon: [
+ globalClassNames.fieldIcon,
+ {
+ 'align-self': 'center',
+ 'font-size': '16px',
+ color: palette.neutralSecondary,
+ 'margin-right': '8px',
+ },
+ ],
+ fieldDisplay: [globalClassNames.fieldDisplay, fieldDisplay_style],
+ fieldContainer: [
+ globalClassNames.fieldContainer,
+ { 'padding-bottom': '4px' },
+ ],
+ fieldDisplayNoPadding: [
+ globalClassNames.fieldDisplayNoPadding,
+ fieldDisplay_style,
+ ],
+ fieldEditor: [globalClassNames.fieldEditor, { padding: '4px 3px' }],
+ fieldDescription: [
+ globalClassNames.fieldDescription,
+ {
+ 'font-weight': '400',
+ 'font-size': '12px',
+ color: '#858585',
+ 'margin-top': '4px',
+ 'font-family': fontfamily,
+ '-webkit-font-smoothing': 'antialiased',
+ '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
+ 'overflow-wrap': 'break-word',
+ display: 'block',
+ 'user-select': 'none',
+ '-webkit-user-select': 'none',
+ },
+ ],
+ fieldLabel: [
+ globalClassNames.fieldLabel,
+ {
+ 'font-weight': '600',
+ 'font-size': '14px',
+ 'padding-top': '5px',
+ 'padding-bottom': '5px',
+ 'font-family': fontfamily,
+ '-webkit-font-smoothing': 'antialiased',
+ color: palette.neutralPrimary,
+ 'box-sizing': 'border-box',
+ 'box-shadow': 'none',
+ margin: '0px',
+ 'overflow-wrap': 'break-word',
+ display: 'block',
+ },
+ required && [globalClassNames.fieldRequired, fieldRequired_style],
+ ],
+ fieldRequired: [globalClassNames.fieldRequired, fieldRequired_style],
+ labelContainer: [
+ globalClassNames.labelContainer,
+ { 'padding-bottom': '7px' },
+ ],
+ pickersContainer: [
+ globalClassNames.pickersContainer,
+ { padding: '6px 0 0px' },
+ ],
+ selectedFileContainer: [
+ globalClassNames.selectedFileContainer,
+ { display: 'flex', margin: '10px 0px' },
+ ],
+ richText: [globalClassNames.richText, { position: 'relative' }],
+ thumbnailFieldButtons: [
+ globalClassNames.thumbnailFieldButtons,
+ { display: 'flex' },
+ ],
+ errormessage: [
+ globalClassNames.errormessage,
+ {
+ 'animation-duration': '0.367s',
+ 'animation-timing-function': 'cubic-bezier(0.1, 0.9, 0.2, 1)',
+ 'animation-fill-mode': 'both',
+ 'font-family': fontfamily,
+ 'font-size': '12px',
+ 'font-weight': '400',
+ color: theme.semanticColors.errorText,
+ margin: '0px',
+ 'padding-top': '5px',
+ display: 'flex',
+ 'align-items': 'center',
+ },
+ ],
+ };
+};
diff --git a/src/controls/dynamicForm/dynamicField/DynamicField.tsx b/src/controls/dynamicForm/dynamicField/DynamicField.tsx
index ab497e4af..b5d8f00a5 100644
--- a/src/controls/dynamicForm/dynamicField/DynamicField.tsx
+++ b/src/controls/dynamicForm/dynamicField/DynamicField.tsx
@@ -1,30 +1,35 @@
import '@pnp/sp/folders';
-import { sp } from '@pnp/sp/presets/all';
+import { ChoiceFieldFormatType, sp } from '@pnp/sp/presets/all';
import '@pnp/sp/webs';
import * as strings from 'ControlStrings';
-import { ActionButton } from 'office-ui-fabric-react/lib/Button';
-import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/components/Dropdown';
-import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { Image } from 'office-ui-fabric-react/lib/Image';
-import { Shimmer } from 'office-ui-fabric-react/lib/Shimmer';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+import { ActionButton } from '@fluentui/react/lib/Button';
+import { Dropdown, IDropdownOption, IDropdownProps } from '@fluentui/react/lib/Dropdown';
+import { DatePicker } from '@fluentui/react/lib/DatePicker';
+import { Icon } from '@fluentui/react/lib/Icon';
+import { Image } from '@fluentui/react/lib/Image';
+import { Shimmer } from '@fluentui/react/lib/Shimmer';
+import { Stack } from '@fluentui/react/lib/Stack';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Toggle } from '@fluentui/react/lib/Toggle';
import * as React from 'react';
import { DateTimePicker } from '../../dateTimePicker/DateTimePicker';
import { FilePicker, IFilePickerResult } from '../../filePicker';
import { ListItemPicker } from '../../listItemPicker';
import { LocationPicker } from '../../locationPicker';
-import { PeoplePicker, PrincipalType } from '../../peoplepicker';
+import { IPeoplePickerContext, PeoplePicker, PrincipalType } from '../../peoplepicker';
import { RichText } from '../../richText';
import { IPickerTerms, TaxonomyPicker } from '../../taxonomyPicker';
-import styles from '../DynamicForm.module.scss';
-import { IDynamicFieldProps } from './IDynamicFieldProps';
+import { IDynamicFieldProps, IDynamicFieldStyleProps, IDynamicFieldStyles } from './IDynamicFieldProps';
import { IDynamicFieldState } from './IDynamicFieldState';
+import CurrencyMap from "../CurrencyMap";
+import { ModernTaxonomyPicker } from '../../modernTaxonomyPicker';
+import { classNamesFunction, IProcessedStyleSet, styled, ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
+import { getFluentUIThemeOrDefault } from '../../../common/utilities/ThemeUtility';
+import { getFieldStyles } from './DynamicField.styles';
+const getClassNames = classNamesFunction();
-export class DynamicField extends React.Component {
+export class DynamicFieldBase extends React.Component {
constructor(props: IDynamicFieldProps) {
super(props);
@@ -32,20 +37,27 @@ export class DynamicField extends React.Component;
+
public componentDidUpdate(): void {
- if (this.props.fieldDefaultValue === "" && this.state.changedValue === null) {
+ if ((this.props.defaultValue === "" || this.props.defaultValue === null) && this.state.changedValue === null) {
this.setState({ changedValue: "" });
}
}
public render(): JSX.Element {
try {
+ const theme = getFluentUIThemeOrDefault();
+ const styles = (this._classNames = getClassNames(this.props.styles, {
+ theme: theme,
+ required:this.props.required
+ }));
return (
-
{ this.onChange(newText); }}
disabled={disabled}
@@ -163,30 +190,60 @@ export class DynamicField extends React.Component;
}
- case 'Choice':
+ case 'Choice': {
+ let choiceControl: JSX.Element = undefined;
+
+ // If the choiceType is dropdown
+ if (choiceType === ChoiceFieldFormatType.Dropdown) {
+ choiceControl = { this.onChange(option, true); }}
+ onBlur={this.onBlur}
+ errorMessage={errorText} />;
+ }
+ // If the choiceType is radio buttons
+ else {
+ // Parse options into radio buttons
+ const optionsGroup: IChoiceGroupOption[] =
+ options.map((option) => {
+ return {
+ key: option.key.toString(),
+ text: option.text,
+ checked: option.key.toString() === valueToDisplay
+ };
+ });
+
+ // Create radio group
+ choiceControl = { this.onChange(option, true); }}
+ disabled={disabled}
+ />;
+ }
+
return
{ this.onChange(option); }}
- onBlur={this.onBlur}
- errorMessage={errorText} />
+ {choiceControl}
{descriptionEl}
;
-
+}
case 'MultiChoice':
return
{ this.onChange(newValue); }}
- defaultValue={defaultValue}
+ onChange={(newValue) => { this.onChange(newValue, true); }}
+ defaultValue={valueToDisplay !== undefined ? valueToDisplay : defaultValue}
errorMessage={errorText}
/>
{descriptionEl}
;
case 'Lookup':
+ //eslint-disable-next-line no-case-declarations
+ const lookupValue = valueToDisplay !== undefined ? valueToDisplay : defaultValue;
return
{ this.onChange(newValue); }}
+ onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
context={context}
+ itemsQueryCountLimit={itemsQueryCountLimit}
+ orderBy={orderBy}
/>
{descriptionEl}
{errorTextEl}
;
case 'LookupMulti':
+ //eslint-disable-next-line no-case-declarations
+ const lookupMultiValue = valueToDisplay !== undefined ? valueToDisplay : defaultValue;
return
{ this.onChange(newValue); }}
+ onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
context={context}
+ itemsQueryCountLimit={itemsQueryCountLimit}
/>
{descriptionEl}
{errorTextEl}
;
- case 'Number':
+ case 'Number': {
+ const customNumberErrorMessage = this.getNumberErrorText();
+
return
{ this.onChange(newText); }}
disabled={disabled}
onBlur={this.onBlur}
- errorMessage={errorText} />
+ errorMessage={errorText || customNumberErrorMessage}
+ min={minimumValue}
+ max={maximumValue} />
{descriptionEl}
;
+ }
+ case 'Currency': {
+ const customNumberErrorMessage = this.getNumberErrorText();
- case 'Currency':
return
{ this.onChange(newText); }}
disabled={disabled}
onBlur={this.onBlur}
- errorMessage={errorText} />
+ errorMessage={errorText || customNumberErrorMessage}
+ min={minimumValue}
+ max={maximumValue} />
{descriptionEl}
;
-
+ }
case 'DateTime':
return
{ return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }}
- value={(changedValue !== null && changedValue !== "") ? changedValue : defaultValue}
- onSelectDate={(newDate) => { this.onChange(newDate); }}
+ value={valueToDisplay !== undefined ? valueToDisplay : defaultValue}
+ onSelectDate={(newDate) => { this.onChange(newDate, true); }}
disabled={disabled}
firstDayOfWeek={firstDayOfWeek}
+ allowTextInput={true}
/>}
{
dateFormat === 'DateTime' &&
@@ -313,10 +389,11 @@ export class DynamicField extends React.Component { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }}
- value={(changedValue !== null && changedValue !== "") ? changedValue : defaultValue}
- onChange={(newDate) => { this.onChange(newDate); }}
+ value={valueToDisplay !== undefined ? valueToDisplay : defaultValue}
+ onChange={(newDate) => { this.onChange(newDate, true); }}
disabled={disabled}
firstDayOfWeek={firstDayOfWeek}
+ allowTextInput={true}
/>
}
{descriptionEl}
@@ -326,61 +403,64 @@ export class DynamicField extends React.Component
{ this.onChange(checkedvalue); }}
+ onChange={(e, checkedvalue) => { this.onChange(checkedvalue, true); }}
disabled={disabled}
/>
{descriptionEl}
{errorTextEl}
;
- case 'User':
+ case 'User': {
+ const userValue = Boolean(changedValue) ? changedValue.map(cv => cv.secondaryText) : (value ? value : defaultValue);
return
{ this.onChange(items); }}
+ onChange={(items) => { this.onChange(items, true); }}
disabled={disabled}
/>
{descriptionEl}
{errorTextEl}
;
+ }
case 'UserMulti':
return
{ this.onChange(items); }}
+ onChange={(items) => { this.onChange(items, true); }}
disabled={disabled}
/>
{descriptionEl}
@@ -390,22 +470,25 @@ export class DynamicField extends React.Component
{ this.onURLChange(newText, true); }}
disabled={disabled}
- onBlur={this.onBlur} />
+ onBlur={this.onBlur}
+ />
{ this.onURLChange(newText, false); }}
disabled={disabled} />
@@ -416,7 +499,7 @@ export class DynamicField extends React.Component
;
@@ -488,26 +589,64 @@ export class DynamicField extends React.Component
;
+
+ case 'File':
+ return {
const {
- fieldDefaultValue,
+ defaultValue,
onChanged,
columnInternalName
} = this.props;
- let currValue = this.state.changedValue || fieldDefaultValue || {
+ let currValue = this.state.changedValue || defaultValue || {
Url: '',
Description: ''
};
@@ -556,18 +695,18 @@ export class DynamicField extends React.Component { // eslint-disable-line @typescript-eslint/no-explicit-any
+ private onChange = (value: any, callValidation = false): void => { // eslint-disable-line @typescript-eslint/no-explicit-any
const {
onChanged,
columnInternalName
} = this.props;
if (onChanged) {
- onChanged(columnInternalName, value);
+ onChanged(columnInternalName, value, callValidation);
}
this.setState({
changedValue: value
@@ -575,43 +714,133 @@ export class DynamicField extends React.Component {
- if (this.state.changedValue === null && this.props.fieldDefaultValue === "") {
+ if (this.state.changedValue === null && this.props.defaultValue === "") {
this.setState({ changedValue: "" });
}
+ this.props.onChanged(this.props.columnInternalName, this.state.changedValue, true);
}
private getRequiredErrorText = (): string => {
const {
changedValue
} = this.state;
- return (changedValue === undefined || changedValue === '') && this.props.required ? strings.DynamicFormRequiredErrorMessage : null;
+
+ const { value, newValue, required,listItemId } = this.props;
+
+ if (listItemId !== undefined && listItemId !== null) {
+ if (newValue === undefined) {
+ return required && (changedValue === undefined || changedValue === '' || changedValue === null || this.isEmptyArray(changedValue))
+ && (value === undefined || value === '' || value === null || this.isEmptyArray(value) || this.checkUserArrayIsEmpty(value)) ? strings.DynamicFormRequiredErrorMessage : null;
+ } else {
+ return required && (changedValue === undefined || changedValue === '' || changedValue === null || this.isEmptyArray(changedValue) || this.checkUserArrayIsEmpty(value)) ? strings.DynamicFormRequiredErrorMessage : null;
+ }
+ }
+
+ return null;
+ }
+
+ private getNumberErrorText = (): string => {
+ const {
+ changedValue
+ } = this.state;
+ const {
+ cultureName,
+ fieldType,
+ maximumValue,
+ minimumValue,
+ showAsPercentage,
+ value,
+ newValue,
+ required,
+ listItemId
+ } = this.props;
+
+ if (required && newValue!==undefined && (changedValue === undefined || changedValue === '' || changedValue === null || this.isEmptyArray(changedValue)) ) {
+ return strings.DynamicFormRequiredErrorMessage;
+ }
+
+ if(listItemId !== undefined && listItemId !== null){
+ if (required && newValue===undefined && (value === undefined || value === '' || value === null || this.isEmptyArray(value)) && (changedValue === undefined || changedValue === '' || changedValue === null || this.isEmptyArray(changedValue)) ) {
+ return strings.DynamicFormRequiredErrorMessage;
+ }
+ }
+
+
+ let minValue = minimumValue !== undefined && minimumValue !== -(Number.MAX_VALUE) ? minimumValue : undefined;
+ let maxValue = maximumValue !== undefined && maximumValue !== Number.MAX_VALUE ? maximumValue : undefined;
+
+ if (showAsPercentage === true) {
+ // In case of percentage we need to convert the min and max values to a percentage value
+ minValue = minValue !== undefined ? minValue * 100 : undefined;
+ maxValue = maxValue !== undefined ? maxValue * 100 : undefined;
+ }
+
+ let minValueCur: string, maxValueCur: string;
+ if (fieldType === "Currency" && cultureName) {
+ const countryCode = cultureName.split('-')?.[1];
+ if (minValue) minValueCur = Intl.NumberFormat(cultureName, { style: 'currency', currency: CurrencyMap[countryCode] }).format(minValue);
+ if (maxValue) maxValueCur = Intl.NumberFormat(cultureName, { style: 'currency', currency: CurrencyMap[countryCode] }).format(maxValue);
+ }
+
+ if (changedValue !== undefined && changedValue !== null && changedValue.length > 0) {
+ const numericValue = Number(changedValue);
+ if (isNaN(numericValue)) return strings.ProvidedValueIsInvalid;
+ if (minValue !== undefined && maxValue !== undefined && (numericValue < minValue || numericValue > maxValue)) {
+ return strings.DynamicFormNumberValueMustBeBetween.replace('{0}', minValueCur ?? minValue.toString()).replace('{1}', maxValueCur ?? maxValue.toString());
+ }
+ else {
+ if (minValue !== undefined && numericValue < minValue) {
+ return strings.DynamicFormNumberValueMustBeGreaterThan.replace('{0}', minValueCur ?? minValue.toString());
+ }
+ else if (maxValue !== undefined && numericValue > maxValue) {
+ return strings.DynamicFormNumberValueMustBeLowerThan.replace('{0}', maxValueCur ?? maxValue.toString());
+ }
+ }
+ }
+
+ return null;
+ }
+
+ private isEmptyArray(value): boolean {
+ return Array.isArray(value) && value.length === 0;
+ }
+
+ private checkUserArrayIsEmpty = (value): boolean => {
+ return Array.isArray(value) && value.every(item => item === "");
}
private MultiChoice_selection = (event: React.FormEvent, item: IDropdownOption): void => {
const {
changedValue
} = this.state;
+
try {
- let seletedItemArr;
- if (changedValue === null && this.props.fieldDefaultValue !== null) {
- seletedItemArr = [];
- this.props.fieldDefaultValue.forEach(element => {
- seletedItemArr.push(element);
+ let selectedItemArr;
+ const value = this.props.value || this.props.defaultValue;
+ if (changedValue === null && value !== null) {
+ selectedItemArr = [];
+ value.forEach(element => {
+ selectedItemArr.push(element);
});
}
- else
- seletedItemArr = !changedValue ? [] : changedValue;
+ else {
+ // selectedItemArr = this.props.value;
+ selectedItemArr = !changedValue ? [] :
+ ( Array.isArray(changedValue) ? [ ...changedValue ] : [ changedValue] );
+ }
+
if (item.selected) {
- seletedItemArr.push(item.key);
+ selectedItemArr.push(item.key);
}
else {
- const i = seletedItemArr.indexOf(item.key);
+ const i = selectedItemArr.indexOf(item.key);
if (i >= 0) {
- seletedItemArr.splice(i, 1);
+ selectedItemArr.splice(i, 1);
}
}
- this.setState({ changedValue: seletedItemArr });
- this.props.onChanged(this.props.columnInternalName, seletedItemArr);
+
+ this.setState({ changedValue: selectedItemArr });
+ this.props.onChanged(this.props.columnInternalName, selectedItemArr, true);
} catch (error) {
console.log(`Error MultiChoice_selection`, error);
}
@@ -641,7 +870,7 @@ export class DynamicField extends React.Component(
+ DynamicFieldBase,
+ getFieldStyles,
+ undefined,
+ {
+ scope: 'DynamicField',
+ },
+);
diff --git a/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts b/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts
index c2cb2d7a8..44208562d 100644
--- a/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts
+++ b/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts
@@ -1,37 +1,127 @@
import { BaseComponentContext } from '@microsoft/sp-component-base';
-import { IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
+import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
+import { IStyle, IStyleFunctionOrObject, Theme } from '@fluentui/react';
import { IFilePickerResult } from '../../filePicker';
+import { ChoiceFieldFormatType } from '@pnp/sp/fields';
export type DateFormat = 'DateTime' | 'DateOnly';
export type FieldChangeAdditionalData = IFilePickerResult;
export interface IDynamicFieldProps {
context: BaseComponentContext;
- disabled?: boolean;
- listId: string;
- listItemId?: number;
+
+ /** Internal column name */
columnInternalName: string;
+ cultureName?: string;
+
+ /** SharePoint Field Type */
+ fieldType: string;
+
+ /** Text label for field */
label?: string;
+
+ /** Placeholder text for field */
placeholder?: string;
- onChanged?: (columnInternalName: string, newValue: any, additionalData?: FieldChangeAdditionalData) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
- value?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ /** Specifies if a field should be filled in order to pass validation */
required: boolean;
+
+ /** Specifies if a field should be disabled */
+ disabled?: boolean;
+
+ /** List Item Id, passed to various utility/helper functions to determine things like selected User UPN, Lookup text, Term labels etc. */
+ listItemId?: number;
+
+ /** The default value of the field. */
+ defaultValue: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ /** Holds a field value. Set on all fields in the form. */
+ value?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ /** Fired by DynamicField when a field value is changed */
+ onChanged?: (
+ columnInternalName: string,
+ newValue: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+ validate: boolean,
+ additionalData?: FieldChangeAdditionalData
+ ) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ /** Represents the value of the field as updated by the user. Only updated by fields when changed. */
newValue?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
- fieldType: string;
- fieldTitle: string;
- fieldDefaultValue: any; // eslint-disable-line @typescript-eslint/no-explicit-any
- options?: IDropdownOption[];
+
+ /** Represents a stringified value of the field. Used in custom formatting and validation. */
+ stringValue: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ /** Holds additional properties that can be queried in validation. For example a Person column may be reference by both [$Person] and [$Person.email] */
+ subPropertyValues?: Record; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ /** If validation raises an error message, it can be stored against the field here for display by DynamicField */
+ validationErrorMessage?: string;
+
+ /** Field Term Set ID, used in Taxonomy / Metadata fields */
fieldTermSetId?: string;
+
+ /** Field Anchor ID, used in Taxonomy / Metadata fields */
fieldAnchorId?: string;
+
+ /** Lookup List ID, used in Lookup and User fields */
lookupListID?: string;
+
+ /** Lookup Field. Represents the field used for Lookup values. */
lookupField?: string;
- changedValue: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ // changedValue: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ /** Equivalent to HiddenListInternalName, used for Taxonomy Metadata fields */
hiddenFieldName?: string;
+
+ /** Order of the field in the form */
Order: number;
+
+ /** Used for files / image uploads */
+ additionalData?: FieldChangeAdditionalData;
+
+ /** Used to Render TaxonomyPicker or ModernTaxonomyPicker */
+ useModernTaxonomyPickerControl?: boolean;
+
+ // Related to various field types
+ options?: IDropdownOption[];
isRichText?: boolean;
dateFormat?: DateFormat;
firstDayOfWeek: number;
- additionalData?: FieldChangeAdditionalData;
- principalType?:string;
+ principalType?: string;
description?: string;
+ maximumValue?: number;
+ minimumValue?: number;
+ showAsPercentage?: boolean;
+ itemsQueryCountLimit?: number;
+ customIcon?: string;
+ orderBy?: string;
+ choiceType?: ChoiceFieldFormatType;
+ /** Used for customize component styling */
+ styles?:IStyleFunctionOrObject;
+}
+
+
+export interface IDynamicFieldStyleProps {
+ theme: Theme;
+ required?: boolean;
+}
+
+export interface IDynamicFieldStyles {
+ titleContainer: IStyle;
+ fieldIcon:IStyle;
+ fieldDisplay:IStyle;
+ fieldDisplayNoPadding:IStyle;
+ fieldContainer:IStyle;
+ fieldDescription:IStyle,
+ fieldLabel:IStyle;
+ labelContainer:IStyle;
+ pickersContainer:IStyle;
+ fieldEditor:IStyle;
+ errormessage:IStyle;
+ richText:IStyle;
+ thumbnailFieldButtons:IStyle;
+ selectedFileContainer:IStyle;
+ fieldRequired:IStyle;
}
diff --git a/src/controls/EnhancedThemeProvider/EnhancedThemeProvider.tsx b/src/controls/enhancedThemeProvider/EnhancedThemeProvider.tsx
similarity index 80%
rename from src/controls/EnhancedThemeProvider/EnhancedThemeProvider.tsx
rename to src/controls/enhancedThemeProvider/EnhancedThemeProvider.tsx
index 04b371404..549216b94 100644
--- a/src/controls/EnhancedThemeProvider/EnhancedThemeProvider.tsx
+++ b/src/controls/enhancedThemeProvider/EnhancedThemeProvider.tsx
@@ -1,15 +1,16 @@
import { ThemeProvider } from '@fluentui/react-theme-provider';
import { getVariant, VariantThemeType } from "@fluentui/scheme-utilities";
-import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
-import { createTheme, getTheme, IPalette, ITheme } from "office-ui-fabric-react/lib/Styling";
+import { initializeIcons } from '@fluentui/react/lib/Icons';
+import { createTheme, getTheme, IPalette, ITheme } from "@fluentui/react/lib/Styling";
import * as React from "react";
import { useCallback, useEffect, useState } from 'react';
import { fluentUITeamsDarkTheme } from '../../common/fluentUIThemes/FluentUITeamsDarkTheme';
import { fluentUITeamsDefaultTheme } from '../../common/fluentUIThemes/FluentUITeamsDefaultTheme';
import { fluentUITeamsHighContrastTheme } from '../../common/fluentUIThemes/FluentUITeamsHighContrastTheme';
-import { IEnhancedThemeProviderProps } from './IEnhancedThemeProviderProps';
+import IEnhancedThemeProviderProps from './IEnhancedThemeProviderProps';
import { ThemeContext, useTheme } from '@fluentui/react-theme-provider';
import * as telemetry from '../../common/telemetry';
+import { IMicrosoftTeams, WebPartContext } from '@microsoft/sp-webpart-base';
declare const window: Window & {
__themeState__: {
@@ -48,13 +49,14 @@ const EnhancedThemeProvider = (props: IEnhancedThemeProviderProps): JSX.Element
}, []);
useEffect(() => {
- setIsInTeams((props.context.sdks.microsoftTeams) ? true : false);
+ setIsInTeams(props.context instanceof WebPartContext && props.context.sdks.microsoftTeams ? true : false);
}, [props.context]);
useEffect(() => {
if (isInTeams) {
- setTeamsThemeName(props.context.sdks.microsoftTeams?.context?.theme);
- props.context.sdks?.microsoftTeams?.teamsJs?.registerOnThemeChangeHandler((theme: string) => {
+ const teamsInstance: IMicrosoftTeams = (props.context as WebPartContext).sdks.microsoftTeams;
+ setTeamsThemeName(teamsInstance.context?.theme);
+ teamsInstance.teamsJs?.registerOnThemeChangeHandler((theme: string) => {
setTeamsThemeName(theme);
});
}
diff --git a/src/controls/enhancedThemeProvider/IEnhancedThemeProviderProps.ts b/src/controls/enhancedThemeProvider/IEnhancedThemeProviderProps.ts
new file mode 100644
index 000000000..cb4d91546
--- /dev/null
+++ b/src/controls/enhancedThemeProvider/IEnhancedThemeProviderProps.ts
@@ -0,0 +1,9 @@
+import { ThemeProviderProps } from '@fluentui/react-theme-provider';
+import { BaseComponentContext } from '@microsoft/sp-component-base';
+
+export default interface IEnhancedThemeProviderProps extends ThemeProviderProps {
+ /**
+ * Set the context from the SPFx component.
+ */
+ context: BaseComponentContext;
+}
diff --git a/src/controls/EnhancedThemeProvider/index.ts b/src/controls/enhancedThemeProvider/index.ts
similarity index 100%
rename from src/controls/EnhancedThemeProvider/index.ts
rename to src/controls/enhancedThemeProvider/index.ts
diff --git a/src/controls/errorMessage/ErrorMessage.tsx b/src/controls/errorMessage/ErrorMessage.tsx
index aa41d8dbe..09d2fcaa4 100644
--- a/src/controls/errorMessage/ErrorMessage.tsx
+++ b/src/controls/errorMessage/ErrorMessage.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import styles from './ErrorMessage.module.scss';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
export interface IFieldErrorMessageProps {
errorMessage: string;
diff --git a/src/controls/fieldCollectionData/FieldCollectionData.module.scss b/src/controls/fieldCollectionData/FieldCollectionData.module.scss
index 709b99060..84eb5d0c5 100644
--- a/src/controls/fieldCollectionData/FieldCollectionData.module.scss
+++ b/src/controls/fieldCollectionData/FieldCollectionData.module.scss
@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import '~@fluentui/react/dist/sass/References.scss';
.collectionData {
background-color: $ms-color-neutralLight;
@@ -177,3 +177,7 @@
border-bottom: 1px solid $ms-color-neutralTertiary;
}
}
+
+.peoplePicker {
+ background-color: #fff;
+}
diff --git a/src/controls/fieldCollectionData/FieldCollectionData.tsx b/src/controls/fieldCollectionData/FieldCollectionData.tsx
index 23b208aac..ac0e8f2d4 100644
--- a/src/controls/fieldCollectionData/FieldCollectionData.tsx
+++ b/src/controls/fieldCollectionData/FieldCollectionData.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
import * as telemetry from '../../common/telemetry';
-import { DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
-import { Panel, PanelType } from 'office-ui-fabric-react/lib/components/Panel';
-import { Label } from 'office-ui-fabric-react/lib/components/Label';
+import { DefaultButton } from '@fluentui/react/lib/Button';
+import { Panel, PanelType } from '@fluentui/react/lib/Panel';
+import { Label } from '@fluentui/react/lib/Label';
import { CollectionDataViewer } from './collectionDataViewer';
import { IFieldCollectionDataProps, IFieldCollectionDataState } from "./IFieldCollectionData";
import * as strings from 'ControlStrings';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
export class FieldCollectionData extends React.Component {
constructor(props: IFieldCollectionDataProps) {
@@ -48,13 +48,23 @@ export class FieldCollectionData extends React.Component{ /* no-op; */}}
- className={`FieldCollectionData__panel ${this.props.panelClassName || ""}`}>
+ 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 && (
- );
+
+ return _element;
}
}
diff --git a/src/controls/fieldCollectionData/ICustomCollectionField.ts b/src/controls/fieldCollectionData/ICustomCollectionField.ts
index 9bf8308f2..ea99622f2 100644
--- a/src/controls/fieldCollectionData/ICustomCollectionField.ts
+++ b/src/controls/fieldCollectionData/ICustomCollectionField.ts
@@ -1,6 +1,7 @@
-import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { IRenderFunction } from '@uifabric/utilities/lib/IRenderFunction';
-import { ISelectableOption } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+import { ISelectableOption } from '@fluentui/react/lib/utilities/selectableOption/SelectableOption.types';
+import { IComboBoxOption } from '@fluentui/react/lib/ComboBox';
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; // eslint-disable-line @typescript-eslint/no-explicit-any
+ onGetErrorMessage?: (value: any, index: number, currentItem: any) => string | Promise; // eslint-disable-line @typescript-eslint/no-explicit-any
/**
* Custom field rendering support
@@ -72,7 +93,10 @@ export enum CustomCollectionFieldType {
number,
boolean,
dropdown,
+ combobox,
+ peoplepicker,
fabricIcon,
url,
+ date,
custom
}
diff --git a/src/controls/fieldCollectionData/IFieldCollectionData.ts b/src/controls/fieldCollectionData/IFieldCollectionData.ts
index 0926306ba..e21f7e43a 100644
--- a/src/controls/fieldCollectionData/IFieldCollectionData.ts
+++ b/src/controls/fieldCollectionData/IFieldCollectionData.ts
@@ -1,4 +1,6 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base";
import { ICustomCollectionField } from "./ICustomCollectionField";
+import { IPanelProps } from "@fluentui/react";
export interface IFieldCollectionDataProps {
/**
@@ -70,11 +72,28 @@ export interface IFieldCollectionDataProps {
*/
itemsPerPage?: number;
/**
- * Allows you to show Search Box and specify own filtering logic.
+ * Allow overriding panel props such as size, type, layerProps, etc.
*/
+ panelProps?: IPanelProps;
+ /**
+ * Allows you to show Search Box and specify own filtering logic.
+ */
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 {
diff --git a/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx b/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx
index 9ac0f2ba2..07823ba9f 100644
--- a/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx
+++ b/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx
@@ -2,19 +2,22 @@ import * as React from 'react';
import styles from '../FieldCollectionData.module.scss';
import { ICollectionDataItemProps } from './ICollectionDataItemProps';
import { ICollectionDataItemState } from './ICollectionDataItemState';
-import { TextField } from 'office-ui-fabric-react/lib/components/TextField';
-import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
-import { Link } from 'office-ui-fabric-react/lib/components/Link';
-import { Checkbox } from 'office-ui-fabric-react/lib/components/Checkbox';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Icon } from '@fluentui/react/lib/Icon';
+import { Link } from '@fluentui/react/lib/Link';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
import * as strings from 'ControlStrings';
import { CustomCollectionFieldType, ICustomCollectionField } from '../ICustomCollectionField';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
-import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/components/Callout';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
+import { ComboBox, IComboBoxOption } from '@fluentui/react/lib/ComboBox';
+import { IPeoplePickerContext, PeoplePicker, PrincipalType } from "../../peoplepicker";
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
import { CollectionIconField } from '../collectionIconField';
import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
-import { CollectionNumberField } from '../collectionNumberField';
import { Guid } from '@microsoft/sp-core-library';
import { FieldValidator } from '../FieldValidator';
+import { DatePicker } from '@fluentui/react/lib/DatePicker';
+import { IPersonaProps } from '@fluentui/react/lib/Persona';
export class CollectionDataItem extends React.Component {
private emptyItem: any = null; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -54,6 +57,7 @@ export class CollectionDataItem extends React.Component { // eslint-disable-line @typescript-eslint/no-explicit-any
+
this.setState((prevState: ICollectionDataItemState): ICollectionDataItemState => {
const { crntItem } = prevState;
// Update the changed field
@@ -66,6 +70,84 @@ export class CollectionDataItem extends React.Component {
+ let _selectedOption: IComboBoxOption = null;
+ if (typeof option === "undefined" && typeof value !== "undefined" && value.length === 0) {
+ _selectedOption = null;
+ } else if (typeof option === "undefined" && value.length > 0) {
+ _selectedOption = {
+ key: value,
+ text: value
+ };
+ } else {
+ _selectedOption = option;
+ }
+
+ this.setState((prevState: ICollectionDataItemState): ICollectionDataItemState => {
+ const { crntItem } = prevState;
+
+ // Update the changed field
+ crntItem[fieldId] = _selectedOption;
+
+ this.doAllFieldChecks();
+
+ // Store this in the current state
+
+ return { crntItem };
+ });
+
+ }
+
+ private onValueChangedComboBoxMulti = (fieldId: string, option: IComboBoxOption, value: string): void => { // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ let _selectedOption: IComboBoxOption = null;
+ let _selected: IComboBoxOption[] = [];
+
+ this.setState((prevState: ICollectionDataItemState): ICollectionDataItemState => {
+ const { crntItem } = prevState;
+ _selected = crntItem[fieldId];
+
+ if (typeof option === "undefined") {
+ // freeform
+ _selectedOption = {
+ key: value,
+ text: value,
+ selected: true
+ };
+ } else {
+ // selected option
+ _selectedOption = {
+ key: option.key,
+ text: option.text,
+ selected: option.selected
+ };
+ }
+
+ if (_selected === null) {
+ _selected = [];
+ }
+
+ if (_selectedOption.selected === true) {
+ //add to selection
+ _selected.push(_selectedOption);
+ } else {
+ //remove from selection
+ _selected = _selected.filter(x => x.key !== _selectedOption.key);
+ }
+
+ // Update the changed field
+ if (_selected.length === 0) {
+ _selected = null;
+ }
+
+ crntItem[fieldId] = _selected;
+
+ this.doAllFieldChecks();
+
+ return { crntItem };
+ });
+ }
+
/**
* Perform all required field checks at once
*/
@@ -94,13 +176,15 @@ export class CollectionDataItem extends React.Component f.required);
+ const requiredFields: ICustomCollectionField[] = this.props.fields.filter(f => f.required);
+
// Check all the required field values
for (const field of requiredFields) {
if (typeof item[field.id] === "undefined" || item[field.id] === null || item[field.id] === "") {
return false;
}
}
+
return true;
}
@@ -156,6 +240,7 @@ export class CollectionDataItem extends React.Component => { // eslint-disable-line @typescript-eslint/no-explicit-any
+ let isValid: boolean = true;
+ let validation: string = "";
+
+ // Check if custom validation is configured
+ if (field.onGetErrorMessage) {
+ // Using the custom validation
+ validation = await field.onGetErrorMessage(value, this.props.index, item);
+ isValid = validation === "";
+ } else if (typeof field.minimumUsers === "number" && value.length < field.minimumUsers) {
+ validation = typeof field.minimumUsersMessage === "string" ? field.minimumUsersMessage : strings.CollectionDataMinimumUsersDefaultMessage.replace("{0}", field.minimumUsers.toString());
+ }
+
+ // Store the field validation
+ this.validation[field.id] = isValid;
+ // Add message for the error callout
+ this.errorCalloutHandler(field.id, validation);
+ this.doAllFieldChecks();
+ // Return empty the error message if needed
+
+ return "";
+ }
+
+ private comboboxValidation = (field: ICustomCollectionField, selected: string[] | string): void => {
+ let isValid = true;
+ const validation = "";
+
+ if (field.required && (selected === null || selected.length === 0)) {
+ isValid = false;
+ }
+
+ // Store the field validation
+ this.validation[field.id] = isValid;
+ this.errorCalloutHandler(field.id, validation);
+ }
+
/**
* Error callout message handler
*
@@ -345,6 +466,15 @@ export class CollectionDataItem extends React.Component this.onValueChanged(field.id, value)}
+ deferredValidationTime={field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200}
+ onGetErrorMessage={async (value: string) => await this.fieldValidation(field, value)}
+ inputClassName="PropertyFieldCollectionData__panel__number-field" />;
case CustomCollectionFieldType.fabricIcon:
return (
= 0 ? field.deferredValidationTime : 200}
onGetErrorMessage={async (value: string) => this.urlFieldValidation(field, value, item)}
inputClassName="PropertyFieldCollectionData__panel__url-field" />;
+ case CustomCollectionFieldType.date:
+ return
+ {this._customFormatter.renderCustomFormatContent(customFormatting.header, this.getFormValuesForValidation(), true)}
+
+ }
+
+ // Custom Formatting - Body
+ const bodySections: ICustomFormattingBodySection[] = [];
+ if (!customFormattingDisabled && customFormatting?.body) {
+ bodySections.push(...customFormatting.body.slice());
+ if (bodySections.length > 0) {
+ const specifiedFields: string[] = bodySections.reduce((prev, cur) => {
+ prev.push(...cur.fields);
+ return prev;
+ }, []);
+ const omittedFields = fieldCollection.filter(f => !specifiedFields.includes(f.label)).map(f => f.label);
+ bodySections[bodySections.length - 1].fields.push(...omittedFields);
+ }
+ }
+
+ // Custom Formatting - Footer
+ let footerContent: JSX.Element;
+ if (!customFormattingDisabled && customFormatting?.footer) {
+ footerContent =
+ {this._customFormatter.renderCustomFormatContent(customFormatting.footer, this.getFormValuesForValidation(), true)}
+
+ }
+
+ // Content Type
+ let contentTypeId = this.props.contentTypeId;
+ if (this.state.contentTypeId !== undefined) contentTypeId = this.state.contentTypeId;
return (
- {fieldCollection.length === 0 ? {ie.message}
+ ))}
+ {fieldCollection.length === 0 ? (
);
}
- //trigger when the user submits the form.
+ private sortFields = (fields: IDynamicFieldProps[], customSort: string[]): IDynamicFieldProps[] => {
+ const fMap = new Map
- {fieldCollection.map((v, i) => {
- if(fieldOverrides && Object.prototype.hasOwnProperty.call(fieldOverrides, v.columnInternalName)) {
- v.disabled = v.disabled || isSaving;
- return fieldOverrides[v.columnInternalName](v);
- }
- return
+ ) : (
+
+ {headerContent}
+ {this.props.enableFileSelection === true &&
+ this.props.listItemId === undefined &&
+ contentTypeId !== undefined &&
+ contentTypeId.startsWith("0x0101") &&
+ this.renderFileSelectionControl()}
+ {(bodySections.length > 0 && !customFormattingDisabled) && bodySections
+ .filter(bs => bs.fields.filter(bsf => hiddenByFormula.indexOf(bsf) < 0).length > 0)
+ .map((section, i) => (
+ <>
+
} + + ))} + {(bodySections.length === 0 || customFormattingDisabled) && fieldCollection.map((f, i) => this.renderField(f))} + {footerContent} + {!this.props.disabled && (
- this.onSubmitClick()} />
- this.onSubmitClick()}
+ />
+
- }
-
-
+ )}
- }
+ )}
+
{section.displayname}
+
+ {section.fields
+ .filter(f => fieldCollection.find(fc => fc.label === f))
+ .map((f, i) => (
+
+ {i < bodySections.length - 1 &&
+ {this.renderField(fieldCollection.find(fc => fc.label === f) as IDynamicFieldProps)}
+
+ ))}
+ } + + ))} + {(bodySections.length === 0 || customFormattingDisabled) && fieldCollection.map((f, i) => this.renderField(f))} + {footerContent} + {!this.props.disabled && (
+ {
+ if (filePickerResult.length === 1) {
+ this.setState({
+ selectedFile: filePickerResult[0],
+ missingSelectedFile: false
+ });
+ }
+ else {
+ this.setState({
+ missingSelectedFile: true
+ });
+ }
+ }}
+ required={true}
+ context={this.props.context}
+ hideWebSearchTab={true}
+ hideStockImages={true}
+ hideLocalMultipleUploadTab={true}
+ hideLinkUploadTab={true}
+ hideSiteFilesTab={true}
+ checkIfFileExists={true}
+ storeLastActiveTab={this.props.storeLastActiveTab ?? true}
+ />
+ {selectedFile &&
;
+ }
+
+ private getFileIconFromExtension = (): string => {
+ const fileExtension = this.state.selectedFile.fileName.split('.').pop();
+ switch (fileExtension) {
+ case 'pdf':
+ return 'PDF';
+ case 'docx':
+ case 'doc':
+ return 'WordDocument';
+ case 'pptx':
+ case 'ppt':
+ return 'PowerPointDocument';
+ case 'xlsx':
+ case 'xls':
+ return 'ExcelDocument';
+ case 'jpg':
+ case 'jpeg':
+ case 'png':
+ case 'gif':
+ return 'FileImage';
+ default:
+ return 'Document';
+ }
+ }
+
+ /**
+ * Creates a folder name based on the FileLeafRef field (if rendered) or the Title field (if rendered)
+ * Replaces not allowed chars in folder name and trims spaces at the start and end of the string
+ * Empty string will be replaced by SPO with Folder Item ID
+ * @param objects The object containing the field values
+ * @returns the folder name
+ */
+ private getFolderName = (objects: {}): string => {
+ const titleField = "Title";
+ const fileLeafRefField = "FileLeafRef";
+ let folderNameValue = "";
+
+ if (objects[fileLeafRefField] !== undefined && objects[fileLeafRefField] !== "")
+ folderNameValue = objects[fileLeafRefField] as string;
+
+ if (objects[titleField] !== undefined && objects[titleField] !== "")
+ folderNameValue = objects[titleField] as string;
+
+ return folderNameValue.replace(/["|*|:|<|>|?|/|\\||]/g, "_").trim();
}
- private getFormFields = async (listId: string, contentTypeId: string | undefined, webUrl?: string): Promise
+
+
+
}
+ {missingSelectedFile === true &&
+ {strings.DynamicFormRequiredFileMessage}
}
+
+ {labelText};
- const errorText = this.getRequiredErrorText();
+ // const defaultValue = fieldDefaultValue;
+ const styles=this._classNames;
+ const labelEl = ;
+ const errorText = this.props.validationErrorMessage || this.getRequiredErrorText();
const errorTextEl = {errorText} ;
const descriptionEl = {description} ;
const hasImage = !!changedValue;
+ const valueToDisplay = newValue !== undefined ? newValue : value;
+
switch (fieldType) {
case 'loading':
return
{ this.onChange(newText); }}
disabled={disabled}
onBlur={this.onBlur}
@@ -127,18 +153,18 @@ export class DynamicField extends React.Component
{ this.onChange(newText); return newText; }}
- isEditMode={disabled} />
+ isEditMode={!disabled} />
{descriptionEl}
{errorTextEl}
;
@@ -146,13 +172,14 @@ export class DynamicField extends React.Component
{this.getFieldComponent()}
);
@@ -63,20 +75,27 @@ export class DynamicField extends React.Component
-
-
-
-
-
-
-
-
-
-
-
-
{
@@ -302,10 +377,11 @@ export class DynamicField extends React.Component
-
-
-
-
-
-
-
- { this.onChange(newValue); }}
- isTermSetSelectable={false}
- />
-
+ {useModernTaxonomyPickerControl ?
+
+ { this.onChange(newValue, true); }}
+ />
+
+ :
+
+ { this.onChange(newValue, true); }}
+ isTermSetSelectable={false}
+ />
+
+ }
{descriptionEl}
{errorTextEl}
-
-
- { this.onChange(newValue); }}
- isTermSetSelectable={false} />
-
+ {useModernTaxonomyPickerControl ?
+
+ { this.onChange(newValue, true); }}
+ />
+
+ :
+
+ { this.onChange(newValue, true); }}
+ isTermSetSelectable={false}
+ />
+
+ }
{descriptionEl}
{errorTextEl}
+ { this.onChange(newText); }}
+ disabled={disabled}
+ onBlur={this.onBlur}
+ errorMessage={errorText}
+ />
+ {descriptionEl}
+
;
}
return null;
@@ -521,22 +660,22 @@ export class DynamicField extends React.Component
+
+ {this.props.panelDescription}
@@ -76,6 +87,7 @@ export class FieldCollectionData extends React.Component