Skip to content

Commit 05d6045

Browse files
estruyfestruyf
authored
Merge pull request pnp#80 from SharePoint/dev
Merge for v1.4.0 release
2 parents 234f653 + 3b6a60b commit 05d6045

27 files changed

+481
-17
lines changed

‎CHANGELOG.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
# Releases
22

3+
## 1.4.0
4+
5+
**New Controls**
6+
7+
- `SecurityTrimmedControl` control got added [#74](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/74)
8+
9+
**Enhancements**
10+
11+
- Allow the `TaxonomyPicker` to also be used in Application Customizer [#77](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/77)
12+
- Add `npm postinstall` script to automatically add the locale config [#78](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/78)
13+
14+
**Fixes**
15+
16+
- Icon not showing up in the `Placeholder` control [#76](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/76)
17+
318
## 1.3.0
419

520
**New Controls**

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
# Releases
22

3+
## 1.4.0
4+
5+
**New Controls**
6+
7+
- `SecurityTrimmedControl` control got added [#74](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/74)
8+
9+
**Enhancements**
10+
11+
- Allow the `TaxonomyPicker` to also be used in Application Customizer [#77](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/77)
12+
- Add `npm postinstall` script to automatically add the locale config [#78](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/78)
13+
14+
**Fixes**
15+
16+
- Icon not showing up in the `Placeholder` control [#76](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/76)
17+
318
## 1.3.0
419

520
**New Controls**

‎docs/documentation/docs/assets/ListPicker-initial.png

20.9 KB
Loading

‎docs/documentation/docs/assets/ListPicker-multi.png

39.9 KB
Loading

‎docs/documentation/docs/assets/ListPicker-single.png

42.2 KB
Loading

‎docs/documentation/docs/assets/TermPicker-selection.png renamed to ‎docs/documentation/docs/assets/termPicker-tree-selection.png

File renamed without changes.

‎docs/documentation/docs/assets/TermPicker-autocomplete.png renamed to ‎docs/documentation/docs/assets/termpicker-input-autocomplete.png

File renamed without changes.

‎docs/documentation/docs/controls/ListPicker.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# ListPicker control
2+
3+
This control allows you to select one or multiple available lists/libraries of the current site.
4+
5+
Here is an example of the control:
6+
7+
![ListPicker initial](../assets/ListPicker-initial.png)
8+
9+
`ListPicker` single selection mode:
10+
11+
![ListPicker single selection](../assets/ListPicker-single.png)
12+
13+
`ListPicker` multi-selection mode
14+
15+
![ListPicker multi selection](../assets/ListPicker-multi.png)
16+
17+
## How to use this control in your solutions
18+
19+
- 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.
20+
- Import the control into your component:
21+
22+
```TypeScript
23+
import { ListPicker } from "@pnp/spfx-controls-react/lib/ListPicker";
24+
```
25+
26+
- Use the `ListPicker` control in your code as follows:
27+
28+
```TypeScript
29+
<ListPicker context={this.props.context}
30+
label="Select your list(s)"
31+
placeHolder="Select your list(s)"
32+
baseTemplate={100}
33+
includeHidden={false}
34+
multiSelect={false}
35+
onSelectionChanged={this.onListPickerChange} />
36+
```
37+
38+
- The `onSelectionChanged` change event returns the list(s) and can be implemented as follows:
39+
40+
```TypeScript
41+
private onListPickerChange (lists: string | string[]) {
42+
console.log("Lists:", lists);
43+
}
44+
```
45+
46+
## Implementation
47+
48+
The `ListPicker` control can be configured with the following properties:
49+
50+
| Property | Type | Required | Description |
51+
| ---- | ---- | ---- | ---- |
52+
| context | WebPartContext OR ApplicationCustomizerContext | yes | The context object of the SPFx loaded webpart or customizer. |
53+
| className | string | no | If provided, additional class name to provide on the dropdown element. |
54+
| disabled | boolean | no | Whether or not the control is disabled. |
55+
| baseTemplate | number | no | The SharePoint BaseTemplate ID to filter the list options by. |
56+
| includeHidden | boolean | no | Whether or not to include hidden lists. Default is `true`. |
57+
| orderBy | LibsOrderBy | no | How to order the lists retrieved from SharePoint. |
58+
| selectedList | string OR string[] | no | Keys 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. |
59+
| multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default to `false`. |
60+
| label | string | no | Label to use for the control. |
61+
| placeholder | string | no | Placeholder label to show in the dropdown. |
62+
| onSelectionChanged | (newValue: string OR string[]): void | no | Callback function when the selected option changes. |
63+
64+
Enum `LibsOrderBy`
65+
66+
| Value |
67+
| ---- |
68+
| Id |
69+
| Title |
70+
71+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListPicker)

‎docs/documentation/docs/controls/SecurityTrimmedControl.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# SecurityTrimmedControl
2+
3+
This control is intended to be used when you want to show or hide components based on the user its 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.
4+
5+
## How to use this control in your solutions
6+
7+
- 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.
8+
- Import the following modules to your component:
9+
10+
```TypeScript
11+
import { SecurityTrimmedControl } from "@pnp/spfx-controls-react/lib/SecurityTrimmedControl";
12+
```
13+
14+
- You can use the `SecurityTrimmedControl` as follows in your solutions:
15+
16+
**Checking permissions on the current site**
17+
18+
```jsx
19+
<SecurityTrimmedControl context={this.props.context}
20+
level={PermissionLevel.currentWeb}
21+
permissions={[SPPermission.viewPages]}>
22+
{/* Specify the components to load when user has the required permissions */}
23+
</SecurityTrimmedControl>
24+
```
25+
26+
**Checking permissions on the current list**
27+
28+
```jsx
29+
<SecurityTrimmedControl context={this.props.context}
30+
level={PermissionLevel.currentList}
31+
permissions={[SPPermission.addListItems]}>
32+
{/* Specify the components to load when user has the required permissions */}
33+
</SecurityTrimmedControl>
34+
```
35+
36+
**Checking permissions on remote site**
37+
38+
```jsx
39+
<SecurityTrimmedControl context={this.props.context}
40+
level={PermissionLevel.remoteWeb}
41+
remoteSiteUrl="https://<tenant>.sharepoint.com/sites/<siteName>"
42+
permissions={[SPPermission.viewPages, SPPermission.addListItems]}>
43+
{/* Specify the components to load when user has the required permissions */}
44+
</SecurityTrimmedControl>
45+
```
46+
47+
**Checking permissions on remote list / library**
48+
49+
```jsx
50+
<SecurityTrimmedControl context={this.props.context}
51+
level={PermissionLevel.remoteListOrLib}
52+
remoteSiteUrl="https://<tenant>.sharepoint.com/sites/<siteName>"
53+
relativeLibOrListUrl="/sites/<siteName>/<list-or-library-URL>"
54+
permissions={[SPPermission.addListItems]}>
55+
{/* Specify the components to load when user has the required permissions */}
56+
</SecurityTrimmedControl>
57+
```
58+
59+
## Implementation
60+
61+
The `SecurityTrimmedControl` can be configured with the following properties:
62+
63+
| Property | Type | Required | Description |
64+
| ---- | ---- | ---- | ---- |
65+
| context | WebPartContext or ApplicationCustomizerContext or FieldCustomizerContext or ListViewCommandSetContext | yes | Context of the web part, application customizer, field customizer, or list view command set. |
66+
| permissions | SPPermission[] | yes | The permissions to check for the user. |
67+
| level | PermissionLevel | yes | Specify where to check the user permissions: current site or list / remote site or list. |
68+
| remoteSiteUrl | string | no | The URL of the remote site. Required when you want to check permissions on remote site or list. |
69+
| relativeLibOrListUrl | string | no | The relative URL of the list or library. Required when you want to check permissions on remote list. |
70+
71+
72+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/SecurityTrimmedControl)

‎docs/documentation/docs/controls/TaxonomyPicker.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Taxonomy Picker
22

3-
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.
3+
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.
44

55
!!! note "Disclaimer"
66
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.
@@ -11,15 +11,15 @@ This control Allows you to select one or more Terms from a TermSet via its name
1111

1212
**Selecting terms**
1313

14-
![Selecting terms](../assets/termpicker-selection.png)
14+
![Selecting terms](../assets/termPicker-tree-selection.png)
1515

1616
**Selected terms in picker**
1717

1818
![Selected terms in the input](../assets/termpicker-selected-terms.png)
1919

2020
**Term picker: Auto Complete**
2121

22-
![Selected terms in the input](../assets/termpicker-autocomplete.png)
22+
![Selected terms in the input](../assets/termpicker-input-autocomplete.png)
2323

2424

2525
## How to use this control in your solutions
@@ -36,7 +36,7 @@ import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/Taxon
3636
```TypeScript
3737
<TaxonomyPicker
3838
allowMultipleSelections={true}
39-
TermSetNameOrID="Countries"
39+
termsetNameOrID="Countries"
4040
panelTitle="Select Term"
4141
label="Taxonomy Picker"
4242
context={this.props.context}
@@ -65,7 +65,7 @@ The TaxonomyPicker control can be configured with the following properties:
6565
| context | WebPartContext | yes | Context of the current web part. |
6666
| initialValues | IPickerTerms | no | Defines the selected by default term sets. |
6767
| allowMultipleSelections | boolean | no | Defines if the user can select only one or many term sets. Default value is false. |
68-
| TermSetNameOrID | string | yes | The name or Id of your TermSet that you would like the Taxonomy Picker to chose terms from. |
68+
| termsetNameOrID | string | yes | The name or Id of your TermSet that you would like the Taxonomy Picker to chose terms from. |
6969
| onChange | function | no | captures the event of when the terms in the picker has changed. |
7070
| isTermSetSelectable | boolean | no | Specify if the TermSet itself is selectable in the tree view. |
7171
| anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |

0 commit comments

Comments
 (0)