diff --git a/samples/react-teams-my-webinars/README.md b/samples/react-teams-my-webinars/README.md index bd74ef6b4..9c672ae87 100644 --- a/samples/react-teams-my-webinars/README.md +++ b/samples/react-teams-my-webinars/README.md @@ -2,9 +2,11 @@ ## Summary -Short summary on functionality and used technologies. +Displays a list of Teams Webinars you are an organizer of, allows you to sync those webinars to a SharePoint list, to share within a Team and cross check pending registrants against membership of a team. -[picture of the solution in action, if possible] +![main screenshot](./assets/Screenshot%202023-12-25-main.png) +![add to list screenshot](./assets/Screenshot%202023-12-25-addtolist.png) +![Resulting listl](./assets/Screenshot%202023-12-25-list.png) ## Used SharePoint Framework Version @@ -17,22 +19,33 @@ Short summary on functionality and used technologies. > Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram) -## Prerequisites +## Compatibility -> Any special pre-requisites? +⚠️ Currently an override is needed for FluentUI 9 + SPFX + +| :warning: Important | +|:---------------------------| +| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.| +|Refer to for more information on SPFx compatibility. | + +![SPFx 1.18.2](https://img.shields.io/badge/SPFx-1.18.2-green.svg) +![Node.js v16](https://img.shields.io/badge/Node.js-v16-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") +![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) ## Solution -| Solution | Author(s) | -| ----------- | ------------------------------------------------------- | -| folder name | Author details (name, company, twitter alias with link) | +| Solution | Author(s) | +| ----------------------- | ------------------------------------------------------- | +| react-teams-mm-webinars | [Nick Brown](https://github.com/techienickb) | ## Version history -| Version | Date | Comments | -| ------- | ---------------- | --------------- | -| 1.1 | March 10, 2021 | Update comment | -| 1.0 | January 29, 2021 | Initial release | +| Version | Date | Comments | +| ------- | ----------------- | --------------- | +| 1.0 | December 25, 2024 | Initial release | ## Disclaimer @@ -48,17 +61,17 @@ Short summary on functionality and used technologies. - **npm install** - **gulp serve** -> Include any additional steps as needed. - ## Features Description of the extension that expands upon high-level summary above. This extension illustrates the following concepts: -- topic 1 -- topic 2 -- topic 3 +- Using SPFX + Fluent Ui 9 +- Using Graph and the Webinars API +- Using PnP components for site/list navigation +- Using MonacoEditor +- Using Graph to add items to a list > Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance. diff --git a/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-addtolist.png b/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-addtolist.png new file mode 100644 index 000000000..4dabf03c7 Binary files /dev/null and b/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-addtolist.png differ diff --git a/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-list.png b/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-list.png new file mode 100644 index 000000000..4286a39db Binary files /dev/null and b/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-list.png differ diff --git a/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-main.png b/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-main.png new file mode 100644 index 000000000..ccb5039e2 Binary files /dev/null and b/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-main.png differ diff --git a/samples/react-teams-my-webinars/package.json b/samples/react-teams-my-webinars/package.json index d28b77b5f..9a7ab578e 100644 --- a/samples/react-teams-my-webinars/package.json +++ b/samples/react-teams-my-webinars/package.json @@ -12,9 +12,10 @@ "test": "gulp test" }, "dependencies": { - "@fluentui/react": "^8.112.9", - "@fluentui/react-components": "^9.42.0", - "@fluentui/react-migration-v8-v9": "^9.4.37", + "@fluentui/react-components": "9.42.0", + "@fluentui/react-migration-v8-v9": "^9.4.41", + "@fluentui/react-popover": "9.8.23", + "@fluentui/react-positioning": "9.10.2", "@microsoft/microsoft-graph-types": "^2.40.0", "@microsoft/microsoft-graph-types-beta": "^0.42.0-preview", "@microsoft/sp-component-base": "1.18.2", @@ -43,5 +44,12 @@ "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.7.4" + }, + "overrides": { + "@fluentui/react-positioning@>9.10.2": "9.10.2", + "@fluentui/react-combobox": "9.5.35", + "@fluentui/react-popover": "9.8.23", + "@fluentui/react-menu": "9.12.37", + "@fluentui/react-tooltip": "9.4.3" } } diff --git a/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/MyTeamsVirtualEventsWebPart.manifest.json b/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/MyTeamsVirtualEventsWebPart.manifest.json index 04e09090c..52b1b4cdb 100644 --- a/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/MyTeamsVirtualEventsWebPart.manifest.json +++ b/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/MyTeamsVirtualEventsWebPart.manifest.json @@ -1,6 +1,6 @@ { "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", - "id": "26c11d2f-c74a-4d93-91ed-054bdea6aad8", + "id": "1adde89a-07fd-403f-9067-4d44b40a4892", "alias": "MyTeamsVirtualEventsWebPart", "componentType": "WebPart", diff --git a/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirtualEvents.module.scss b/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirtualEvents.module.scss index f2fc32ca9..ec6519edb 100644 --- a/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirtualEvents.module.scss +++ b/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirtualEvents.module.scss @@ -1,8 +1,6 @@ @import '~@fluentui/react/dist/sass/References.scss'; .myTeamsVirualEvents { - overflow: hidden; - padding: 1em; color: "[theme:bodyText, default: #323130]"; color: var(--bodyText); &.teams { @@ -10,25 +8,7 @@ } } -.welcome { - text-align: center; -} - -.welcomeImage { - width: 100%; - max-width: 420px; -} - -.links { - a { - text-decoration: none; - color: "[theme:link, default:#03787c]"; - color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only - - &:hover { - text-decoration: underline; - color: "[theme:linkHovered, default: #014446]"; - color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only - } - } +//Overrides the drawer's z-index +:global(.fui-FluentProvider):has(> .myTeamsVirualEventsDrawer) { + z-index: 100000; } \ No newline at end of file diff --git a/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirualEvents.tsx b/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirualEvents.tsx index dc554c712..7e504ba3a 100644 --- a/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirualEvents.tsx +++ b/samples/react-teams-my-webinars/src/webparts/myTeamsVirtualEvents/components/MyTeamsVirualEvents.tsx @@ -128,7 +128,7 @@ export default function MyTeamsVirtualEvents(props: IMyTeamsVirtualEventsProps): } - !open && setDrawState(DrawState.Closed)}> + !open && setDrawState(DrawState.Closed)}> } onClick={() => setDrawState(DrawState.Closed)} />}> {drawState === DrawState.OpenSync ? strings.DrawHeaderSync : strings.DrawHeaderApprove}