It's called a **web part** not a **webpart**
This commit is contained in:
parent
846f7c9d52
commit
2aa5345319
|
@ -13,7 +13,7 @@ extensions:
|
||||||
- SharePoint Framework
|
- SharePoint Framework
|
||||||
createdDate: 12/1/2017 12:00:00 AM
|
createdDate: 12/1/2017 12:00:00 AM
|
||||||
---
|
---
|
||||||
# JavaScript Skype Status WebPart
|
# JavaScript Skype Status Web Part
|
||||||
|
|
||||||
## Summary
|
## 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)
|
||||||
|
|
|
@ -17,7 +17,7 @@ extensions:
|
||||||
|
|
||||||
This repo is a react based SPFx web part and extension that allows users to add/modify/delete custom js and css file references using SPFx application customizer extension all modern pages within SP online site. This web part provides an interface to JS and CSS file references so that we don't have to modify code when we need to change references or add new references in the future. As part of security measures, this actions on web part can be only accessed by users who have Manage web permission on site.
|
This repo is a react based SPFx web part and extension that allows users to add/modify/delete custom js and css file references using SPFx application customizer extension all modern pages within SP online site. This web part provides an interface to JS and CSS file references so that we don't have to modify code when we need to change references or add new references in the future. As part of security measures, this actions on web part can be only accessed by users who have Manage web permission on site.
|
||||||
|
|
||||||
WebPart in Action
|
Web Part in Action
|
||||||
|
|
||||||
![Web part in action](assets/webpartinaction.gif?raw=true "web part in action")
|
![Web part in action](assets/webpartinaction.gif?raw=true "web part in action")
|
||||||
|
|
||||||
|
|
|
@ -68,7 +68,7 @@ Version|Date|Comments
|
||||||
- `npm i`
|
- `npm i`
|
||||||
- `gulp serve`
|
- `gulp serve`
|
||||||
- Navigate to the local or hosted version of the SharePoint workbench.(`https://<your_tenant>.sharepoint.com/sites/<your_site>/_layouts/15/workbench.aspx`).
|
- Navigate to the local or hosted version of the SharePoint workbench.(`https://<your_tenant>.sharepoint.com/sites/<your_site>/_layouts/15/workbench.aspx`).
|
||||||
- Add the **React AppSettings Webpart** web part.
|
- Add the **React AppSettings Web part** web part.
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|
|
@ -48,8 +48,8 @@ This is a sample web part that helps user create their avatar and save as profil
|
||||||
|
|
||||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||||
|
|
||||||
* Using react framework in SPFx webpart
|
* Using react framework in SPFx web part
|
||||||
* Calling Graph API my Photo to store the image in SPFx webpart
|
* Calling Graph API my Photo to store the image in SPFx web part
|
||||||
* Usage of Material UI Tab and Dialog
|
* Usage of Material UI Tab and Dialog
|
||||||
* Usage of [avataaars](https://getavataaars.com/)
|
* Usage of [avataaars](https://getavataaars.com/)
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
## Summary
|
## Summary
|
||||||
The Web Part Birthdays shows the upcoming birthdays in the company, the web part reads birthdays from a list located on the tenant's root site with title "Birthdays."
|
The Web Part Birthdays shows the upcoming birthdays in the company, the web part reads birthdays from a list located on the tenant's root site with title "Birthdays."
|
||||||
|
|
||||||
Now is possible to the user select an image for the background in the properties of the webpart.
|
Now is possible to the user select an image for the background in the properties of the web part.
|
||||||
|
|
||||||
|
|
||||||
There is an Azure function available that get AAD user birthdays, this function creates a list on the tenant root site, if it does not exist.
|
There is an Azure function available that get AAD user birthdays, this function creates a list on the tenant root site, if it does not exist.
|
||||||
|
|
|
@ -21,8 +21,8 @@ extensions:
|
||||||
|
|
||||||
| Name | Image |Description |
|
| Name | Image |Description |
|
||||||
|:------------:|------------|------------|
|
|:------------:|------------|------------|
|
||||||
|Bot Framework v4 WebPart|![bot framework v3 web part](./assets/bot-frameworkv4-webpart-preview.png)|A web part that uses the [botframework-webchat module](https://www.npmjs.com/package/botframework-webchat) to create implement a React component to render the Bot Framework v4 webchat component. This web part is able to render Text and richt attachments (Images, Cards, Adaptive Cards, ...) and has settings for branding purposes.|
|
|Bot Framework v4 Web Part|![bot framework v3 web part](./assets/bot-frameworkv4-webpart-preview.png)|A web part that uses the [botframework-webchat module](https://www.npmjs.com/package/botframework-webchat) to create implement a React component to render the Bot Framework v4 webchat component. This web part is able to render Text and richt attachments (Images, Cards, Adaptive Cards, ...) and has settings for branding purposes.|
|
||||||
|Bot Framework v3 WebPart|![bot framework v4 web part](./assets/bot-framework-webpart-preview.png)|A web part that acts as a web chat component for bot's built on the Microsoft Bot Framework using the DirectLine API. When sending messages the web part uses the username of the currently logged in user. The web part has settings for color for branding purposes.|
|
|Bot Framework v3 Web Part|![bot framework v4 web part](./assets/bot-framework-webpart-preview.png)|A web part that acts as a web chat component for bot's built on the Microsoft Bot Framework using the DirectLine API. When sending messages the web part uses the username of the currently logged in user. The web part has settings for color for branding purposes.|
|
||||||
|
|
||||||
You can see this web part sample, including a sample VS 2015 bot application in practice from [PnP SPFx Special Interest Group recording](https://youtu.be/Tv03CU_PmVs?t=1329)
|
You can see this web part sample, including a sample VS 2015 bot application in practice from [PnP SPFx Special Interest Group recording](https://youtu.be/Tv03CU_PmVs?t=1329)
|
||||||
where sample was demonstrated.
|
where sample was demonstrated.
|
||||||
|
@ -65,7 +65,7 @@ under the [vs2015-bot-application](./vs2015-bot-application) folder. This is sim
|
||||||
Solution|Author(s)
|
Solution|Author(s)
|
||||||
--------|---------
|
--------|---------
|
||||||
bot-framework | [Gary Pretty](https://github.com/garypretty) ([@garypretty](http://www.twitter.com/garypretty), [garypretty.co.uk](www.garypretty.co.uk))
|
bot-framework | [Gary Pretty](https://github.com/garypretty) ([@garypretty](http://www.twitter.com/garypretty), [garypretty.co.uk](www.garypretty.co.uk))
|
||||||
|webpart v4| [Stephan Bisser](https://github.com/stephanbisser) ([@stephanbisser](https://twitter.com/stephanbisser), [bisser.io](https://bisser.io))
|
|web part v4| [Stephan Bisser](https://github.com/stephanbisser) ([@stephanbisser](https://twitter.com/stephanbisser), [bisser.io](https://bisser.io))
|
||||||
|Upgrade to SPFx 1.10.0| [Harsha Vardhini](https://github.com/Harshagracy) ([@harshagracy](https://twitter.com/harshagracy))
|
|Upgrade to SPFx 1.10.0| [Harsha Vardhini](https://github.com/Harshagracy) ([@harshagracy](https://twitter.com/harshagracy))
|
||||||
|
|
||||||
## Version history
|
## Version history
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# Company Stories Webpart
|
# Company Stories Web part
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
|
|
|
@ -115,13 +115,13 @@ External scripts can be used to include either libraries such as *jQuery*, or ev
|
||||||
|
|
||||||
### Adding the web part to your page
|
### Adding the web part to your page
|
||||||
|
|
||||||
To add the `React Content Query WebPart` to your site page you have two options :
|
To add the `React Content Query Web Part` to your site page you have two options :
|
||||||
- Either clone this repository, build the project yourself and connect it to SharePoint (see [officedev documentation](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint))
|
- Either clone this repository, build the project yourself and connect it to SharePoint (see [officedev documentation](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint))
|
||||||
- Or download the `react-content-query-webpart.sppkg` file available in the `sharepoint/solution` folder of the repository and add it directly in your app catalog in order to be able to use it in your site.
|
- Or download the `react-content-query-webpart.sppkg` file available in the `sharepoint/solution` folder of the repository and add it directly in your app catalog in order to be able to use it in your site.
|
||||||
|
|
||||||
Note : The second method will only work for Office 365 sites, since the **.ppkg** file points to an Office 365 public CDN url which expects the referer to come from a valid https://**\*.sharepoint.com\*** url.
|
Note : The second method will only work for Office 365 sites, since the **.ppkg** file points to an Office 365 public CDN url which expects the referer to come from a valid https://**\*.sharepoint.com\*** url.
|
||||||
|
|
||||||
### Configuring the WebPart
|
### Configuring the Web Part
|
||||||
|
|
||||||
As seen in the [User friendly configuration](#user-friendly-configuration) section, configuring the web part is quite straight forward. However, here's a list of *gotchas* that could save you some time :
|
As seen in the [User friendly configuration](#user-friendly-configuration) section, configuring the web part is quite straight forward. However, here's a list of *gotchas* that could save you some time :
|
||||||
|
|
||||||
|
|
|
@ -89,7 +89,7 @@ Column Name|Field Type
|
||||||
`QuestionSortOrder`|Number
|
`QuestionSortOrder`|Number
|
||||||
|
|
||||||
|
|
||||||
- Edit the webpart, set the **ListName** in the property pane
|
- Edit the web part, set the **ListName** in the property pane
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# Followed Sites webpart
|
# Followed 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/pnp/sp-starter-kit/tree/master/solution/src/webparts/followedSites.
|
> 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.
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
This web part is designed to help developers understand how to use the Context API and useContext() React Hook to share global data between a hierarchy of nested React components. In this example, a Service Scope is shared globally that components can consume to call the Microsoft Graph, it also uses Functional Components replacing the more commonly seen Class Component approach.
|
This web part is designed to help developers understand how to use the Context API and useContext() React Hook to share global data between a hierarchy of nested React components. In this example, a Service Scope is shared globally that components can consume to call the Microsoft Graph, it also uses Functional Components replacing the more commonly seen Class Component approach.
|
||||||
|
|
||||||
![webpart](webpart.png)
|
![web part](webpart.png)
|
||||||
|
|
||||||
## Compatibility
|
## Compatibility
|
||||||
|
|
||||||
|
|
|
@ -34,7 +34,7 @@ Version|Date|Comments
|
||||||
1.0|September 27, 2021|Initial release
|
1.0|September 27, 2021|Initial release
|
||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
There are no prerequisites to use this webpart.
|
There are no prerequisites to use this web part.
|
||||||
|
|
||||||
|
|
||||||
## Minimal Path to Awesome
|
## Minimal Path to Awesome
|
||||||
|
@ -51,7 +51,7 @@ There are no prerequisites to use this webpart.
|
||||||
* in the command line run:
|
* in the command line run:
|
||||||
* `npm install`
|
* `npm install`
|
||||||
* `gulp serve --nobrowser`
|
* `gulp serve --nobrowser`
|
||||||
* browse to your hosted workbench and add the webpart.
|
* browse to your hosted workbench and add the web part.
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|
|
@ -3,12 +3,12 @@
|
||||||
## Summary
|
## Summary
|
||||||
This sample shows how read and update a custom Schema extension in Microsoft Graph. It shows how to create a
|
This sample shows how read and update a custom Schema extension in Microsoft Graph. It shows how to create a
|
||||||
custom Schema extension in Graph to store custom data related to an Office 365 Group, and how we can read and update
|
custom Schema extension in Graph to store custom data related to an Office 365 Group, and how we can read and update
|
||||||
that data using an spfx webpart.
|
that data using an spfx web part.
|
||||||
|
|
||||||
A possible business scenario here could be if we want to store some additional custom data related to some specific
|
A possible business scenario here could be if we want to store some additional custom data related to some specific
|
||||||
Office 365 Groups, for instance Sales information, and make it available in the SharePoint site.
|
Office 365 Groups, for instance Sales information, and make it available in the SharePoint site.
|
||||||
|
|
||||||
![Custom Schema Extension Webpart](./assets/webpart.png)
|
![Custom Schema Extension Web part](./assets/webpart.png)
|
||||||
|
|
||||||
|
|
||||||
# Compatibility
|
# Compatibility
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# React Hooks Form WebPart
|
# React Hooks Form Web Part
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
The `React Hooks web part` is an example of how to implement Hooks in SPFx.
|
The `React Hooks web part` is an example of how to implement Hooks in SPFx.
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# Links webpart
|
# Links 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/pnp/sp-starter-kit/tree/master/solution/src/webparts/links.
|
> 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.
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# LOB Integration webpart
|
# LOB Integration 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/pnp/sp-starter-kit/tree/master/solution/src/webparts/lobIntegration.
|
> 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/lobIntegration.
|
||||||
|
|
||||||
|
|
|
@ -112,7 +112,7 @@ The Web Part Use PnPjs library, Office-ui-fabric-react components.
|
||||||
|
|
||||||
Solution|Author(s)
|
Solution|Author(s)
|
||||||
--------|---------
|
--------|---------
|
||||||
Site Design Manager WebPart|João Mendes
|
Site Design Manager Web Part|João Mendes
|
||||||
|
|
||||||
## Version history
|
## Version history
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@ These are SharePoint field types for the most part(not all field types have been
|
||||||
|
|
||||||
The columns will be displayed in the grid in the order they appear on the Column Definition panel. You can use the up and down arrow icons on each row to rearrange the columns. The delete icon on each row can be used to delete a column from the grid.
|
The columns will be displayed in the grid in the order they appear on the Column Definition panel. You can use the up and down arrow icons on each row to rearrange the columns. The delete icon on each row can be used to delete a column from the grid.
|
||||||
|
|
||||||
After defining all the columns to be displayed in your grid, click the save icon in the command bar and you will be returned to the configuration panel for the webpart.
|
After defining all the columns to be displayed in your grid, click the save icon in the command bar and you will be returned to the configuration panel for the web part.
|
||||||
|
|
||||||
Clicking the Update Lists button on the configuration panel will open the List Definitions panel:
|
Clicking the Update Lists button on the configuration panel will open the List Definitions panel:
|
||||||
![ListDefinitions panel](./src/images/ListDefinitions.PNG)
|
![ListDefinitions panel](./src/images/ListDefinitions.PNG)
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
This is a sample web part that displays currently logged in user's OneDrive's file,
|
This is a sample web part that displays currently logged in user's OneDrive's file,
|
||||||
This web part can be useful on the Intranet home page which can be added as My OneDrive files for quick reference of user's OneDrive files.
|
This web part can be useful on the Intranet home page which can be added as My OneDrive files for quick reference of user's OneDrive files.
|
||||||
|
|
||||||
![WebPart in Action](./assets/MyOneDriveInAction.gif)
|
![Web Part in Action](./assets/MyOneDriveInAction.gif)
|
||||||
|
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
|
@ -26,7 +26,7 @@ read the documentation for
|
||||||
* [ES6-Promise](https://github.com/stefanpenner/es6-promise)
|
* [ES6-Promise](https://github.com/stefanpenner/es6-promise)
|
||||||
* [Whatwg-Fetch](https://github.com/whatwg/fetch)
|
* [Whatwg-Fetch](https://github.com/whatwg/fetch)
|
||||||
|
|
||||||
![Sample of the offline first webpart](./assets/preview.gif)
|
![Sample of the offline first web part](./assets/preview.gif)
|
||||||
|
|
||||||
|
|
||||||
## Compatibility
|
## Compatibility
|
||||||
|
|
|
@ -62,7 +62,7 @@ Selecting a Property and clicking the Edit button will bring up the Edit Panel:
|
||||||
|
|
||||||
Here you can change the value of the property and specify if the property should be included in the search Index.
|
Here you can change the value of the property and specify if the property should be included in the search Index.
|
||||||
|
|
||||||
The Properties that can be edited are specified in the webpart's Property Pane:
|
The Properties that can be edited are specified in the web part's Property Pane:
|
||||||
|
|
||||||
![PropertyBagEditorEdur](./src/images/PropertyBagEditorConfig.PNG)
|
![PropertyBagEditorEdur](./src/images/PropertyBagEditorConfig.PNG)
|
||||||
|
|
||||||
|
@ -120,11 +120,11 @@ The propertyBagDisplay web part can be used by an administrator to view and edit
|
||||||
|
|
||||||
![PropertyBagDisplay](./src/images/PropertyBagDisplayDisplay.PNG)
|
![PropertyBagDisplay](./src/images/PropertyBagDisplayDisplay.PNG)
|
||||||
|
|
||||||
In the Property Pane, an administrator must specify both the Crawled Property Name and the Managed Property name (separated by a pipe character) of the properties to be included in the webpart:
|
In the Property Pane, an administrator must specify both the Crawled Property Name and the Managed Property name (separated by a pipe character) of the properties to be included in the web part:
|
||||||
|
|
||||||
![PropertyBagDisplayConfig](./src/images/PropertBagDisplayConfig.PNG)
|
![PropertyBagDisplayConfig](./src/images/PropertBagDisplayConfig.PNG)
|
||||||
|
|
||||||
The administrator can also include a list of site templates to narrow down the list of sites to be included in the webpart. When specifying site templates to include you can include just the Site Template Name (STS) and all sites within that template name will be included, or you can specify the Site Template Name and ID, separated by a '#" character (STS#1) to have only sites with that template name and ID included.
|
The administrator can also include a list of site templates to narrow down the list of sites to be included in the web part. When specifying site templates to include you can include just the Site Template Name (STS) and all sites within that template name will be included, or you can specify the Site Template Name and ID, separated by a '#" character (STS#1) to have only sites with that template name and ID included.
|
||||||
|
|
||||||
The web part displays the site template, Title and Url, plus the selected Managed Properties for all sites in the tenant with the selected site template. The Managed Properties are only displayed if they have been set as searchable, and a full crawl has been run. After selecting a Site, a user can click the edit button to edit the Crawled properties (i.e. the raw property bag values) for the selected site:
|
The web part displays the site template, Title and Url, plus the selected Managed Properties for all sites in the tenant with the selected site template. The Managed Properties are only displayed if they have been set as searchable, and a full crawl has been run. After selecting a Site, a user can click the edit button to edit the Crawled properties (i.e. the raw property bag values) for the selected site:
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
This is sample web part which showcase how to implement Google reCaptcha v2 in SPFx. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content. If we are building a custom input form to get feedback, newsletter subscription or contact us form using SPFx webpart. We might have to implement SPAM protection using some CAPTCHA resolving technique. This sample can come in handy to extend it for your
|
This is sample web part which showcase how to implement Google reCaptcha v2 in SPFx. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content. If we are building a custom input form to get feedback, newsletter subscription or contact us form using SPFx webpart. We might have to implement SPAM protection using some CAPTCHA resolving technique. This sample can come in handy to extend it for your
|
||||||
business requirement if you need to implement CAPTCHA in SPFx webpart.
|
business requirement if you need to implement CAPTCHA in SPFx web part.
|
||||||
|
|
||||||
* Please refer this [link](https://www.c-sharpcorner.com/article/google-recaptcha-in-sharepoint-framework-webpartspfx/) to know 'How to build this from Scratch'
|
* Please refer this [link](https://www.c-sharpcorner.com/article/google-recaptcha-in-sharepoint-framework-webpartspfx/) to know 'How to build this from Scratch'
|
||||||
|
|
||||||
|
@ -71,9 +71,9 @@ Version|Date|Comments
|
||||||
|
|
||||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||||
|
|
||||||
* Using react framework in SPFx webpart
|
* Using react framework in SPFx web part
|
||||||
* Using [PnP Placeholder control](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/Placeholder/) to configure webpart.
|
* Using [PnP Placeholder control](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/Placeholder/) to configure web part.
|
||||||
* Using [react-google-recaptcha](https://github.com/dozoisch/react-google-recaptcha) npm package in SPFx webpart
|
* Using [react-google-recaptcha](https://github.com/dozoisch/react-google-recaptcha) npm package in SPFx web part
|
||||||
* Validate if captcha is resolved before submitting data.
|
* Validate if captcha is resolved before submitting data.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,7 @@ extensions:
|
||||||
## Summary
|
## Summary
|
||||||
SharePoint Framework web part which uses [Redux](http://redux.js.org/) to maintain a single state for the entire application and [ImmutableJS](https://facebook.github.io/immutable-js/) to create performant state trees.
|
SharePoint Framework web part which uses [Redux](http://redux.js.org/) to maintain a single state for the entire application and [ImmutableJS](https://facebook.github.io/immutable-js/) to create performant state trees.
|
||||||
|
|
||||||
Redux AJAX actions are used together with the SharePoint REST API to display lists in your site. You can also add a new list to the site from this webpart.
|
Redux AJAX actions are used together with the SharePoint REST API to display lists in your site. You can also add a new list to the site from this web part.
|
||||||
|
|
||||||
More details in my post here: [Using Redux Async Actions and ImmutableJS in SharePoint Framework](http://www.vrdmn.com/2017/07/using-redux-async-actions-and.html)
|
More details in my post here: [Using Redux Async Actions and ImmutableJS in SharePoint Framework](http://www.vrdmn.com/2017/07/using-redux-async-actions-and.html)
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@ Sample web part to demonstrate the use of [Redux-Form](https://github.com/erikra
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
|
|
||||||
- Basic knowledge of react-redux concepts - reducer,actions and dispatch.
|
- Basic knowledge of react-redux concepts - reducer,actions and dispatch.
|
||||||
- PnP PowerShell - to setup Fields and Lists to work with the webpart.
|
- PnP PowerShell - to setup Fields and Lists to work with the web part.
|
||||||
|
|
||||||
## Solution
|
## Solution
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ Main features include:
|
||||||
- Optional View All link in header to point to custom feed source
|
- Optional View All link in header to point to custom feed source
|
||||||
- Embedded feed rendering with optional parameters
|
- Embedded feed rendering with optional parameters
|
||||||
-- Feed result layout options including optional display of item publish date and description
|
-- Feed result layout options including optional display of item publish date and description
|
||||||
-- Demostration of color picker property for color control of certain aspects of webpart
|
-- Demostration of color picker property for color control of certain aspects of web part
|
||||||
- Custom feed rendering using local or remote handlebar template
|
- Custom feed rendering using local or remote handlebar template
|
||||||
|
|
||||||
![RSS Reader](./assets/react-rss-reader.gif)
|
![RSS Reader](./assets/react-rss-reader.gif)
|
||||||
|
|
|
@ -125,7 +125,7 @@ Version|Date|Comments
|
||||||
-------|----|--------
|
-------|----|--------
|
||||||
1.0|March 10th, 2017|Initial release
|
1.0|March 10th, 2017|Initial release
|
||||||
1.0.0.1|August 8th, 2017|Updated SPFx version and CSS loading
|
1.0.0.1|August 8th, 2017|Updated SPFx version and CSS loading
|
||||||
1.0.0.2|October 4th, 2017|Updated SPFx version, bundle Office UI Fabric and CSS in webpart
|
1.0.0.2|October 4th, 2017|Updated SPFx version, bundle Office UI Fabric and CSS in web part
|
||||||
1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring
|
1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring
|
||||||
1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide
|
1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide
|
||||||
1.0.0.5|March 8th, 2018|Added support for loading scripts which are AMD/UMD modules. Added support for classic _spPageContextInfo. Refactoring.
|
1.0.0.5|March 8th, 2018|Added support for loading scripts which are AMD/UMD modules. Added support for classic _spPageContextInfo. Refactoring.
|
||||||
|
|
|
@ -174,7 +174,7 @@ Version|Date|Comments
|
||||||
-------|----|--------
|
-------|----|--------
|
||||||
1.0|March 10th, 2017|Initial release
|
1.0|March 10th, 2017|Initial release
|
||||||
1.0.0.1|August 8th, 2017|Updated SPFx version and CSS loading
|
1.0.0.1|August 8th, 2017|Updated SPFx version and CSS loading
|
||||||
1.0.0.2|October 4th, 2017|Updated SPFx version, bundle Office UI Fabric and CSS in webpart
|
1.0.0.2|October 4th, 2017|Updated SPFx version, bundle Office UI Fabric and CSS in web part
|
||||||
1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring
|
1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring
|
||||||
1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide
|
1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide
|
||||||
1.0.0.5|March 8th, 2018|Added support for loading scripts which are AMD/UMD modules. Added support for classic _spPageContextInfo. Refactoring.
|
1.0.0.5|March 8th, 2018|Added support for loading scripts which are AMD/UMD modules. Added support for classic _spPageContextInfo. Refactoring.
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
## Summary
|
## Summary
|
||||||
Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup web part to display them.
|
Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup web part to display them.
|
||||||
|
|
||||||
### News rollup WebPart
|
### News rollup Web Part
|
||||||
![News rollup WebPart](./assets/demo-wp.gif)
|
![News rollup WebPart](./assets/demo-wp.gif)
|
||||||
|
|
||||||
### SitePages library CommandSet
|
### SitePages library CommandSet
|
||||||
|
|
|
@ -25,7 +25,7 @@ This project shows how to integrate [Tailwind CSS](https://tailwindcss.com/) fra
|
||||||
- Using CSS custom properties to manage in Tailwind CSS Classes the Theme Variant into sections
|
- Using CSS custom properties to manage in Tailwind CSS Classes the Theme Variant into sections
|
||||||
- Avoid writing SASS but only use Tailwind CSS classes to style components
|
- Avoid writing SASS but only use Tailwind CSS classes to style components
|
||||||
|
|
||||||
![WebPart](./assets/react-tailwindcss-overview.gif)
|
![Web Part](./assets/react-tailwindcss-overview.gif)
|
||||||
|
|
||||||
## Compatibility
|
## Compatibility
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
Sample web part with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The web part uses the Taxonomy API support available in the @pnp/taxonomy.
|
Sample web part with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The web part uses the Taxonomy API support available in the @pnp/taxonomy.
|
||||||
|
|
||||||
|
|
||||||
![TaxonomyPickerPanel webpart](https://github.com/vipulkelkar/sp-dev-fx-webparts/blob/TaxonomyPanelPicker/samples/react-taxonomypicker-panel/assets/TaxonomyPicker.gif)
|
![TaxonomyPickerPanel web part](https://github.com/vipulkelkar/sp-dev-fx-webparts/blob/TaxonomyPanelPicker/samples/react-taxonomypicker-panel/assets/TaxonomyPicker.gif)
|
||||||
|
|
||||||
|
|
||||||
## Compatibility
|
## Compatibility
|
||||||
|
@ -53,7 +53,7 @@ Version|Date|Comments
|
||||||
|
|
||||||
- Navigate to the file 'src/webparts/components/ReactTaxonomyPickerpanel.tsx'
|
- Navigate to the file 'src/webparts/components/ReactTaxonomyPickerpanel.tsx'
|
||||||
|
|
||||||
- In the RENDER method of the webpart, a custom taxonomy picker component is used. Please replace the "TermSetId" property with the desired term set id in your tenant.
|
- In the RENDER method of the web part, a custom taxonomy picker component is used. Please replace the "TermSetId" property with the desired term set id in your tenant.
|
||||||
|
|
||||||
- in the command line run:
|
- in the command line run:
|
||||||
- `npm install`
|
- `npm install`
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
SPFx v1.12.1 support for Microsoft Teams meeting apps development. Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.
|
SPFx v1.12.1 support for Microsoft Teams meeting apps development. Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.
|
||||||
|
|
||||||
![WebPart Preview](./assets/web-part-preview.gif)
|
![Web Part Preview](./assets/web-part-preview.gif)
|
||||||
|
|
||||||
The Questionnaire meeting app displays the questions from attendees as pre-meeting app experience.
|
The Questionnaire meeting app displays the questions from attendees as pre-meeting app experience.
|
||||||
![Questionnaire Preview](./assets/questionnaire-preview.png)
|
![Questionnaire Preview](./assets/questionnaire-preview.png)
|
||||||
|
|
|
@ -23,7 +23,7 @@ This is a sample web part that displays currently logged in user's Microsoft Tea
|
||||||
|
|
||||||
* Web Part in Action
|
* Web Part in Action
|
||||||
|
|
||||||
![WebPart in Action](./assets/myteamsmessage.gif)
|
![Web Part in Action](./assets/myteamsmessage.gif)
|
||||||
|
|
||||||
* Configurable Web Part Properties
|
* Configurable Web Part Properties
|
||||||
|
|
||||||
|
@ -90,8 +90,8 @@ Configurable Web part Properties
|
||||||
|
|
||||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||||
|
|
||||||
* Using react framework in SPFx webpart
|
* Using react framework in SPFx web part
|
||||||
* Calling Teams Graph API in SPFx webpart
|
* Calling Teams Graph API in SPFx web part
|
||||||
* Usage of PnP Tree View Control
|
* Usage of PnP Tree View Control
|
||||||
* Usage of Fluent UI/Office UI Fabric Controls
|
* Usage of Fluent UI/Office UI Fabric Controls
|
||||||
|
|
||||||
|
|
|
@ -57,7 +57,7 @@ The Web Part Use MSGraph API and need to SharePoint Administrator approve de sco
|
||||||
|
|
||||||
Solution|Author(s)
|
Solution|Author(s)
|
||||||
--------|---------
|
--------|---------
|
||||||
Tenant Properties WebPart|[João Mendes](https://github.com/joaojmendes)
|
Tenant Properties Web Part|[João Mendes](https://github.com/joaojmendes)
|
||||||
|
|
||||||
## Version history
|
## Version history
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# react-tour-pnpjs - SharePoint modern page tutorial: SPFx Tour sample WebPart.
|
# react-tour-pnpjs - SharePoint modern page tutorial: SPFx Tour sample Web Part.
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
|
|
|
@ -41,7 +41,7 @@ channels on the tenants Video Service, and allows the user to select a channel.
|
||||||
|
|
||||||
The second web part used react-slick. The carousel is not as fancy as react-3d-carousel, but I was able to to swap out the
|
The second web part used react-slick. The carousel is not as fancy as react-3d-carousel, but I was able to to swap out the
|
||||||
image and replace it with an Iframe playing the Video once a user clicked it. I had trouble with the css and getting the next and previous
|
image and replace it with an Iframe playing the Video once a user clicked it. I had trouble with the css and getting the next and previous
|
||||||
buttons to show. If you run the webpart, the buttons are there to the left and the right of the image, they are just not visible.You can find them by moving the mouse along the left and right borders. Hopefully someone with better css skiils than I can fix this. You can also change videos by clicking the dots at the bottom of the webpart, A sample of the web part is shown below:
|
buttons to show. If you run the web part, the buttons are there to the left and the right of the image, they are just not visible.You can find them by moving the mouse along the left and right borders. Hopefully someone with better css skiils than I can fix this. You can also change videos by clicking the dots at the bottom of the web part, A sample of the web part is shown below:
|
||||||
|
|
||||||
![react-slick](./src/assets/react-slick.PNG)
|
![react-slick](./src/assets/react-slick.PNG)
|
||||||
And a sample of the webparts configuration:
|
And a sample of the webparts configuration:
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
This is sample web part to showcase how to open webcam and take photo in SPFx webpart. This will work in desktop/laptop with webcam and mobile device also(from browser). This can be extended to stored captured photo in document library or it can be saved as user profile photo using GRAPH API.
|
This is sample web part to showcase how to open webcam and take photo in SPFx web part. This will work in desktop/laptop with webcam and mobile device also(from browser). This can be extended to stored captured photo in document library or it can be saved as user profile photo using GRAPH API.
|
||||||
|
|
||||||
* [Please refer this link on How to build this from Scratch](https://www.c-sharpcorner.com/article/how-to-open-webmobile-camera-and-take-photo-from-spfx-webpart/)
|
* [Please refer this link on How to build this from Scratch](https://www.c-sharpcorner.com/article/how-to-open-webmobile-camera-and-take-photo-from-spfx-webpart/)
|
||||||
|
|
||||||
|
@ -56,8 +56,8 @@ Version|Date|Comments
|
||||||
|
|
||||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||||
|
|
||||||
* Using react framework in SPFx webpart
|
* Using react framework in SPFx web part
|
||||||
* Using react-webcam npm package in SPFx webpart
|
* Using react-webcam npm package in SPFx web part
|
||||||
* Open web cam or mobile camera to capture photo and display in img html element
|
* Open web cam or mobile camera to capture photo and display in img html element
|
||||||
|
|
||||||
## Video
|
## Video
|
||||||
|
|
|
@ -41,7 +41,7 @@ Version|Date|Comments
|
||||||
* in the command line run:
|
* in the command line run:
|
||||||
* `npm install`
|
* `npm install`
|
||||||
* `gulp serve --nobrowser`
|
* `gulp serve --nobrowser`
|
||||||
* Browse to the workbench `https://yourtenant.sharepoint.com/sites/yoursite/_layout/15/workbench.aspx` and add the webpart
|
* Browse to the workbench `https://yourtenant.sharepoint.com/sites/yoursite/_layout/15/workbench.aspx` and add the web part
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue