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

Merge pull request #1005 from SharePoint/hb-docfix 

Fixed sample doc & updated template version badge
This commit is contained in:
Laura Kokkarinen 2019-10-02 10:02:45 +03:00 committed by GitHub
parent 7450d5547c 0316a584a6
commit 0019aa11ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 107 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/README-template.md
View File

@ -8,7 +8,7 @@ Short summary on functionality and used technologies.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
## Applies to

2
samples/js-dynamic-bundling-libraries/README.md
View File

@ -1,4 +1,4 @@
# title of the sample
# Dynamics Bundling & Loading of SPFx Packages
## Summary
This sample illustrates how SPFx functionality and packages can be bundled in multiple '.js' files then be dynamically & asynchronously loaded into the page at execution time, such as with a button click.

6
samples/js-employee-spotlight/README.md
View File

@ -2,12 +2,12 @@
## Summary
Simple Web Part that demonstrates the use of SharePoint Framework for show casing Employee Spotlight. The web part pulls data from a configured list and User Profile service.
The properties pane for this web part has 5 canscading dropdowns.
The properties pane for this web part has 5 cascading dropdowns.
- A drop down list of sites(webs) in the current site collection.
- A drop down list of list titles in the selected site(web).
- 3 drop downs with list of field names from selected list, which includes
* Name(Person or Group Column).
* Splotlight Description (Multiline - Enriched text Column).
* Spotlight Description (Multiline - Enriched text Column).
* Expiry date for Spotlight event (DateTime Column with Date only option).
- The properties pane also has options for following slider effects.
* Background color - A color picker to choose Slider background color
@ -24,7 +24,7 @@ Simple Web Part that demonstrates the use of SharePoint Framework for show casin
> Data is displayed only when hosted in SharePoint. No mock data included at this point for local testing.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
![drop](https://img.shields.io/badge/drop-1.8.0-green.svg)
## Applies to
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)

2
samples/js-modern-calendar/README.md
View File

