Alterar a apresentação de dados usando modelos

Concluído

O Microsoft Graph Toolkit fornece suporte para a criação de modelos personalizados que podem alterar a forma como os dados são exibidos pelos componentes.

Suponha que você esteja planejando criar um aplicativo Web para mostrar eventos futuros para o usuário conectado. Para este projeto, em vez de usar a experiência padrão do componente logon do Microsoft Graph Toolkit, você vai modificar o botão conectado que mostra o perfil do usuário.

Você pode usar a modelagem do componente logon para alterar facilmente a apresentação do perfil do usuário conectado. Você também pode escolher os dados específicos a serem exibidos, como o nome de exibição do usuário, o nome fornecido, o cargo, o email ou o número de telefone.

Para adicionar modelagem aos componentes do Microsoft Graph toolkit, você pode usar o elemento <template> HTML. Por exemplo, você pode adicionar modelagem ao componente logon.

<mgt-login>
  <template>
  </template>
</mgt-login>

Definir uma parte do componente que você deseja modelo

Várias partes de dados estão disponíveis para modelo para cada componente. Você pode definir a parte que deseja modelo usando o atributo data-type no <template> elemento. Por exemplo, se você quiser modelo da parte do botão conectado no componente Logon, adicione um atributo data-type com um valor de signed-in-button-content.

<mgt-login>
  <template data-type="signed-in-button-content">
  </template>
</mgt-login>

Selecione os dados a serem associados a um modelo

Os modelos para componentes Microsoft Graph Toolkit ajudam você a selecionar e exibir contextos de dados específicos em seu aplicativo. Agora que você definiu signed-in-button-content como o valor do tipo de dados do modelo, suponha que você queira exibir o nome do usuário no botão conectado.

O componente Logon passa um objeto {personDetails} para o componente em runtime. O objeto {personDetails} fornece todos os detalhes sobre o usuário. Você pode usar o objeto {personDetails} no modelo para exibir todos os dados de usuário desejados. Por exemplo, para exibir o nome fornecido pelo usuário, adicione {personDetails.givenName} no modelo.

<mgt-login>
  <template data-type="signed-in-button-content">
    <div>{{personDetails.givenName}}</div>
  </template>
</mgt-login>

Dica

Para ver quais dados estão disponíveis no modelo, insira {{ this }}. Esta etapa mostra todo o objeto associado ao modelo. Se o {personDetails.givenName} valor for Waldek, o conteúdo do botão terá o seguinte aspeto.

No próximo exercício, você aprenderá a usar modelos com componentes do Microsoft Graph Toolkit para modificar a apresentação de dados.