Updated README.md and sample.json

This commit is contained in:
Hugo Bernier 2021-03-24 23:55:28 -04:00
parent 57567e033d
commit b1ad9e6873
8 changed files with 466 additions and 14 deletions

View File

@ -1,4 +1,4 @@
# Microsoft Teams meeting app, Questionnaire with the SharePoint Framework
# Questionnaire Teams Meeting App
## Summary
@ -11,11 +11,14 @@ The Questionnaire meeting app displays the questions from attendees as pre-meeti
### NPM Packages Used
Below NPM package(s) are used to develop this sample:
1. @pnp/sp (https://pnp.github.io/pnpjs/sp/)
2. moment (https://www.npmjs.com/package/moment)
### Project setup and important files
```txt
spfx-react-teams-meeting-app-questionnaire
├── teams <-- MS Teams manifest
@ -44,9 +47,13 @@ spfx-react-teams-meeting-app-questionnaire
└── mystrings.d.ts
```
## Used SharePoint Framework Version
## Compatibility
![version](https://img.shields.io/badge/version-1.12-green.svg)
![SPFx 1.12](https://img.shields.io/badge/SPFx-1.12.0-green.svg)
![Node.js LTS 10.x | LTS 12.x](https://img.shields.io/badge/Node.js-LTS%2010%20%7C%20LTS%20.12.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to
@ -56,7 +63,12 @@ spfx-react-teams-meeting-app-questionnaire
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
# WebPart Properties
## Prerequisites
- Administrative access to MS Teams to deploy the package
### Web Part Properties
The properties should be pre-configured inside `QuestionnaireMeetingAppWebPart.manifest.json` as when the web part is added as MS Teams meeting experience, we do not get any settings to configure.
Property|Type|Required|Default value|Comments
@ -64,7 +76,8 @@ Property|Type|Required|Default value|Comments
siteUrl|Text|Yes|/|Provide the relative URL of the site where below list exists.
listName|Text|Yes|Teams Meeting Questionnaire|Title of the list storing meeting questionnaires.
# SharePoint Asset
### SharePoint Asset
A SharePoint list (named `Teams Meeting Questionnaire`) should be manually created to store the meeting questionnaires. The schema of the list is as below.
Display Name|Internal Name|Type|Required|Comments
@ -73,13 +86,10 @@ Title|Title|Single line of text|Y|OOB Title column
Description|Description|Multiple lines of text|N|
MeetingID|MeetingID|Single line of text|N|
## Prerequisites
## Minimal Path to Awesome
- Administrative access to MS Teams to deploy the package
### SharePoint deployment
# Minimal Path to Awesome
## SharePoint deployment
- Clone this repo
- Navigate to the folder with current sample
- Restore dependencies: `$ npm i`
@ -88,10 +98,12 @@ MeetingID|MeetingID|Single line of text|N|
- Locate the solution at `./sharepoint/solution/spfx-ms-teams-questionnaire-meeting-app.sppkg` and upload it to SharePoint tenant app catalog
![Deploy SPFx solution](./assets/deploy-spfx-solution.png)
- Select `Make this solution available to all sites in the organization`.
- Click `Deploy`.
## MS Teams deployment
### MS Teams deployment
- Navigate to `teams` folder and zip the content (2 png files and manifest.json).
- Open MS Teams.
- Click `Apps`.
@ -100,13 +112,13 @@ MeetingID|MeetingID|Single line of text|N|
![Deploy to MS Teams](./assets/deploy-to-ms-teams.png)
# Solution
## Solution
Solution|Author(s)
--------|---------
spfx-react-teams-meeting-app-questionnaire|[Nanddeep Nachan](https://www.linkedin.com/in/nanddeepnachan/) (SharePoint Consultant, [@NanddeepNachan](https://twitter.com/NanddeepNachan))
&nbsp;|[Ravi Kulkarni](https://www.linkedin.com/in/ravi-kulkarni-a5381723/) (SharePoint Consultant, [@RaviKul16a87](https://twitter.com/RaviKul16a87))
&nbsp;|[Smita Nachan](https://www.linkedin.com/in/smitanachan/) (SharePoint Consultant, [@SmitaNachan](https://twitter.com/SmitaNachan))
spfx-react-teams-meeting-app-questionnaire|[Ravi Kulkarni](https://www.linkedin.com/in/ravi-kulkarni-a5381723/) (SharePoint Consultant, [@RaviKul16a87](https://twitter.com/RaviKul16a87))
spfx-react-teams-meeting-app-questionnaire|[Smita Nachan](https://www.linkedin.com/in/smitanachan/) (SharePoint Consultant, [@SmitaNachan](https://twitter.com/SmitaNachan))
## Version history
@ -133,8 +145,11 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
- [Apps in Teams meetings](https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings)
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
- [PnPjs Configuration](https://pnp.github.io/pnpjs/concepts/configuration/)
- [Support Microsoft Teams Themes in SharePoint Framework Solutions](https://blog.aterentiev.com/support-microsoft-teams-themes-in) by Alex Terentiev, [@alexaterentiev](https://twitter.com/alexaterentiev)
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-teams-meeting-app-questionnaire" />

View File

@ -0,0 +1,83 @@
[
{
"name": "pnp-sp-dev-spfx-web-parts-react-teams-meeting-app-questionnaire",
"source": "pnp",
"title": "Questionnaire Teams Meeting App",
"shortDescription": "SPFx v1.12 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.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-teams-meeting-app-questionnaire",
"longDescription": [
"SPFx v1.12 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.",
"The Questionnaire meeting app displays the questions from attendees as pre-meeting app experience."
],
"created": "2021-03-22",
"modified": "2021-03-22",
"products": [
"SharePoint",
"Office",
"Teams"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.12.0"
},
{
"key": "SPFX-TEAMSMEETINGAPP",
"value": "true"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-teams-meeting-app-questionnaire/assets/web-part-preview.gif",
"alt": "Web Part Preview"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-teams-meeting-app-questionnaire/assets/questionnaire-preview.png",
"alt": "Questionnaire Preview"
}
],
"authors": [
{
"gitHubAccount": "nanddeepn",
"company": "",
"pictureUrl": "https://github.com/nanddeepn.png",
"name": "Nanddeep Nachan",
"twitter": "NanddeepNachan"
},
{
"gitHubAccount": "ravi16a87",
"company": "Cognizant",
"pictureUrl": "https://github.com/ravi16a87.png",
"name": "Ravi Kulkarni",
"twitter":"RaviKul16a87"
},
{
"gitHubAccount": "SmitaNachan",
"company": "",
"pictureUrl": "https://github.com/SmitaNachan.png",
"name": "Smita Nachan",
"twitter": "SmitaNachan"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
},
{
"name": "Apps in Teams meetings",
"description": "Meetings are key to productivity in Teams. They enable collaboration, partnership, informed communication, and shared feedback in an inclusive and active forum. As a developer, you can create configurable tab, bot, and message extension applications to enhance and enrich a Teams meeting experience. Meeting users can access apps, via the tab gallery, to enable relevant scenarios such as pre-staging a Kanban board, launching an in-meeting actionable dialog, or creating a post-meeting poll. Your meeting app can deliver a user experience for each stage of the meeting lifecycle based upon attendee status.",
"url": "https://docs.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings?WT.mc_id=M365-MVP-5003693"
}
]
}
]

View File

@ -0,0 +1,79 @@
{
"id": "31f78b4e-8520-4ef2-884c-fb3bdd5d9985",
"alias": "QuestionnaireMeetingAppWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": [
"SharePointWebPart"
],
"preconfiguredEntries": [
{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": {
"default": "Other"
},
"title": {
"default": "QuestionnaireMeetingApp"
},
"description": {
"default": "Provides pre-meeting experience with questionnaire"
},
"officeFabricIconFontName": "Page",
"properties": {
"siteUrl": "/",
"listName": "Teams Meeting Questionnaire"
}
}
],
"loaderConfig": {
"internalModuleBaseUrls": [
"https://localhost:4321/dist/"
],
"entryModuleId": "questionnaire-meeting-app-web-part",
"scriptResources": {
"questionnaire-meeting-app-web-part": {
"type": "path",
"path": "questionnaire-meeting-app-web-part_84192ae6459ea857d480.js"
},
"tslib": {
"type": "component",
"id": "01c4df03-e775-48cb-aa14-171ee5199a15",
"version": "1.10.0"
},
"@microsoft/sp-property-pane": {
"type": "component",
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"version": "1.12.0"
},
"@microsoft/sp-core-library": {
"type": "component",
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"version": "1.12.0"
},
"@microsoft/sp-webpart-base": {
"type": "component",
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
"version": "1.12.0"
},
"react": {
"type": "component",
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"version": "16.9.0"
},
"react-dom": {
"type": "component",
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"version": "16.9.0"
},
"QuestionnaireMeetingAppWebPartStrings": {
"type": "localizedPath",
"paths": {
"en-US": "QuestionnaireMeetingAppWebPartStrings_en-us_733fec4d177b77e953cdd1256b08bf0a.js"
},
"defaultPath": "QuestionnaireMeetingAppWebPartStrings_en-us_733fec4d177b77e953cdd1256b08bf0a.js"
}
}
}
}

View File

@ -0,0 +1,12 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"SiteURLFieldLabel": "Relative Site URL",
"ListNameFieldLabel": "Relative Site URL",
"AddQuestion": "New Question",
"Posted": "posted",
"Title": "Title",
"Description": "Description"
}
});

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,104 @@
{
"bundles": {
"questionnaire-meeting-app-web-part": {
"dependencies": [
{
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
"componentName": "tslib",
"componentVersion": "1.10.0",
"isDirectDependency": true
},
{
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"componentName": "@microsoft/sp-property-pane",
"componentVersion": "1.12.0",
"isDirectDependency": true
},
{
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
"componentName": "@microsoft/sp-loader",
"componentVersion": "1.12.0",
"isDirectDependency": false
},
{
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
"componentName": "@ms/sp-telemetry",
"componentVersion": "0.19.2",
"isDirectDependency": false
},
{
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
"componentName": "@microsoft/sp-dynamic-data",
"componentVersion": "1.12.0",
"isDirectDependency": false
},
{
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"componentName": "@microsoft/sp-lodash-subset",
"componentVersion": "1.12.0",
"isDirectDependency": false
},
{
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"componentName": "@microsoft/sp-core-library",
"componentVersion": "1.12.0",
"isDirectDependency": false
},
{
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
"componentName": "@ms/odsp-core-bundle",
"componentVersion": "1.1.13",
"isDirectDependency": false
},
{
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
"componentName": "@microsoft/sp-diagnostics",
"componentVersion": "1.12.0",
"isDirectDependency": false
},
{
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
"componentName": "@microsoft/sp-page-context",
"componentVersion": "1.12.0",
"isDirectDependency": false
},
{
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
"componentName": "@microsoft/load-themed-styles",
"componentVersion": "0.1.2",
"isDirectDependency": false
},
{
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
"componentName": "@microsoft/sp-http",
"componentVersion": "1.12.0",
"isDirectDependency": false
},
{
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"componentName": "react",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"componentName": "react-dom",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
"componentName": "@microsoft/sp-webpart-base",
"componentVersion": "1.12.0",
"isDirectDependency": true
},
{
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
"componentName": "@microsoft/sp-component-base",
"componentVersion": "1.12.0",
"isDirectDependency": false
}
]
}
}
}

View File

@ -0,0 +1,79 @@
{
"id": "31f78b4e-8520-4ef2-884c-fb3bdd5d9985",
"alias": "QuestionnaireMeetingAppWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": [
"SharePointWebPart"
],
"preconfiguredEntries": [
{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": {
"default": "Other"
},
"title": {
"default": "QuestionnaireMeetingApp"
},
"description": {
"default": "Provides pre-meeting experience with questionnaire"
},
"officeFabricIconFontName": "Page",
"properties": {
"siteUrl": "/",
"listName": "Teams Meeting Questionnaire"
}
}
],
"loaderConfig": {
"internalModuleBaseUrls": [
"<!-- PATH TO CDN -->"
],
"entryModuleId": "questionnaire-meeting-app-web-part",
"scriptResources": {
"questionnaire-meeting-app-web-part": {
"type": "path",
"path": "questionnaire-meeting-app-web-part_84192ae6459ea857d480.js"
},
"tslib": {
"type": "component",
"id": "01c4df03-e775-48cb-aa14-171ee5199a15",
"version": "1.10.0"
},
"@microsoft/sp-property-pane": {
"type": "component",
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"version": "1.12.0"
},
"@microsoft/sp-core-library": {
"type": "component",
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"version": "1.12.0"
},
"@microsoft/sp-webpart-base": {
"type": "component",
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
"version": "1.12.0"
},
"react": {
"type": "component",
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"version": "16.9.0"
},
"react-dom": {
"type": "component",
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"version": "16.9.0"
},
"QuestionnaireMeetingAppWebPartStrings": {
"type": "localizedPath",
"paths": {
"en-US": "QuestionnaireMeetingAppWebPartStrings_en-us_733fec4d177b77e953cdd1256b08bf0a.js"
},
"defaultPath": "QuestionnaireMeetingAppWebPartStrings_en-us_733fec4d177b77e953cdd1256b08bf0a.js"
}
}
}
}

View File

@ -0,0 +1,79 @@
{
"id": "31f78b4e-8520-4ef2-884c-fb3bdd5d9985",
"alias": "QuestionnaireMeetingAppWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": [
"SharePointWebPart"
],
"preconfiguredEntries": [
{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": {
"default": "Other"
},
"title": {
"default": "QuestionnaireMeetingApp"
},
"description": {
"default": "Provides pre-meeting experience with questionnaire"
},
"officeFabricIconFontName": "Page",
"properties": {
"siteUrl": "/",
"listName": "Teams Meeting Questionnaire"
}
}
],
"loaderConfig": {
"internalModuleBaseUrls": [
"<!-- PATH TO CDN -->"
],
"entryModuleId": "questionnaire-meeting-app-web-part",
"scriptResources": {
"questionnaire-meeting-app-web-part": {
"type": "path",
"path": "questionnaire-meeting-app-web-part_84192ae6459ea857d480.js"
},
"tslib": {
"type": "component",
"id": "01c4df03-e775-48cb-aa14-171ee5199a15",
"version": "1.10.0"
},
"@microsoft/sp-property-pane": {
"type": "component",
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"version": "1.12.0"
},
"@microsoft/sp-core-library": {
"type": "component",
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"version": "1.12.0"
},
"@microsoft/sp-webpart-base": {
"type": "component",
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
"version": "1.12.0"
},
"react": {
"type": "component",
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"version": "16.9.0"
},
"react-dom": {
"type": "component",
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"version": "16.9.0"
},
"QuestionnaireMeetingAppWebPartStrings": {
"type": "localizedPath",
"paths": {
"en-US": "QuestionnaireMeetingAppWebPartStrings_en-us_733fec4d177b77e953cdd1256b08bf0a.js"
},
"defaultPath": "QuestionnaireMeetingAppWebPartStrings_en-us_733fec4d177b77e953cdd1256b08bf0a.js"
}
}
}
}