Criar uma experiência me no Microsoft Teams

O Microsoft Teams é o hub de colaboração. É onde você encontra seus colegas, onde você troca ideias e onde trabalha juntos em arquivos. É onde você pode abrir os aplicativos da sua organização sem sair do contexto do seu trabalho. É também onde você conhece seus parceiros de negócios.

O Microsoft Teams se concentra no trabalho em equipe. Usando suas funcionalidades de extensibilidade, você pode estendê-la para colocar seus colegas no centro e oferecer a eles um lugar central para iniciar seu dia de trabalho e se preparar para o dia.

Este artigo apresenta um cenário de exemplo de como estender o Microsoft Teams usando Estrutura do SharePoint para oferecer aos seus colegas uma experiência me onde eles podem começar o dia e ver suas informações pessoais.

Nas seções a seguir, apresentamos algumas maneiras de implementar uma experiência me no Microsoft Teams usando Estrutura do SharePoint e, para cada uma, mencionamos seus benefícios e considerações para você considerar.

Insira uma página moderna do SharePoint

Recentemente, o SharePoint Online introduziu a capacidade de inserir páginas modernas do SharePoint no Microsoft Teams. Usando esse recurso, você pode criar uma página moderna do SharePoint com várias web parts Estrutura do SharePoint que mostram informações personalizadas para o usuário atual, como documentos recentes ou reuniões futuras.

Depois que a página estiver pronta, no Microsoft Teams, você criará um aplicativo pessoal apontando para a página do SharePoint.

Cuidado

Ao inserir uma página moderna do SharePoint no Teams, você não deve usar a URL da página, pois ela não funcionará no aplicativo do Teams da área de trabalho. Em vez disso, use uma URL especial apontando para a teamslogon.aspx página.

Para melhorar a experiência, você habilitaria mostrar a página em tela inteira, que removerá o cabeçalho e a navegação permitindo que os usuários se concentrem no conteúdo.

Vantagens de inserir páginas do SharePoint como guias

Criar a experiência me no Microsoft Teams usando uma página moderna do SharePoint é a maneira mais fácil de oferecer aos usuários um painel personalizado no Microsoft Teams. A seguir estão alguns benefícios notáveis de usar essa abordagem.

Nenhum código necessário

Essa abordagem usa recursos padrão de edição de página do SharePoint e, supondo que você tenha as Web Parts necessárias disponíveis, não requer nenhum código personalizado.

Apresentar informações usando recursos padrão de edição de página do SharePoint

Ao criar a página do SharePoint do painel, você pode usar todos os recursos de página, como colunas verticais ou horizontais, seções realçadas ou web parts de largura total para definir os diferentes elementos em uma página de forma significativa. Além disso, se as web parts que você usa forem configuráveis, você poderá ajustá-las às suas necessidades específicas.

Combinar informações de fontes diferentes

Usando uma combinação de web parts, você pode combinar informações verdadeiramente pessoais, como emails, reuniões ou os documentos em que a pessoa trabalhou recentemente, com outras informações provenientes da organização, mas, no entanto, relevantes para a pessoa com base em sua função ou região.

Também não importa se as web parts que você colocou na página são fornecidas pela Microsoft ou criadas pela sua organização e se elas são implantadas em uma única ou várias soluções.

Empacotar e distribuir aplicativo em sua organização sem código

Para oferecer a experiência me criada dessa forma para seus usuários, você o empacotaria como um aplicativo pessoal do Teams. Usando o App Studio, você pode criar o aplicativo pessoal e publicá-lo no catálogo organizacional para todos os outros usarem.

Considerações sobre como inserir páginas do SharePoint como guias

Embora usar páginas modernas do SharePoint seja a maneira mais fácil de oferecer aos usuários um painel personalizado no Microsoft Teams, ele vem com algumas considerações que você deve considerar antes de usar essa abordagem.

Específico para sua organização

O aplicativo pessoal que oferece a experiência me com base em uma página do SharePoint aponta para uma URL específica em seu ambiente do SharePoint. Como é específico para seu locatário, ele não é adequado para uso por outras organizações.

A mesma página para todos

Para manter as coisas simples para seus usuários, você criaria uma única página do SharePoint que serviria como um painel e, em seguida, o exporia como um aplicativo pessoal do Teams. Embora as web parts na página mostrassem informações personalizadas (meus emails, minhas reuniões, meus documentos), os elementos na página seriam os mesmos para todos. Os usuários não seriam capazes de configurar para si mesmos quais informações gostariam de ver ou quantos itens as diferentes web parts devem mostrar. O layout e a configuração de elementos na página seriam os mesmos para todos.

Quando está inserindo páginas do SharePoint recomendadas

Essa abordagem é ideal para organizações que desejam oferecer aos seus usuários uma experiência me no Microsoft Teams com o menor esforço e desenvolvimento personalizado possível.

Criar um aplicativo do Teams pessoal de várias guias

Outra abordagem para oferecer aos usuários uma experiência me no Microsoft Teams usando Estrutura do SharePoint é criando um aplicativo do Teams pessoal de várias guias.

Os aplicativos do Personal Teams podem consistir em uma ou mais guias. Cada guia aponta para uma URL diferente. Ao criar um aplicativo pessoal do Teams usando Estrutura do SharePoint, você pode fazer com que cada guia aponte para uma web part Estrutura do SharePoint. Combinando web parts relevantes em um único aplicativo pessoal do Teams, você pode oferecer aos usuários um único lugar para acessar informações relevantes.

Nessa abordagem, você começaria colocando todas as web parts que deseja expor em um projeto Estrutura do SharePoint.

Em seguida, você atualizaria o manifesto do Teams, fazendo referência às diferentes web parts como guias para o aplicativo pessoal, por exemplo:

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    {
      "entityId": "com.contoso.my.meetings",
      "name": "Meetings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.mail",
      "name": "Mail",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.files",
      "name": "Files",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Importante

Verifique se as web parts que você deseja expor no aplicativo pessoal do Teams têm em seu manifesto, na propriedade o supportedHostsTeamsPersonalApp valor especificado.

Para permitir que os usuários configurem web parts expostas nas diferentes guias, você pode criar uma Web Part de Configurações separada e expô-la como uma guia.

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  "packageName": "MyContoso",
  "id": "e81a1b68-686e-412f-90ac-cb80f2544398",
  // ... trimmed for readability
  "staticTabs": [
    // ... trimmed for readability
    {
      "entityId": "com.contoso.my.settings",
      "name": "Settings",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}",
      "scopes": [
        "personal"
      ]
    }
  ],
  // ...trimmed for readability
}

Vantagens de criar aplicativos do Teams pessoais de várias guias

Criar a experiência me como um aplicativo do Teams pessoal de várias guias requer algum trabalho de desenvolvimento. Em troca, oferece mais benefícios relacionados à personalização e distribuição da solução.

Configuração específica do usuário

Os usuários instalam aplicativos pessoais do Teams e podem configurá-los para suas necessidades específicas. Ao criar a experiência me como um aplicativo pessoal do Teams e expor algumas opções de configuração, você pode permitir que os usuários especifiquem que tipo de informações eles gostariam de ver e como elas devem ser exibidas. Embora o conjunto de guias, os tipos de informações exibidos no aplicativo pessoal sejam corrigidos, seu conteúdo pode ser configurado por todos às suas necessidades específicas.

Empacotar como uma solução reutilizável

Aplicativos do Personal Teams criados usando Estrutura do SharePoint podem ser usados por várias organizações diferentes. Se a organização tiver o pacote Estrutura do SharePoint com web parts implantados em seu locatário, eles poderão instalar o aplicativo pessoal do Teams e usá-lo também. O Microsoft Teams ajustará automaticamente as URLs para que elas apontem para o locatário do SharePoint da organização.

Considerações sobre a criação de aplicativos do Teams pessoais de várias guias

Criar aplicativos do Teams pessoais de várias guias oferece mais flexibilidade no que diz respeito à personalização e distribuição da solução. No entanto, ele vem com algumas considerações que você deve considerar antes de usar essa abordagem.

Requer desenvolvimento personalizado

Em comparação com a criação de um painel usando uma página moderna do SharePoint e expondo-o como um aplicativo pessoal do Teams usando o App Studio, criar um aplicativo pessoal do Teams usando Estrutura do SharePoint requer desenvolvimento personalizado. A complexidade desse esforço dependerá muito da sua solução e do tipo de informação que você escolher expor.

Limitado a web parts personalizados

Ao criar aplicativos do Teams pessoais de várias guias, você só pode apontar para web parts personalizados. Não há suporte para fazer referência à Web Part padrão fornecida pela Microsoft.

Todas as web parts devem estar no mesmo projeto

Embora não seja necessário, ter todas as web parts no mesmo projeto ajudará você a simplificar a manutenção de sua solução. Se as web parts forem armazenadas em vários projetos, isso custará mais esforço para manter suas referências e configuração ao longo do tempo.

Web Part personalizada necessária para expor configurações

Os aplicativos do Personal Teams não têm uma interface do usuário padrão para configurar configurações. Em vez disso, o padrão recomendado é expor as configurações em uma guia separada. O desenvolvedor está no controle da experiência do usuário dessa guia e pode ajustá-la para corresponder aos requisitos específicos do aplicativo.

Traduzir isso para Estrutura do SharePoint significa que você precisará criar uma Web Part separada que permita que os usuários configurem o aplicativo. A guia configurações pode expor a configuração de todas as outras guias para que os usuários possam configurar todo o aplicativo de um só lugar.

Implementar o armazenamento para a configuração do usuário

Os aplicativos do Personal Teams não oferecem nenhuma infraestrutura para persistir sua configuração. Cada aplicativo deve decidir por si mesmo como e onde ele persiste as preferências do usuário.

Embora Estrutura do SharePoint web parts tenham uma maneira padrão de persistir as configurações quando usadas nas páginas do SharePoint ou nas guias do Microsoft Teams, quando expostas como aplicativos pessoais do Teams, elas não podem usar essa infraestrutura. Em vez disso, você precisa escolher uma maneira de armazenar as preferências do usuário. Além disso, você precisa garantir que suas web parts possam recuperar sua configuração desse local.

Cada Web Part é uma guia separada

Ao criar aplicativos pessoais do Teams usando Estrutura do SharePoint, cada guia no aplicativo corresponde a uma Web Part. Dependendo da quantidade de informações que você deseja expor em sua experiência comigo, seu aplicativo pode acabar tendo muitas guias. Em vez de obter uma visão geral rapidamente, os usuários precisariam navegar até as diferentes guias para encontrar todas as informações necessárias.

Quando é recomendável criar aplicativos pessoais do Teams

Essa abordagem é adequada para organizações que têm desenvolvedores profissionais com experiência na criação de soluções Estrutura do SharePoint e desejam distribuir a experiência me para outras organizações ou o marketplace. Além disso, os usuários poderão usar o aplicativo desde que ele não exponha muitos tipos de informações (guias).

Combinar várias web parts em uma única guia de um aplicativo pessoal do Teams

Anteriormente, ao discutir a ideia de criar um aplicativo pessoal personalizado do Teams usando Estrutura do SharePoint, mencionamos que cada guia corresponde a uma Web Part. No contexto de uma experiência me, isso leva a uma experiência fragmentada e a muitas guias diferentes que os usuários precisam alternar para obter uma visão geral completa de seus dados.

Se você criar suas Web Parts usando React, poderá resolver essa deficiência combinando vários componentes de React raiz (o componente React que você referencia na classe web part) em uma única Web Part.

Para colocá-lo em prática, digamos que você tenha um projeto com as seguintes web parts: calendário pessoal, contatos pessoais, Email pessoais e tarefas pessoais. Por padrão, todas essas web parts seriam mapeadas para guias separadas em um aplicativo pessoal do Teams. Em vez disso, e se pudéssemos agrupá-los em uma única guia para fornecer uma exibição mais concisa das informações?

Para simplificar a experiência do usuário, você pode criar uma nova Web Part e ter sua referência de componente React raiz React componentes de cada uma dessas Web Parts, por exemplo:

import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import * as React from 'react';
import { IPlanningProps } from '.';
import PersonalCalendar from '../../personalCalendar/components/PersonalCalendar';
import { PersonalTasks } from '../../personalTasks/components';
import RecentlyUsedDocuments from '../../recentlyUsedDocuments/components/RecentlyUsedDocuments';
import styles from './Planning.module.scss';

