Create new samples for tab-channel-group (nodejs) #1709

Mohammed-MSFT · 2025-06-27T06:50:04Z

No description provided.

…ews.

Copilot

Pull Request Overview

This pull request implements a Node.js conversion of the C# Adaptive Card User Specific Views bot sample, expanding the Teams sample collection to include cross-platform support. The conversion demonstrates user-specific views in Adaptive Cards within Microsoft Teams using Action.Execute and auto-refresh capabilities for dynamic, personalized content.

Key Changes:

Complete Node.js implementation of adaptive card user-specific views functionality
Microsoft 365 Agents Toolkit integration for streamlined development workflow
Comprehensive sample configuration and documentation for Teams development

Reviewed Changes

Copilot reviewed 72 out of 121 changed files in this pull request and generated 7 comments.

File	Description
samples/tab-channel-group/nodejs/*	Complete Node.js tab implementation with React components and routing
samples/bot-conversation-quickstart/csharp/*	C# bot quickstart sample with M365 Agents Toolkit integration
samples/bot-adaptivecards-user-specific-views/nodejs/*	Node.js adaptive cards bot with user-specific view capabilities
README.md	Updated sample listing to include new Node.js adaptive cards implementation

Copilot · 2025-07-16T04:42:17Z

samples/tab-channel-group/nodejs/src/components/Tab.js

+                ? "/images/IconGray.png"
+                : selectedColor === "red"
+                  ? "/Images/IconRed.png"
+                  : "/Images/TeamsIcon.png"


The image paths have inconsistent casing. Line 67 uses "/images/IconGray.png" while TabConfig.js uses "/images/iconGray.png" (lowercase 'i'). This inconsistency could cause broken images on case-sensitive file systems.

Suggested change

? "/images/IconGray.png"

: selectedColor === "red"

? "/Images/IconRed.png"

: "/Images/TeamsIcon.png"

? "/images/icongray.png"

: selectedColor === "red"

? "/images/iconred.png"

: "/images/teamsicon.png"

Corrected and fixed

Copilot · 2025-07-16T04:42:17Z

samples/tab-channel-group/nodejs/src/components/Tab.js

+              selectedColor === "gray"
+                ? "/images/IconGray.png"
+                : selectedColor === "red"
+                  ? "/Images/IconRed.png"


The image path uses "/Images/IconRed.png" with capital 'I' in 'Images', which is inconsistent with other references that use lowercase 'images'. This could cause broken images on case-sensitive file systems.

Suggested change

? "/Images/IconRed.png"

? "/images/IconRed.png"

Copilot · 2025-07-16T04:42:17Z

samples/tab-channel-group/nodejs/src/components/Tab.js

+                  ? "/Images/IconRed.png"
+                  : "/Images/TeamsIcon.png"


The image path uses "/Images/TeamsIcon.png" with capital 'I' in 'Images', which is inconsistent with other references that use lowercase 'images'. This could cause broken images on case-sensitive file systems.

Suggested change

? "/Images/IconRed.png"

: "/Images/TeamsIcon.png"

? "/images/IconRed.png"

: "/images/TeamsIcon.png"

Copilot · 2025-07-16T04:42:18Z

samples/tab-channel-group/nodejs/src/components/Gray.js

+    return (
+      <div>
+        <h1>Success!</h1>
+        <img id="icon" src="/images/IconGray.png" alt="Red Image" style={{ width: "100px" }} />


The alt text says "Red Image" but this is displaying a gray icon. The alt text should accurately describe the image content for accessibility.

Suggested change

<img id="icon" src="/images/IconGray.png" alt="Red Image" style={{ width: "100px" }} />

<img id="icon" src="/images/IconGray.png" alt="Gray Icon" style={{ width: "100px" }} />

Copilot · 2025-07-16T04:42:18Z

samples/tab-channel-group/nodejs/src/components/TabWrapper.js

+  const gray = "Tab.js says: 'You chose Gray!";
+  const red = "Tab.js says: 'You chose Red!";


The string has an unmatched single quote. It starts with a single quote but doesn't close it properly, which could lead to syntax issues.

Suggested change

const gray = "Tab.js says: 'You chose Gray!";

const red = "Tab.js says: 'You chose Red!";

const gray = "Tab.js says: 'You chose Gray!'";

const red = "Tab.js says: 'You chose Red!'";

Copilot · 2025-07-16T04:42:18Z

samples/tab-channel-group/nodejs/src/components/TabWrapper.js

+  const gray = "Tab.js says: 'You chose Gray!";
+  const red = "Tab.js says: 'You chose Red!";


The string has an unmatched single quote. It starts with a single quote but doesn't close it properly, which could lead to syntax issues.

Suggested change

const gray = "Tab.js says: 'You chose Gray!";

const red = "Tab.js says: 'You chose Red!";

const gray = "Tab.js says: 'You chose Gray!'";

const red = "Tab.js says: 'You chose Red!'";

Copilot · 2025-07-16T04:42:18Z

samples/tab-channel-group/nodejs/src/index.js

+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './components/App';
+ReactDOM.render(
+
+        <App />
+        , document.getElementById('root')


ReactDOM.render is deprecated in React 18. Consider using createRoot from 'react-dom/client' instead for better performance and future compatibility.

Suggested change

import ReactDOM from 'react-dom';

import './index.css';

import App from './components/App';

ReactDOM.render(

<App />

, document.getElementById('root')

import { createRoot } from 'react-dom/client';

import './index.css';

import App from './components/App';

const root = createRoot(document.getElementById('root'));

root.render(

<App />

Pawank-MSFT

please correct the PR feedbacks

README.md

samples/bot-conversation-quickstart/csharp/M365Agent/build/aad.manifest.local.json

…eams SDK.

….com/OfficeDev/Microsoft-Teams-Samples into v-mfurquan/Harsh-Sample-Conversion-1

Pawank-MSFT

Just fix image issue, Rest is ok! Approving please fix before merge.

samples/tab-channel-group/nodejs/README.md

Pawank-MSFT · 2026-01-02T13:18:16Z

samples/tab-channel-group/nodejs/README.md

+
+![GreyTab](Images/GreyTab.png)
+
+![Redconfigure](Images/Redconfigure.png)


Redconfigure.png not available

All images are available; it will display after merge I guess !

Harikrishnan-MSFT · 2026-01-07T07:18:38Z

https://github.com/OfficeDev/Microsoft-Teams-Samples/actions/runs/20773574865

Mohammed-MSFT added 2 commits June 27, 2025 12:19

Harsh - CSharp to Nodejs Conversion Bot Adaptivecard User Specific Vi…

e9cc2b8

…ews.

PR Updated with Main Readme and Images

f3018de

Harikrishnan-MSFT requested a review from Copilot July 1, 2025 07:07

This comment was marked as outdated.

Sign in to view

Mohammed-MSFT added 2 commits July 3, 2025 15:43

Added BotConversationQuickStart Sample to this PR

65acc6a

Added Sample Tab Channel Group Nodejs Version

5eb782c

Harikrishnan-MSFT requested a review from Copilot July 16, 2025 04:41

Copilot AI reviewed Jul 16, 2025

View reviewed changes

Pawank-MSFT reviewed Jul 21, 2025

View reviewed changes

README.md Show resolved Hide resolved

samples/bot-conversation-quickstart/csharp/M365Agent/build/aad.manifest.local.json Outdated Show resolved Hide resolved

PR Comment Fixed

65833b4

Harikrishnan-MSFT changed the title ~~Harsh - C# to Nodejs Conversion Bot Adaptive Card User Specific Views~~ Create new samples for bot-adaptivecards-user-specific-views (Node.js) and bot-conversation-quickstart (C#) and tab-channel-group (nodejs) Aug 20, 2025

Mohammed-MSFT and others added 3 commits October 3, 2025 16:48

Ayush Tested and Verified Changes Pushed To This PR

7bd2130

Updated Latest Code

58978d4

Both sample SDKs are deprecated. We are creating a new PR using the T…

a9eed4e

…eams SDK.

Harikrishnan-MSFT changed the title ~~Create new samples for bot-adaptivecards-user-specific-views (Node.js) and bot-conversation-quickstart (C#) and tab-channel-group (nodejs)~~ Create new samples for tab-channel-group (nodejs) Dec 30, 2025

YugalPradhan31 added 2 commits December 30, 2025 15:26

Updated build pipeline also update Readme

cb508d6

Merge branch 'v-mfurquan/Harsh-Sample-Conversion-1' of https://github…

edd15de

….com/OfficeDev/Microsoft-Teams-Samples into v-mfurquan/Harsh-Sample-Conversion-1

AjayJ12-MSFT approved these changes Jan 2, 2026

View reviewed changes

Pawank-MSFT approved these changes Jan 2, 2026

View reviewed changes

Harikrishnan-MSFT merged commit 9e3011e into main Jan 7, 2026
295 checks passed

	<img id="icon" src="/images/IconGray.png" alt="Red Image" style={{ width: "100px" }} />
	<img id="icon" src="/images/IconGray.png" alt="Gray Icon" style={{ width: "100px" }} />

		const gray = "Tab.js says: 'You chose Gray!";
		const red = "Tab.js says: 'You chose Red!";


		![GreyTab](Images/GreyTab.png)

		![Redconfigure](Images/Redconfigure.png)

Create new samples for tab-channel-group (nodejs) #1709

Create new samples for tab-channel-group (nodejs) #1709

Uh oh!

Conversation

Mohammed-MSFT commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes:

Reviewed Changes

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Pawank-MSFT left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Pawank-MSFT left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Harikrishnan-MSFT commented Jan 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Mohammed-MSFT commented Jun 27, 2025 •

edited

Loading