honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated readme

This commit is contained in:
Hugo Bernier 2020-12-16 23:04:55 -05:00
parent bb704fa637
commit 2eb780cd6d
2 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
samples/react-target-audience/README.md
View File

@ -1,16 +1,26 @@
## Target audience generic component # Target audience generic component
Sample webpart which uses a Generic React Component which enables it to have Target Audience functionality like what was available in classic webparts. ## Summary
Sample web part which uses a Generic React Component which enables it to have Target Audience functionality like what was available in classic web parts.
Targets SharePoint Groups only within the site. Targets SharePoint Groups only within the site.
![audience.gif](./assets/audience.gif) ![audience.gif](./assets/audience.gif)
## Compatibility
## Used SharePoint Framework Version ![SPFx 1.11](https://img.shields.io/badge/spfx-1.11.0-green.svg)
![drop](https://img.shields.io/badge/drop-GA-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-red.svg)
![Teams N/A](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg)
![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-yellow.svg)
## Applies to ## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) * [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant) * [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
@ -18,7 +28,7 @@ Targets SharePoint Groups only within the site.
Solution|Author(s) Solution|Author(s)
--------|--------- --------|---------
target-audience-generic-component.sppkg | Rabia Williams([@williamsrabia](https://twitter.com/williamsrabia) , [rabiawilliams.com](https://rabiawilliams.com)) target-audience-generic-component | Rabia Williams([@williamsrabia](https://twitter.com/williamsrabia) , [rabiawilliams.com](https://rabiawilliams.com))
## Version history ## Version history
@ -26,27 +36,37 @@ Version|Date|Comments
-------|----|-------- -------|----|--------
1.0|Jan 28, 2020|Initial release 1.0|Jan 28, 2020|Initial release
### Building the code ## Disclaimer
```bash **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
git clone the repo
npm i ---
npm i -g gulp
gulp ## Minimal Path to Awesome
* Clone this repository
* in the command line run:
* `npm install`
* `gulp serve`
* Define one or more groups to use as an audience
* Add the web part to a page
* In the web part's properties, select the audience you wish to see the web part
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
* Adding audience targeting to web parts using a generic React component
When the web part is configured, the sample content will only appear to users who belong to the targeted audience.
You can use the `TargetAudience` control (located under `src/common/TargetAudience.tsx`) by inserting one or more in your web parts, specifying the `pageContext` and `groupIds` props, and adding the content you wish to show/hide as children elements of the `TargetAudience` control, as follows:
```tsx
<TargetAudience pageContext={this.props.pageContext} groupIds={this.props.groupIds}>
<div>
Your sample content goes here
</div>
</TargetAudience>
``` ```
This package produces the following: <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-target-audience"/>
* lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources
* deploy/* - all resources which should be uploaded to a CDN.
### Build options
gulp clean - TODO
gulp test - TODO
gulp serve - TODO
gulp bundle - TODO
gulp package-solution - TODO
![tracking image](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-target-audience)

2
samples/react-target-audience/src/webparts/sampleTargetedComponent/SampleTargetedComponentWebPart.manifest.json
View File

@ -22,7 +22,7 @@
"officeFabricIconFontName": "Page", "officeFabricIconFontName": "Page",
"properties": { "properties": {
"description": "Sample Targeted Component", "description": "Sample Targeted Component",
"groups" : [{"fullName": "My SharePoint Group Members", "login": "My SharePoint Group Members", "id": "5", "description": "My SharePoint Group Members"}] "groups" : []
} }
}] }]
} }