@ -8,7 +8,7 @@ This is a modern webpart built on the GA version of the [SharePoint Framework](h
![SS3](https://cloud.githubusercontent.com/assets/13068139/23584807/14b88f34-0121-11e7-8c91-56ecff9343e1.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.6.0-green.svg)
## Applies to

10
samples/js-skype-status/README.md
View File

@ -1,16 +1,16 @@
# JavaScript Skype Status WebPart
## Summary
This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the [documentation](https://msdn.microsoft.com/en-us/skype/websdk/docs/generalreference?f=255&MSPPError=-2147217396)
This sample demonstrates how to use the UCWA JS SDK for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the [documentation](https://msdn.microsoft.com/en-us/skype/websdk/docs/generalreference?f=255&MSPPError=-2147217396)
The goal is to demonstrate how you can leverage the SDK and to have the simplest approach, hence the usage of JQuery. No Framework (React, Angular, Knockout...) is used here but you can use that SDK in conjuction with any framwork.
No branding has been applied to keep it simple but you could perfectly leverage Office Ui Fabric to display persona cards.
Allows you to properly display and subscribe to change of users' availibility.
Allows you to properly display and subscribe to change of users' availability.
See the demo:
![demo](./images/demo.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
![drop](https://img.shields.io/badge/drop-1.8.0-green.svg)
## Applies to
@ -42,7 +42,7 @@ Version|Date|Comments
## Minimal Path to Awesome
### Authentication
Because the Skype API's are secured, you first need to register an Azure Active Directory application.
To do that go to `portal.azure.com` and sign in as your tenant adminstrator.
To do that go to `portal.azure.com` and sign in as your tenant administrator.
![azure active directory](./images/1.PNG)
Click on `Azure Active Directory`.
![app registrations](./images/2.PNG)
@ -66,7 +66,7 @@ Start by running `gulp package-solution` and deploy the application to the app c
**At the end select SkypePresence webpart instead**
Don't forget to run `gulp serve --nobrowser` to start the debugging server.
### Addtional page required
### Additional page required
Because Skype needs to silently redirect the user to a page for the authentication flow, you need to create an additional page called `skypepresence` in your site.
You don't need to add anything on that page.

4
samples/knockout-dependent-properties/README.md
View File

@ -1,4 +1,4 @@
# title of the sample
# Sample Web Part implementing dependent properties in Property Pane
## Summary
Sample Web Part illustrating
@ -47,7 +47,7 @@ This project contains Client-Side Web Part built on the SharePoint Framework ill
This Web Part illustrates the following concepts on top of the SharePoint Framework:
- loading Lists and Views data from SharePoint REST API
- creating cust Knockout data bindings
- creating custom Knockout data bindings
- creating custom Knockout components
- styling components to match Fabric UI experience
- creating custom Property Pane fields (custom markup, logic) based on Knockout.js framework

4
samples/react-adaptive-cards-image-gallery/README.md
View File

@ -1,7 +1,7 @@
## Image Gallery Web Part Built with Adaptive Cards
### Summary
This sample demonstrates the capability of using [Adaptive Cards] (https://adaptivecards.io/) with SharePoint Framework. Adaptive cards are great fit for Bot, however they can be effectively used with SPFx to render the content. This web part helps to display the image gallery from SharePoint list.
This sample demonstrates the capability of using [Adaptive Cards](https://adaptivecards.io/) with SharePoint Framework. Adaptive cards are great fit for Bot, however they can be effectively used with SPFx to render the content. This web part helps to display the image gallery from SharePoint list.
![Web part preview][figure1]
@ -60,7 +60,7 @@ Version|Date|Comments
- Clone this repo
- npm i
- gulp serve --nobrowser
- Open workbench on your tennant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
- Search and add web part "Adaptive Cards Image Gallery"
## Features

3
samples/react-aggregated-calendar/README.md
View File

@ -30,7 +30,7 @@ Webpart is developed using below technologies
## Prerequisites
Before you can use this webpart exmaple, you will need atleast one Out of the Box Calendar created.
Before you can use this webpart example, you will need at least one Out of the Box Calendar created.
It is required that the users have view access on the calendar.
@ -44,7 +44,6 @@ react-aggregated-calendar | [Dhaval Shah](https://www.linkedin.com/in/dhavalshah
Version|Date|Comments
-------|----|--------
1.0 |July 16, 2018 | Initial Release
## Disclaimer

9
samples/react-birthdays/README.md
View File

@ -11,20 +11,19 @@ See the local.settings.json for details on the required application variable loc
But you can synchronize the Birthdays list with other applications HR Systems, or other sources
![Brithdays Web Part](./assets/birthdays.gif)
![Birthdays Web Part](./assets/birthdays.gif)
![Brithdays Web Part](./assets/birthdays.png)
![Birthdays Web Part](./assets/birthdays.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
> Update accordingly as needed.
## Prerequisites
@ -38,7 +37,7 @@ userAADGUID| Text| no | required if used Azure Function to get Birthdays from AA
Title| Text| true
email| Text| true
## After create a column Index on column "Brithday" - Important!
## After create a column Index on column "Birthday" - Important!
## Solution

2
samples/react-comparer/README.md
View File

@ -1,4 +1,4 @@
# react-comparer
# React Comparer with File Picker
![The web part in action](./assets/ComparerWebPart.gif)

2
samples/react-directory/README.md
View File

@ -2,7 +2,7 @@
## Summary
Search People from Organization Directory and show live persona card on houver.
Search People from Organization Directory and show live persona card on hover.
##

1
samples/react-file-upload/README.md
View File

@ -13,7 +13,6 @@ The file upload web part allowing users to upload multiple files to a document l
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
> Update accordingly as needed.
## Prerequisites

2
samples/react-functional-component/README.md
View File

@ -8,7 +8,7 @@ This web part is intended to be easier to understand for new developers building
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
## Applies to

2
samples/react-functional-stateful-component/README.md
View File

@ -8,7 +8,7 @@ This web part demonstrates building a React functional component that includes s
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
## Applies to

2
samples/react-graph-feedback-form/README.md
View File

@ -8,7 +8,7 @@ Sample SPFx React web part which allows sending emails using Microsoft Graph.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
## Applies to

6
samples/react-graph-reports/README.md
View File

@ -1,13 +1,13 @@
## react-graph-reports
## Summary
This sample describe a SPFX application which reterive an office 365 usage reports using Microsoft Graph API. This application also use chartjs library to generate graph.
This sample describe a SPFX application which retrieve an office 365 usage reports using Microsoft Graph API. This application also use chartjs library to generate graph.
![Office 365 Usage Reports using Microsoft Graph API](./assets/react-graph-reports.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.8.0-green.svg)
## Applies to
@ -54,7 +54,7 @@ If you have not previously granted the required Microsoft Graph permissions, you
Here are main features for this application
- Material UI Components (Tab)
- Microsoft Graph API to reterive Office 365 Usage reports
- Microsoft Graph API to retrieve Office 365 Usage reports
- ChartJS integrations
- Dependency Injection in SPFX using Service Scope

9
samples/react-image-gallery/README.md
View File

@ -7,19 +7,13 @@ This sample describe a SPFX application which implement an image gallery with ta
![Filterable Image Gallery web part built on the SharePoint Framework using React](./assets/image-gallery.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.6.0-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
> Update accordingly as needed.
## Prerequisites
> Any special pre-requisites?
## Solution
Solution|Author(s)
@ -44,7 +38,6 @@ Version|Date|Comments
- `npm install`
- `gulp serve`
> Include any additional steps as needed.
- Create a Department Term set with associated child terms, for example, HR, Information Services, Sales, Marketing
- Create an Image Library and add some sample images

2
samples/react-image-slider-list-taxonomy-filter/README.md
View File

@ -10,7 +10,7 @@ This webpart display the image in slider based on the filter of Taxonomy from Pr
![preview](./assets/ImageSlider.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.6.0-green.svg)
## Applies to

2
samples/react-list-form/README.md
View File

@ -8,7 +8,7 @@ The web part allows configuring which list to use and if a form for adding a new
![Demo](./assets/React-ListForm-Overview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.7.1-green.svg)
## Applies to

6
samples/react-manage-sitedesigns/README.md
View File

@ -2,7 +2,7 @@
## Summary
This web part allows tenant administrators to manage site designs through a graphical interface.
We can create, edit, delete work whith site scripts associated to a site design, manage permissions and apply site design to one or more sites.
We can create, edit, delete work with site scripts associated to a site design, manage permissions and apply site design to one or more sites.
Only users with Tenant Admin Role are allowed to managed tenant properties.
@ -89,15 +89,13 @@ Only users with Tenant Admin Role are allowed to managed tenant properties.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.8.0-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
> Update accordingly as needed.
## WebPart Properties
Property |Type|Required| comments

4
samples/react-property-bag-editor/README.md
View File

@ -29,7 +29,6 @@ react-property-bag-editor| Russell Gove
Version|Date|Comments
-------|----|--------
1.0|march 19, 2017|Initial release
## Disclaimer
@ -69,6 +68,7 @@ The Site whose properties are to be edited can be passed in via a query paramete
The following script shows how to add such a link to all sites 'Site Settings' page using PNP Powershell. It will add a menu item named 'Edit Site Metadata ' to the Site Settings of each Team Site that links to the PropertBagEdcitor.aspx page on the tenants infrastructure site (this site is named 'cdn' in the example below).
```
$adminSiteUrl="https://tenant-admin.sharepoint.com"
$customActionDescription="CUSTOM_\ ___Navigation__ \__Metadata"
@ -108,8 +108,8 @@ foreach($site in $sites){
Execute-SPOQuery
}
}
```
- PropertyBagDisplay
The propertyBagDisplay webpart can be used by an administrator to view and edit selected properties across sites in the tenant:

4
samples/react-reduxform/README.md
View File

@ -5,11 +5,11 @@ Sample webpart to demonstrate the use of [Redux-Form](https://github.com/erikras
![SPFx redux-form webpart](https://github.com/vipulkelkar/sp-dev-fx-webparts/blob/ReduxFormSample/samples/react-reduxform/assets/ReduxFormWebpart.gif)
![SPFx redux-form webpart](./assets/ReduxFormWebpart.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.4.1-green.svg)
## Applies to

15
samples/react-tenant-properties/README.md
View File

@ -6,30 +6,29 @@ We can create, edit or delete tenant properties.
Only users with Tenant Admin Role are allowed to managed tenant properties.
#### User without Tenant Admin Role got this message
![tenant properties](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/master/samples/react-tenant-properties/assets/TenantProperties5.jpg)
![tenant properties](./assets/TenantProperties5.jpg)
#### List tenant properties
![tenant properties](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/master/samples/react-tenant-properties/assets/TenantProperties1.jpg)
![tenant properties](./assets/TenantProperties1.jpg)
#### Add Tenant property
![tenant properties](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/master/samples/react-tenant-properties/assets/TenantProperties2.jpg)
![tenant properties](./assets/TenantProperties2.jpg)
#### Edit tenant property
![tenant properties](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/master/samples/react-tenant-properties/assets/TenantProperties3.jpg)
![tenant properties](./assets/TenantProperties3.jpg)
#### Delete tenant property
![tenant properties](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/master/samples/react-tenant-properties/assets/TenantProperties4.jpg)
![tenant properties](./assets/TenantProperties4.jpg)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.7.1-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
> Update accordingly as needed.
## WebPart Properties
@ -39,7 +38,7 @@ WebPart Title| Text| no|
## Solution
The Web Part Use MSGraph API and need to SharePoint Administrator appprove de scope "Directory.ReadWrite.All" in SharePoint Admin Center.
The Web Part Use MSGraph API and need to SharePoint Administrator approve de scope "Directory.ReadWrite.All" in SharePoint Admin Center.
Solution|Author(s)
--------|---------

9
samples/react-tinymce/README.md
View File

@ -4,22 +4,21 @@
React TinyMCE is one of the worlds most popular editors for the web.
It has many features out of the box and many more plugins that can be
added when needed. You can create your own plugins if you want, the
editor is powered by the communitiy.
editor is powered by the community.
![picture of the web part in action](./assets/preview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.4.1-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
> Update accordingly as needed.
## Prerequisites
If you are going to use tinymce be aware of it's lincense, and you must
If you are going to use tinymce be aware of it's license, and you must
agree to it.
## Solution
@ -56,7 +55,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Uses an Open Source, community driven Editor.
- Can be extended to accept copy/paste from using Paste Plugin.
- Can be extended to accept images using the manager in the Editor.
- Can write your own Stlyes for all content on your site.
- Can write your own Styles for all content on your site.
- Can style your authoring experience using the skins folder.
- For more features please look at the extensive list of extensions available.

5
samples/react-tree-orgchart/README.md
View File

@ -13,14 +13,13 @@ We can configure in the webpart properties if it show all Organization Chart or
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.7.1-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
> Update accordingly as needed.
## WebPart Properties
@ -42,7 +41,7 @@ Tree Organization WebPart|João Mendes
Version|Date|Comments
-------|----|--------
1.0.0|Fev 25, 2019|Initial release
1.0.0|Feb 25, 2019|Initial release
## Disclaimer
**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.**

2
samples/vue-js-org-chart/README.md
View File

@ -7,7 +7,7 @@ A simple Organisation Chart webpart using Office UI Fabric, VueJS, REST API.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
![drop](https://img.shields.io/badge/version-1.8.1-green.svg)
## Applies to