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

Added samples from sp-starter-kit

This commit is contained in:
Hugo Bernier 2020-07-20 00:55:03 -04:00
parent e3a7c1eda0
commit 017d34bb8f
17 changed files with 1002 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
samples/react-banner/README.md Normal file
View File

@ -0,0 +1,58 @@
# Banner web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/banner.
This web part provides you the ability to add a variable height image banner with a linkable title.
![Banner](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-banner.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Banner** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Banner` webpart can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Overlay image text | bannerText | string | no | The text message or title you want displayed on the banner image |
| Image URL | bannerImage | string | no | The url of the banner image |
| Link URL | bannerLink | string | no | The hyperlink url of the bannerText link |
| Banner height | bannerHeight | number | no | Provides the fixed height of the banner image |
| Enable parallax effect | useParallax | toggle | no | Enable if you want to include parallax effect on vertical scrolling |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
# Screenshots
![Banner](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-banner.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/banner
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-banner" />

55
samples/react-followedsites/README.md Normal file
View File

@ -0,0 +1,55 @@
# Followed Sites webpart
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/followedSites.
This web part provides you the ability to display a list of site administrator defined number of sites that a given user is following, with paging as well as inline filtering of sites by keyword or phrase. Currently the list of followed sites includes classic as well as modern communication sites but does not include group enabled (modern) team sites.
![Followed Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Followed Sites** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Followed Sites` webpart can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Followed Sites | title | string | no | The webpart title, editable inline with the webpart itself |
| Number of followed sites to retrieve | nrOfItems | number | no | The number of sites to show per page, default = 10 |
| Specify the sort order of the retrieved sites | sortOrder | number | no | Preferred site sort order. Default sort order driven by SharePoint, or by site name |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part utilizes the SharePoint Rest API, `/_api/social.following/my/followed(types=4)`, endpoint.
# Screenshots
![Followed Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/followedSites
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-followed-sites" />

78
samples/react-links/README.md Normal file
View File

@ -0,0 +1,78 @@
# Links webpart
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/links.
This web part provides you the ability to add a per instance listing of links with the ability to group sets of links. Links are stored as a collection of links within the web part's properties, removing the need for link storage within SharePoint lists, tenant properties, or other external link storage requirements.
Links and groups are both customizable.
![Links](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-links.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Links** web part.
3. Configure the webpart to update its properties.
## Configurable Properties
The `Links` webpart can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Useful links | title | string | no | The webpart title, editable inline with the webpart itself |
| Group names for the links | groupData | collection | no | Collection of group names for grouping links into sets |
| Link data | collectionData | collection | no | Collection of links |
### groupData Collection Properties
Configurable properties for each collection row within the `groupData` collection:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Title | title | string | yes | The name of a group |
### collectionData Collection Properties
Configurable properties for each collection row within the `collectionData` collection:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Title | title | string | yes | The text / title of the link |
| URL | url | string | yes | The link url |
| UI Fabric icon name | icon | fabricIcon | no | Optional UI Fabric icon name |
| Group name | group | dropdown | no | Optional name of the group to add this link to |
| Target | target | dropdown | no | Optional target for this link, current or new window |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
# Screenshots
![Links](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-links.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/links
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
1.1|June 2018|Updated collection descriptions
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-links" />

98
samples/react-lob-integration/README.md Normal file
View File

@ -0,0 +1,98 @@
# LOB Integration webpart
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/lobIntegration.
This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework.
It leverages two different back-end REST APIs:
- An ApiController built in Microsoft ASP.NET MVC, which is defined in a .NET solution that you can find [here](https://github.com/pnp/sp-starter-kit/blob/master/sample-lob-service/SharePointPnP.LobScenario/SharePointPnP.LobScenario.sln)
- An Azure Function, which is based on the code defined [here](https://github.com/pnp/sp-starter-kit/blob/master/sample-lob-service/LIstNorthwindCustomers)
![LOB Integration](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-lob-integration.png)
The purpose of this web part is to show how you can consume LOB (Line of Business) solutions and on-premises data within SharePoint Framework.
In order to leverage this web part, you will need to configure a couple of applications in Azure Active Directory of your target tenant:
- **SPFx-LOB-WebAPI**: for the .NET web application
- Publish the ASP.NET MVC application on an Azure App Service
- Register the AAD app providing the URL of the above Azure App Service
- Choose a valid App ID Uri for the app
- Configure that App ID Uri in the [LobIntegration.tsx](https://github.com/pnp/sp-starter-kit/blob/master/solution/src/webparts/lobIntegration/components/LobIntegration.tsx#L145) React component
- Update the App manifest of the Azure AD app configuring the **oauth2Permissions** property with a value like the following one:
```json
"oauth2Permissions": [
{
"adminConsentDescription": "Allow the application to read customers through SPFx-LOB-WebAPI on behalf of the signed-in user.",
"adminConsentDisplayName": "Read customers from SPFx-LOB-WebAPI",
"id": "7510eb34-4403-44d5-a745-a62d0895351c",
"isEnabled": true,
"type": "User",
"userConsentDescription": "Allow the application to access SPFx-LOB-WebAPI on your behalf.",
"userConsentDisplayName": "Access SPFx-LOB-WebAPI",
"value": "Customers.Read"
}
],
```
- **SPFx-LOB-Function**: for the Azure Function
- Create an Azure Function and configure it with Azure AD Authentication, registering it in your target AAD tenant
- Register the AAD app providing the URL of the above Azure Function
- Choose a valid App ID Uri for the app
- Configure that App ID Uri in the [LobIntegration.tsx](https://github.com/pnp/sp-starter-kit/blob/master/solution/src/webparts/lobIntegration/components/LobIntegration.tsx#L99) React component
Moreover, in order to make this web part working properly, you need to grant permissions to the SharePoint Service Application Principal to access them. You can do that using the PnP PowerShell command lets (or Office 365 CLI) with the following syntax:
```PowerShell
Connect-PnPOnline "https://[your-tenant].sharepoint.com/"
Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-WebAPI" -Scope "Customers.Read"
Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-Function" -Scope "user_impersonation"
```
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **LobIntegration** web part.
3. Configure the webpart to update its properties.
## Configurable Properties
The `LobIntegration` webpart can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Web API URI | webapiUri | string | yes | The URL of the web API. Should be something like https://[your-app-service].azurewebsites.net/api/customers |
| Function URI | functionUri | string | yes | The URL of the Azure Function. Should be something like https://[your-azure-function].azurewebsites.net/api/ListNorthwindCustomers |
| Service Type | serviceType | choice | yes | Defines the service to use. It can be "ASP.NET REST API" or "Azure Function" |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
# Screenshots
![Links](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-lob-integration.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/lobIntegration
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
1.1|June 2018|Updated collection descriptions
1.2|October 2018|Updated documentation
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-lob-integration" />

52
samples/react-people-directory/README.md Normal file
View File

@ -0,0 +1,52 @@
# People Directory web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/peopleDirectory.
This web part provides you the ability to add a searchable people directory. A people search box and alphabet list are provided to enable both searching by name as well as selecting a specific letter. This web part requires no configuration and utilizes the people search API to surface people results.
![People Directory](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-people-directory.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **People Directory** web part.
3. Configure the webpart to update its properties.
## Configurable Properties
The `People Directory` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Web part title | title | string | no | The web part title, editable inline with the web part itself |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
# Screenshots
![People Directory](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-people-directory.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/peopleDirectory
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-people-directory" />

55
samples/react-personal-calendar/README.md Normal file
View File

@ -0,0 +1,55 @@
# Personal Calendar web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalCalendar.
This web part provides you the ability to add a particular user's personal calendar on a web page. The web part may be configured to automatically refresh, as well as display up to seven days of events and a pre-defined number of events at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
![Personal Calendar](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-calendar.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Personal Calendar** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Personal Calendar` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Upcoming Events | title | string | no | The web part title, editable inline with the web part itself |
| How often to check for new upcoming meetings (in minutes) | refreshInterval | number | no | Default: 5 - the interval in minutes between auto refresh |
| How many days in advance to retrieve meetings for? 0 - today only | daysInAdvance | number | no | Default: 0 (Today only) - the interval in minutes between auto refresh |
| How many meetings to show? 0 - show all retrieved meetings | numMeetings | number | no | Default: 0 (all) - the interval in minutes between auto refresh |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Personal Calendar](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-calendar.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalCalendar
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-calendar" />

54
samples/react-personal-contacts/README.md Normal file
View File

@ -0,0 +1,54 @@
# Personal Contacts web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalContacts.
This web part provides you the ability to add a particular user's personal contacts on a web page. The web part may be configured to display a pre-defined number of contacts at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
![Personal Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-contacts.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Personal Contacts** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Personal Contacts` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Personal contacts | title | string | no | The web part title, editable inline with the web part itself |
| Number of contacts to show | nrOfContacts | number | no | Default: 5 - The number of contacts to show |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Personal Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-contacts.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalContacts
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-contacts" />

53
samples/react-personal-email/README.md Normal file
View File

@ -0,0 +1,53 @@
# Personal Email web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalEmail.
This web part provides you the ability to add a particular user's personal email on a web page. The web part may be configured to display a pre-defined number of emails at a time and includes a link to the user's Outlook to view all email. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
![Personal Email](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-email.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Personal Email** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Personal Email` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Personal e-mail | title | string | no | The web part title, editable inline with the web part itself |
| Number of messages to show | nrOfMessages | number | no | Default: 5 - The number of emails to show |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Personal Email](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-email.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalEmail
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-email" />

52
samples/react-personal-tasks/README.md Normal file
View File

@ -0,0 +1,52 @@
# Personal Tasks web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalTasks.
This web part provides you the ability to add a particular user's personal tasks on a web page. The web part may be configured to show all tasks or to exclude completed tasks. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
![Personal Tasks](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-tasks.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Personal Tasks** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Personal Tasks` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| My Tasks | title | string | no | The web part title, editable inline with the web part itself |
| Show completed tasks | showCompleted | bool | no | Default: false - If true, will show completed tasks as well |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Personal Tasks](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-tasks.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalTasks
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-tasks" />

53
samples/react-recent-contacts/README.md Normal file
View File

@ -0,0 +1,53 @@
# Recent Contacts web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentContacts.
This web part provides you the ability to display list of a particular user's recent contacts on a web page. The web part may be configured to display a pre-defined number of contacts at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
![Recent Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recent-contacts.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Recent Contacts** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Recent Contacts` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Recent contacts | title | string | no | The web part title, editable inline with the web part itself |
| Specify the number of contacts to show | nrOfContacts | number | no | Default: 5 - The number of contacts to show |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Recent Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recent-contacts.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentContacts
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recent-contacts" />

53
samples/react-recently-used-documents/README.md Normal file
View File

@ -0,0 +1,53 @@
# Recently Used Documents web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyUsedDocuments.
This web part provides you the ability to display a list of a particular user's recently used documents on a web page. The web part may be configured to display a pre-defined number of documents at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
![Recently Used Documents](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-used-documents.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Recently Used Documents** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Recently Used Documents` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Recent Documents | title | string | no | The web part title, editable inline with the web part itself |
| Specify the number of documents to show | nrOfItems | number | no | Default: 3 - The number of documents to show |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Recently Used Documents](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-used-documents.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyUsedDocuments
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recently-used-documents" />

52
samples/react-recently-visited-sites/README.md Normal file
View File

@ -0,0 +1,52 @@
# Recently Visited Sites web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyVisitedSites.
This web part provides you the ability to display a list of a particular user's recently visited sites on a web page. The web part will display up to the first 30 (thirty) recently visited sites at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
![Recently Visited Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-visited-sites.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Recently Visited Sites** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Recently Visited Sites` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Recent Sites | title | string | no | The web part title, editable inline with the web part itself |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Recently Visited Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-visited-sites.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyVisitedSites
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recently-visited-sites" />

59
samples/react-site-information/README.md Normal file
View File

@ -0,0 +1,59 @@
# Site Information web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/siteInformation.
This web part provides you the ability to collect and present additional metadata on a web page for group associated team sites. The web part may be configured to display site title, a site contacts powered by a people picker, and a term from the term store, often used to provide classification for the site.
This web part is intended to be used once within a group associated team site to provide additional metadata. This web part provides an extensability framework in which to customize the web part code base to include additional properties and thus site metadata. Additional method demonstrations include the PnP Property Control people picker and the PnP Property Control term picker.
The term store must include the term group name, `PnPTermSets`, which incudes a Term Set, `PnP-Organizations`. Terms should be placed within this term set. The term group, term set, and default terms are added by the Starter Kit provisioning process, in particular set within the `./provisioning/terms.xml` provisioning template.
![Site Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-site-information.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Site Information** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Site Information` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Site Title | siteTitle | string | no | Default: Contoso Portal - the title of the site |
| Site Contact | siteContact | IPropertyFieldGroupOrPerson[] | no | A site contact based on a people picker |
| Site Organization | siteOrganization | IPickerTerms | no | The site's organization, based on a taxonomy termset |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Site Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-site-information.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/siteInformation
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
1.1|June 2018|Link webpart to proper term group and term set
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-site-information" />

56
samples/react-stock-information/README.md Normal file
View File

@ -0,0 +1,56 @@
# Stock Information web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/stockInformation.
This web part provides you the ability to display basic stock information for one publicly traded stock on a web page. The web part may be configured to display a stock based on stock symbol as well as be set to automatically refresh the stock information every 60 (sixty) seconds. The web part depends on a service provided by [Alpha Advantage](https://www.alphavantage.co/). [Learn how to register for your api key](https://github.com/SharePoint/sp-starter-kit/blob/master/documentation/tenant-settings.md#request-a-custom-api-key-to-alpha-vantage).
The api key provided by Alpha Advantage is added as a tenant property by the Starter Kit provisioning process. [Use the -StockAPIKey parameter when deploying the kit](https://github.com/SharePoint/sp-starter-kit/tree/master/provisioning#-stockapikey).
By default, the `Stock Information` web part will use the stock symbol set during the Starter Kit provisioning process when the [-StockSymbol](https://github.com/SharePoint/sp-starter-kit/tree/master/provisioning#-stocksymbol) parameter is provided. The default stock symbol is `MSFT`. The stock symbol may be customized per web part instance.
![Stock Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-stock.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Stock Information** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Stock Information` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Stock Code | stockSymbol | string | no | Default: MSFT - overrides the default stock, MSFT, with a preferred stock symbol |
| Automatic Refresh | autoRefresh | bool | no | Default: false - If true, the web part will auto refresh every 60 seconds |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Stock Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-stock.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/stockInformation
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-stock-information" />

68
samples/react-tiles/README.md Normal file
View File

@ -0,0 +1,68 @@
# Tiles web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/tiles.
This web part provides you the ability to add a per instance listing of tiled links. Tiles are stored as a collection of tiles within the web part's properties, removing the need for link storage within SharePoint lists, tenant properties, or other external link storage requirements.
Icons are from Office UI Fabric.
![Tiles](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-tiles.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Tiles** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Tiles` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Useful Tools | title | string | no | The web part title, editable inline with the web part itself |
| Specify the height of the tiles | tileHeight | number | no | Default: 200, the height in pixels of each tile |
| Tile data | collectionData | collection | no | Collection of tiles |
### collectionData Collection Properties
Configurable properties for each tile row within the `collectionData` collection:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Title | title | string | yes | The text / title of the tile |
| Description | description | string | no | Optional tile description |
| URL | url | string | yes | The tile link url |
| UI Fabric icon name | icon | fabricIcon | no | Optional UI Fabric icon name |
| Target | target | dropdown | no | Optional target for this link, current or new window |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
# Screenshots
![Tiles](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-tiles.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/tiles
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
1.1|June 2018|Update SPFx Property Controls version to 1.7.0 - use Fabric Icon control
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tiles" />

54
samples/react-weather-information/README.md Normal file
View File

@ -0,0 +1,54 @@
# Weather Information web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/weatherInformation.
This web part provides you the ability to display basic weather information for one location on a web page. The web part depends on a service provided by [Yahoo Weather API](https://developer.yahoo.com/weather/).
By default, the `Weather Information` web part will use the location **Seatle** during the Starter Kit provisioning process and can be overriden when the [-WeatherCity](https://github.com/SharePoint/sp-starter-kit/tree/master/provisioning#-weathercity) parameter is provided.
![Weather Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-weather.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Weather** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `Weather Information` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Add a location | location | string | no | Inline editable location for weather request |
| Display temperature as | unit | string | no | The requested temperature unit, Celsius or Fahrenheit |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant.
# Screenshots
![Weather Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-weather.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/weatherInformation
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-weather-information" />

52
samples/react-world-time/README.md Normal file
View File

@ -0,0 +1,52 @@
# World Time web part
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/worldTime.
This web part provides you the ability to display basic clock for a given time zone on a web page. The clock is based on the user's workstation time with an offset from UTC to the selected time zone.
![World Time](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **World Time** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `World Time` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Description | description | string | no | Default: UTC Time - The clock description |
| Time Zone | timeZoneOffset | number | no | Default: 0 - The clock offset where 0 = UTC, -8 = PST (UTC−08:00), etc |
# Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant.
# Screenshots
![World Time](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.png)
# Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/worldTime
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-world-time" />