User Scope Graph Notifications Nodejs

samples/graph-change-notification-team-channel/nodejs/Assests/sample.json

@@ -1,15 +1,15 @@
 [
   {
-    "name": "officedev-microsoft-teams-samples-graph-change-notification-team-channel",
+    "name": "officedev-microsoft-teams-samples-graph-change-notification-team-channel-group-chats",
     "source": "officeDev",
-    "title": "Graph Change Notification Team/Channel",
-    "shortDescription": "Graph change notification for team and channel",
+    "title": "User Scope Graph Change Notification Team/Channel",
+    "shortDescription": "User Scope Graph change notification for team, channel and group",
     "url": "https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-change-notification-team-channel/nodejs",
     "longDescription": [
-      "This sample demonstrates the use of Team/Channel subscription that will post notifications when user Create/Edit/Delete the team/channel through teams tab."
+      "This sample demonstrates the use of Team/Channel and User Scope Graph subscription that will post notifications when user Create/Edit/Delete the team/channel through teams tab."
     ],
     "creationDateTime": "2022-10-03",
-    "updateDateTime": "2022-10-05",
+    "updateDateTime": "2024-06-10",
     "products": [
       "Teams"
     ],

samples/graph-change-notification-team-channel/nodejs/README.md

@@ -1,6 +1,6 @@
 ---
 page_type: sample
-description: This is a sample application which demonstrates the use of team/Channel subscription that will post notifications when user create/edit/delete team/channel through teams tab.
+description: This is a sample application which demonstrates the use of team/Channel and User Scope Graph subscription that will post notifications when user create/edit/delete team/channel through teams tab.
 products:
 - office-teams
 - office
@@ -16,17 +16,19 @@ urlFragment: officedev-microsoft-teams-samples-graph-change-notification-team-ch
 
 # Change Notifications For Team and Channel Using Microsoft Graph Node.js
 
-This is a sample application which demonstrates use of Team/Channel subscription that will post notifications when user create/edit/delete team/channel.
+This is a sample application which demonstrates use of Team/Channel and User Scope Graph subscription that will post notifications when user create/edit/delete team/channel.
 
 ## Included Features
 * Tabs
 * Graph API
 * RSC Permissions
-* Change Notifications
+* Change Notifications For Teams and Channel
+* User-Scope Graph Notifications
 
-## Interaction with bot
-![Notifications](Images/ChangeNotifications.gif)
+## Interaction with Tab
+![User-Scope](Images/UserScopeNotifications.gif)
 
+![Notifications](Images/ChangeNotifications.gif)
 
 ## Prerequisites
 
@@ -156,9 +158,39 @@ To include resource data of graph notifications, this Graph API require self-sig
 
 You can interact with Teams Tab by subscribing the teams/channel for notifications.
 
+## User Scope Graph API Notifications
+
+1. **Installation To Group Chat**
+![Sample](Images/2.SelectGroupChat.png)
+
+1. **Select Subscription Tab**
+![Sample](Images/3.SelectSubscriptionsTab.png)
+
+1. **Subscription Tab**
+![Sample](Images/4.SubscriptionTab.png)
+
+1. **Notification Of Specific Group Updates**
+![Sample](Images/5.SpecificGroupUpdated.png)
+
+1. **Notification of Any-Grpup Updates**
+![Sample](Images/6.AnyGroupUpdates.png)
+
+1. **Graph Notification**
+![Sample](Images/7.GraphNotifications.png)
+
+## Left Rail Experience
+
+1. **Once the meeting chat is created it will be in hidden stage and after sending message to that chat, hidden property will becomes `false` and by this left rail of teams will be updated and it appears in `recent`**
+
+![Sample](Images/8.Hidden-True.png)
+
+![Sample](Images/9.SendingMsgToChat.png)
+
+![Sample](Images/10.HiddenFalse.png)
+
 1. **Show Welcome - Channel**
 Welcome Message when Channel selected for subscription.
-![Channel-Welcome](Images/Channel-Welcome.png)
+![Sample](Images/Channel-Welcome.png)
 
 2. **Channel Notifications**
 Channel Created Update Delete Message
@@ -176,7 +208,7 @@ Welcome Message when Team selected for subscription.
 ## Further reading
 - [Change notifications for Microsoft Teams channel](https://docs.microsoft.com/en-us/graph/teams-changenotifications-team-and-channel)
 - [Create subscription permissions for supported resource](https://docs.microsoft.com/en-us/graph/api/subscription-post-subscriptions?view=graph-rest-1.0&tabs=http#team-channel-and-chat)
-
+- [Get change notifications for chats using Microsoft Graph](https://review.learn.microsoft.com/en-us/graph/teams-changenotifications-chat?branch=main&branchFallbackFrom=pr-en-us-24192)
 
 
 <img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/graph-change-notification-team-channel-nodejs" />

samples/graph-change-notification-team-channel/nodejs/client/package.json

@@ -8,6 +8,7 @@
     "@fluentui/react-northstar": "^0.63.1",
     "@microsoft/teams-js": "^2.1.0",
     "axios": "^0.21.1",
+    "bootstrap": "^5.3.3",
     "moment": "^2.29.4",
     "react": "17.0.0",
     "react-dom": "17.0.0",
@@ -17,7 +18,7 @@
   },
   "scripts": {
     "dev:teamsfx": "npm run start",
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

samples/graph-change-notification-team-channel/nodejs/client/src/components/configure.jsx

@@ -11,40 +11,64 @@ import * as microsoftTeams from "@microsoft/teams-js";
 const Configure = props => {
 
     const handleChange = (e, props) => {
-        if(props.value==='1'){
-            microsoftTeams.app.initialize().then(() => {
-                microsoftTeams.app.notifySuccess();
-                microsoftTeams.pages.config.registerOnSaveHandler(function (saveEvent) {
-                    microsoftTeams.pages.config.setConfig({
-                        entityID: "ChannelNotification",
-                         // passing pageId to Selected channel/team notifications component with route url.
-                        contentUrl: `${window.location.origin}/channel/1`,
-                        suggestedTabName: "Channel Notification",
-                        websiteUrl: `${window.location.origin}/channel/1`,
+
+        switch (props.value) {
+            case '1':
+                microsoftTeams.app.initialize().then(() => {
+                    microsoftTeams.app.notifySuccess();
+                    microsoftTeams.pages.config.registerOnSaveHandler(function (saveEvent) {
+                        microsoftTeams.pages.config.setConfig({
+                            entityID: "ChannelNotification",
+                            // passing pageId to Selected channel/team notifications component with route url.
+                            contentUrl: `${window.location.origin}/channel/1`,
+                            suggestedTabName: "Channel Notification",
+                            websiteUrl: `${window.location.origin}/channel/1`,
+                        });
+                        saveEvent.notifySuccess();
                     });
-                    saveEvent.notifySuccess();
+                    microsoftTeams.pages.config.setValidityState(true);
                 });
-                microsoftTeams.pages.config.setValidityState(true);
-            });
-        }
-        else{
-            microsoftTeams.app.initialize().then(() => {
-                microsoftTeams.app.notifySuccess();
-                microsoftTeams.pages.config.registerOnSaveHandler(function (saveEvent) {
-                    microsoftTeams.pages.config.setConfig({
-                        entityID: "TeamNotification",
-                         // passing pageId to Selected channel/team notifications component with route url.
-                        contentUrl: `${window.location.origin}/team/2`,
-                        suggestedTabName: "Team Notification",
-                        websiteUrl: `${window.location.origin}/team/2`,
+                break;
+            case '2':
+                microsoftTeams.app.initialize().then(() => {
+                    microsoftTeams.app.notifySuccess();
+                    microsoftTeams.pages.config.registerOnSaveHandler(function (saveEvent) {
+                        microsoftTeams.pages.config.setConfig({
+                            entityID: "TeamNotification",
+                            // passing pageId to Selected channel/team notifications component with route url.
+                            contentUrl: `${window.location.origin}/team/2`,
+                            suggestedTabName: "Team Notification",
+                            websiteUrl: `${window.location.origin}/team/2`,
+                        });
+
+                        saveEvent.notifySuccess();
+                    });
+                    microsoftTeams.pages.config.setValidityState(true);
+                });
+                break;
+
+            case '3':
+                microsoftTeams.app.initialize().then(() => {
+                    microsoftTeams.app.notifySuccess();
+                    microsoftTeams.pages.config.registerOnSaveHandler(function (saveEvent) {
+                        microsoftTeams.pages.config.setConfig({
+                            entityID: "GraphNotifications",
+                            // passing pageId to Selected channel/team notifications component with route url.
+                            contentUrl: `${window.location.origin}/subscription/3`,
+                            suggestedTabName: "Graph Notification",
+                            websiteUrl: `${window.location.origin}/subscription/3`,
+                        });
+
+                        saveEvent.notifySuccess();
                     });
-
-                    saveEvent.notifySuccess();
+                    microsoftTeams.pages.config.setValidityState(true);
                 });
-                microsoftTeams.pages.config.setValidityState(true);
-            });
+                break;
+            default:
+            // code 
         }
     };
+
     return (
         <div>
             <Text size="larger" weight="semibold" content="Team and Channel Subscription" /><br />
@@ -62,8 +86,13 @@ const Configure = props => {
                         label: 'Team Subscription',
                         value: '2',
                     },
+                    {
+                        key: '3',
+                        label: 'GraphNotifications',
+                        value: '3',
+                    },
                 ]}
-            /> 
+            />
             <Text size="small" content="Please click save button to proceed." weight="semibold" />
         </div>
     );