Criar uma guia de canal para o Microsoft TeamsCreate a channel tab for Teams

Neste tutorial, você criará uma guia canalbásico, uma página de conteúdo de tela inteira para um canal de equipe ou chat.In this tutorial, you'll build a basic channel tab, a full-screen content page for a team channel or chat. Ao contrário de uma guia pessoal, os usuários podem configurar alguns aspectos de uma guia de canal (por exemplo, renomear a guia de forma que ela seja significativa para o canal).Unlike a personal tab, users can configure some aspects of a channel tab (for example, rename the tab so it's meaningful to their channel).

Antes de começarBefore you begin

Você precisa de um aplicativo básico em execução para começar.You need a basic running app to get started. Se você não tiver um, siga as instruções em Compilar e execute o primeiro aplicativo do Microsoft Teams.If you don't have one, follow the instructions at build and run your Teams first app. Ao criar seu projeto de aplicativo, escolha somente a opção de guia canal ou grupo Teams .When you create your app project, choose only the Group or Teams channel tab option.

Sua atribuiçãoYour assignment

Não há muito tempo, sua organização criou uma guia do teams com informações sobre como entrar em contato com funções importantes (Help Desk, HR, etc.).Not long ago, your organization created a Teams tab with information on how to contact important functions (help desk, HR, etc.). No entanto, como a guia era escopoda somente para uso pessoal, cada usuário deve instalar a guia para vê-la e a adoção é menor do que o esperado.However, since the tab was scoped only for personal use, each user must install the tab to see it and adoption is lower than expected. Em outras palavras, muitos trabalhadores ainda não sabem como alcançar o suporte técnico.In other words, too many workers still don't know how to reach the help desk.

Você pode facilitar a localização dessas informações criando uma guia de canal, o que removerá o ônus de exigir que todos instalem um aplicativo.You can make this information easier to find by building a channel tab, which will remove the burden of requiring everyone to install an app. Em vez disso, um usuário pode instalar a guia em um canal ou chat para o benefício de um grupo inteiro.Instead, one user can install the tab in a channel or chat for the benefit of an entire group.

O que você aprenderáWhat you'll learn

  • Identificar o manifesto do aplicativo e os componentes do scaffolding relevantes para as guias de canalIdentify the app manifest and scaffolding components relevant to channel tabs
  • Criar conteúdo para sua guiaCreate content for your tab
  • Criar conteúdo para a página de configuração de uma guiaCreate content for a tab's configuration page
  • Permitir que a guia seja configurada e instaladaAllow the tab to be configured and installed
  • Fornecer um nome de guia sugeridoProvide a suggested tab name

Identificar manifesto de aplicativo relevante e componentes do scaffoldingIdentify relevant app manifest and scaffolding components

Grande parte do aplicativo de guia canal scaffolding e manifesto é configurada automaticamente quando você cria seu projeto com o Teams Toolkit.Much of the channel tab app scaffolding and manifest is set up automatically when you create your project with the Teams Toolkit. Vamos examinar os principais componentes para criar uma guia canal.Let's look at the main components for building a channel tab.

Manifesto do aplicativoApp manifest

O trecho de código a seguir do manifesto de aplicativo mostra configurableTabs , que inclui as propriedades e os valores padrão relevantes para as guias de canal.The following snippet from the app manifest shows configurableTabs, which includes the properties and default values relevant to channel tabs.

    "configurableTabs": [
        {
            "configurationUrl": "{baseUrl0}/config",
            "canUpdateConfiguration": true,
            "scopes": [
                "team",
                "groupchat"
            ]
        }
    ],
  • configurationUrl: A URL do host para a página de configuração da guia (deve ser HTTPS).configurationUrl: The host URL for your tab configuration page (must be HTTPS).
  • canUpdateConfiguration: Se definido como true , os usuários podem alterar as configurações de tabulação, renomear a guia ou removê-la de um canal ou chat.canUpdateConfiguration: If set to true, users can change tab settings, rename the tab, or remove it from a channel or chat.
  • scopes: Especifica se os usuários podem instalar o aplicativo em canais ( team ) e chats ( groupchat ).scopes: Specifies if users can install the app in channels (team) and chats (groupchat). É necessário pelo menos um valor.At least one value is required.

Aplicativo scaffoldingApp scaffolding

O aplicativo scaffolding fornece um TabConfig.js arquivo, localizado no src/components diretório do seu projeto, para renderizar a página de configuração da guia (mais sobre isso em breve).The app scaffolding provides a TabConfig.js file, located in the src/components directory of your project, for rendering your tab's configuration page (more on this soon).

Criar seu conteúdo de guiaCreate your tab content

Abra o manifesto do aplicativo ( manifest.json ) e defina as propriedades a seguir no staticTabs , que define a página de conteúdo da guia.Open your app manifest (manifest.json) and set the following properties in staticTabs, which defines your tab's content page.

    "staticTabs": [
        {
            "entityId": "index",
            "name": "My Contacts",
            "contentUrl": "{baseUrl0}/tab",
            "scopes": [ "personal" ]
        }
    ],

Copie e atualize o trecho de código a seguir, com informações relevantes para a sua organização ou, para fins de tempo, use o código como está.Copy and update the following snippet with information that's relevant to your organization or, for the sake of time, use the code as is.

  <div>
    <h1>Important Contacts</h1>
      <ul>
        <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
        <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
        <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
      </ul>
  </div>

Vá para o src/components diretório e abra Tab.js .Go to the src/components directory and open Tab.js. Localize a render() função e cole o conteúdo dentro return() (conforme mostrado).Locate the render() function and paste your content inside return() (as shown).

  render() {

      let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";

      return (
      <div>
        <h1>Important Contacts</h1>
          <ul>
            <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
            <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
            <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
          </ul>
      </div>
      );
  }

