diff --git a/docs/documentation/docs/about/license.md b/docs/documentation/docs/about/license.md index 1a9f90675..4a2c308aa 100644 --- a/docs/documentation/docs/about/license.md +++ b/docs/documentation/docs/about/license.md @@ -1,4 +1,4 @@ -License +# License MIT License diff --git a/docs/documentation/docs/beta.md b/docs/documentation/docs/beta.md index 64a5fa6f6..d0e2650ae 100644 --- a/docs/documentation/docs/beta.md +++ b/docs/documentation/docs/beta.md @@ -1,8 +1,10 @@ -# Testing out a beta release ![](https://img.shields.io/npm/v/@pnp/spfx-controls-react/next.svg) +# Testing out a beta release + +![](https://img.shields.io/npm/v/@pnp/spfx-controls-react/next.svg) All you need to do for testing out a beta release of `@pnp/spfx-controls-react` is to install the dependency as follows: -``` +```bash npm install @pnp/spfx-controls-react@next --save ``` diff --git a/docs/documentation/docs/controls/AccessibleAccordion.md b/docs/documentation/docs/controls/AccessibleAccordion.md index f78273ffc..5c6f4d16b 100644 --- a/docs/documentation/docs/controls/AccessibleAccordion.md +++ b/docs/documentation/docs/controls/AccessibleAccordion.md @@ -63,19 +63,16 @@ import { The `Accordion` control can be configured with the following properties: - ### Accordion | Property | Type | Required | Description | Default | | ---- | ---- | ---- | ---- | ---- | -| allowMultipleExpanded | boolean | no | Don't autocollapse items when expanding other items. | `false` | +| allowMultipleExpanded | boolean | no | Don't auto-collapse items when expanding other items. | `false` | | allowZeroExpanded | boolean | no | Allow the only remaining expanded item to be collapsed. | `false` | | preExpanded | string[] | no | Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches any one of these strings will be expanded on mount. | `[]` | | className | string | no | Class(es) to apply to element. | "accordion" | | onChange | (string[]) => void | no | Callback which is invoked when items are expanded or collapsed. Gets passed `uuid`s of the currently expanded `AccordionItem`s. | | -| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. | - - +| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. | | ### AccordionItem @@ -85,7 +82,6 @@ The `Accordion` control can be configured with the following properties: | uuid | string \| number | no | Recommended for use with `onChange`. Will be auto-generated if not provided. | | | dangerouslySetExpanded | boolean | no | Enables external control of the expansion. **Warning: This may impact accessibility negatively, use at your own risk** | | - ### AccordionItemHeading | Property | Type | Required | Description | Default | @@ -95,24 +91,21 @@ The `Accordion` control can be configured with the following properties: ### AccordionItemButton -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| className | string | no | Class(es) to apply to the 'button' element. | "accordion__button" | - +| Property | Type | Required | Description | Default | +| --------- | ------ | -------- | ------------------------------------------- | ------------------- | +| className | string | no | Class(es) to apply to the 'button' element. | "accordion__button" | ### AccordionItemPanel -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| className | string | no | Class(es) to apply to element. | "accordion__panel" | - +| Property | Type | Required | Description | Default | +| --------- | ------ | -------- | ------------------------------ | ------------------ | +| className | string | no | Class(es) to apply to element. | "accordion__panel" | ### AccordionItemState -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| children | ({ expanded: boolean, disabled: booleam }): JSX.Element | yes | item's children. | | - +| Property | Type | Required | Description | Default | +| -------- | ------------------------------------------------------- | -------- | ---------------- | ------- | +| children | ({ expanded: boolean, disabled: boolean }): JSX.Element | yes | item's children. | | ## Helpers @@ -125,5 +118,4 @@ resetNextUuid : () => void Resets the internal counter for Accordion items' identifiers (including `id` attributes). For use in test suites and isomorphic frameworks. - ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AccessibleAccordion) diff --git a/docs/documentation/docs/controls/Accordion.md b/docs/documentation/docs/controls/Accordion.md index a40bfbe85..bddfd8017 100644 --- a/docs/documentation/docs/controls/Accordion.md +++ b/docs/documentation/docs/controls/Accordion.md @@ -54,5 +54,4 @@ The `Accordion` control can be configured with the following properties: | collapsedIcon | string | no | Optional custom icon when accordion is collapsed [See Fluent UI icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)| ChevronRight | | expandedIcon | string | no | Optional custom icon when accordion is expanded [See Fluent UI icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)| ChevronDown | - ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Accordion) diff --git a/docs/documentation/docs/controls/AdaptiveCardDesignerHost.md b/docs/documentation/docs/controls/AdaptiveCardDesignerHost.md index 18076f78b..fb37a9ab3 100644 --- a/docs/documentation/docs/controls/AdaptiveCardDesignerHost.md +++ b/docs/documentation/docs/controls/AdaptiveCardDesignerHost.md @@ -17,9 +17,9 @@ All Inputs Elements and Actions of Adaptive Cards have been redefined using Flue Thanks to the "context" property that allows you to pass the SPFx context, whether the "data" property is passed or not, a new field called @context will be injected into the data object. -This allows, using Adaptive Cards templating syntax and binding feature of the Designer, to access to the context informations. +This allows, using Adaptive Cards templating syntax and binding feature of the Designer, to access to the context information. -For more info please to refear tot he documentation of [AdaptiveCardHost ](http://www.google.com)control +For more info please to refer tot he documentation of [AdaptiveCardHost ](http://www.google.com)control Here is an example of the control in action inside a Web Part: @@ -89,7 +89,7 @@ The `AdaptiveCardDesignerHost` control can be configured with the following prop | data | { "$root": object } | false | Set Data Source for template rendering | - | | newCardPayload | object | false | Set Adaptive Card payload for the New Card | - | | hostContainers | HostContainer[] | false | Set custom HostContainers | [] | -| supportedTargetVersions | Version[] | false | Set the suported Versions | [Versions.v1_5] | +| supportedTargetVersions | Version[] | false | Set the supported Versions | [Versions.v1_5] | | snippets | IToolboxSnippet[] | false | Set the Toolbox Snippets | [] | | bindingPreviewMode | BindingPreviewMode | false | Set the Binding preview mode | BindingPreviewMode.GeneratedData | | enableDataBindingSupport | boolean | false | Enable the support for Data Binding | true | diff --git a/docs/documentation/docs/controls/AdaptiveCardHost.md b/docs/documentation/docs/controls/AdaptiveCardHost.md index d1ad35046..2cccb867e 100644 --- a/docs/documentation/docs/controls/AdaptiveCardHost.md +++ b/docs/documentation/docs/controls/AdaptiveCardHost.md @@ -13,15 +13,16 @@ All Elements and Actions of Adaptive Cards have been redefined using Fluent UI R Thanks to the "context" property that allows you to pass the SPFx context, whether the "data" property is passed or not, a new field called @context will be injected into the data object. -This allows, using Adaptive Cards templating syntax, to access to the context informations using the following fields (for more information on these fields, refer to the [BaseComponentContext](https://docs.microsoft.com/en-us/javascript/api/sp-component-base/basecomponentcontext) class): +This allows, using Adaptive Cards templating syntax, to access to the context information using the following fields (for more information on these fields, refer to the [BaseComponentContext](https://docs.microsoft.com/javascript/api/sp-component-base/basecomponentcontext) class): + - "theme": property "theme" from the current theme applied to the card. -- "aadInfo": Azure AD informations retrieved from the SPFx context object. -- "cultureInfo": Culture informations retrieved from the SPFx context object. -- "userInfo": User informations retrieved from the SPFx context object. -- "spListInfo": Current List informations retrieved from the SPFx context object. -- "spListItemInfo": Current List item informations retrieved from the SPFx context object. -- "spSiteInfo": Current Site informations retrieved from the SPFx context object. -- "spWebInfo": Current Web informations retrieved from the SPFx context object. +- "aadInfo": Azure AD information retrieved from the SPFx context object. +- "cultureInfo": Culture information retrieved from the SPFx context object. +- "userInfo": User information retrieved from the SPFx context object. +- "spListInfo": Current List information retrieved from the SPFx context object. +- "spListItemInfo": Current List item information retrieved from the SPFx context object. +- "spSiteInfo": Current Site information retrieved from the SPFx context object. +- "spWebInfo": Current Web information retrieved from the SPFx context object. The Adaptive Cards version supported is 1.5, by using the 'adaptivecards' npm package version 2.10.0. @@ -91,7 +92,7 @@ import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeT /> ``` -- Example on use the `AdaptiveCardHost` control with SharePoint Theme "Section Variation" ('this.props.theme' is the theme that come from the Web Part) */): +- Example on use the `AdaptiveCardHost` control with SharePoint Theme "Section Variation" ('this.props.theme' is the theme that come from the Web Part): ```TypeScript void | yes | Invoked every time an Action is performed. | | onError | (error: Error) => void | yes | Invoked every time an exception occurs in the rendering phase. | -| onSetCustomElements | (registry: CardObjectRegistry) => void | no | Invoked to manage Elements to the current Adaptive Card instance. | -| onSetCustomActions | (registry: CardObjectRegistry) => void | no | Invoked to manage Actions to the current Adaptive Card instance. | +| onSetCustomElements | (registry: CardObjectRegistry<CardElement>) => void | no | Invoked to manage Elements to the current Adaptive Card instance. | +| onSetCustomActions | (registry: CardObjectRegistry<Action>) => void | no | Invoked to manage Actions to the current Adaptive Card instance. | | onUpdateHostCapabilities | (hostCapabilities: HostCapabilities) => void | no | Invoked to manage the HostCapabilities object like add custom properties. | | context | BaseComponentContext | no | Set the context from the SPFx component. If set, some context properties will be automatically injected into the data object, so they can be used by the Adaptive Cards binding engine. | Interface `IAdaptiveCardHostActionResult` -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| type | string | yes | Type of the Action. | -| title | string | no | Title of the Action. | -| url | string | no | Url of the Action. | -| data | object | no | Data of the Action. | -| verb | string | no | Verb of the Action. | +| Property | Type | Required | Description | +| -------- | ------ | -------- | -------------------- | +| type | string | yes | Type of the Action. | +| title | string | no | Title of the Action. | +| url | string | no | Url of the Action. | +| data | object | no | Data of the Action. | +| verb | string | no | Verb of the Action. | Enum `AdaptiveCardHostThemeType` -| Type | Description | -| ---- | ---- | -| SharePoint | Use the SharePoint current Theme or Theme Variation | -| Teams | Use the Fluent UI Teams default theme | -| TeamsDark | Use the Fluent UI Teams dark theme | -| TeamsHighContrast | Use the Fluent UI Teams high contrast theme | +| Type | Description | +| ----------------- | --------------------------------------------------- | +| SharePoint | Use the SharePoint current Theme or Theme Variation | +| Teams | Use the Fluent UI Teams default theme | +| TeamsDark | Use the Fluent UI Teams dark theme | +| TeamsHighContrast | Use the Fluent UI Teams high contrast theme | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AdaptiveCardHost) diff --git a/docs/documentation/docs/controls/AnimatedDialog.md b/docs/documentation/docs/controls/AnimatedDialog.md index a0e189ee3..b8ec2441a 100644 --- a/docs/documentation/docs/controls/AnimatedDialog.md +++ b/docs/documentation/docs/controls/AnimatedDialog.md @@ -1,8 +1,9 @@ # Animated Dialog -Animated Dialog control is an extended version of the [Office UI Fabric React Dialog](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog#IDialog). Animated Dialog control adds the following to the dialog - - Entrance and exit animations - - Animated icon above the title +Animated Dialog control is an extended version of the [Office UI Fabric React Dialog](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog#IDialog). Animated Dialog control adds the following to the dialog: + +- Entrance and exit animations +- Animated icon above the title This control uses [Animate.css](https://animate.style/) to add the animations. @@ -12,7 +13,7 @@ Here is an example of the control in action: ## Animate.css and animation names -[Animate.css](https://animate.style/) is a library that adds css animtions to controls. The website has all the names of the animations and any of them can be used in the `Animated Dialog` control. The default entrance animation name used in this control is `bounceIn` and the default exit animaton name is `zoomOut`. +[Animate.css](https://animate.style/) is a library that adds css animations to controls. The website has all the names of the animations and any of them can be used in the `Animated Dialog` control. The default entrance animation name used in this control is `bounceIn` and the default exit animation name is `zoomOut`. ## How to use this control in your solutions @@ -25,7 +26,7 @@ import { AnimatedDialog } from "@pnp/spfx-controls-react/lib/AnimatedDialog"; ## Different ways of using the control -### 1. Simple way +### 1. Simple way The code below adds a dialog with an entrance animation of `bounceIn` and exit animation of `zoomOut`. (These are the default animations) @@ -63,6 +64,7 @@ const animatedModalProps: IModalProps = { ``` + #### Simple animated dialog ![Simple animated dialog control](../assets/DefaultAnimatedDialog.gif) @@ -115,12 +117,13 @@ const animatedModalProps: IModalProps = { ### 3. Adding icons and functions The code below does the following: + - adds an icon (question mark) above the title - adds `Yes` and `No` buttons in the footer as `showAnimatedDialogFooter` is set to `true`. -- passes 3 functions +- passes 3 functions: - onOkClick : The function that gets executed when the `Ok/Yes` button is clicked. - onSuccess : The function that gets executed on successful operation of the above function. - - onError: The function that gets executed when the `onOkClick` function fails. + - onError: The function that gets executed when the `onOkClick` function fails. ```TypeScript // Initial state @@ -338,16 +341,15 @@ In addition to the`Office UI Fabric dialog` [properties](https://developer.micro | Property | Type | Required | Description | Default | | ---- | ---- | ---- | ---- | ---- | -| dialogAnimationInType | string | no | The name of the dialog entrace animation. See [animate.css](https://animate.style/) for values | bounceIn | +| dialogAnimationInType | string | no | The name of the dialog entrance animation. See [animate.css](https://animate.style/) for values | bounceIn | | dialogAnimationOutType | string | no | The name of the dialog exit animation. See [animate.css](https://animate.style/) for values | zoomOut | | iconName | string | no | The name of the Fabric UI icon that appears above title. | | -| iconAnimationType | string | no | The name of the icon entrace animation. See [animate.css](https://animate.style/) for values. | zoomIn | -| showAnimatedDialogFooter | boolean | no | Should the animated dialog show it's own footer. [See example 3 and 4](#3-Adding-icons-and-functions) above for usage. | false | -| okButtonText | string | no | The text of the the OK button if showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | Ok | -| cancelButtonText | string | no | The text of the the Cancel button if showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | Cancel | -| onOkClick | function | no | The function to be executed when Ok button is clicked. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | | -| onSuccess | function | no | The function to be executed after successful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | | -| onError | function | no | The function to be executed after unsuccessful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-Adding-icons-and-functions) above for usage. | | - +| iconAnimationType | string | no | The name of the icon entrance animation. See [animate.css](https://animate.style/) for values. | zoomIn | +| showAnimatedDialogFooter | boolean | no | Should the animated dialog show it's own footer. [See example 3 and 4](#3-adding-icons-and-functions) above for usage. | false | +| okButtonText | string | no | The text of the the OK button if showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | Ok | +| cancelButtonText | string | no | The text of the the Cancel button if showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | Cancel | +| onOkClick | function | no | The function to be executed when Ok button is clicked. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | | +| onSuccess | function | no | The function to be executed after successful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | | +| onError | function | no | The function to be executed after unsuccessful execution of the OK button function. Valid only when showAnimatedDialogFooter is `true`. [See example 3](#3-adding-icons-and-functions) above for usage. | | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AnimatedDialog) diff --git a/docs/documentation/docs/controls/Carousel.md b/docs/documentation/docs/controls/Carousel.md index 994ce13be..43cd28c27 100644 --- a/docs/documentation/docs/controls/Carousel.md +++ b/docs/documentation/docs/controls/Carousel.md @@ -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. | @@ -140,9 +140,9 @@ 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. | @@ -150,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 | no | The promise to load data asynchronously. Use with `loadingtemplate` and `rejectedtemplate` | -| loadingtemplate | JSX.Element
() => 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 | ![Office Colorful 1](../assets/OfficeColorful1.png) | -| OfficeColorful2 | Office Colorful Palette 2 | Blue, Grey, Blue, Dark Blue, Dark Grey, Dark Blue | ![Office Colorful 2](../assets/OfficeColorful2.png) | -| OfficeColorful3 | Office Colorful Palette 3 | Orange, Gold, Green, Brown, Dark Yellow, Dark Green | ![Office Colorful 3](../assets/OfficeColorful3.png) | -| OfficeColorful4 | Office Colorful Palette 4 | Green, Blue, Gold, Dark Green, Dark Blue, Dark Yellow | ![Office Colorful 4](../assets/OfficeColorful4.png) | -| OfficeMonochromatic1 | Monochromatic Palette 1 | Blue gradient, dark to light | ![Office Monochromatic 1](../assets/OfficeMono1.png) | -| OfficeMonochromatic2 | Monochromatic Palette 2 | Orange gradient, dark to light | ![Office Monochromatic 2](../assets/OfficeMono2.png) | -| OfficeMonochromatic3 | Monochromatic Palette 3 | Grey gradient, dark to light | ![Office Monochromatic 3](../assets/OfficeMono3.png) | -| OfficeMonochromatic4 | Monochromatic Palette 4 | Gold gradient, dark to light | ![Office Monochromatic 4](../assets/OfficeMono4.png) | -| OfficeMonochromatic5 | Monochromatic Palette 5 | Blue gradient, dark to light | ![Office Monochromatic 5](../assets/OfficeMono5.png) | -| OfficeMonochromatic6 | Monochromatic Palette 6 | Green gradient, dark to light | ![Office Monochromatic 6](../assets/OfficeMono6.png) | -| OfficeMonochromatic7 | Monochromatic Palette 7 | Dark Grey, Light Grey, Grey, Dark Grey, Light Grey, Grey | ![Office Monochromatic 7](../assets/OfficeMono7.png) | -| OfficeMonochromatic8 | Monochromatic Palette 8 | Blue gradient, light to dark | ![Office Monochromatic 8](../assets/OfficeMono8.png) | -| OfficeMonochromatic9 | Monochromatic Palette 9 | Orange gradient, light to dark | ![Office Monochromatic 9](../assets/OfficeMono9.png) | -| OfficeMonochromatic10 | Monochromatic Palette 10 | Grey gradient, light to dark | ![Office Monochromatic 10](../assets/OfficeMono10.png) | -| OfficeMonochromatic11 | Monochromatic Palette 11 | Gold gradient, light to dark | ![Office Monochromatic 11](../assets/OfficeMono11.png) | -| OfficeMonochromatic12 | Monochromatic Palette 12 | Blue gradient, light to dark | ![Office Monochromatic 12](../assets/OfficeMono12.png) | -| OfficeMonochromatic13 | Monochromatic Palette 13 | Green gradient, light to dark | ![Office Monochromatic 13](../assets/OfficeMono13.png) | +| Name | Office Name | Description | Example | +| --------------------- | ------------------------- | -------------------------------------------------------- | ------------------------------------------------------ | +| OfficeColorful1 | Office Colorful Palette 1 | Blue, Orange, Grey, Gold, Blue, Green | ![Office Colorful 1](../assets/OfficeColorful1.png) | +| OfficeColorful2 | Office Colorful Palette 2 | Blue, Grey, Blue, Dark Blue, Dark Grey, Dark Blue | ![Office Colorful 2](../assets/OfficeColorful2.png) | +| OfficeColorful3 | Office Colorful Palette 3 | Orange, Gold, Green, Brown, Dark Yellow, Dark Green | ![Office Colorful 3](../assets/OfficeColorful3.png) | +| OfficeColorful4 | Office Colorful Palette 4 | Green, Blue, Gold, Dark Green, Dark Blue, Dark Yellow | ![Office Colorful 4](../assets/OfficeColorful4.png) | +| OfficeMonochromatic1 | Monochromatic Palette 1 | Blue gradient, dark to light | ![Office Monochromatic 1](../assets/OfficeMono1.png) | +| OfficeMonochromatic2 | Monochromatic Palette 2 | Orange gradient, dark to light | ![Office Monochromatic 2](../assets/OfficeMono2.png) | +| OfficeMonochromatic3 | Monochromatic Palette 3 | Grey gradient, dark to light | ![Office Monochromatic 3](../assets/OfficeMono3.png) | +| OfficeMonochromatic4 | Monochromatic Palette 4 | Gold gradient, dark to light | ![Office Monochromatic 4](../assets/OfficeMono4.png) | +| OfficeMonochromatic5 | Monochromatic Palette 5 | Blue gradient, dark to light | ![Office Monochromatic 5](../assets/OfficeMono5.png) | +| OfficeMonochromatic6 | Monochromatic Palette 6 | Green gradient, dark to light | ![Office Monochromatic 6](../assets/OfficeMono6.png) | +| OfficeMonochromatic7 | Monochromatic Palette 7 | Dark Grey, Light Grey, Grey, Dark Grey, Light Grey, Grey | ![Office Monochromatic 7](../assets/OfficeMono7.png) | +| OfficeMonochromatic8 | Monochromatic Palette 8 | Blue gradient, light to dark | ![Office Monochromatic 8](../assets/OfficeMono8.png) | +| OfficeMonochromatic9 | Monochromatic Palette 9 | Orange gradient, light to dark | ![Office Monochromatic 9](../assets/OfficeMono9.png) | +| OfficeMonochromatic10 | Monochromatic Palette 10 | Grey gradient, light to dark | ![Office Monochromatic 10](../assets/OfficeMono10.png) | +| OfficeMonochromatic11 | Monochromatic Palette 11 | Gold gradient, light to dark | ![Office Monochromatic 11](../assets/OfficeMono11.png) | +| OfficeMonochromatic12 | Monochromatic Palette 12 | Blue gradient, light to dark | ![Office Monochromatic 12](../assets/OfficeMono12.png) | +| OfficeMonochromatic13 | Monochromatic Palette 13 | Green gradient, light to dark | ![Office Monochromatic 13](../assets/OfficeMono13.png) | ### 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 1660adc66..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 @@ -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,7 +107,6 @@ 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. | @@ -119,11 +120,11 @@ The `ComboBoxListItemPicker` control can be configured with the following proper | 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| ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ComboBoxListItemPicker) diff --git a/docs/documentation/docs/controls/ContentTypePicker.md b/docs/documentation/docs/controls/ContentTypePicker.md index 885960955..f8b7c6930 100644 --- a/docs/documentation/docs/controls/ContentTypePicker.md +++ b/docs/documentation/docs/controls/ContentTypePicker.md @@ -61,7 +61,7 @@ The `ContentTypePicker` control can be configured with the following properties: | 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). | +| 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. | diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md index 72b6e0da5..37e959012 100644 --- a/docs/documentation/docs/controls/Dashboard.md +++ b/docs/documentation/docs/controls/Dashboard.md @@ -96,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\> | no | Optional component which wraps every Widget component. Useful for a custom error handling or styling. | +| WidgetContentWrapper | React.ComponentType\> | no | Optional component which wraps every Widget component. Useful for a custom error handling or styling. | Interface `IWidget` diff --git a/docs/documentation/docs/controls/DateTimePicker.md b/docs/documentation/docs/controls/DateTimePicker.md index 4cdb1891e..3711a9fbf 100644 --- a/docs/documentation/docs/controls/DateTimePicker.md +++ b/docs/documentation/docs/controls/DateTimePicker.md @@ -75,42 +75,42 @@ The `DateTimePicker` control can be configured with the following properties: | initialPickerDate | Date | no | The initially highlighted date in the calendar picker | | maxDate | Date | no | The maximum allowable date. | | minDate | Date | no | The minimum allowable date. | -| minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdow` | -| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false | -| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent' | +| minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdown` | +| showClearDate | boolean | no | Controls whether the clearDate iconButton must be available when date is selected, default to false | +| showClearDateIcon | string | no | Controls the icon used for clearDate iconButton. Defaults to 'RemoveEvent' | | restrictedDates | Date[] | no | If set the Calendar will not allow selection of dates in this array. | Enum `TimeDisplayControlType` -| Name | Description | -| ---- | ---- | -| Text | Renders Time part as Masked Edit | -| Dropdown | Renders Time part as Dropdown | +| Name | Description | +| -------- | -------------------------------- | +| Text | Renders Time part as Masked Edit | +| Dropdown | Renders Time part as Dropdown | Enum `DateConvention` -| Name | Description | -| ---- | ---- | +| Name | Description | +| -------- | ------------------------------ | | DateTime | Shows the date and time picker | -| Date | Shows only the date picker | +| Date | Shows only the date picker | Enum `TimeConvention` -| Name | Description | -| ---- | ---- | +| Name | Description | +| ------- | -------------------------------------------------------- | | Hours12 | Specify the hours in 12-hours (AM / PM) time convention. | -| Hours24 | Specify the hours in 24-hours time convention. | +| Hours24 | Specify the hours in 24-hours time convention. | Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://developer.microsoft.com/en-us/fabric#/components/datepicker) -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| dateLabel | string | no | Label for the date selector. | -| timeLabel | string | no | Label for the time of day selector. | -| timeSeparator | string | no | Separator between time of day components (hours, minutes, seconds). | -| amDesignator | string | no | Used as AM designator when 12-hour clock is used. | -| pmDesignator | string | no | Used as PM designator when 12-hour clock is used. | -| textErrorMessage | string | no | Error message when text is entered in the date picker. | +| Property | Type | Required | Description | +| ---------------- | ------ | -------- | ------------------------------------------------------------------- | +| dateLabel | string | no | Label for the date selector. | +| timeLabel | string | no | Label for the time of day selector. | +| timeSeparator | string | no | Separator between time of day components (hours, minutes, seconds). | +| amDesignator | string | no | Used as AM designator when 12-hour clock is used. | +| pmDesignator | string | no | Used as PM designator when 12-hour clock is used. | +| textErrorMessage | string | no | Error message when text is entered in the date picker. | Type `MinutesIncrement` diff --git a/docs/documentation/docs/controls/DragDropFiles.md b/docs/documentation/docs/controls/DragDropFiles.md index 5e28cc0e0..5966bde8b 100644 --- a/docs/documentation/docs/controls/DragDropFiles.md +++ b/docs/documentation/docs/controls/DragDropFiles.md @@ -24,7 +24,8 @@ import { DragDropFiles } from "@pnp/spfx-controls-react/lib/DragDropFiles"; {/* Specify the components to load where Drag and drop area should work */} ``` -**Content with drag and drop applied** + +### Content with drag and drop applied ```jsx ``` + ![Custom html with drag and drop](../assets/DragDropFilesSample1.png) -**ListView with drag and drop applied** +### ListView with drag and drop applied ![ListView control with drag and drop Control](../assets/ListView-DragDrop.png) -**FilePicker with drag and drop applied** +### FilePicker with drag and drop applied ![FilePicker control with grouping](../assets/DragDropFilesSample2.png) @@ -65,14 +67,12 @@ private _getDropFiles = (files) => { The `DragDropFiles` can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| dropEffect | string | no | Visual feedback given to user during a drag and drop operation (copy,move,link,none). Default value is `copy`. | -| enable | boolean | no | Option allow control to be enable or disable. Default value is `true`| -| labelMessage | string | no | Message displayed in drag drop preview. | -| onDrop | any | no | Method that returns all Files[] from drag and drop file area. | -| iconName | string | no | Icon Name from Office UI Fabric Icons. | - - +| Property | Type | Required | Description | +| ------------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------- | +| dropEffect | string | no | Visual feedback given to user during a drag and drop operation (copy,move,link,none). Default value is `copy`. | +| enable | boolean | no | Option allow control to be enable or disable. Default value is `true` | +| labelMessage | string | no | Message displayed in drag drop preview. | +| onDrop | any | no | Method that returns all Files[] from drag and drop file area. | +| iconName | string | no | Icon Name from Office UI Fabric Icons. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/DragDropFiles) diff --git a/docs/documentation/docs/controls/DynamicForm.md b/docs/documentation/docs/controls/DynamicForm.md index 1521fa379..b4ec7d9a8 100644 --- a/docs/documentation/docs/controls/DynamicForm.md +++ b/docs/documentation/docs/controls/DynamicForm.md @@ -24,11 +24,13 @@ import { DynamicForm } from "@pnp/spfx-controls-react/lib/DynamicForm"; onSubmitted={async (listItemData) => { console.log(listItemData); }}> ``` + ![DynamicForm](../assets/DynamicForm.png) ## File selection To upload a file when creating a new document in a document library you need to specify: + - enableFileSelection: Set this parameter to true to enable file selection. - contentTypeId: This parameter specifies the target content type ID of the document you are creating. - supportedFileExtensions: This parameter is optional and is used to specify the supported file extensions if they are different from the default ones. @@ -69,8 +71,9 @@ The `DynamicForm` can be configured with the following properties: | folderPath | string | no | Server relative or 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 of the library. | ## Validation Error Dialog Properties `IValidationErrorDialogProps` -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| showDialogOnValidationError | boolean | no | Specifies if the dialog should be shown on validation error. Default - `false` | -| customTitle | string | no | Specifies a custom title to be shown in the validation dialog. Default - empty | -| customMessage | string | no | Specifies a custom message to be shown in the validation dialog. Default - empty | + +| Property | Type | Required | Description | +| --------------------------- | ------- | -------- | -------------------------------------------------------------------------------- | +| showDialogOnValidationError | boolean | no | Specifies if the dialog should be shown on validation error. Default - `false` | +| customTitle | string | no | Specifies a custom title to be shown in the validation dialog. Default - empty | +| customMessage | string | no | Specifies a custom message to be shown in the validation dialog. Default - empty | diff --git a/docs/documentation/docs/controls/EnhancedThemeProvider.md b/docs/documentation/docs/controls/EnhancedThemeProvider.md index 6eceb947f..7967b48cc 100644 --- a/docs/documentation/docs/controls/EnhancedThemeProvider.md +++ b/docs/documentation/docs/controls/EnhancedThemeProvider.md @@ -62,6 +62,7 @@ The control provides the passage and/or creation of the theme according to what In order to access the theme, from child controls, there are two modes, one for function-based controls, one for class-based controls. - Access the theme from the child control using a function component: + ```TypeScript export const ChildFunctionComponent = () => { const theme = useTheme(); @@ -73,6 +74,7 @@ export const ChildFunctionComponent = () => { ``` - Access the theme from the child control using a class component: + ```TypeScript export class ChildClassComponent extends React.Component { public render() { @@ -88,6 +90,7 @@ export class ChildClassComponent extends React.Component { ``` - Usage example using theme in child controls: + ```TypeScript @@ -103,7 +106,7 @@ The `EnhancedThemeProvider` control can be configured with the following propert | ---- | ---- | ---- | ---- | | context | BaseComponentContext | yes | Sets the context from the SPFx component (a web part, an application customizer or a form customizer). | | as | React.ElementType | no | A component that should be used as the root element of the ThemeProvider component. | -| ref | React.Ref | no | Optional ref to the root element. | +| ref | React.Ref<HTMLElement> | no | Optional ref to the root element. | | theme | PartialTheme \| Theme | no | Defines the theme provided by the user. | | renderer | StyleRenderer | no | Optional interface for registering dynamic styles. Defaults to using `merge-styles`. Use this to opt into a particular rendering implementation, such as `emotion`, `styled-components`, or `jss`. Note: performance will differ between all renders. Please measure your scenarios before using an alternative implementation. | | applyTo | 'element' \| 'body' \| 'none' | no | Defines where body-related theme is applied to. Setting to 'element' will apply body styles to the root element of ThemeProvider. Setting to 'body' will apply body styles to document body. Setting to 'none' will not apply body styles to either element or body.| diff --git a/docs/documentation/docs/controls/FieldCollectionData.md b/docs/documentation/docs/controls/FieldCollectionData.md index 41425d602..7df704336 100644 --- a/docs/documentation/docs/controls/FieldCollectionData.md +++ b/docs/documentation/docs/controls/FieldCollectionData.md @@ -4,7 +4,7 @@ This control gives you the ability to insert a list / collection data which can The control allows you to specify multiple data types like: string, number, boolean, or dropdown. It also provides the possibility to render custom field. -**FieldCollectionData** +## FieldCollectionData ![Code editor initial](../assets/FieldCollectionData.gif) @@ -29,7 +29,6 @@ import { FieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-contro 3. Add the control to the render method: - ```TypeScript | no | Dropdown custom options render method. Only for the **dropdown** field type. | -| placeholder | string | no | Placehoder text which will be used for the input field. If not provided the input title will be used. | +| onRenderOption | IRenderFunction<ISelectableOption> | no | Dropdown custom options render method. Only for the **dropdown** field type. | +| placeholder | string | no | Placeholder text which will be used for the input field. If not provided the input title will be used. | | defaultValue | any | no | Specify a default value for the input field. | | deferredValidationTime | number | no | Field will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default: 200ms. | -| onGetErrorMessage | (value: any, index: number, crntItem: any): string \| Promise | no | The method is used to get the validation error message and determine whether the input value is valid or not. It provides you the current row index and the item you are currently editing. | +| onGetErrorMessage | (value: any, index: number, currentItem: any): string \| Promise<string> | no | The method is used to get the validation error message and determine whether the input value is valid or not. It provides you the current row index and the item you are currently editing. | | onCustomRender | (field: ICustomCollectionField, value: any, onUpdate: (fieldId: string, value: any) => void, item: any, itemUniqueId: string, onCustomFieldValidation: (fieldId: string, errorMessage: string) => void) => JSX.Element | no | This property is only required if you are using the `custom` field type and it can be used to specify the custom rendering of your control in the collection data. | -| multiSelect | boolean| no | Specifies multiple options can be selected (**combobox**) or mutliple users can be selected (**peoplepicker**) | +| multiSelect | boolean| no | Specifies multiple options can be selected (**combobox**) or multiple users can be selected (**peoplepicker**) | | allowFreeform | boolean | no | Specifies that own options can be entered. Only for **combobox** field type | | minimumUsers| number | no | Specifies the minimum number of users to be entered for **peoplepicker** field type | | minimumUsersMessage| string | no | Specifies the message to be displayed if minimumUsers are not entered for **peoplepicker** field type | @@ -143,7 +142,7 @@ Enum `CustomCollectionFieldType` | combobox | Combobox field. You wil have to specify the `options` property, optional specify `allowFreeform` and `multiSelect` | | fabricIcon | Name of the [Office UI Fabric icon](https://developer.microsoft.com/en-us/fabric#/styles/icons) | | url | URL field | -| peoplepicker | Peoplepicker control | +| peoplepicker | peoplepicker control | | custom | This gives you control over the whole field rendering. Be sure to provide the `onCustomRender` method to render your control in the collection data. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/FieldCollectionData) diff --git a/docs/documentation/docs/controls/FieldPicker.md b/docs/documentation/docs/controls/FieldPicker.md index 651547141..95ee7121e 100644 --- a/docs/documentation/docs/controls/FieldPicker.md +++ b/docs/documentation/docs/controls/FieldPicker.md @@ -57,20 +57,20 @@ The `FieldPicker` 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 a column(s) from. When not specified, picker will be populated with site columns.| | 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 fields. Default is true. | -includeReadOnly | boolean | no | Whether or not to include read-only fields. Default is true. | -group | string | no | Only show fields of a certain group. | -filter | string | no | Filter fields from OData query (takes the upperhand of `hidden`, `readOnly` and `group` Filters). | -orderBy | FieldsOrderBy | no | How to order the fields. | -selectedFields | string \| string[] | no | Internal names 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: ISPField \| ISPField[]): void | no | Callback issued when the selected option changes. | -filterItems | (fields: ISPField[]): ISPField[] | 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 fields. Default is true. | +| includeReadOnly | boolean | no | Whether or not to include read-only fields. Default is true. | +| group | string | no | Only show fields of a certain group. | +| filter | string | no | Filter fields from OData query (takes the upper hand of `hidden`, `readOnly` and `group` Filters). | +| orderBy | FieldsOrderBy | no | How to order the fields. | +| selectedFields | string \| string[] | no | Internal names 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: ISPField \| ISPField[]): void | no | Callback issued when the selected option changes. | +| filterItems | (fields: ISPField[]): ISPField[] | 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 `FieldsOrderBy` diff --git a/docs/documentation/docs/controls/FilePicker.md b/docs/documentation/docs/controls/FilePicker.md index bfc843751..81b19ea63 100644 --- a/docs/documentation/docs/controls/FilePicker.md +++ b/docs/documentation/docs/controls/FilePicker.md @@ -1,7 +1,9 @@ # FilePicker control File picker control allows to browse and select a file from various places. -Currently supported locations + +Currently supported locations: + - Recent files - tab allows to select a file from recently modified files based on the search results. - Web search - tab uses Bing cognitive services to look for a file. (Only images) - OneDrive - tab allows to select a file from the user's One Drive. @@ -11,24 +13,25 @@ Currently supported locations - From a link - tab allows to paste a link to the document. ## Overview -The control supports all types of file, however it also allows to specify list of extensions for the files that are going to be looked displayed. Currently, only single file selection is supported. -![File Picker overview](../assets/FilePickerOverview.png) +The control supports all types of file, however it also allows to specify list of extensions for the files that are going to be looked displayed. Currently, only single file selection is supported. +![File Picker overview](../assets/FilePickerOverview.png) ## Different display types + File picker support 3 types of views : List, Compact list and Tiles. In case Tiles view is selected, the control shows the thumbnail of the file. ![File Picker views](../assets/FilePickerViews.gif) - ## Breadcrumb support + The control displays breadcrumb navigation that allows to easily switch folders or document libraries. ![File Picker breadcrumb](../assets/FilePickerBreadcrumb.gif) ## Paged data load + File picker doesn't load all the files that exist in the folder. Instead, it allows to specify how many results are loaded in a batch, and executes paged requests when new data is required. ![File Picker paged data load](../assets/FilePickerPaging.gif) - ## How to use this control - 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. @@ -90,7 +93,7 @@ The FilePicker component can be configured with the following properties: | hideRecentTab | boolean | no | Specifies if RecentTab should be hidden. | | hideWebSearchTab | boolean | no | Specifies if WebSearchTab should be hidden. | | hideStockImages | boolean | no | Specifies if StockImagesTab should be hidden. | -| hideOrganisationalAssetTab | boolean | no | Specifies if OrganisationalAssetTab should be hidden. | +| hideOrganisationalAssetTab | boolean | no | Specifies if `OrganisationalAssetTab` should be hidden. | | hideOneDriveTab | boolean | no | Specifies if OneDriveTab should be hidden. | | hideSiteFilesTab | boolean | no | Specifies if SiteFilesTab should be hidden. | | hideLocalUploadTab | boolean | no | Specifies if LocalUploadTab should be hidden. | @@ -115,7 +118,6 @@ Provides options for carousel buttons location. | fileNameWithoutExtension | string | File name of the result without the extension. | | fileAbsoluteUrl | string | Absolute URL of the file. Null in case of file upload. | | fileSize | number | Size of the result (in bytes). Set only for file upload | -| downloadFileContent | () => Promise | Function allows to download file content. Returns File object. | - +| downloadFileContent | () => Promise<File> | Function allows to download file content. Returns File object. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/filePicker/FilePicker) diff --git a/docs/documentation/docs/controls/FolderPicker.md b/docs/documentation/docs/controls/FolderPicker.md index b3d335495..6abe79f50 100644 --- a/docs/documentation/docs/controls/FolderPicker.md +++ b/docs/documentation/docs/controls/FolderPicker.md @@ -42,7 +42,7 @@ import { FolderPicker, IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker canCreateFolders={true} /> ``` -- To use the `FolderExplorer` control to fetch folders from different sitecollection in your code as follows: +- To use the `FolderExplorer` control to fetch folders from different site collection in your code as follows: ```TypeScript Note that the sample code above uses the `isCompact` parameter to remove `DocumentCard` elements and to render a compact layout. You may choose to ignore the `isCompact` parameter if you do not wish to handle compact layouts. + > Note that the sample code above uses the `isCompact` parameter to remove `DocumentCard` elements and to render a compact layout. You may choose to ignore the `isCompact` parameter if you do not wish to handle compact layouts. - Use the `GridLayout` control in your code as follows: @@ -145,7 +145,7 @@ The grid layout control can be configured with the following properties: | ---- | ---- | ---- | ---- | | ariaLabel | string | no | The accessible text you wish to display for the grid control. We recommend that you use `"List of content, use right and left arrow keys to navigate, arrow down to access details."`. | | items | any[] | yes | The array of items you wish to display. | -| listProps | IListProps | no | Provides additional list properties to customize the underlaying list. | +| listProps | IListProps | no | Provides additional list properties to customize the underlying list. | | onRenderGridItem | function | yes | onRenderGridItem handler for the grid layout. Use this handler to specify how you wish to render each grid item | -![Telemetry](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/gridlayout) +![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/gridlayout) diff --git a/docs/documentation/docs/controls/HoverReactionsBar.md b/docs/documentation/docs/controls/HoverReactionsBar.md index 75298afa4..d81a569a2 100644 --- a/docs/documentation/docs/controls/HoverReactionsBar.md +++ b/docs/documentation/docs/controls/HoverReactionsBar.md @@ -2,8 +2,7 @@ This control allows you to select an emoji from emoji bar or select from picker. - -**HoverReactionsBar** +Here is an example of the control in action: ![hoverReactions3Bar](../assets/hoverReactions3Bar.png) @@ -11,7 +10,6 @@ This control allows you to select an emoji from emoji bar or select from picker. ![hoverReactionsBar1](../assets/hoverReactionsBar1.png) - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -61,7 +59,7 @@ The HoverReactionsBar control can be configured with the following properties: | onSelected |onSelect: (emoji: string, emojiInfo?: IEmojiInfo) => void;| yes | selected Emoji | | top4Reactions | string[] | no | name of emojis to show on the bar | | target | HTMLDivElement | yes | container of controls who fire the HoverReactionsBar | -| onDismis | onDismiss: () => void; | yes | function to call to dismiss HoverReactionsBar| +| onDismiss | onDismiss: () => void; | yes | function to call to dismiss HoverReactionsBar| | themeV8 | Theme | No | Set Fluent UI Theme| ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/HoverReactionsBar) diff --git a/docs/documentation/docs/controls/IFramePanel.md b/docs/documentation/docs/controls/IFramePanel.md index c6be6b4f1..42f5f5b23 100644 --- a/docs/documentation/docs/controls/IFramePanel.md +++ b/docs/documentation/docs/controls/IFramePanel.md @@ -1,7 +1,7 @@ # IFramePanel control This control renders a Panel with an iframe as content. - + Here is an example of the control in action: ![IFrameDialog control](../assets/IFramePanel.png) @@ -19,7 +19,6 @@ import { IFramePanel } from "@pnp/spfx-controls-react/lib/IFramePanel"; - Use the `IFramePanel` control in your code as follows (`this._onIframeLoaded` and `this._onDismiss` are methods that should be implemented if you want to execute some actions when the iframe content is loaded and dialog should be closed respectively.) - ```TypeScript { - console.log("file", file); - }, []); - ``` +```typescript +const handleFileSelected = React.useCallback(async (file: IFilePickerResult) => { + console.log("file", file); +}, []); +``` - With the `onDelete` property you can execute a callback after delete the image: diff --git a/docs/documentation/docs/controls/ListItemAttachments.md b/docs/documentation/docs/controls/ListItemAttachments.md index 09af1aec6..c78f0cf52 100644 --- a/docs/documentation/docs/controls/ListItemAttachments.md +++ b/docs/documentation/docs/controls/ListItemAttachments.md @@ -20,6 +20,7 @@ Here is an example of the control: ```TypeScript import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments'; ``` + - Use the `ListItemAttachments` control in your code as follows: ```TypeScript @@ -52,16 +53,15 @@ let listItemAttachmentsComponentReference = React.createRef The `ListItemAttachments` control can be configured with the following properties: - | Property | Type | Required | Description | | ---- | ---- | ---- | ---- | -| context | BaseComponentContext | yes | SPFx web part or extention context | +| context | BaseComponentContext | yes | SPFx web part or extension context | | itemId | number | no | List Item Id | | listId | string | yes | Guid of the list. | | webUrl | string | no | URL of the site. By default it uses the current site URL. | | label | string | no | Main text to display on the placeholder, next to the icon. | | description | string | no | Description text to display on the placeholder, below the main text and icon. | | disabled | boolean | no | Specifies if the control is disabled or not. | -| openAttachmentsInNewWindow | boolean | no | Specifies if the attachment should be openend in a separate browser tab. Use this property set to `true` if you plan to use the component in Microsoft Teams. | +| openAttachmentsInNewWindow | boolean | no | Specifies if the attachment should be opened in a separate browser tab. Use this property set to `true` if you plan to use the component in Microsoft Teams. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemAttachments) diff --git a/docs/documentation/docs/controls/ListItemComments.md b/docs/documentation/docs/controls/ListItemComments.md index 2ab8cdb9d..30fe0b0a7 100644 --- a/docs/documentation/docs/controls/ListItemComments.md +++ b/docs/documentation/docs/controls/ListItemComments.md @@ -3,7 +3,6 @@ This control allows you to manage list item comments, you can add or delete comments to an item. The comments are listed in tile view. user can scroll to load more comments if they exist (infinite scroll); - Here is an example of the control: ![ListItemComments](../assets/ListItemComments.gif) @@ -24,6 +23,7 @@ Here is an example of the control: ```TypeScript import { ListItemComments } from '@pnp/spfx-controls-react/lib/ListItemComments'; ``` + - Use the `ListItemComments` control in your code as follows: ```TypeScript @@ -35,8 +35,10 @@ import { ListItemComments } from '@pnp/spfx-controls-react/lib/ListItemComments' label="ListItem Comments" /> ``` + ## Use "highlightedCommentId" parameter to support Comment Notification Link -SharePoint will send a comment notification if someone has been ***"@"*** in the comment. This comment notification mail contains a ***Go to comment*** button. + +SharePoint will send a comment notification if someone has been ***"@"*** in the comment. This comment notification mail contains a ***Go to comment*** button. ![ListItemComments](../assets/ListItemComments05.png) @@ -57,26 +59,25 @@ You can use ***highlightedCommentId*** to specify the comment you want to highli ``` The specified comment will be highlighted with different border and background color (Use theme color). + ![ListItemComments](../assets/ListItemComments06.png) ## Implementation The `ListItemComments` control can be configured with the following properties: - | Property | Type | Required | Description | | ---- | ---- | ---- | ---- | -| serviceScope | ServiceScope | yes | SPFx Service Scope | -| itemId | number | yes | List Item Id | +| serviceScope | ServiceScope | yes | SPFx Service Scope. | +| itemId | number | yes | List Item Id. | | listId | string | yes | Guid of the list. | | webUrl | string | no | URL of the site. By default it uses the current site URL. | -| label | string | no | Label for control | -| numberCommentsPerPage | number | no | number of comments per page possible values 5 | 10 | 15 | 20 default 10 | -| highlightedCommentId | string | no | The commend Id (e.g. "1") you want to highlight. This selected comment will show with different border and background color based on site theme | - +| label | string | no | Label for control. | +| numberCommentsPerPage | number | no | number of comments per page. Possible values: `5` \| `10` \| `15` \| `20` (default `10`). | +| highlightedCommentId | string | no | The commend Id (e.g. "1") you want to highlight. This selected comment will show with different border and background color based on site theme. | ## MSGraph Permissions required -This control requires at least the flowing scopes: `People.Read`, `User.ReadBasic.All` - +This control requires at least the following scopes: `People.Read`, `User.ReadBasic.All`. + ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemComments) diff --git a/docs/documentation/docs/controls/ListItemPicker.md b/docs/documentation/docs/controls/ListItemPicker.md index 7034c1cea..319b60e53 100644 --- a/docs/documentation/docs/controls/ListItemPicker.md +++ b/docs/documentation/docs/controls/ListItemPicker.md @@ -51,7 +51,7 @@ The `ListItemPicker` control can be configured with the following properties: | ------------------------ | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------ | | 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 | -| context | BaseComponentContext | yes | SPFx web part or extention context | +| context | BaseComponentContext | yes | SPFx web part or extension context | | listId | string | yes | Guid or title of the list. | | itemLimit | number | yes | Number of items which can be selected | | onSelectedItem | (items: any[]) => void | yes | Callback function which returns the selected items. | @@ -61,8 +61,8 @@ The `ListItemPicker` control can be configured with the following properties: | 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 | -| orderBy | string | no | condition to order by list Item, same as $orderby ODATA parameter | +| filter | string | no | condition to filter list Item, same as $filter OData parameter | +| orderBy | string | no | condition to order by list Item, same as $orderby OData parameter | | placeholder | string | no | Short text hint to display in empty picker | | substringSearch | boolean | no | Specifies if substring search should be used | | label | string | no | Specifies the text describing the ListItemPicker. | diff --git a/docs/documentation/docs/controls/ListPicker.md b/docs/documentation/docs/controls/ListPicker.md index eb95f1162..932e6f58b 100644 --- a/docs/documentation/docs/controls/ListPicker.md +++ b/docs/documentation/docs/controls/ListPicker.md @@ -54,7 +54,7 @@ The `ListPicker` control can be configured with the following properties: | className | string | no | If provided, additional class name to provide on the dropdown element. | | disabled | boolean | no | Whether or not the control is disabled. | | baseTemplate | number \| number[] | no | The SharePoint BaseTemplate ID to filter the list options by. | -| filter | string | no | Filter list from OData query (takes precendents over Hidden and BaseTemplate Filters). | +| filter | string | no | Filter list from OData query (takes precedence over `includeHidden` and `baseTemplate` filters). | | includeHidden | boolean | no | Whether or not to include hidden lists. Default is `true`. | | orderBy | LibsOrderBy | no | How to order the lists retrieved from SharePoint. | | selectedList | string OR string[] | no | Keys(list 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. | @@ -63,7 +63,7 @@ The `ListPicker` control can be configured with the following properties: | placeHolder | string | no | Placeholder label to show in the dropdown. **Deprecated. Use `placeholder` instead.** | | placeholder | string | no | Placeholder label to show in the dropdown. | | onSelectionChanged | (newValue: string OR string[]): void | no | Callback function when the selected option changes. | -| webAbsoulteUrl | string | no | Absolute Web Url of target site (user requires permissions) | +| webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions) | | contentTypeId | string | no | The Id if a content type which must be present in a list in order for the list to appear in the picker.| | refreshToggle | boolean | no | If present can be used to force the control to refresh the list of lists by toggling its value| diff --git a/docs/documentation/docs/controls/ListView.ContextualMenu.md b/docs/documentation/docs/controls/ListView.ContextualMenu.md index 3cd7939d6..b2093afb1 100644 --- a/docs/documentation/docs/controls/ListView.ContextualMenu.md +++ b/docs/documentation/docs/controls/ListView.ContextualMenu.md @@ -99,6 +99,7 @@ Once the ECB component is created, you can add the contextual menu to the `ListV Inside the render method of the `IViewField`, the ECB component gets created and the current item will be used as a reference for the clicked row. ## The result + The result will look like the following: ![ContextualMenu_shown](../assets/ListView.ContextualMenu.png) diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md index 4efa5d02a..73b6e7618 100644 --- a/docs/documentation/docs/controls/ListView.md +++ b/docs/documentation/docs/controls/ListView.md @@ -4,11 +4,11 @@ This control renders a list view for the given set of items. ![ListView control output](../assets/ListView.png) -**List view control with grouping applied** +- List view control with grouping applied: ![ListView control with grouping](../assets/ListView-grouping.png) -**List view control with drag and drop applied** +- List view control with drag and drop applied: ![ListView control with grouping](../assets/ListView-DragDrop.png) @@ -41,6 +41,7 @@ import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp className={styles.listWrapper} listClassName={styles.list} /> ``` + - The control provides full text filtering through all the columns. If you want to execute filtering on the specified columns, you can use syntax : ``:``. Use `':'` as a separator between column name and value. Control support both `'fieldName'` and `'name'` properties of IColumn interface. - With the `selection` property you can define a method that which gets called when the user selects one or more items in the list view: @@ -50,7 +51,8 @@ private _getSelection(items: any[]) { console.log('Selected items:', items); } ``` -- With the `groupByFields` property you can define an array of field objects which will be used for grouping. + +- With the `groupByFields` property you can define an array of field objects which will be used for grouping. **Important**: the same order of the fields defines how grouping will be applied. In the snippet the `ListView` control will first group by the `Extension` and after that by the `Author` field. @@ -106,29 +108,29 @@ The ListView control can be configured with the following properties: The `IViewField` has the following implementation: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| name | string | yes | Name of the field. | -| displayName | string | no | Name that will be used as the column title. If not defined, the name property will be used. | -| linkPropertyName | string | no | Specify the field name that needs to be used to render a link for the current field. | -| sorting | boolean | no | Specify if you want to enable sorting for the current field. | -| minWidth | number | no | Specify the minimum width of the column. | -| maxWidth | number | no | Specify the maximum width of the column. | -| isResizable | boolean | no | Determines if the column can be resized. | -| render | function | no | Override how the field has to get rendered. | +| Property | Type | Required | Description | +| ---------------- | -------- | -------- | ------------------------------------------------------------------------------------------- | +| name | string | yes | Name of the field. | +| displayName | string | no | Name that will be used as the column title. If not defined, the name property will be used. | +| linkPropertyName | string | no | Specify the field name that needs to be used to render a link for the current field. | +| sorting | boolean | no | Specify if you want to enable sorting for the current field. | +| minWidth | number | no | Specify the minimum width of the column. | +| maxWidth | number | no | Specify the maximum width of the column. | +| isResizable | boolean | no | Determines if the column can be resized. | +| render | function | no | Override how the field has to get rendered. | The `IGrouping` has the following implementation: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| name | string | yes | Name of the field | -| order | GroupOrder | yes | Specify how the group needs to be ordered. | +| Property | Type | Required | Description | +| -------- | ---------- | -------- | ------------------------------------------ | +| name | string | yes | Name of the field | +| order | GroupOrder | yes | Specify how the group needs to be ordered. | enum `GroupOrder` -| Value | Description | -| ---- | ---- | -| ascending | Order the group in ascending order. | +| Value | Description | +| ---------- | ------------------------------------ | +| ascending | Order the group in ascending order. | | descending | Order the group in descending order. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListView) diff --git a/docs/documentation/docs/controls/LivePersona.md b/docs/documentation/docs/controls/LivePersona.md index cfffa2ded..3a423a0d8 100644 --- a/docs/documentation/docs/controls/LivePersona.md +++ b/docs/documentation/docs/controls/LivePersona.md @@ -2,20 +2,16 @@ This control allows you to use LivePersona Card available on SharePoint Online. - ## Considerations/Disclaimer **The LivePersona Card uses an internal SharePoint Component and it can be changed in the future. Use at your own risk and be conscious that it's behaviour can be changed** - ## Example Here is an example of the control: ![LivePersona](../assets/LivePersona.png) - - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -27,7 +23,6 @@ import { LivePersona } from "@pnp/spfx-controls-react/lib/LivePersona"; - Use the `LivePersona` control in your code as follows: - ```TypeScript ``` - ## Implementation - The `LivePersona` control can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| serviceScope | ServiceScope | yes | The SPFx ServiceScope object loaded from context of web part or extension. | -| upn |string | yes | User UPN. | -| disableHover | boolean | no | If info should not appear on hover. | -| template | string \| JSX.Element | yes | The content to wrap with persona info. | +| Property | Type | Required | Description | +| ------------ | --------------------- | -------- | -------------------------------------------------------------------------- | +| serviceScope | ServiceScope | yes | The SPFx ServiceScope object loaded from context of web part or extension. | +| upn | string | yes | User UPN. | +| disableHover | boolean | no | If info should not appear on hover. | +| template | string \| JSX.Element | yes | The content to wrap with persona info. | diff --git a/docs/documentation/docs/controls/LocationPicker.md b/docs/documentation/docs/controls/LocationPicker.md index ac9b8d9b2..694402938 100644 --- a/docs/documentation/docs/controls/LocationPicker.md +++ b/docs/documentation/docs/controls/LocationPicker.md @@ -1,34 +1,20 @@ # Location Picker - - This control allows you to search and select the Location, also allows enter a custom location. - ## How to use this control in your solutions - - - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. - Import the following modules to your component: - - ```TypeScript - import { LocationPicker,ILocationPickerItem } from "@pnp/spfx-controls-react/lib/LocationPicker"; - ``` - - - Use the LocationPicker control in your code as follows: - - ```jsx - - - ``` | *Location searching mode* | -|:--:| +|:--:| |![Location Picker search](../assets/location1.png)| | *Entering into edit mode* | -|:--:| +|:--:| |![Location Picker Edit](../assets/location2.png)| | *Readonly mode* | -|:--:| +|:--:| |![Location Picker Read](../assets/location3.png)| - - ## Implementation - - The `LocationPicker` can be configured with the following properties: - - -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| context | WebPartContext or ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. | -| disabled | boolean | no | Option allows to be enable or disable. Default value is `false`| -| defaultValue | ILocationPickerItem | no | Option allows set default value| -| errorMessage | string | no | Static error message displayed below the picker.| -| className | string | no | Applies custom styling | -| label | string | no | Label to use for the control. | -| placeholder | string | no | Placeholder label to show in the dropdown. | -| onChange | (locItem: ILocationPickerItem) => void | no | The method that returns location data JSON object. | +| Property | Type | Required | Description | +| ------------ | -------------------------------------- | -------- | --------------------------------------------------------------- | +| context | WebPartContext or ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. | +| disabled | boolean | no | Option allows to be enable or disable. Default value is `false` | +| defaultValue | ILocationPickerItem | no | Option allows set default value | +| errorMessage | string | no | Static error message displayed below the picker. | +| className | string | no | Applies custom styling | +| label | string | no | Label to use for the control. | +| placeholder | string | no | Placeholder label to show in the dropdown. | +| onChange | (locItem: ILocationPickerItem) => void | no | The method that returns location data JSON object. | diff --git a/docs/documentation/docs/controls/Map.md b/docs/documentation/docs/controls/Map.md index e95b808ca..81aaa444c 100644 --- a/docs/documentation/docs/controls/Map.md +++ b/docs/documentation/docs/controls/Map.md @@ -27,38 +27,37 @@ import { Map, ICoordinates, MapType } from "@pnp/spfx-controls-react/lib/Map"; The `Map` control can be configured with the following properties: -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| titleText | string | no | Title label to show above the control. | | -| coordinates | ICoordinates | yes | Coordinates required for rendering the control. | | -| enableSearch | boolean | no | Allow the user to search for new locations. | | -| zoom | number | no | Zoom level for the maps on display (range 1-15). | 10 | -| width | number | no | Width of the maps area in percentage. | 100% | -| height | number | no | Height of the maps area. | 300px | -| mapType | MapType | no | Type of the map to render. | standard | -| loadingMessage | string | no | Custom loading message. | | -| errorMessage | string | no | Custom error message. | | -| mapsClassName | string | no | Custom CSS class name. | | -| errorMessageClassName | string | no | Custom CSS error class name. | | -| onUpdateCoordinates | (coordinates: ICoordinates) => void | no | Callback to let your solution knows the new coordinates when a search was performed. | | +| Property | Type | Required | Description | Default | +| --------------------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------ | -------- | +| titleText | string | no | Title label to show above the control. | | +| coordinates | ICoordinates | yes | Coordinates required for rendering the control. | | +| enableSearch | boolean | no | Allow the user to search for new locations. | | +| zoom | number | no | Zoom level for the maps on display (range 1-15). | 10 | +| width | number | no | Width of the maps area in percentage. | 100% | +| height | number | no | Height of the maps area. | 300px | +| mapType | MapType | no | Type of the map to render. | standard | +| loadingMessage | string | no | Custom loading message. | | +| errorMessage | string | no | Custom error message. | | +| mapsClassName | string | no | Custom CSS class name. | | +| errorMessageClassName | string | no | Custom CSS error class name. | | +| onUpdateCoordinates | (coordinates: ICoordinates) => void | no | Callback to let your solution knows the new coordinates when a search was performed. | | `ICoordinates` interface: -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| latitude | number | yes | Latitude of the map to display. | | -| longitude | number | yes | Longitude of the map to display. | | -| displayName | string | no | Display Name of the location. | | -| address | any | no | Address of the location. | | +| Property | Type | Required | Description | Default | +| ----------- | ------ | -------- | -------------------------------- | ------- | +| latitude | number | yes | Latitude of the map to display. | | +| longitude | number | yes | Longitude of the map to display. | | +| displayName | string | no | Display Name of the location. | | +| address | any | no | Address of the location. | | `MapType` enum: -| Name | -| ---- | -| standard | -| cycle | -| normal | +| Name | +| --------- | +| standard | +| cycle | +| normal | | transport | - ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Map) diff --git a/docs/documentation/docs/controls/ModernAudio.md b/docs/documentation/docs/controls/ModernAudio.md index 6fe08c8b3..ac7dbeab0 100644 --- a/docs/documentation/docs/controls/ModernAudio.md +++ b/docs/documentation/docs/controls/ModernAudio.md @@ -5,15 +5,15 @@ This control renders an Audio Control in a modern and themable way. It is contro !!! Note Originally it's coming from the following community [Teams app sample](https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-meeting-record-name). -**Modern Audio control rendered with label and default label positioning** +- Modern Audio control rendered with label and default label positioning: ![Modern Audio](../assets/ModernAudioDefault.png) -**Modern Audio control rendered with dark (lime) theme and label positioned BottomLeft** +- Modern Audio control rendered with dark (lime) theme and label positioned BottomLeft: ![Modern Audio dark](../assets/ModernAudioDarkLime.png) -**Modern Audio control in action with label positioned at BottomCenter** +- Modern Audio control in action with label positioned at BottomCenter: ![Modern Audio in action](../assets/ModernAudioInAction.gif) @@ -35,28 +35,25 @@ import { ModernAudio, ModernAudioLabelPosition } from "@pnp/spfx-controls-react/ labelPosition={ModernAudioLabelPosition.TopCenter} /> ``` - ## Implementation The Modern Audio control can be configured with the following properties: -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| audioUrl | string | yes | Url to the audio src | | -| label | string | no | Label to use for the control. | blank | -| labelPosition | ModernAudioLabelPosition | no | Define position of label: TopLeft, TopCenter, BottomLeft, BottomCenter. | TopLeft | +| Property | Type | Required | Description | Default | +| ------------- | ------------------------ | -------- | ----------------------------------------------------------------------- | ------- | +| audioUrl | string | yes | Url to the audio src | | +| label | string | no | Label to use for the control. | blank | +| labelPosition | ModernAudioLabelPosition | no | Define position of label: TopLeft, TopCenter, BottomLeft, BottomCenter. | TopLeft | Enum `ModernAudioLabelPosition` The `ModernAudioLabelPosition` enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups. -| Name | Value | Position -| ---- | ---- | ---- | -| TopLeft | 1 | On top, left aligned -| TopCenter | 2 | On top, centered -| BottomLeft | 3 | At bottom, left aligned -| BottomCenter | 4 | At bottom, centered - +| Name | Value | Position | +| ------------ | ----- | ----------------------- | +| TopLeft | 1 | On top, left aligned | +| TopCenter | 2 | On top, centered | +| BottomLeft | 3 | At bottom, left aligned | +| BottomCenter | 4 | At bottom, centered | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ModernAudio) - diff --git a/docs/documentation/docs/controls/ModernTaxonomyPicker.md b/docs/documentation/docs/controls/ModernTaxonomyPicker.md index 39371ac4b..b70d6b541 100644 --- a/docs/documentation/docs/controls/ModernTaxonomyPicker.md +++ b/docs/documentation/docs/controls/ModernTaxonomyPicker.md @@ -2,26 +2,25 @@ This control allows you to select one or more Terms from a TermSet via its TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the anchorTermId. This is the modern version of the taxonomy picker that uses the REST API and makes use of some load on demand features which makes it well suited for large term sets. -!!! note "Disclaimer" +!!! note "Disclaimer" Since this control is meant to look as and work in the same way as the out-of-the-box control it lacks some of the features from the legacy ```TaxonomyPicker``` control. If you need some of those features please continue using the legacy version. -**Empty term picker** +- Empty term picker: ![Empty term picker](../assets/modernTaxonomyPicker-empty.png) -**Selecting terms** +- Selecting terms: ![Selecting terms](../assets/modernTaxonomyPicker-tree-selection.png) -**Selected terms in picker** +- Selected terms in picker: ![Selected terms in the input](../assets/modernTaxonomyPicker-selected-terms.png) -**Term picker: Auto Complete** +- Term picker: Auto Complete: ![Selected terms in the input](../assets/modernTaxonomyPicker-input-autocomplete.png) - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -52,6 +51,7 @@ private onTaxPickerChange(terms : ITermInfo[]) { ``` ## Advanced example + Custom rendering of a More actions button that displays a context menu for each term in the term set and the term set itself and with different options for the terms and the term set. This could for example be used to add terms to an open term set. It also shows how to set the initialsValues property when just knowing the name and the id of the term. ```TypeScript @@ -274,7 +274,7 @@ The ModernTaxonomyPicker control can be configured with the following properties | required | boolean | no | Specifies if to display an asterisk near the label. Default value is false. | | customPanelWidth | number | no | Custom panel width in pixels. | | termPickerProps | IModernTermPickerProps | no | Custom properties for the term picker (More info: [IBasePickerProps interface](https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers#IBasePickerProps)). | -| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). | +| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). | | isLightDismiss | boolean | no | Whether the panel can be light dismissed. | | isBlocking | boolean | no | Whether the panel uses a modal overlay or not. | | onRenderActionButton | function | no | Optional custom renderer for adding e.g. a button with additional actions to the terms in the tree view. See advanced example section | diff --git a/docs/documentation/docs/controls/MonacoEditor.md b/docs/documentation/docs/controls/MonacoEditor.md index 10900ef0b..d581a88ea 100644 --- a/docs/documentation/docs/controls/MonacoEditor.md +++ b/docs/documentation/docs/controls/MonacoEditor.md @@ -1,16 +1,15 @@ # Monaco Editor control -This control is an implementation of the Monaco Editor. The Monaco Editor is the code editor that powers [VS Code](https://github.com/microsoft/vscode). +This control is an implementation of the Monaco Editor. The Monaco Editor is the code editor that powers [VS Code](https://github.com/microsoft/vscode). Here is an example of the control: ![monacoeditor](../assets/MonacoEditor1.png) -`MonacoEditor` dark theme: +`MonacoEditor` dark theme: ![monacoeditor](../assets/MonacoEditor2.png) - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -29,24 +28,22 @@ import { MonacoEditor } from "@pnp/spfx-controls-react/lib/MonacoEditor"; language={"javascript"}/> ``` -- The `onValueChange` change event returns the upadated code and array with messages of errors on validation and can be implemented as follows: +- The `onValueChange` change event returns the updated code and array with messages of errors on validation and can be implemented as follows: > This validation is only available for JSON language Your `onValueChange` handler would follow a similar format to this: - ```TypeScript - const onValueChange = (newValue: string, validationErrors: string[]): void => { console.log(newValue); }; +const onValueChange = (newValue: string, validationErrors: string[]): void => { console.log(newValue); }; ``` Or, if using React Hooks: ```TypeScript - const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []); +const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []); ``` - ## Implementation The `MonacoEditor` control can be configured with the following properties: @@ -58,8 +55,6 @@ The `MonacoEditor` control can be configured with the following properties: | readOnly | boolean | no | indicate if editor is in read-only mode | | showLineNumbers | boolean | no | editor show line number or not, default : yes| | onValueChange |(newValue:string, validationErrors:string[]) => void | no | function to get code changes, return an array with validation error in case of language is 'JSON' | -| language |string | yes | editor code language, please see https://microsoft.github.io/monaco-editor/index.html for supported languages| -| jsonDiagnosticsOptions |monaco.languages.json.DiagnosticsOptions | no | define options to JSON validation, please see https://microsoft.github.io/monaco-editor/index.html for more details | -| jscriptDiagnosticsOptions | monaco.languages.typescript.DiagnosticsOptions | no | define options to javascript or typescript validation, please see https://microsoft.github.io/monaco-editor/index.html for more details | - - +| language |string | yes | editor code language, please see for supported languages| +| jsonDiagnosticsOptions |monaco.languages.json.DiagnosticsOptions | no | define options to JSON validation, please see for more details | +| javascriptDiagnosticsOptions | monaco.languages.typescript.DiagnosticsOptions | no | define options to javascript or typescript validation, please see for more details | diff --git a/docs/documentation/docs/controls/MyTeams.md b/docs/documentation/docs/controls/MyTeams.md index d934a1c49..9018f5c2b 100644 --- a/docs/documentation/docs/controls/MyTeams.md +++ b/docs/documentation/docs/controls/MyTeams.md @@ -3,7 +3,7 @@ This control show all Teams the user has access (joined),and for each Team the user can see the channels has permissions and quick open the channel or if callback is specified can return the Team Id and Channel Id for use in App. The user can quick see the members and owner of the group. -This control uses the [People](https://docs.microsoft.com/en-us/graph/toolkit/components/people) component from [mgt-toolkit](https://docs.microsoft.com/en-us/graph/toolkit/overview) that can be configured to show Person Card on hover. Please refer to required dependencies section to install the [mgt-spfx](https://docs.microsoft.com/en-gb/graph/toolkit/get-started/mgt-spfx) library in your tenant. +This control uses the [People](https://docs.microsoft.com/graph/toolkit/components/people) component from [mgt-toolkit](https://docs.microsoft.com/graph/toolkit/overview) that can be configured to show Person Card on hover. Please refer to required dependencies section to install the [mgt-spfx](https://docs.microsoft.com/graph/toolkit/get-started/mgt-spfx) library in your tenant. Here is an example of the control: @@ -15,7 +15,7 @@ Here is an example of the control: ## Required dependencies -In order to resolve an issue using controls from [mgt-toolkit](https://docs.microsoft.com/en-us/graph/toolkit/overview) within SharePoint Framework solutions, the mgt team created an SPFx library that should be deployed to your tenant. For the MyTeams control to work, we had no other option but to add a dependency on the mgt-spfx library. More information about mgt-spfx is available [here](https://docs.microsoft.com/en-gb/graph/toolkit/get-started/mgt-spfx) +In order to resolve an issue using controls from [mgt-toolkit](https://docs.microsoft.com/graph/toolkit/overview) within SharePoint Framework solutions, the mgt team created an SPFx library that should be deployed to your tenant. For the MyTeams control to work, we had no other option but to add a dependency on the mgt-spfx library. More information about mgt-spfx is available [here](https://docs.microsoft.com/graph/toolkit/get-started/mgt-spfx) Simply download the `mgt-spfx-2.2.0.sppkg` file from the link below and deploy to the SharePoint app catalog, making the solution available to all sites in the tenant. @@ -35,47 +35,47 @@ import { MyTeams } from "@pnp/spfx-controls-react/lib/MyTeams"; - Use the `MyTeams` control in your code as follows: ```TypeScript - + ``` ```TypeScript - + ``` - The `onSelectedChannel` callback returns the teamId and ChannelId and can be implemented as follows: ```TypeScript - const onSelectedChannel = (teamsId: string, channelId: string) => { - console.log("TeamsId", teamsId); - console.log("ChannelId", channelId); - }; +const onSelectedChannel = (teamsId: string, channelId: string) => { + console.log("TeamsId", teamsId); + console.log("ChannelId", channelId); +}; ``` ## Implementation The `MyTeams` control can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| webPartContext | WebPartContext | yes | The context object of the SPFx loaded webpart | -| title | string | no | Title of WebPart | -| themeVariant |IReadonlyTheme | no | themeVariant | -| enablePersonCardInteraction | boolean | no | Show Person Card on hover | -| onSelectedChannel | (teamId:string,channelId:string) => void; | no | callBack with TeamId and ChannelId Selected | +| Property | Type | Required | Description | +| --------------------------- | ----------------------------------------- | -------- | --------------------------------------------- | +| webPartContext | WebPartContext | yes | The context object of the SPFx loaded webpart | +| title | string | no | Title of WebPart | +| themeVariant | IReadonlyTheme | no | themeVariant | +| enablePersonCardInteraction | boolean | no | Show Person Card on hover | +| onSelectedChannel | (teamId:string,channelId:string) => void; | no | callBack with TeamId and ChannelId Selected | ## MSGraph Permissions required -This control required the flowing scopes : +This control requires at least the following scopes: -at least : Team.ReadBasic.All, Channel.ReadBasic.All, TeamMember.Read.All -and all Scopes used by [mgt-people](https://docs.microsoft.com/en-us/graph/toolkit/components/people), -and [Person-Card](https://docs.microsoft.com/en-us/graph/toolkit/components/person-card) components +- `Channel.ReadBasic.All` +- `Team.ReadBasic.All` +- `TeamMember.Read.All` +- All scopes used by [mgt-people](https://docs.microsoft.com/graph/toolkit/components/people) and [mgt-person](https://docs.microsoft.com//graph/toolkit/components/person-card) components diff --git a/docs/documentation/docs/controls/Pagination.md b/docs/documentation/docs/controls/Pagination.md index e83bde1f0..26e65029c 100644 --- a/docs/documentation/docs/controls/Pagination.md +++ b/docs/documentation/docs/controls/Pagination.md @@ -1,12 +1,11 @@ # Pagination Control -This control renders a Pagination component which can be used to show limited information of data. For example, you can set up your search result for the first 10 and then when clicking on a new page make a new request for other 10 elements. +This control renders a Pagination component which can be used to show limited information of data. For example, you can set up your search result for the first 10 and then when clicking on a new page make a new request for other 10 elements. -**Pagination on the page** +- Pagination on the page: ![Pagination control](../assets/Pagination.gif) - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -42,14 +41,14 @@ private _getPage(page: number){ The Pagination control can be configured with the following properties: -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| currentPage | number | yes | The page initial selected | | -| totalPages | number | yes | The total of page that you want to show on control | | -| onChange | string | yes| When the page number change send the page number selected | | -| limiter | string | no | The number of pages showing before the icon | 3 | -| hideFirstPageJump | boolean | no | Hide the quick jump to the first page | false | -| hideLastPageJump | boolean | no | Hide the quick jump to the last page | false | -| limiterIcon | string | no | Limitir icon form Fluent IU | More | +| Property | Type | Required | Description | Default | +| ----------------- | ------- | -------- | --------------------------------------------------------- | ------- | +| currentPage | number | yes | The page initial selected | | +| totalPages | number | yes | The total of page that you want to show on control | | +| onChange | string | yes | When the page number change send the page number selected | | +| limiter | string | no | The number of pages showing before the icon | 3 | +| hideFirstPageJump | boolean | no | Hide the quick jump to the first page | false | +| hideLastPageJump | boolean | no | Hide the quick jump to the last page | false | +| limiterIcon | string | no | Limiter icon form Fluent IU | More | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Pagination) diff --git a/docs/documentation/docs/controls/PeoplePicker.md b/docs/documentation/docs/controls/PeoplePicker.md index 36e47f7be..c69926a38 100644 --- a/docs/documentation/docs/controls/PeoplePicker.md +++ b/docs/documentation/docs/controls/PeoplePicker.md @@ -3,17 +3,17 @@ This control renders a People picker field which can be used to select one or more users from a SharePoint group or site. The control can be configured as mandatory. It will show a custom error message if field is empty. !!! Note - You can also check out [People Picker](https://docs.microsoft.com/en-us/graph/toolkit/components/people-picker) component in the [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit). + You can also check out [People Picker](https://docs.microsoft.com/graph/toolkit/components/people-picker) component in the [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit). -**Empty People Picker control with error message and tooltip** +- Empty People Picker control with error message and tooltip: ![People Picker](../assets/Peoplepicker-witherrorandtooltip.png) -**Selecting People** +- Selecting People: ![Selecting People](../assets/Peoplepicker-selectingchoices.png) -**Selected people** +- Selected people: ![Selected people](../assets/Peoplepicker-multiplechoices.png) @@ -50,7 +50,7 @@ const peoplePickerContext: IPeoplePickerContext = { resolveDelay={1000} /> ``` -- With the `onChange` property you can get the selected People in the `PeoplePicker` : +- With the `onChange` property you can get the selected People in the `PeoplePicker`: ```typescript private _getPeoplePickerItems(items: any[]) { @@ -100,28 +100,28 @@ Enum `PrincipalType` The `PrincipalType` enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups. -| Name | Value | -| ---- | ---- | -| User | 1 | -| DistributionList | 2 | -| SecurityGroup | 4 | -| SharePointGroup | 8 | +| Name | Value | +| ---------------- | ----- | +| User | 1 | +| DistributionList | 2 | +| SecurityGroup | 4 | +| SharePointGroup | 8 | Interface `IPeoplePickerContext` Provides mandatory properties to search users on the tenant -| Value | Type | Description | -| ---- | ---- | ---- | -| absoluteUrl | string | Current `SPWeb` absolute URL. | +| Value | Type | Description | +| -------------------- | -------------------- | ---------------------------------------------------------------------------- | +| absoluteUrl | string | Current `SPWeb` absolute URL. | | msGraphClientFactory | MSGraphClientFactory | Instance of MSGraphClientFactory used for querying Microsoft Graph REST API. | -| spHttpClient | SPHttpClient | Instance of SPHttpClient used for querying SharePoint REST API. | +| spHttpClient | SPHttpClient | Instance of SPHttpClient used for querying SharePoint REST API. | ## MSGraph Permissions required This control requires at least one the following scopes if `groupId` is of type `string`: -- *GroupMember.Read.All* + *User.ReadBasic.All* -- *Directory.Read.All* +- `GroupMember.Read.All` + `User.ReadBasic.All` +- `Directory.Read.All` ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker) diff --git a/docs/documentation/docs/controls/ProgressStepsIndicator.md b/docs/documentation/docs/controls/ProgressStepsIndicator.md index 856c5c582..c45fd1155 100644 --- a/docs/documentation/docs/controls/ProgressStepsIndicator.md +++ b/docs/documentation/docs/controls/ProgressStepsIndicator.md @@ -6,8 +6,6 @@ Here is an example of the control in action: ![ProgressStepsIndicator](../assets/ProgressStepsIndicator.png) - - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -34,18 +32,17 @@ const progressSteps: IStep[] = [ } ``` - ## Implementation The `ProgressStepsIndicator` control can be configured with the following properties: -| Property | Type | Required | Description | Default | -| ---- | ---- | ---- | ---- | ---- | -| steps | ISteps[] | yes | Perogress Steps | | -| currentStep | number | yes | index of current step | default is 0| -| themeVariant | IReadonlyTheme | undefined | no | Theme | | - - The `IStep Interface` definition: +| Property | Type | Required | Description | Default | +| ------------ | -------------- | --------- | --------------------- | ------------ | +| steps | ISteps[] | yes | Progress Steps | | +| currentStep | number | yes | index of current step | default is 0 | +| themeVariant | IReadonlyTheme | undefined | no | Theme | + +The `IStep Interface` definition: ```TypeScript Interface IStep { @@ -55,7 +52,4 @@ Interface IStep { } ``` - - - ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ProgressStepsIndicator) diff --git a/docs/documentation/docs/controls/RichText.md b/docs/documentation/docs/controls/RichText.md index b9a76b8de..0c2f53e40 100644 --- a/docs/documentation/docs/controls/RichText.md +++ b/docs/documentation/docs/controls/RichText.md @@ -22,7 +22,7 @@ import { RichText } from "@pnp/spfx-controls-react/lib/RichText"; ``` - The `value` property should contain the HTML that you wish to display -- The `onChange` handler will be called every time a user changes the text. For example, to have your web part store the rich text as it is updated, you would use the following code: +- The `onChange` handler will be called every time a user changes the text. For example, to have your web part store the rich text as it is updated, you would use the following code: ```TypeScript private onTextChange = (newText: string) => { @@ -86,9 +86,9 @@ The RichText control can be configured with the following properties: | showItalic | boolean | no | Indicates whether to show the **Italic** toolbar button or not. Default value is `true` | | showLink | boolean | no | Indicates whether to show the **Hyperlink** toolbar button or not. Default value is `true` | | showList | boolean | no | Indicates whether to show the **List** toolbar button or not. Default value is `true` | -| showMore | boolean | no | Indicates whether to show the **More** toolbar button or not. Note that this option is indenpendent from the other `show___` options. I.e.: Setting `showBold` to `false` will disable the **Bold** toolbar, but will not disable it from the formatting pane. Default value is `true` | -| showStyles | boolean | no | Indicates whether to show the **Headings** toolbar button or not. Note that this option is indenpendent from the other `show___` options. I.e.: Setting `showBold` to `false` will disable the **Bold** toolbar, but will not disable it from the formatting pane. Default value is `true` | -| showUnderline | boolean | no | Indicates whether to show the **Underline** toolbar button or not. Note that this option is indenpendent from the other `show___` options. I.e.: Setting `showBold` to `false` will disable the **Bold** toolbar, but will not disable it from the formatting pane. Default value is `true` | +| showMore | boolean | no | Indicates whether to show the **More** toolbar button or not. Note that this option is independent from the other `show___` options. I.e.: Setting `showBold` to `false` will disable the **Bold** toolbar, but will not disable it from the formatting pane. Default value is `true` | +| showStyles | boolean | no | Indicates whether to show the **Headings** toolbar button or not. Note that this option is independent from the other `show___` options. I.e.: Setting `showBold` to `false` will disable the **Bold** toolbar, but will not disable it from the formatting pane. Default value is `true` | +| showUnderline | boolean | no | Indicates whether to show the **Underline** toolbar button or not. Note that this option is independent from the other `show___` options. I.e.: Setting `showBold` to `false` will disable the **Bold** toolbar, but will not disable it from the formatting pane. Default value is `true` | > Note that setting `showAlign`, `showBold`, `showItalic`, `showLink`, `showList`, `showStyles`, or `showUnderline` to `false` does *not* remove the user's ability to apply the button's associated formatting -- it only hides the toolbar option. Also, if `showMore` is `true`, all options remain available in the formatting pane -- regardless whether they were turned off using `show___`. To prevent users from applying specific formats, use the `onChange` handler to parse the rich text and remove the formatting as desired. diff --git a/docs/documentation/docs/controls/SecurityTrimmedControl.md b/docs/documentation/docs/controls/SecurityTrimmedControl.md index 363e3fe88..f61e6e9f8 100644 --- a/docs/documentation/docs/controls/SecurityTrimmedControl.md +++ b/docs/documentation/docs/controls/SecurityTrimmedControl.md @@ -1,6 +1,6 @@ # SecurityTrimmedControl -This control is intended to be used when you want to show or hide components based on the user permissions. The control can be used to check the user’s permissions on the current site / list were the solution is loaded, or on a remote site / list. +This control is intended to be used when you want to show or hide components based on the user permissions. The control can be used to check the user's permissions on the current site / list were the solution is loaded, or on a remote site / list. ## How to use this control in your solutions @@ -14,7 +14,7 @@ import { SPPermission } from '@microsoft/sp-page-context'; - You can use the `SecurityTrimmedControl` as follows in your solutions: -**Checking permissions on the current site** +### Checking permissions on the current site ```jsx ``` -**Checking permissions on the current list** +### Checking permissions on the current list ```jsx ``` -**Checking permissions on remote site** +### Checking permissions on remote site ```jsx ``` -**Checking permissions on remote list / library** +### Checking permissions on remote list / library ```jsx ``` -**Show a control when the user doesn't have permissions** +### Show a control when the user doesn't have permissions ```jsx void` | yes | Selection change handler. | -| orderBy | `'title' | 'url'` | no | Specifices if the list is sorted by title or url. Default: `title`. | +| onChange | `(selectedSites: ISite[]) => void` | yes | Selection change handler. | +| orderBy | `title` \| `url` | no | Specifies if the list is sorted by title or url. Default: `title`. | | placeholder | string | no | Placeholder label to show in the dropdown. | | searchPlaceholder | string | no | Search input placeholder text. Displayed until search text is entered. | | trimDuplicates | boolean | no | Specifies if the duplicates should be trimmed. false by default. Applicable if mode is set to site or web. | @@ -63,12 +63,12 @@ The `SitePicker` control can be configured with the following properties: Interface `ISite` -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| id | string | no | ID of the site collection. | -| title | string | no | Title of the site. | -| url | string | no | URL of the site. | -| webId | string | no | ID of the site. **Note: the value is not populated if the `mode` is set to `hub`. | -| hubSiteId | string | no | ID of the hub site. | +| Property | Type | Required | Description | +| --------- | ------ | -------- | --------------------------------------------------------------------------------- | +| id | string | no | ID of the site collection. | +| title | string | no | Title of the site. | +| url | string | no | URL of the site. | +| webId | string | no | ID of the site. **Note: the value is not populated if the `mode` is set to `hub`. | +| hubSiteId | string | no | ID of the hub site. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/SitePicker) diff --git a/docs/documentation/docs/controls/TaxonomyPicker.md b/docs/documentation/docs/controls/TaxonomyPicker.md index 3c3f12099..c583ab73f 100644 --- a/docs/documentation/docs/controls/TaxonomyPicker.md +++ b/docs/documentation/docs/controls/TaxonomyPicker.md @@ -2,26 +2,25 @@ This control allows you to select one or more Terms from a TermSet via its name or TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the AnchorId. -!!! note "Disclaimer" +!!! note "Disclaimer" This control makes use of the `ProcessQuery` API end-points to retrieve the managed metadata information. This will get changed once the APIs for managing managed metadata will become available. -**Empty term picker** +- Empty term picker: ![Empty term picker](../assets/termpicker-empty.png) -**Selecting terms** +- Selecting terms: ![Selecting terms](../assets/termPicker-tree-selection.png) -**Selected terms in picker** +- Selected terms in picker: ![Selected terms in the input](../assets/termpicker-selected-terms.png) -**Term picker: Auto Complete** +- Term picker: Auto Complete: ![Selected terms in the input](../assets/termpicker-input-autocomplete.png) - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -177,7 +176,7 @@ The TaxonomyPicker control can be configured with the following properties: | isTermSetSelectable | boolean | no | Specify if the TermSet itself is selectable in the tree view. | | disabledTermIds | string[] | no | Specify which terms should be disabled in the term set so that they cannot be selected. | | disableChildrenOfDisabledParents | boolean | no | Specify if you want to disable the child terms when their parent is disabled. | -| anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. | +| anchorId | string | no | Set the anchor id to a child term in the TermSet to be able to select terms from that level and below. | | termActions | ITermActions | no | Allows to execute custom action on the term like e.g. get other term labelsITermActions. | | hideTagsNotAvailableForTagging | boolean | no | Specifies if the tags marked with 'Available for tagging' = false should be hidden | | validateOnLoad | boolean | no | Specifies if the initial values will be validated, when the component is loaded. Default value is false | @@ -191,7 +190,6 @@ The TaxonomyPicker control can be configured with the following properties: | onPanelSelectionChange | (prevValue: IPickerTerms, newValue: IPickerTerms) => void | no | Panel selection change handler. Can be used to interact with the control while selecting items in the panel, before Click or Cancel is clicked. | | selectChildrenIfParentSelected | boolean | no | Specifies if the children should be selected when parent item is selected (defaults to false). | - Interface `IPickerTerm` | Property | Type | Required | Description | @@ -213,7 +211,7 @@ Interface `ITermActions` | actions | ITermAction[] | yes | The array of supported actions | | | termActionsDisplayStyle | TermActionsDisplayStyle | no | Defines how to display term action button, available options: text, icon, text and icon | text | | termActionsDisplayMode | TermActionsDisplayMode | no | Defines how to display term actions, as buttons or dropdown | buttons | -| initialize | (spTermService: SPTermStorePickerService) => Promise\ | no | Initializes the term action with the taxonomy service | +| initialize | (spTermService: SPTermStorePickerService) => Promise<void> | no | Initializes the term action with the taxonomy service | | Interface `ITreeItemAction` @@ -224,9 +222,8 @@ Interface `ITreeItemAction` | iconName | string | no | Name of the icon to be used to display action | | hidden | boolean | no | Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering. | | invokeActionOnRender | boolean | no | Specifies if you want to invoke the action on render | -| applyToTerm | (currentTerm: ITerm, triggerActionCallback: (updateAction: UpdateAction) => void, setActionStateForTerm: (actionId: string, termId: string, type: "disabled" \| "hidden", value: boolean) => void) => Promise\ \| boolean | yes | Method checks if the current term is supported for the action. The method provices a couple of additional callback functions to make it possibe to programatically change the terms and its actions. | -| actionCallback | (spTermService: SPTermStorePickerService, currentTerm: ITerm) => Promise\ | yes | Method to be executed when action is fired | - +| applyToTerm | (currentTerm: ITerm, triggerActionCallback: (updateAction: UpdateAction) => void, setActionStateForTerm: (actionId: string, termId: string, type: `disabled` \| `hidden`, value: boolean) => void) => Promise<boolean> \| boolean | yes | Method checks if the current term is supported for the action. The method provides a couple of additional callback functions to make it possible to programmatically change the terms and its actions. | +| actionCallback | (spTermService: SPTermStorePickerService, currentTerm: ITerm) => Promise<UpdateAction> | yes | Method to be executed when action is fired | Interface `UpdateAction` @@ -237,12 +234,12 @@ Interface `UpdateAction` Enum `UpdateType` -| Value | -| ---- | +| Value | +| --------------- | | updateTermLabel | | updateTermsTree | -| hideTerm | -| disableTerm | -| selectTerm | +| hideTerm | +| disableTerm | +| selectTerm | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TaxonomyPicker) diff --git a/docs/documentation/docs/controls/TeamChannelPicker.md b/docs/documentation/docs/controls/TeamChannelPicker.md index 404922af8..feeec8710 100644 --- a/docs/documentation/docs/controls/TeamChannelPicker.md +++ b/docs/documentation/docs/controls/TeamChannelPicker.md @@ -3,7 +3,7 @@ This control allows you to select one or multiple Team Channels based on user's permissions. !!! Note - You can also check out [Microsoft Teams Channel Picker](https://docs.microsoft.com/en-us/graph/toolkit/components/teams-channel-picker) component in the [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit). + You can also check out [Microsoft Teams Channel Picker](https://docs.microsoft.com/graph/toolkit/components/teams-channel-picker) component in the [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit). Here is an example of the control: @@ -13,7 +13,6 @@ Here is an example of the control: ![Teamselection](../assets/SelectTeamChannelPicker.png) - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -26,41 +25,39 @@ import { TeamChannelPicker } from "@pnp/spfx-controls-react/lib/TeamChannelPicke - Use the `TeamChannelPicker` control in your code as follows: ```TypeScript - + ``` - The `_onSelectedTeamChannels` change event returns the team channel(s) and can be implemented as follows: ```TypeScript const _onSelectedTeamChannels ((tagList: ITag[]) => { - console.log(tagList); - } + console.log(tagList); +} ``` ## Implementation - The `SelectTeamChannelPicker` control can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| teamId | string | yes | Id of Team to get channels | -| appcontext | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. | -| selectedChannels | ITag[] | yes | Array with selected channels | -| itemLimit | number | no | number of allowed selected channels | -| label | string | no | Label of Picker | -| styles | IBasePickerStyles | no | Customer Styles of Picker | -| onSelectedChannels: | (tagsList:ITag[]) => void; | yes | callBack with channels Selected | - +| Property | Type | Required | Description | +| ------------------- | ---------------------------------- | -------- | ------------------------------------------------------------ | +| teamId | string | yes | Id of Team to get channels | +| appcontext | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. | +| selectedChannels | ITag[] | yes | Array with selected channels | +| itemLimit | number | no | number of allowed selected channels | +| label | string | no | Label of Picker | +| styles | IBasePickerStyles | no | Customer Styles of Picker | +| onSelectedChannels: | (tagsList:ITag[]) => void; | yes | callBack with channels Selected | ## MSGraph Permissions required -This control required the flowing scopes : +This control requires at least the following scopes: -at least : Team.ReadBasic.All, Channel.ReadBasic.All, - +- `Channel.ReadBasic.All` +- `Team.ReadBasic.All` diff --git a/docs/documentation/docs/controls/TeamPicker.md b/docs/documentation/docs/controls/TeamPicker.md index bb68dba22..af8eeda6b 100644 --- a/docs/documentation/docs/controls/TeamPicker.md +++ b/docs/documentation/docs/controls/TeamPicker.md @@ -10,7 +10,6 @@ Here is an example of the control: ![Teamselection](../assets/SelectTeamPicker_select.png) - ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. @@ -23,38 +22,37 @@ import { SelectTeamPicker } from "@pnp/spfx-controls-react/lib/TeamPicker"; - Use the `SelectTeamPicker` control in your code as follows: ```TypeScript - + ``` - The `_onSelectedTeams` change event returns the team(s) and can be implemented as follows: ```TypeScript const _onSelectedTeams ((tagList: ITag[]) => { - console.log(tagList); - } + console.log(tagList); +} ``` ## Implementation - The `TeamPicker` control can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| appcontext | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. | -| selectedTeams | ITag[] | yes | Array with Selected Teams | -| itemLimit | number | no | number of allowed selected items | -| label | string | no | Label of Picker | -| styles | IBasePickerStyles | no | Customer Styles of Picker | -| onSelectedTeams: | (tagsList:ITag[]) => void; | yes | callBack with teams Selected | - +| Property | Type | Required | Description | +| ---------------- | ---------------------------------- | -------- | ------------------------------------------------------------ | +| appcontext | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. | +| selectedTeams | ITag[] | yes | Array with Selected Teams | +| itemLimit | number | no | number of allowed selected items | +| label | string | no | Label of Picker | +| styles | IBasePickerStyles | no | Customer Styles of Picker | +| onSelectedTeams: | (tagsList:ITag[]) => void; | yes | callBack with teams Selected | - ## MSGraph Permissions required +## MSGraph Permissions required -This control required the flowing scopes : +This control requires at least the following scopes: -at least : Team.ReadBasic.All, Channel.ReadBasic.All, +- `Channel.ReadBasic.All` +- `Team.ReadBasic.All` diff --git a/docs/documentation/docs/controls/TermSetNavigation.md b/docs/documentation/docs/controls/TermSetNavigation.md index bac3b3d97..f2400d02b 100644 --- a/docs/documentation/docs/controls/TermSetNavigation.md +++ b/docs/documentation/docs/controls/TermSetNavigation.md @@ -1,16 +1,10 @@ # TermSetNavigation -This control allows you to navigate and select a Term from a TermSet. You can also configure a context menu for a term to execute a specific action. - - - -**TermSetNavigation** +This control allows you to navigate and select a Term from a TermSet. You can also configure a context menu for a term to execute a specific action. ![termsetNavigation](../assets/TermSetNavigation.png) ![termsetNavigation](../assets/TermSetNavigation.gif) - - ## How to use this control in your solutions @@ -51,25 +45,22 @@ import { TermSetNavigation } from '@pnp/spfx-controls-react/lib/TermSetNavigatio /> ``` -- With the `onSelected` property you can get the selcted term: +- With the `onSelected` property you can get the selected term: ```typescript - const onSelect = React.useCallback((selected: TermStore.Term) => { - console.log(selected); - }, []); - +const onSelect = React.useCallback((selected: TermStore.Term) => { + console.log(selected); +}, []); ``` -- With the `onSelectedTermAction` property you can get the the action on the contextMenu for tghe selcted term: +- With the `onSelectedTermAction` property you can get the the action on the contextMenu for the selected term: ```typescript - const onSelectedTermAction = React.useCallback((selected: TermStore.Term, option:string) => { - console.log(selected, option); - }, []); - +const onSelectedTermAction = React.useCallback((selected: TermStore.Term, option:string) => { + console.log(selected, option); +}, []); ``` - ## Implementation The TermSetNavigation control can be configured with the following properties: @@ -79,17 +70,18 @@ The TermSetNavigation control can be configured with the following properties: | themeVariant | IReadonlyTheme | yes | ThemeVariant | | termSetId | string | yes | Term Set Id | | context | BaseComponentContext | yes | Context of the current web part or extension. | -| showContextMenu | boolean | no | If show ConextMenu for term | -| contextMenuItems |IContextualMenuItem[] | no | array of action to show on contextMenu, if is un defined the conbtecxtMenu won't be available | -| onSelected |onSelected?: (term: TermStore.Term) => void| no | return Term Sselcted | -| onSelectedTermAction | onSelectedTermAction?: (term : TermStore.Term, option:string) => void |no | return the action selected to to term | +| showContextMenu | boolean | no | If `true`, shows ContextMenu for term | +| contextMenuItems |IContextualMenuItem[] | no | Array of action to show on contextMenu, if is undefined the contextMenu won't be available | +| onSelected |onSelected?: (term: TermStore.Term) => void| no | Returns Term Selected | +| onSelectedTermAction | onSelectedTermAction?: (term : TermStore.Term, option:string) => void | no | return the action selected to to term | - ## MSGraph Permissions required +## MSGraph Permissions required -This control required the flowing scopes : +This control requires at least one of the following scopes: -at least : , TermStore.Read.All, TermStore.ReadWrite.All, +- `TermStore.Read.All` +- `TermStore.ReadWrite.All` -please use M365Cli or PnP Powershell to add these permissions. +These M365Cli or PnP Powershell to add these permissions. ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TermSetNavigation) diff --git a/docs/documentation/docs/controls/Toolbar.md b/docs/documentation/docs/controls/Toolbar.md index 3540a37ff..9f14c1431 100644 --- a/docs/documentation/docs/controls/Toolbar.md +++ b/docs/documentation/docs/controls/Toolbar.md @@ -55,7 +55,8 @@ import { Toolbar } from '@pnp/spfx-controls-react/lib/Toolbar'; ``` ## Controlled or uncontrolled management of selected filters -The Toolbar component can internally manage the set of selected filters (uncontrolled) or the set of selected filters can be defined using property, `selectedFilterIds `(controlled). + +The Toolbar component can internally manage the set of selected filters (uncontrolled) or the set of selected filters can be defined using property, `selectedFilterIds`(controlled). If property `selectedFilterIds` is undefined then the set of selected filter IDs is uncontrolled and the Toolbar will initialise with an empty set of selected filters. As the user toggles the Toolbar's filters the function set on property, `onSelectedFiltersChange`, will be called with an array parameter of the currently selected filter IDs. The implementation of this function can return void or an array of filter IDs that the Toolbar should set. By returning an array of filter IDs the `onSelectedFiltersChange` implementation can alter the selected filters of an uncontrolled Toolbar in response to user attempts to set/clear filters. @@ -75,10 +76,9 @@ The Toolbar component can be configured with the following properties: | selectedFilterIds | string[] | no | Specifies the IDs of the filters which should be displayed as selected by the Toolbar. | | onFindQueryChange | (findQuery: string) => string | no | Search query changed handler. | - Type `TActionGroups` -Provides Toolbar action groups settings +Provides Toolbar action groups settings. ```typescript type TActionGroups = { @@ -88,7 +88,7 @@ type TActionGroups = { Type `TActions` -Provides Toolbar actions settings +Provides Toolbar actions settings. ```typescript type TActions = { @@ -98,18 +98,18 @@ type TActions = { Type `TAction` -Provides Toolbar action settings +Provides Toolbar action settings. -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| title | string | yes | Action title. | -| iconName | string | no | Action icon name. | -| multi | boolean | no | For future. | -| onClick | ComponentEventHandler<ToolbarItemProps> | no | Action `onClick` handler. | +| Property | Type | Required | Description | +| -------- | --------------------------------------------- | -------- | ------------------------- | +| title | string | yes | Action title. | +| iconName | string | no | Action icon name. | +| multi | boolean | no | For future. | +| onClick | ComponentEventHandler<ToolbarItemProps> | no | Action `onClick` handler. | Type `TFilters` -Provides Toolbar filters settings +Provides Toolbar filters settings. ```typescript type TFilters = ObjectShorthandCollection; diff --git a/docs/documentation/docs/controls/TreeView.md b/docs/documentation/docs/controls/TreeView.md index 1444c411d..ad7c95f9b 100644 --- a/docs/documentation/docs/controls/TreeView.md +++ b/docs/documentation/docs/controls/TreeView.md @@ -1,4 +1,4 @@ -## TreeView control +# TreeView control This graphical control allows to present a hierarchical view of information. Each tree item can have a number of subitems. This is often visualized by indentation in a list. A tree item can be expanded to reveal subitems (if exist), and collapsed to hide subitems. @@ -6,15 +6,15 @@ Here are examples of the control in action: ![Tree View control](../assets/TreeView-control.gif) -**With all possible options** +- With all possible options: ![Tree View control](../assets/TreeView-all-possible-options.png) -**Without check boxes or when selection mode is 'None'** +- Without check boxes or when selection mode is 'None': ![Tree View control](../assets/TreeView-without-checkbox.png) -**Without check boxes, and selection mode is multiple** +- Without check boxes, and selection mode is multiple: ![Tree View control](../assets/TreeView-without-checkbox-selection-mode.png) @@ -63,6 +63,7 @@ private onTreeItemExpandCollapse(item: ITreeItem, isExpanded: boolean) { ``` ## Custom Rendering + You can fully customize how tree items are rendered by providing the `onRenderItem` callback function and returning whatever `JSX.Element` you want. For example, you can define your function in a .tsx file like this: @@ -89,8 +90,8 @@ The `TreeView` control can be configured with the following properties: | Property | Type | Required | Description | |--------------------------------|----------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------| -| items | ITreeItem[] | yes | An array of tree items to display. refer [example](#example-of-array-of-tree-items-used-to-render-control-as-in-first-screenshot). | -| defaultExpanded | boolean | no | Specify if the tree items are displayed as expanded by default (defaults to false. | +| items | ITreeItem[] | yes | An array of tree items to display. refer [example](#example-of-array-of-tree-items-used-to-render-control-as-in-2nd-screenshot). | +| defaultExpanded | boolean | no | Specify if the tree items are displayed as expanded by default (defaults to false). | | selectionMode | enum | no | Specifies the selection mode of tree view (defaults to Single selection). | | selectChildrenIfParentSelected | boolean | no | Specifies if the children should be selected when parent item is selected (defaults to false). __Deprecated__: prefer usage of `selectChildrenMode` for more flexibility. | | selectChildrenMode | SelectChildrenMode | no | Specifies if the children should be selected when parent item is selected (defaults to None). Flagged enum, values can be combined eg. `SelectChildrenMode.Select \| SelectChildrenMode.Unselect` | @@ -110,7 +111,7 @@ Enum `TreeViewSelectionMode` Specifies the selection mode of tree item. | Value | -|----------| +| -------- | | Single | | Multiple | | None | @@ -126,7 +127,7 @@ Specifies when the children of a selected item need to be automatically selected | Unselect | When unselecting an item, its children are also unselected | | Mount | When the component is mounted, all children of selected items are also selected | | Update | When the component receives new props, all children of selected items are also selected | -| All | Shorthand for a combination of all of the above, same as `SelectChildrenMode.Select \| SelectChildrenMode.Unselect \| SelectChildrenMode.Mount \| SelectChildrenMode.Update` | | +| All | Shorthand for a combination of all of the above, same as `SelectChildrenMode.Select` \| `SelectChildrenMode.Unselect` \| `SelectChildrenMode.Mount` \| `SelectChildrenMode.Update` | Interface `ITreeItem` @@ -144,7 +145,6 @@ Each tree item in the `treeitems` property is defined as `ITreeItem` as follows: | actions | ITreeItemAction[] | no | Specify list of actions for the tree item. | | children | ITreeItem[] | no | Specify list of child tree items. | - Interface `ITreeItemAction` Specifies the list of actions for the tree item. @@ -261,7 +261,8 @@ items: [ } ] ``` -`IconpProps` in above example can be declared as below + +`iconProps` in above example can be declared as below ```typescript private skypeCheckIcon: IIconProps = { iconName: 'SkypeCheck' }; diff --git a/docs/documentation/docs/controls/UploadFiles.md b/docs/documentation/docs/controls/UploadFiles.md index 7cd96de21..8a5a33f29 100644 --- a/docs/documentation/docs/controls/UploadFiles.md +++ b/docs/documentation/docs/controls/UploadFiles.md @@ -27,23 +27,20 @@ import { /> ``` - ![uploadFiles](../assets/UploadFiles.gif) ![uploadFiles](../assets/UploadFiles02.png) ![uploadFiles](../assets/UploadFiles01.png) - + ## Implementation The `UploadFiles` can be configured with the following properties: -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| pageSize | number | no | number of files to show per page base on this value the height of control is calculate, default 15 | -| context | WebPartContext | yes | webPartContext | -| title | string | yes | title | -| onUploadFiles | (files: File[]) => void; | yes | Method that returns all Files[] | -| themeVariant | IReadonlyTheme | no |Theme Variant | - - +| Property | Type | Required | Description | +| ------------- | ------------------------ | -------- | -------------------------------------------------------------------------------------------------- | +| pageSize | number | no | number of files to show per page base on this value the height of control is calculate, default 15 | +| context | WebPartContext | yes | webPartContext | +| title | string | yes | title | +| onUploadFiles | (files: File[]) => void; | yes | Method that returns all Files[] | +| themeVariant | IReadonlyTheme | no | Theme Variant | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/UploadFiles) diff --git a/docs/documentation/docs/controls/UserPicker.md b/docs/documentation/docs/controls/UserPicker.md index 9ca394bb4..434d6d175 100644 --- a/docs/documentation/docs/controls/UserPicker.md +++ b/docs/documentation/docs/controls/UserPicker.md @@ -2,15 +2,15 @@ This control allows you to select one or more user from a AAD via its name or starting characters. -**Empty user picker** +- Empty user picker: ![Empty user picker](../assets/userPicker03.png) -**Selecting Users** +- Selecting Users: ![Selecting users](../assets/userPicker02.png) -**Selected users in picker** +- Selected users in picker: ![Selected users in the input](../assets/userPicker01.png) @@ -61,7 +61,7 @@ const onRemovedUser = React.useCallback((user: IUserInfo) => { ## Implementation -The UseryPicker control can be configured with the following properties: +The UserPicker control can be configured with the following properties: | Property | Type | Required | Description | | ------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------- | @@ -74,15 +74,15 @@ The UseryPicker control can be configured with the following properties: | onSelectedUsers | (users: IUserInfo[]) => void | no | captures the event of when the users in the picker has changed. | | onRemoveSelectedUser | (user: IUserInfo) => void | no | captures the event of when the user in the picker was removed | | placeholder | string | no | placeholder to show | -| defaultSelectdUsers | IUserInfo[] | no | default users to show on the picker | +| defaultSelectedUsers | IUserInfo[] | no | default users to show on the picker | | theme | IReadonlyTheme | no | theme | -| secondaryTextPropertyName | values :"jobTitle" , "department" , "mail", "officeLocation" , "mobilePhone" , "businessPhones" , "userPrincipalName" | no | secondary text to show on persona card | +| secondaryTextPropertyName | values: "jobTitle" , "department" , "mail", "officeLocation" , "mobilePhone" , "businessPhones" , "userPrincipalName" | no | secondary text to show on persona card | -Interface `IUserInfo` extends User interface from `@microsoft/microsoft-graph-types`` +Interface `IUserInfo` extends `User` interface from `@microsoft/microsoft-graph-types` -| Property | Type | Required | Description | -| --------- | -------- | -------- | -------------------------------- | -| userPhoto | string | yes | userPhoto to show on Person card | -| presence | Presence | yes | user Presence | +| Property | Type | Required | Description | +| --------- | -------- | -------- | --------------------------------- | +| userPhoto | string | yes | User photo to show on Person card | +| presence | Presence | yes | User presence | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/UserPicker) diff --git a/docs/documentation/docs/controls/VariantThemeProvider.md b/docs/documentation/docs/controls/VariantThemeProvider.md index dc3d447ac..8f712952a 100644 --- a/docs/documentation/docs/controls/VariantThemeProvider.md +++ b/docs/documentation/docs/controls/VariantThemeProvider.md @@ -23,7 +23,7 @@ import { VariantThemeProvider, VariantType, IThemeColors } from "@pnp/spfx-contr - Example on use the `VariantThemeProvider` control with the 'Neutral' variant on custom theme generated from the 'themeColors' property: -```TSX +```jsx const customThemeColors: IThemeColors = { primaryColor: "#0078d4", textColor: "#323130", @@ -38,7 +38,7 @@ const customThemeColors: IThemeColors = { - Example on use the `VariantThemeProvider` control with the 'Strong' variant on theme passed with the from the 'theme' property: -```TSX +```jsx @@ -53,7 +53,7 @@ The `VariantThemeProvider` control can be configured with the following properti | Property | Type | Required | Description | | ---- | ---- | ---- | ---- | | as | React.ElementType | no | A component that should be used as the root element of the ThemeProvider component. | -| ref | React.Ref | no | Optional ref to the root element. | +| ref | React.Ref<HTMLElement> | no | Optional ref to the root element. | | theme | PartialTheme \| Theme | no | Defines the theme provided by the user. | | renderer | StyleRenderer | no | Optional interface for registering dynamic styles. Defaults to using `merge-styles`. Use this to opt into a particular rendering implementation, such as `emotion`, `styled-components`, or `jss`. Note: performance will differ between all renders. Please measure your scenarios before using an alternative implementation. | | applyTo | element \| body \| none | no | Defines where body-related theme is applied to. Setting to 'element' will apply body styles to the root element of this control. Setting to 'body' will apply body styles to document body. Setting to 'none' will not apply body styles to either element or body. | @@ -62,19 +62,19 @@ The `VariantThemeProvider` control can be configured with the following properti Interface `IThemeColors` -| Property | Type | Required | Description | -| ---- | ---- | ---- | ---- | -| primaryColor | string | yes | Primary Color of the theme. | -| textColor | string | yes | Text Color of the theme. | -| backgroundColor | string | yes | Background Color of the theme. | +| Property | Type | Required | Description | +| --------------- | ------ | -------- | ------------------------------ | +| primaryColor | string | yes | Primary Color of the theme. | +| textColor | string | yes | Text Color of the theme. | +| backgroundColor | string | yes | Background Color of the theme. | Enum `VariantType` -| Type | Description | -| ---- | ---- | -| None | Apply the theme without variations. | +| Type | Description | +| ------- | ------------------------------------------- | +| None | Apply the theme without variations. | | Neutral | Apply the 'Neutral' variation to the theme. | -| Soft | Apply the 'Soft' variation to the theme. | -| Strong | Apply the 'Strong' variation to the theme. | +| Soft | Apply the 'Soft' variation to the theme. | +| Strong | Apply the 'Strong' variation to the theme. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/VariantThemeProvider) diff --git a/docs/documentation/docs/controls/ViewPicker.md b/docs/documentation/docs/controls/ViewPicker.md index 642d020c2..f06054a8a 100644 --- a/docs/documentation/docs/controls/ViewPicker.md +++ b/docs/documentation/docs/controls/ViewPicker.md @@ -12,15 +12,13 @@ Here is an example of the control: `ViewPicker` multi selection mode: -![ViewPicker multi selection](../assets/ViewPicker-multi.png) - +![ViewPicker multi selection](../assets/ViewPicker-multi.png) ## How to use this control in your solutions - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. - Import the control into your component: - ```TypeScript import { ViewPicker } from "@pnp/spfx-controls-react/lib/ViewPicker"; ``` @@ -44,7 +42,6 @@ import { ViewPicker } from "@pnp/spfx-controls-react/lib/ViewPicker"; } ``` - ## Implementation The `ViewPicker` control can be configured with the following properties @@ -54,7 +51,7 @@ The `ViewPicker` control can be configured with the following properties | context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. | | className | string | no | If provided, additional class name to provide on the dropdown element. | | disabled | boolean | no | Whether or not the view picker control is disabled. | -| filter | string | no | Filter views from Odata query. | +| filter | string | no | Filter views from OData query. | | label | string | no | Label to use for the control. | | listId | string | no | The List Id of the list. | | placeholder | string | no | Placeholder label to show in the dropdown. | @@ -63,12 +60,12 @@ The `ViewPicker` control can be configured with the following properties | multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default to `false`. | | showBlankOption | boolean | no | Whether or not to show a blank option. Default to `false`. | | viewsToExclude | string[] | no | Defines view titles which should be excluded from the view picker control. | -| webAbsoulteUrl | string | no | Absolute Web Url of target site (user requires permissions) | +| webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions) | | onSelectionChanged | (newValue: string OR string[]): void | no | Callback function when the selected option changes. | Enum `orderBy` | Value | -| ---- | -| Id | +| ----- | +| Id | | Title | diff --git a/docs/documentation/docs/controls/WebPartTitle.md b/docs/documentation/docs/controls/WebPartTitle.md index 102918e79..41d979c4d 100644 --- a/docs/documentation/docs/controls/WebPartTitle.md +++ b/docs/documentation/docs/controls/WebPartTitle.md @@ -93,7 +93,7 @@ The WebPartTitle control can be configured with the following properties: | updateProperty | Function | yes | Function that you can pass to update the title in the root web part. | | className | string | no | Optional property to specify a custom class that allows you to change the web part title style. | | placeholder | string | no | Optional property to specify a custom placeholder to display when the title is editable. | -| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). | +| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). | | moreLink | Function \| JSX.Element | no | Optional property to render a _See all_ link in the web part title. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/WebPartTitle) diff --git a/docs/documentation/docs/controls/charts/BubbleChart.md b/docs/documentation/docs/controls/charts/BubbleChart.md index 0c5c3f10b..e67cc44e3 100644 --- a/docs/documentation/docs/controls/charts/BubbleChart.md +++ b/docs/documentation/docs/controls/charts/BubbleChart.md @@ -1,6 +1,6 @@ # ChartControl - Bubble Chart -Bubble chart show elements across three dimensions. Each bubble in the chart is located according to the first two dimensions. The size of each bubble represents the thid dimension. +Bubble chart show elements across three dimensions. Each bubble in the chart is located according to the first two dimensions. The size of each bubble represents the third dimension. ![Default Bubble Chart](../../assets/BubbleChart.png) diff --git a/docs/documentation/docs/controls/charts/DoughnutChart.md b/docs/documentation/docs/controls/charts/DoughnutChart.md index d77271b02..e36e76a55 100644 --- a/docs/documentation/docs/controls/charts/DoughnutChart.md +++ b/docs/documentation/docs/controls/charts/DoughnutChart.md @@ -68,15 +68,15 @@ Doughnut 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 @@ -93,7 +93,7 @@ The following configuration options are specific to doughnut 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 doughtnut segments start | +| rotation | number | -0.5 * Math.PI | The angle at which the doughnut 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. | diff --git a/docs/documentation/docs/controls/charts/LineChart.md b/docs/documentation/docs/controls/charts/LineChart.md index e8c074527..2bb2eb18a 100644 --- a/docs/documentation/docs/controls/charts/LineChart.md +++ b/docs/documentation/docs/controls/charts/LineChart.md @@ -245,7 +245,7 @@ const options: Chart.ChartOptions = { }; ``` -In order to render each dataset with a different color, make sure to specify the `backgroundColor` and `borderColor` settings for each dataset. +In order to render each dataset with a different color, make sure to specify the `backgroundColor` and `borderColor` settings for each dataset. For example, to render the above chart, use the following code: @@ -378,16 +378,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 | 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 ( ![Half-Moon Pie Chart](../../assets/PieChartHalfMoon.png) -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). ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/charts/PieChart) 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 | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldAttachmentsRenderer) 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. ![FieldDateRenderer control output](../../assets/FieldDateRenderer.png) ## 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 | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldDateRenderer) - 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 ![FieldFileTypeRenderer control output](../../assets/FieldFileTypeRenderer.png) ## 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 | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldFileTypeRenderer) - 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 ![FieldLookupRenderer dialog](../../assets/FieldLookupRendererDialog.png) ## 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 | | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldLookupRenderer) - 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 ![FieldNameRenderer control output](../../assets/FieldNameRenderer.png) ## 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` | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldNameRenderer) - 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 ``` Parameters: -| Parameter | Type | Description | -| ---- | ---- | ---- | -| fieldValue | any | Value of the field. | -| props | IFieldRendererProps | Basic properties interface for Field Controls. Contains `className` and `cssProps` properties | -| listItem | ListItemAccessor | Current List Item | -| context | IContext | SPFx Context | +| Parameter | Type | Description | +| ---------- | ------------------- | --------------------------------------------------------------------------------------------- | +| fieldValue | any | Value of the field. | +| props | IFieldRendererProps | Basic properties interface for Field Controls. Contains `className` and `cssProps` properties | +| listItem | ListItemAccessor | Current List Item | +| context | IContext | SPFx Context | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldRendererHelper) diff --git a/docs/documentation/docs/controls/fields/FieldTaxonomyRenderer.md b/docs/documentation/docs/controls/fields/FieldTaxonomyRenderer.md index c5dc403b0..8a28ee9da 100644 --- a/docs/documentation/docs/controls/fields/FieldTaxonomyRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldTaxonomyRenderer.md @@ -5,6 +5,7 @@ This control renders terms from Managed Metadata field. ![FieldTaxonomyRenderer control output](../../assets/FieldTaxonomyRenderer.png) ## Covered Fields + - Managed Metadata ## How to use this control in your solutions @@ -26,11 +27,10 @@ import { FieldTaxonomyRenderer } from "@pnp/spfx-controls-react/lib/FieldTaxonom The FieldTaxonomyRenderer 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. | -| terms | ITerm[] | yes | Managed Metadata terms. | +| 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. | +| terms | ITerm[] | yes | Managed Metadata terms. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldTaxonomyRenderer) - diff --git a/docs/documentation/docs/controls/fields/FieldTextRenderer.md b/docs/documentation/docs/controls/fields/FieldTextRenderer.md index 5af273bce..118d998dc 100644 --- a/docs/documentation/docs/controls/fields/FieldTextRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldTextRenderer.md @@ -5,6 +5,7 @@ This control renders simple text. ![FieldTextRenderer control output](../../assets/FieldTextRenderer.png) ## Covered Fields + - Single line of text - Multiple lines of text - Choice @@ -32,11 +33,10 @@ import { FieldTextRenderer } from "@pnp/spfx-controls-react/lib/FieldTextRendere The FieldTextRenderer 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 | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldTextRenderer) - diff --git a/docs/documentation/docs/controls/fields/FieldTitleRenderer.md b/docs/documentation/docs/controls/fields/FieldTitleRenderer.md index 1da473cef..c3dca3785 100644 --- a/docs/documentation/docs/controls/fields/FieldTitleRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldTitleRenderer.md @@ -5,6 +5,7 @@ This control renders title either as a simple text or as a link to the Display F ![FieldTitleRenderer control output](../../assets/FieldTitleRenderer.png) ## Covered Fields + - List Item Title (Title, LinkTitle, LinkTitleNoMenu) ## How to use this control in your solutions @@ -26,17 +27,15 @@ import { FieldTitleRenderer } from "@pnp/spfx-controls-react/lib/FieldTitleRende The FieldTitleRenderer 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. | -| isLink | boolean | yes | True if the name should be rendered as a link. | -| baseUrl | string | no | Web Url. Should be provided if `onClick` is not defined | -| listId | string | no | List Id. Should be provided if `onClick` is not defined | -| id | number | no | Item Id. Should be provided if `onClick` is not defined | -| onClick | (args: ITitleClickEventArgs) => {} | no | Custom title click event handler. If not set Display form for the item will be displayed. | - +| 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. | +| isLink | boolean | yes | True if the name should be rendered as a link. | +| baseUrl | string | no | Web Url. Should be provided if `onClick` is not defined | +| listId | string | no | List Id. Should be provided if `onClick` is not defined | +| id | number | no | Item Id. Should be provided if `onClick` is not defined | +| onClick | (args: ITitleClickEventArgs) => {} | no | Custom title click event handler. If not set Display form for the item will be displayed. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldTitleRenderer) - diff --git a/docs/documentation/docs/controls/fields/FieldUrlRenderer.md b/docs/documentation/docs/controls/fields/FieldUrlRenderer.md index 6b931ad5a..7a28b0cba 100644 --- a/docs/documentation/docs/controls/fields/FieldUrlRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldUrlRenderer.md @@ -6,6 +6,7 @@ This control renders Hyperlink or Picture field value as a link or image. ![FieldUrlRenderer Image control output](../../assets/FieldUrlRendererImage.png) ## Covered Fields + - Hyperlink or Image - Url in Links List @@ -32,13 +33,12 @@ import { FieldUrlRenderer } from "@pnp/spfx-controls-react/lib/FieldUrlRenderer" The FieldUrlRenderer 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. | -| url | string | yes | Url. | -| isImageUrl | boolean | no | True if the control should be rendered as an image. | +| 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. | +| url | string | yes | Url. | +| isImageUrl | boolean | no | True if the control should be rendered as an image. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldUrlRenderer) - diff --git a/docs/documentation/docs/controls/fields/FieldUserRenderer.md b/docs/documentation/docs/controls/fields/FieldUserRenderer.md index ec865a6bc..0b9ec0912 100644 --- a/docs/documentation/docs/controls/fields/FieldUserRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldUserRenderer.md @@ -8,6 +8,7 @@ This control renders each referenced user/group as a link on a separate line. Ho **Note:** some icons may be rendered incorrectly if used with SharePoint Framework v1.3 or earlier ## Covered Fields + - Person or Group ## How to use this control in your solutions @@ -29,12 +30,11 @@ import { FieldUserRenderer } from "@pnp/spfx-controls-react/lib/FieldUserRendere The FieldUserRenderer 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. | -| users | IPrincipal | no | Users/groups to be displayed as they appear in `event.fieldValue` for Field Customizer's `onRenderCell` event. | -| context | IContext | yes | SPFx context. | +| 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. | +| users | IPrincipal | no | Users/groups to be displayed as they appear in `event.fieldValue` for Field Customizer's `onRenderCell` event. | +| context | IContext | yes | SPFx context. | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldUserRenderer) - diff --git a/docs/documentation/docs/controls/fields/main.md b/docs/documentation/docs/controls/fields/main.md index de2c79945..3970bb7cc 100644 --- a/docs/documentation/docs/controls/fields/main.md +++ b/docs/documentation/docs/controls/fields/main.md @@ -1,14 +1,17 @@ # Field Customizer Out-of-the-box Fields Controls These controls represent React controls that can be used in SPFx Field Customizers to provide rendering of the fields similar to out of the box experience. Additional benefit is ability to set custom css classes and styles to the component. -Related UserVoice requests:
+Related UserVoice requests: + [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`) based on field's type. It means that it will automatically select proper component that should be rendered in this or that field. This method also contains logic to correctly process field's value and get correct text to display (for example, Friendly Text for DateTime fields). As the method returns `Promise` it should be called in one of React component lifecycle methods, for example, `componentWillMount` that will occur before `render`. The resulting field renderer could be saved in the element's state and used later in `render` method. Here is an example on how it can be used inside custom Field Customizer component (.tsx file): + ```TypeScript export interface IOotbFieldsState { fieldRenderer?: JSX.Element; @@ -40,9 +43,11 @@ public render(): React.ReactElement<{}> { Additionally, any of included components can be used by itself. ## FieldRendererHelper + [FieldRendererHelper](./FieldRendererHelper.md) class is a **recommended** way to use Field Controls as it provides additional functionality to automatically render the content for any type of fields. ## Available Controls + The following Field Controls are currently available: - [FieldAttachmentsRenderer](./FieldAttachmentsRenderer.md) (renders Clip icon based on the provided `count` property is defined and greater than 0) diff --git a/docs/documentation/docs/guides/migrate-from-v1.md b/docs/documentation/docs/guides/migrate-from-v1.md index 6425930c8..966687b95 100644 --- a/docs/documentation/docs/guides/migrate-from-v1.md +++ b/docs/documentation/docs/guides/migrate-from-v1.md @@ -70,19 +70,23 @@ The easiest way to upgrade the SharePoint Framework solution is to use [Office36 ``` - `showRequiredError` has been deleted. - - Use `errorMessage` or `onGetErrorMessage` to provide the error message. + - Use `errorMessage` or `onGetErrorMessage` to provide the error message. - `selectedItems` is renamed to `onChange` - - `onChange` better describes the purpose of the property. - - ### FolderPicker - `FolderPicker` default picker has been removed. - If you used `FolderPicker` as: - ```typescript - import FolderPicker from '@pnp/spfx-controls-react/lib/controls/folderPicker/FolderPicker'; - ``` - You should update to - ```typescript - import { FolderPicker } from '@pnp/spfx-controls-react/lib/FolderPicker'; - ``` + - `onChange` better describes the purpose of the property. + +### FolderPicker + +`FolderPicker` default picker has been removed. +If you used `FolderPicker` as: + +```typescript +import FolderPicker from '@pnp/spfx-controls-react/lib/controls/folderPicker/FolderPicker'; +``` + +You should update to: + +```typescript +import { FolderPicker } from '@pnp/spfx-controls-react/lib/FolderPicker'; +``` ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides/MigrateFromV1) diff --git a/docs/documentation/docs/guides/mpa.md b/docs/documentation/docs/guides/mpa.md index fed1dc2c1..ccf8bfb0e 100644 --- a/docs/documentation/docs/guides/mpa.md +++ b/docs/documentation/docs/guides/mpa.md @@ -70,4 +70,6 @@ Once you have MkDocs installed on your machine, in the command line: - run `cd ./docs/documentation` to change directory to where the manual pages are stored - run `mkdocs serve` to start the local web server with MkDocs and view the documentation in the web browser +For documentation update, we suggest you to use IDE extensions to help you for the writing process. For example, if you're using VS Code, you can install [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) for words spelling and [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) or [learn-markdown](https://marketplace.visualstudio.com/items?itemName=docsmsft.docs-markdown) for Markdown syntax. + ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides/mpa) diff --git a/docs/documentation/docs/guides/submitting-pr.md b/docs/documentation/docs/guides/submitting-pr.md index ea9756947..543a4d040 100644 --- a/docs/documentation/docs/guides/submitting-pr.md +++ b/docs/documentation/docs/guides/submitting-pr.md @@ -2,7 +2,7 @@ We appreciate your initiative and would love to integrate your work with the rest of the project! Here is how you can help us do it as quickly as possible. -- check, that your feature branch is up-to-date. If it's not, there is a risk of merge conflicts or other issues that will complicate merging your changes into the main repository. Refer to these resources for more information on syncing your repo: +- Check, that your feature branch is up-to-date. If it's not, there is a risk of merge conflicts or other issues that will complicate merging your changes into the main repository. Refer to these resources for more information on syncing your repo: - [GitHub Help: Syncing a Fork](https://help.github.com/articles/syncing-a-fork/) - [AC: Keep Your Forked Git Repo Updated with Changes from the Original Upstream Repo](http://www.andrewconnell.com/blog/keep-your-forked-git-repo-updated-with-changes-from-the-original-upstream-repo) - Looking for a quick cheat sheet? Look no further: @@ -24,9 +24,9 @@ git checkout issue-xyz git rebase dev ``` -- submit PR to the **dev** branch of the main repo. PRs submitted to other branches will be declined -- let us know what's in the PR: is it a new command, bug fix or a minor update in the docs? The clearer the information you provide, the quicker your PR can be verified and merged -- ideally 1 PR = 1 commit - this makes it easier to keep the log clear for everyone and track what's changed. If you're new to working with git, we'll squash your commits for you when merging your changes into the main repo -- don't worry about changing the version or adding yourself to the list of contributors in `package.json`. We'll do that for you when merging your changes. +- Submit PR to the **dev** branch of the main repo. PRs submitted to other branches will be declined +- Let us know what's in the PR: is it a new command, bug fix or a minor update in the docs? The clearer the information you provide, the quicker your PR can be verified and merged +- Ideally 1 PR = 1 commit - this makes it easier to keep the log clear for everyone and track what's changed. If you're new to working with git, we'll squash your commits for you when merging your changes into the main repo +- Don't worry about changing the version or adding yourself to the list of contributors in `package.json`. We'll do that for you when merging your changes. ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/guides/SubmittingPR) diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md index e2c68cba4..12c74deb0 100644 --- a/docs/documentation/docs/index.md +++ b/docs/documentation/docs/index.md @@ -1,13 +1,16 @@ -# Reusable React controls for your SharePoint Framework solutions ![](https://img.shields.io/npm/v/@pnp/spfx-controls-react.svg) +# Reusable React controls for your SharePoint Framework solutions + +![](https://img.shields.io/npm/v/@pnp/spfx-controls-react.svg) This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions. The project provides controls for building web parts and extensions. ![Placeholder example](./assets/placeholder-intro.png) !!! attention - In order to migrate to `v3` it is adviced to follow this guide: [Migrating from V1](./guides/migrate-from-v1). + In order to migrate to `v3` it is advised to follow this guide: [Migrating from V1](./guides/migrate-from-v1). ## Library Versions + Currently there are 3 active versions of the controls. Please, reference the table below to see what version to use in your project. | Version | SPFx minimal dependency | Fluent UI (Office UI Fabric React) version | SharePoint Version | Comments | @@ -44,7 +47,7 @@ Once the package is installed, you will have to configure the resource file of t ## Telemetry -All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured. +All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured. > More information about the service that we are using for this can be found here: [PnP Telemetry Proxy](https://github.com/pnp/telemetry-proxy-node). @@ -61,32 +64,34 @@ telemetry.optOut(); The following controls are currently available: -- [AccessibleAccordion](./controls/AccessibleAccordion) (Control to render an accordion. React `AccessibleAccordion`-based implementation) -- [Accordion](./controls/Accordion) (Control to render an accordion) -- [AdaptiveCardHost](./controls/AdaptiveCardHost.md) (Control to render Adaptive Cards) -- [AdaptiveCardDesignerHost](./controls/AdaptiveCardDesignerHost.md) (Control to render Adaptive Cards Designer) -- [AnimatedDialog](./controls/AnimatedDialog) (Animated dialog control) -- [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options) +- [AccessibleAccordion](./controls/AccessibleAccordion) (renders an accordion. React `AccessibleAccordion`-based implementation) +- [Accordion](./controls/Accordion) (renders an accordion) +- [AdaptiveCardHost](./controls/AdaptiveCardHost.md) (renders Adaptive Cards) +- [AdaptiveCardDesignerHost](./controls/AdaptiveCardDesignerHost.md) (renders Adaptive Cards Designer) +- [AnimatedDialog](./controls/AnimatedDialog) (animated dialog control) +- [Carousel](./controls/Carousel) (displays children elements with 'previous/next element' options) - [Charts](./controls/ChartControl) (makes it easy to integrate [Chart.js](https://www.chartjs.org/) charts into web part) - [ComboBoxListItemPicker](./controls/ComboBoxListItemPicker) (allows to select one or more items from a list) -- [ContentTypePicker](./controls/ContentTypePicker) (Control to pick a content type) -- [Dashboard](./controls/Dashboard) (Control to render dashboard in Microsoft Teams) +- [ContentTypePicker](./controls/ContentTypePicker) (control to pick a content type) +- [Dashboard](./controls/Dashboard) (renders dashboard in Microsoft Teams) - [DateTimePicker](./controls/DateTimePicker) (DateTime Picker) -- [DragDropFiles](./controls/DragDropFiles) (Allow drag and drop of files in selected areas) +- [DragDropFiles](./controls/DragDropFiles) (allows drag and drop of files in selected areas) - [DynamicForm](./controls/DynamicForm) (Dynamic Form component) -- [EnhancedThemeProvider](./controls/EnhancedThemeProvider) (Enhanced version of Fluent UI Theme Provider control used to improve support for themes and fonts when creating Tab or Personal App in SPFx for Teams or creating Isolated Web Parts) -- [FieldCollectionData](./controls/FieldCollectionData) (control gives you the ability to insert a list / collection data which can be used in your web part / application customizer) +- [EnhancedThemeProvider](./controls/EnhancedThemeProvider) (enhanced version of Fluent UI Theme Provider control used to improve support for themes and fonts when creating Tab or Personal App in SPFx for Teams or creating Isolated Web Parts) +- [FieldCollectionData](./controls/FieldCollectionData) (gives the ability to insert a list / collection data which can be used in your web part / application customizer) - [FieldPicker](./controls/FieldPicker) (control to pick one or multiple fields from a list or a site) - [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places) -- [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application) -- [FolderExplorer](./controls/FolderExplorer) (Control that allows to browse the folders and sub-folders from a root folder) -- [FolderPicker](./controls/FolderPicker) (Control that allows to browse and select a folder) +- [FileTypeIcon](./controls/FileTypeIcon) (shows the icon of a specified file path or application) +- [FolderExplorer](./controls/FolderExplorer) (control that allows to browse the folders and sub-folders from a root folder) +- [FolderPicker](./controls/FolderPicker) (control that allows to browse and select a folder) - [GridLayout](./controls/GridLayout) (control that renders a responsive grid layout for your web parts) -- [HoverReactionsBar](./controls/HoverReactionsBar) (control that allows you to select an emoji from emoji bar or select from picker) +- [HoverReactionsBar](./controls/HoverReactionsBar) (control that allows to select an emoji from emoji bar or select from picker) - [IconPicker](./controls/IconPicker) (control that allows to search and select an icon from office-ui-fabric icons) - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content) - [IFramePanel](./controls/IFramePanel) (renders a Panel with an iframe as a content) -- [ListItemComments](./controls/ListItemComments) (controls that allows to manage list item comments similarly to out-of-the box experience) +- [ImagePicker](./controls/ImagePicker) (control that allows to search and select or upload image from SharePoint, OneDrive or Stock Images) +- [ListItemAttachments](./controls/ListItemAttachments) (manages list item attachments) +- [ListItemComments](./controls/ListItemComments) (manages list item comments similarly to out-of-the box experience) - [ListItemPicker](./controls/ListItemPicker) (allows to select one or more items from a list) - [ListPicker](./controls/ListPicker) (allows to select one or multiple available lists/libraries of the current site) - [ListView](./controls/ListView) (List view control) @@ -97,10 +102,12 @@ The following controls are currently available: - [ModernTaxonomyPicker](./controls/ModernTaxonomyPicker) (Modern Taxonomy Picker) - [MonacoEditor](./controls/MonacoEditor) (Monaco Editor) - [MyTeams](./controls/MyTeams) (My Teams) +- [Pagination](./controls/Pagination) (renders a Pagination component which can be used to show limited information of data) - [PeoplePicker](./controls/PeoplePicker) (People Picker) - [Placeholder](./controls/Placeholder) (shows an initial placeholder if the web part has to be configured) - [Progress](./controls/Progress) (shows progress of multiple SEQUENTIALLY executed actions) -- [ProgressStepsIndicator.md](./controls/ProgressStepsIndicator) (shows a progress of steps) +- [ProgressStepsIndicator](./controls/ProgressStepsIndicator) (shows a progress of steps) +- [RichText](./controls/RichText) (provides rich text editing and display capability) - [SecurityTrimmedControl](./controls/SecurityTrimmedControl) (intended to be used when you want to show or hide components based on the user permissions) - [ShareDialog](./controls/ShareDialog) (Share Dialog control) - [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control) @@ -108,15 +115,14 @@ The following controls are currently available: - [TaxonomyPicker](./controls/TaxonomyPicker) (Taxonomy Picker) - [TeamChannelPicker](./controls/TeamChannelPicker) (Team Channel Picker) - [TeamPicker](./controls/TeamPicker) (Team Picker) -- [TermSetNavigation](./controls/TermSetNavigation) (Team Picker) -- [Toolbar](./controls/Toolbar) (Control to render Toolbar in Microsoft Teams) +- [TermSetNavigation](./controls/TermSetNavigation) (control for navigating and selecting a Term from a TermSet) +- [Toolbar](./controls/Toolbar) (renders Toolbar in Microsoft Teams) - [TreeView](./controls/TreeView) (Tree View) - [UploadFiles](./controls/UploadFiles) (Upload Files) - [VariantThemeProvider](./controls/VariantThemeProvider) (Variant Theme Provider) - [ViewPicker](./controls/ViewPicker.md) (View Picker Control) - [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control) - Field customizer controls: !!! note diff --git a/src/controls/listPicker/IListPicker.ts b/src/controls/listPicker/IListPicker.ts index 068c246b5..7915cbe9e 100644 --- a/src/controls/listPicker/IListPicker.ts +++ b/src/controls/listPicker/IListPicker.ts @@ -26,7 +26,7 @@ export interface IListPickerProps { */ includeHidden?: boolean; /** - * Filter list from OData query (takes precendents over Hidden and BaseTemplate Filters) + * Filter list from OData query (takes precedence over `includeHidden` and `baseTemplate` filters) */ filter?: string; /**