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

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

@ -1,16 +1,26 @@
## Target audience generic component
# Target audience generic component
## 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.
![audience.gif](./assets/audience.gif)
## Compatibility
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
![SPFx 1.11](https://img.shields.io/badge/spfx-1.11.0-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
* [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)
@ -18,7 +28,7 @@ Targets SharePoint Groups only within the site.
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
@ -26,27 +36,37 @@ Version|Date|Comments
-------|----|--------
1.0|Jan 28, 2020|Initial release
### Building the code
## Disclaimer
```bash
git clone the repo
npm i
npm i -g gulp
gulp
**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.**
---
## 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:
* 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)
<img src="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",
"properties": {
"description": "Sample Targeted Component",
"groups" : [{"fullName": "My SharePoint Group Members", "login": "My SharePoint Group Members", "id": "5", "description": "My SharePoint Group Members"}]
"groups" : []
}
}]
}