export default class Planning extends React.Component<IPlanningProps, {}> {
  public render(): React.ReactElement<IPlanningProps> {
    return (
      <div className={styles.planning}>
        <WebPartTitle displayMode={this.props.displayMode}
          title='Planning'
          updateProperty={this.props.updateProperty} />
        <div className={styles.column}>
          <PersonalCalendar displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            title='Upcoming meetings'
            daysInAdvance={4}
            numMeetings={0}
            refreshInterval={5}
            updateProperty={this.props.updateProperty} />
        </div>
        <div className={styles.column}>
          <PersonalTasks displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            title='My tasks'
            showCompleted={false}
            userName={this.props.pageContext.user.loginName} />
        </div>
        <div className={styles.column}>
          <RecentlyUsedDocuments context={this.props.pageContext}
            title='My recent documents'
            displayMode={this.props.displayMode}
            graphClient={this.props.graphClient}
            updateProperty={this.props.updateProperty}
            nrOfItems={10} />
        </div>
      </div>
    );
  }
}

Essa Web Part de contêiner permite que você reutilize seu código existente sem duplicar. Além disso, você melhorará a experiência do usuário combinando informações relacionadas e diminuirá o número de guias diferentes expostas.

Vantagens de combinar várias web parts em uma única guia

A combinação de informações de várias web parts em uma única guia permite simplificar a experiência do usuário do seu aplicativo pessoal do Teams.

Agrupar informações relacionadas

A capacidade de reorganizar como as informações são apresentadas quando expostas em um aplicativo pessoal do Teams permite que você melhore a experiência do usuário. Ao colocar informações relacionadas ou semelhantes em uma única guia, você ajuda os usuários a examinar rapidamente o que é relevante para eles.

Agrupar informações relacionadas também reduz o número de guias diferentes exibidas no aplicativo pessoal, facilitando a navegação dos usuários entre as diferentes seções.

Controlar a experiência do usuário

Ao agrupar informações relacionadas, você criará novos componentes React e fará referência aos componentes existentes de dentro. Ao fazer isso, você tem o controle total de como as informações são apresentadas e pode considerar diferentes aspectos, como a importância das informações exibidas, sua relevância para o usuário, dispositivo, tamanho da tela etc.

Reutilizar o código existente

Quando você cria Estrutura do SharePoint Web Parts usando React, a funcionalidade principal da Web Part é encapsulada em um único componente React. Ao referenciar esse componente de outro componente, você pode reutilizar toda a funcionalidade sem precisar duplicar qualquer código. Essa capacidade oferece uma grande flexibilidade e permite que você crie um conjunto de blocos de construção reutilizáveis que podem ser compostos em web parts maiores ou aplicativos do Teams.

Considerações sobre o agrupamento de várias web parts em uma única guia

A combinação de várias web parts em uma única guia permite que você faça um melhor uso do conjunto de tela disponível e forneça ao usuário uma visão abrangente das informações relevantes. No entanto, há algumas considerações específicas que você deve levar em conta antes de escolher essa abordagem.

Combinar web parts requer esforço de desenvolvimento

Para combinar vários componentes React em uma única Web Part, você precisa ter uma compreensão adequada do Estrutura do SharePoint. Embora não seja mais complicado do que criar web parts usando React, você precisa entender como os diferentes componentes React, que você deseja integrar, funcionam para que você possa configurá-los corretamente.

Somente para web parts personalizados

Para integrar vários componentes React em uma única Web Part, você precisa ter acesso ao código-fonte deles. Neste momento, o código-fonte para web parts de primeiro partido não está disponível, o que significa que essa abordagem está limitada apenas a web parts de terceiros.

Quando está combinando várias web parts em uma única guia recomendada

Essa abordagem é recomendada sempre que você deseja oferecer aos usuários uma experiência avançada de Me apresentando informações de várias fontes diferentes. As informações exibidas são totalmente controladas pelo código que você possui. Seguindo essa abordagem, você também pode criar uma solução que pode ser distribuída para outras organizações diretamente ou por meio do marketplace.