Web parts is written with two words.

This commit is contained in:
Hugo Bernier 2021-11-21 03:00:49 -05:00
parent cf6cfb5e55
commit d20d203784
30 changed files with 241 additions and 225 deletions

View File

@ -1,4 +1,4 @@
# SPFx WebPart in Teams Meetings App
# SPFx web part in Teams Meetings App
Demo SPFx web part project that demonstrates using as a Microsoft Teams meetings app. This is associated with the SPFx docs tutorial: [Tutorial: Build meeting apps for Microsoft Teams with SPFx](https://docs.microsoft.com/sharepoint/dev//spfx/build-for-teams-meeting-app)
@ -38,19 +38,14 @@ Version | Date | Comments
------- | -------------- | ---------------
1.0 | April 27, 2021 | 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.**
---
## Minimal Path to Awesome
Refer to the above mentioned SPFx tutorial for full repro instructions.
- Clone this repository
- ZIP the contents of the **./teams** folder, *but not the folder itself*
- rename the ZIP to **TeamsSPFxApp.zip**
- ZIP the contents of the `./teams` folder, *but not the folder itself*
- rename the ZIP to `TeamsSPFxApp.zip`
- From the command line install all dependencies and create the package:
```console
@ -59,10 +54,31 @@ Refer to the above mentioned SPFx tutorial for full repro instructions.
gulp package-solution -p
```
- Upload the **.sppkg** to your SPO tenant's app catalog & deploy it
- Upload the `.sppkg` to your SPO tenant's app catalog & deploy it
- select the uploaded package, then select the **Sync to Teams** button in the **Files** tab in the ribbon
- In Microsoft Teams, create a new meeting using the **Calendar** app in the leftmost navigation bar
- After creating the meeting, edit it, and select the **+** in the tab bar
- Select the app you deployed to install the app
## Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20js-teams-meeting-app%22) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=js-teams-meeting-app) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20js-teams-meeting-app&template=bug-report.yml&sample=js-teams-meeting-app&authors=@andrewconnell&title=js-teams-meeting-app%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20js-teams-meeting-app&template=question.yml&sample=js-teams-meeting-app&authors=@andrewconnell&title=js-teams-meeting-app%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20js-teams-meeting-app&template=suggestion.yml&sample=js-teams-meeting-app&authors=@andrewconnell&title=js-teams-meeting-app%20-%20).
## 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.**
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-teams-meeting-app" />

View File

@ -19,7 +19,7 @@ This repo is a react based SPFx web part and extension that allows users to add/
WebPart in Action
![Web part in action](assets/webpartinaction.gif?raw=true "Webpart in action")
![Web part in action](assets/webpartinaction.gif?raw=true "web part in action")
Challenges/Drawback with ONLY using SPFx extension for adding js and css file references.
* JS and CSS file references links needs to be hardcoded in solution

View File

@ -4,7 +4,7 @@
This web part will allow users to view/update application customizers properties across any web where the current user has access to. This web part can be helpful when we require to update the properties for application customizer without using any PowerShell script or cli tool.
![Web part in action](assets/react-all-applicationcustomizers.gif?raw=true "Webpart in action")
![Web part in action](assets/react-all-applicationcustomizers.gif?raw=true "web part in action")
## Idea behind this web part

View File

@ -1,6 +1,6 @@
# News
SPFx Webpart to display News from SharePoint site(s)
SPFx web part to display news from SharePoint site(s)
## SharePoint News Posts with SPFx

View File

@ -7,7 +7,7 @@ business requirement if you need to implement CAPTCHA in SPFx webpart.
* Please refer this [link](https://www.c-sharpcorner.com/article/google-recaptcha-in-sharepoint-framework-webpartspfx/) to know 'How to build this from Scratch'
![Webpart in action](screens/WebpartInAction.gif?raw=true "Webpart in action")
![web part in action](screens/WebpartInAction.gif?raw=true "web part in action")
# Compatibility

View File

@ -1,7 +1,7 @@
# react-sitepages-metadata
## Summary
Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup WebPart 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 WebPart](./assets/demo-wp.gif)
@ -47,12 +47,12 @@ Solution provides an enhancement to SitePages library that enables updating exis
Relies heavily on Office UI Fabric.
Contains following elements:
- Metadata-News rollup WebPart - displays published SitePages items (promoted to news), provides filtering and paging capabilities, as well as many configuration options
- Metadata-News rollup web part - displays published SitePages items (promoted to news), provides filtering and paging capabilities, as well as many configuration options
- CommandSet extension for SitePages library - a button appears when a single item is selected. Clicking on the item shows a fillable dialog with lookup fields
### Important notes
- Changes in some WebPart properties will not be reflected after hitting "Apply" button - please refresh the page, too
- To see a collection of lookup fields in the WebPart property pane change/edit any of the instantly visible properties, such as Item limit, width or item height. Reason for this is SitePages library will be queried for lookup lists only after the property pane is initially opened
- Changes in some web part properties will not be reflected after hitting "Apply" button - please refresh the page, too
- To see a collection of lookup fields in the web part property pane change/edit any of the instantly visible properties, such as Item limit, width or item height. Reason for this is SitePages library will be queried for lookup lists only after the property pane is initially opened
### Resources
- [React Quick Start](https://facebook.github.io/react/docs/tutorial.html)

View File

@ -10,15 +10,15 @@ The web part uses the built in MSGraphClient and needs to be approved in API man
## Web part usage
![alt text][Webpart in action]
![alt text][web part in action]
[Webpart in action]: ./assets/sites-manager-demo.gif "Sites Selected Manager in action"
[web part in action]: ./assets/sites-manager-demo.gif "Sites Selected Manager in action"
## Using the web part to grant an app access to a site, start to finish
![alt text][Webpart in action - Visual Studio]
![alt text][web part in action - Visual Studio]
[Webpart in action - Visual Studio]: ./assets/vsDemo.gif "Sites Selected Manager Demo"
[web part in action - Visual Studio]: ./assets/vsDemo.gif "Sites Selected Manager Demo"
## Compatibility

View File

@ -2,7 +2,7 @@
## Summary
A SPFx WebPart using [@pnp/graph/teams](https://pnp.github.io/pnpjs/graph/docs/teams/). It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.
A SPFx web part using [@pnp/graph/teams](https://pnp.github.io/pnpjs/graph/docs/teams/). It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.
## react-teams-tabs-pnpjs preview
![WebPartInAction](./assets/react-teams-tabs-pnpjs-webpart.png)

View File

@ -2,7 +2,7 @@
## Summary
A SPFx WebPart using [PnP/PnPjs](https://pnp.github.io/pnpjs/), [@pnp/spfx-property-controls](https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/) and [ReactTourJS](https://reactour.js.org/).
A SPFx web part using [PnP/PnPjs](https://pnp.github.io/pnpjs/), [@pnp/spfx-property-controls](https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/) and [ReactTourJS](https://reactour.js.org/).
It allows to create a configurable tutorial/tour of a SharePoint modern page for adoption scope.
When you start the tour, a modal will be displayed, with a description of the highlighted area, and you can go to the next step or go back, thus navigating inside the page. The user will see the descriptions and will have the opportunity to preview the advice that the publisher thought for him.
The property pane shows dinamically all webparts in the current page, using [PnP/PnPjs](https://pnp.github.io/pnpjs/) to make easy page tour configuration.
@ -65,7 +65,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
* How to use [@pnp/spfx-property-controls - PropertyFieldCollectionData](https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/).
* How to extend with custom render [@pnp/spfx-property-controls - PropertyFieldCollectionData](https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/).
* How to retrieve all SPFx WebPart in the current page using [PnP/PnPjs](https://pnp.github.io/pnpjs/)
* How to retrieve all SPFx web part in the current page using [PnP/PnPjs](https://pnp.github.io/pnpjs/)
* How to include external React Component [ReactTourJS](https://reactour.js.org/)

View File

@ -1,6 +1,6 @@
## asset-deployment-webpart
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## helloworld-webpart
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## helloworld-webpart
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## jquery-webpart
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## datatables-itrequests
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## datatables-itrequests
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## datatables-itrequests
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## fullcalendar-taskscalendar
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## fullcalendar-taskscalendar
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## fullcalendar-taskscalendar
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code

View File

@ -1,6 +1,6 @@
## fullcalendar-taskscalendar
This is where you include your WebPart documentation.
This is where you include your web part documentation.
### Building the code