Exercício – Alterar o comportamento dos componentes usando atributos

  • 2 minutos

Neste exercício, você aprenderá a usar atributos com componentes Microsoft Graph Toolkit para personalizar a saída do componente em seu aplicativo.

Antes de começar

Conclua as etapas a seguir como pré-requisitos para este exercício.

1. Configurar uma aplicação Microsoft Entra

Para esse módulo, você precisará de um aplicativo com as seguintes configurações:

  • Nome: Meu aplicativo
  • Plataforma: SPA (aplicativo de página única)
  • Tipos de conta suportados: contas em qualquer diretório organizacional (qualquer diretório do Microsoft Entra - Multi-inquilino) e contas Microsoft pessoais (por exemplo, Skype, Xbox)
  • UrIs de redirecionamento: http://localhost:3000

Para criar esse aplicativo, siga estas etapas:

  1. No browser, aceda ao centro de administração do Microsoft Entra, inicie sessão e aceda a Microsoft Entra ID.

  2. Selecione Registros de aplicativo no painel esquerdo e selecione Novo Registro.

    Captura de tela que mostra a seleção de Novo registro para criar um novo registro de aplicativo.

  3. Na tela Registrar um aplicativo, insira os seguintes valores:

    • Nome: insira o nome do seu aplicativo.
    • Tipos de conta suportados: selecione Contas em qualquer diretório organizacional (Qualquer diretório do Microsoft Entra - Multi-inquilino) e contas Microsoft pessoais (por exemplo, Skype, Xbox).
    • URI de redirecionamento (opcional): selecione Aplicativo de página única (SPA) e digite http://localhost:3000.
    • Selecione Registrar.

    Captura de ecrã que mostra o registo da sua aplicação no Microsoft Entra ID.

2. Configurar o ambiente

  1. Crie uma pasta na área de trabalho chamada customize-mgt.

  2. Abra a personalizar-mgt pasta no Visual Studio Code.

  3. No Visual Studio Code, crie um arquivo chamado index.html na pasta customize-mgt.

  4. Copie o código a seguir para index.html. Substitua pelo YOUR-CLIENT-IDID de Aplicação (cliente) copiado da sua aplicação Microsoft Entra que foi criada anteriormente.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

  5. Adicione uma pasta chamada .vscode na raiz da pasta do projeto.

  6. Adicione um arquivo chamado settings.json na pasta .vscode. Copie e cole o código a seguir no settings.jsone salve o arquivo.

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

Usar atributos para alterar o comportamento do componente Agenda

Vários atributos diferentes estão disponíveis para o componente Agenda. Vamos examinar alguns atributos e ver como eles podem ser usados para alterar o comportamento do componente Agenda:

  • O data atributo pode ser usado para definir a data de início dos eventos.

  • O dias atributo pode ser usado para exibir uma lista de eventos para um número específico de dias.

  • O grupo por dia atributo pode ser usado para listar eventos no dia relacionado e na data exibida.

    <mgt-agenda
  date="June 27, 2023"
  days="3"
  group-by-day>
</mgt-agenda>

Adicione esses atributos ao componente mgt-agenda existente no index.html. A versão final do index.html será semelhante a este exemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
      <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>

    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>

    <mgt-agenda
        date="June 27, 2023"
        days="3"
        group-by-day>
    </mgt-agenda>

  </body>
</html>

Testar seu aplicativo no navegador

  1. Se esta for a primeira vez que você usa seu locatário Microsoft 365 desenvolvedor, talvez você não tenha eventos no calendário da sua conta. Antes de começar a testar seu aplicativo, https://outlook.office.com/calendar e entre com sua conta de locatário Microsoft 365 desenvolvedor. Adicione eventos de exemplo em 9, 10 e 11 de março de 2022 em seu calendário.

  2. Na Visual Studio Code, selecione a seguinte combinação de teclas no Visual Studio Code e pesquise o Live Server:

    • Windows: CTRL+Shift+P
    • macOS: COMMAND+SHIFT+P

    Execute o Live Server para testar seu aplicativo.

  3. Abra o navegador e vá para http://localhost:3000. Se tiver o ficheiro index.html aberto quando iniciar o Live Server, o browser abrirá http://localhost:3000/Index.html. Certifique-se de que altera o URL para http://localhost:3000, antes de iniciar sessão com a sua conta de programador do Microsoft 365. Se não atualizar o URL, obterá o seguinte erro.

    The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

  4. Entre com sua conta Microsoft 365 desenvolvedor. Consenta com as permissões necessárias e selecione Aceitar.

  5. Os próximos três dias de eventos de calendário serão exibidos e agrupados por dia, a partir de 9 de março de 2021.

Microsoft Graph componente agenda do Kit de Ferramentas com atributos.