上一個

下一個

Exercise - Add chat to a Teams tab app

Completed

In this exercise, you'll create a new Teams app project that contains a tab. You'll use Teams Toolkit for Visual Studio Code and learn how to integrate chat into a tab by using the Teams JavaScript client library.

Note

The exercises in this module use Teams Toolkit v5.0.0.

First, create the project:

1. Open Visual Studio Code.
2. On the Activity Bar, select the Microsoft Teams icon to open the Teams Toolkit pane.
3. On the Teams Toolkit pane, select Create a New App.
4. From the options,select Tab.

1. Next, select the React with Fluent UI.

   

2. On the Programming Language menu, select JavaScript.

3. On the Workspace folder menu, select Default folder.

4. For Application name, enter Teams Tab with Chat and select the Enter key.

Teams Toolkit creates the project and source code files. You can view the project and source code files in Explorer in Visual Studio Code.

Now, run your tab for the first time.

1. On the Activity Bar, select the Debug icon.

2. On Run and Debug, select either Chrome or Edge as the browser to use to debug your app. Then select the Run button or select the F5 key to start the debug session.

Note

Remember to close your debug session after you finish this exercise. In Visual Studio Code, select Run > Stop Debugging or select Shift+F5 to stop the debug session. Or you can simply close the browser that opened when the application started.

Note

If you have not yet signed in to your Microsoft 365 tenant, a prompt appears. Select Sign In and complete the steps to sign in and authenticate Teams Toolkit with your Microsoft 365 tenant.

Teams Toolkit deploys, configures, and starts all required components. The toolkit also opens a browser window, and it goes to the Microsoft Teams website.

In the Teams app installation dialog, select the Add button to install the app as a personal app.

That's it! Your app is installed, it's running in Microsoft Teams, and it's ready to enhance the user experience in your app.

Next, you'll integrate chat into the tab.

In Visual Studio Code, open the src/components/Tab.jsx file. Replace the contents of the file with this code snippet:

import { useContext } from "react"; 
import { TeamsFxContext } from "./Context"; 
import { Button } from "@fluentui/react-northstar";
import "./sample/Welcome.css";   

export default function Tab() { 
  const { themeString } = useContext(TeamsFxContext);  
  return ( 
    <div className={themeString === "default" ? "" : "dark"}> 
      <div className="welcome page"> 
        <div className="narrow page-padding">
          <h1 className="center">Chat</h1> 
          <div className="sections"> 
            <div className="center"> 
              <Button primary>Start Chat</Button> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  ); 
} 

Save the file and view the changes in your open browser window.

You don't need to refresh the browser to see the changes you made to your code. Teams Toolkit has a hot reload feature that applies your changes while your app is running.

Now let's implement the functionality behind the Start Chat button.

Return to Visual Studio Code. In the src/components/Tab.jsx file, at the top of the file, import the app, people, and chat capabilities from the Teams JavaScript client library:

import { app, people, chat } from "@microsoft/teams-js"; 

In the Tab function, after the themeString constant declaration, create an asynchronous function called startChat:

const { themeString } = useContext(TeamsFxContext); 
const startChat = async () => { 
    await app.initialize(); 
    const context = await app.getContext(); 
    if (people.isSupported() && chat.isSupported()) { 
        const peoplePickerResults = await people.selectPeople();
        const users = peoplePickerResults.map(p => p.email); 
        await chat.openGroupChat({ 
            users, 
            topic: "The Dream Team", 
            message: `Teamwork makes the dream work! Let's use this chat to collaborate on our project. Chat created using TeamsJS in the ${context.app.host.name} ${context.app.host.clientType} client.`, 
        }); 
      } 
  } 
return ();

Finally, add an onClick event handler to the button to execute the startChat() function when the user selects the button.

<Button primary onClick={() => startChat()}>Start Chat</Button> 

Save the file and view your open browser window.

Select the Start Chat button to open the people picker dialog. Search for and then select one or more users by entering their names in the search box. Select the Done button to confirm your selection.

A new draft of Microsoft Teams chat is created, with the name The Dream Team. The text you set in JavaScript appears in the message compose box: Teamwork makes the dream work! Let's use this chat to collaborate on our project. Chat created using TeamsJS in the Teams web client.

Send the message to initialize the chat.

A chat is created. The participants that you selected in the people picker dialog are added to the chat and the chat title is updated.

Continue