Adicione a regra a seguir para App.css que os links de email sejam mais fáceis de ler, independentemente de qual tema é usado.Add the following rule to App.css so the email links are easier to read no matter which theme is used.

  a {
    color: inherit;
  }

Criar a página de configuração da guiaCreate your tab configuration page

Cada guia de canal tem uma página de configuração, modal com pelo menos uma opção de configuração que é exibida ao instalar o aplicativo.Every channel tab has a configuration page, a modal with at least one setup option that displays when installing the app. A página de configuração, por padrão, pergunta aos usuários se eles desejam notificar o canal ou chat quando a guia é instalada.The configuration page by default asks users if they want to notify the channel or chat when the tab is installed.

Adicione algum conteúdo à sua página de configuração.Add some content to your configuration page. Vá para o diretório do seu projeto src/components , abra TabConfig.js e insira algum conteúdo dentro return() (conforme mostrado).Go to your project's src/components directory, open TabConfig.js, and insert some content inside return() (as shown).

    return (
        <div>
          <h1>Add My Contoso Contacts</h1>
          <div>
            Select <b>Save</b> to add our organization's important contacts to this workspace.
          </div>
        </div>
    );

Dica

No mínimo, forneça algumas breves informações sobre o aplicativo nesta página, pois essa pode ser a primeira vez que os usuários estão aprendendo.At minimum, provide some brief information about your app on this page since this may be the first time users are learning about it. Você também pode incluir opções de configuração personalizada ou um fluxo de trabalho de autenticação, que é comum nas páginas de configuração da guia.You also could include custom configuration options or an authentication workflow, which is common on tab configuration pages.

Permitir que a guia seja configurada e instaladaAllow the tab to be configured and installed

Para que os usuários configurem e instalem com êxito a guia canal, você deve adicionar a URL de host que você configurou ao criar e executar seu primeiro aplicativo no componente da página de configuração.For users to successfully configure and install the channel tab, you must add the host URL you set up when creating and running your first app to the configuration page component.

Vá para TabConfig.js e localize microsoftTeams.settings.setSettings .Go to TabConfig.js and locate microsoftTeams.settings.setSettings. Para "contentUrl" , substitua a localhost:3000 parte da URL pelo domínio em que você está hospedando o conteúdo da guia (conforme mostrado).For "contentUrl", replace the localhost:3000 part of the URL with the domain where you're hosting the tab content (as shown).

    microsoftTeams.settings.setSettings({
      "contentUrl": "https://<MY_HOST_DOMAIN>/tab"
    });

Além disso, certifique-se de que microsoftTeams.settings.setValidityState(true); .Also, make sure that microsoftTeams.settings.setValidityState(true);. Ele é, por padrão, se definido como false , o botão salvar está desabilitado na página de configuração.It is by default, but if set to false, the Save button is disabled on the configuration page.

Fornecer um nome de guia sugeridoProvide a suggested tab name

Quando você instala uma guia para uso pessoal, o nome para exibição é a name Propriedade na staticTabs parte do manifesto do aplicativo (por exemplo, meus contatos).When you install a tab for personal use, the display name is the name property in the staticTabs portion of of the app manifest (for example, My Contacts). Quando você instala uma guia canal, por padrão, o nome do aplicativo é exibido (por exemplo, First-app).When you install a channel tab, by default the app name displays (for example, first-app).

Isso pode ser bem, dependendo do que você chama no seu aplicativo, mas talvez você queira fornecer um nome que faça mais sentido no contexto de colaboração de grupo (por exemplo, contatos da equipe).This may be fine depending on what you call your app, but you may want to provide a name that makes more sense in the context of group collaboration (for example, Team Contacts).

No TabConfig.js , volte para microsoftTeams.settings.setSettings .In TabConfig.js, go back to microsoftTeams.settings.setSettings. Adicione a suggestedDisplayName propriedade com o nome da guia que você deseja exibir por padrão (conforme mostrado).Add the suggestedDisplayName property with the tab name you want to display by default (as shown). Use o nome fornecido ou crie o seu próprio.Use the provided name or create your own. Lembre-se, no manifesto, de que você está permitindo que os usuários alterem o nome se desejarem.Remember, in the manifest you're allowing users to change the name if they want.

    microsoftTeams.settings.setSettings({
      "contentUrl": "https://<MY_HOST_DOMAIN>/tab",
      "suggestedDisplayName": "Team Contacts"
    });

Exibir a guia canalView the channel tab

Para ver as páginas de configuração e conteúdo da guia canal, você deve instalá-lo em um canal ou chat.To see your channel tab's configuration and content pages, you must install it in a channel or chat.

  1. No cliente do Microsoft Teams, selecione aplicativos.In the Teams client, select Apps.
  2. Selecione carregar um aplicativo personalizado e escolha o seu aplicativo Development.zip .Select Upload a custom app and choose your app's Development.zip.
  3. Escolha Adicionar a uma equipe ou Adicionar a um chat e localize um canal ou chat que você possa usar para teste.Choose Add to a team or Add to a chat and locate a channel or chat you can use for testing.
  4. Selecione Configurar uma guia. A página de configuração é exibida.Select Set up a tab. The configuration page displays.

Captura de tela de exemplo de uma página de configuração da guia canal

Depois de selecionar salvar para configurar a guia, o conteúdo é exibido.Once you select Save to configure the tab, the content displays.

Captura de tela de exemplo de uma guia de canal com conteúdo estático

Muito bemWell done

Parabéns!Congratulations! Você tem um aplicativo Teams com uma guia de canal para exibir conteúdo útil em canais e chats.You have a Teams app with a channel tab for displaying useful content in channels and chats.

Saiba maisLearn more