-
Notifications
You must be signed in to change notification settings - Fork 380
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1262 from pnp/dev
v3.9.0
- Loading branch information
Showing
122 changed files
with
5,739 additions
and
753 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 104 additions & 0 deletions
104
docs/documentation/docs/controls/AdaptiveCardDesignerHost.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| # Adaptive Card Designer Host | ||
|
|
||
| This control allows you to embed the official Adaptive Cards designer inside a React SPFx solution. | ||
|
|
||
| The control consists of 2 components: | ||
|
|
||
| * **AdaptiveCardDesigner**: implements all the logic to embed the designer control as a React component; | ||
| * **AdaptiveCardDesignerHost**: main control to render the designer in a full page Fluent UI panel; | ||
|
|
||
| **Due to the nature in which the original Adaptive Card Designer control was implemented**, it is not possible at this time to adapt it to the current theme applied to the site and especially to localize it to give multilingual support. **The designer, therefore, is only available in the English language**. | ||
|
|
||
| This control shares a lot of code with another control in this library, the "AdaptiveCardHost" control. In this way you have a uniformity of display between the cards created with this designer and those rendered with "AdaptiveCardHost". The same thing goes for the various HostContainer objects, so that you can test the cards with the themes available for "AdaptiveCardHost". | ||
|
|
||
| The Adaptive Cards version supported is 1.5, by using the 'adaptivecards' npm package version 2.10.0. | ||
|
|
||
| All Inputs Elements and Actions of Adaptive Cards have been redefined using Fluent UI React, adding and improving features that are not managed in Microsoft's implementation of the "adaptivecards-fluentui" library (Theme support for example). | ||
|
|
||
| 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. | ||
|
|
||
| For more info please to refear tot he documentation of [AdaptiveCardHost ](http://www.google.com)control | ||
|
|
||
| Here is an example of the control in action inside a Web Part: | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
| * In your component file, import the `AdaptiveCardDesignerHost` control as follows: | ||
| ```Typescript | ||
| import { AdaptiveCardDesignerHost, HostContainer, BindingPreviewMode, Versions } from "@pnp/spfx-controls-react/lib/AdaptiveCardDesignerHost"; | ||
| ``` | ||
|
|
||
| - Example on use the `AdaptiveCardDesignerHost` control with only required properties: | ||
| ```Typescript | ||
| <AdaptiveCardDesignerHost | ||
| headerText="Adaptive Card Designer" | ||
| buttonText="Open the Designer" | ||
| context={props.context} | ||
| onSave={(payload: object) => setCard(payload)} | ||
| /> | ||
| ``` | ||
|
|
||
| - Example on use the `AdaptiveCardDesignerHost` control with all properties: | ||
| ```Typescript | ||
| <AdaptiveCardDesignerHost | ||
| headerText="Adaptive Card Designer" | ||
| buttonText="Open the Designer" | ||
| context={props.context} | ||
| onSave={(payload: object) => setCard(payload)} | ||
| addDefaultAdaptiveCardHostContainer={true} | ||
| bindingPreviewMode={BindingPreviewMode.SampleData} | ||
| theme={props.theme} | ||
| card={card} | ||
| data={data} | ||
| enableDataBindingSupport={true} | ||
| hostConfig={hostConfig} | ||
| hostContainers={[]} | ||
| injectAdaptiveCardHostContextProperty={true} | ||
| newCardPayload={newCard} | ||
| selectedHostContainerControlsTargetVersion={false} | ||
| showCopyToJsonToolbarCommand={true} | ||
| showDataStructureToolbox={true} | ||
| showFluentBreakpointsPicker={true} | ||
| showSampleDataEditorToolbox={true} | ||
| showTargetVersionMismatchWarning={true} | ||
| showVersionPicker={true} | ||
| supportedTargetVersions={[Versions.v1_5]} | ||
| snippets={snippets} | ||
| /> | ||
| ``` | ||
| ## Implementation | ||
|
|
||
| The `AdaptiveCardDesignerHost` control can be configured with the following properties: | ||
|
|
||
| | Property | Type | Required | Description | Default Value | | ||
| | ---- | ---- | ---- | ---- | ---- | | ||
| | context | BaseComponentContext | true | Set the context from SPFx component | - | | ||
| | theme | IPartialTheme or ITheme | false | Set Fluent UI Theme | - | | ||
| | onSave | (payload: object) => void | true | Callback for saving the card | - | | ||
| | card | object | false | Set Adaptive Card payload | - | | ||
| | 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] | | ||
| | 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 | | ||
| | selectedHostContainerControlsTargetVersion | boolean | false | Enable the support for Data Binding | false | | ||
| | showTargetVersionMismatchWarning | boolean | false | Show the target version mismatch warning | true | | ||
| | showVersionPicker | boolean | false | Show the Version Picker | false | | ||
| | showSampleDataEditorToolbox | boolean | false | Show the Sample Data Editor Toolbox | false | | ||
| | showDataStructureToolbox | boolean | false | Show the Data Structure Toolbox | true | | ||
| | showFluentBreakpointsPicker | boolean | false | Show the Fluent UI Breakpoint Picker | true | | ||
| | showCopyToJsonToolbarCommand | boolean | false | Show the copy to json button | false | | ||
| | addDefaultAdaptiveCardHostContainer | boolean | false | Add the default Host Containers to the Picker | true | | ||
| | injectAdaptiveCardHostContextProperty | boolean | false | Inject the SPFx Context Property inside the Adaptive Card data object | true | | ||
| | headerText | boolean | false | Set the Header text for the Adaptive Card Designer | - | | ||
| | buttonText | boolean | false | Set the Button text for open the Adaptive Card Designer | - | | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| # ContentTypePicker control | ||
|
|
||
| This control allows you to select one or multiple available site content types or list content types. | ||
|
|
||
| Here is an example of the control: | ||
|
|
||
|  | ||
|
|
||
| `ContentTypePicker` single selection mode: | ||
|
|
||
|  | ||
|
|
||
| `ContentTypePicker` multi selection mode: | ||
|
|
||
|  | ||
|
|
||
| ## 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 { ContentTypePicker } from "@pnp/spfx-controls-react/lib/ContentTypePicker"; | ||
| ``` | ||
|
|
||
| - Use the `ContentTypePicker` control in your code as follows: | ||
|
|
||
| ```TypeScript | ||
| <ContentTypePicker | ||
| context={this.props.context} | ||
| group="Content Feedback" | ||
| includeHidden={false} | ||
| includeReadOnly={false} | ||
| label="Select your content type" | ||
| multiSelect={false} | ||
| orderBy={ContentTypesOrderBy.Name} | ||
| listId="00000000-0000-0000-0000-000000000000" | ||
| onSelectionChanged={this.onContentTypePickerChanged} | ||
| showBlankOption={true} | ||
| /> | ||
| ``` | ||
|
|
||
| - The `onSelectionChanged` change event returns the content type(s) and can be implemented as follows: | ||
|
|
||
| ```TypeScript | ||
| private onContentTypePickerChanged (contentTypes: ISPContentType | ISPContentType[]) { | ||
| console.log("Content types:", contentTypes); | ||
| } | ||
| ``` | ||
|
|
||
| ## Implementation | ||
|
|
||
| The `ContentTypePicker` control can be configured with the following properties: | ||
|
|
||
| | Property | Type | Required | Description | | ||
| | --- | --- | --- | --- | | ||
| | context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. | | ||
| | listId | string | no | The ID of the list or library you wish to select content type(s) from. When not specified, picker will be populated with site content types.| | ||
| | className | string | no | If provided, additional class name to provide on the dropdown element. | | ||
| disabled | boolean | no | Whether or not the control is disabled. | | ||
| includeHidden | boolean | no | Whether or not to include hidden content types. Default is true. | | ||
| includeReadOnly | boolean | no | Whether or not to include read-only content types. Default is true. | | ||
| group | string | no | Only show content types of a certain group. | | ||
| filter | string | no | Filter content types from OData query (takes the upperhand of `hidden`, `readOnly` and `group` Filters). | | ||
| orderBy | ContentTypesOrderBy | no | How to order the content types. | | ||
| selectedContentTypes | string \| string[] | no | IDs of the selected item(s). If you provide this, you must maintain selection state by observing `onSelectionChanged` events and passing a new value in when changed. | ||
| multiSelect | boolean | no | Indicates if multi-choice selections is allowed. Default is false. | | ||
| label | string | no | The label to display. | | ||
| placeholder | string | no | Input placeholder text. Displayed until option is selected. | | ||
| onSelectionChanged | (newValue: ISPContentType \| ISPContentType[]): void | no | Callback issued when the selected option changes. | | ||
| filterItems | (contentTypes: ISPContentType[]): ISPContentType[] | no | This function is invoked after the filtering has been done. This allows you to add additional custom filtering. | ||
| webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). | | ||
| showBlankOption | boolean | no | Whether or not to show a blank option. Default is false. Works only when `multiSelect` is false. | | ||
|
|
||
| Enum `ContentTypesOrderBy` | ||
|
|
||
| | Value | | ||
| | ---- | | ||
| | Name | | ||
| | Id | | ||
|
|
||
|  |
Oops, something went wrong.