Cambiar la presentación de datos mediante plantillas
El Kit de herramientas de Microsoft Graph proporciona compatibilidad para crear plantillas personalizadas que pueden cambiar la forma en que los componentes muestran los datos.
Supongamos que planea compilar una aplicación web para mostrar los próximos eventos al usuario que ha iniciado sesión. Para este proyecto, en lugar de usar la experiencia predeterminada del componente de inicio de sesión del Kit de herramientas de Microsoft Graph, quiere modificar el botón de inicio de sesión que muestra el perfil del usuario.
Puede usar las plantillas del componente de inicio de sesión para cambiar fácilmente la presentación del perfil del usuario que ha iniciado sesión. También puede elegir los datos específicos que quiere mostrar, como el nombre para mostrar del usuario, el nombre de pila, el puesto, el correo o el número de teléfono.
Para agregar plantillas a los componentes del Kit de herramientas de Microsoft Graph, puede usar el elemento HTML <template>. Por ejemplo, puede agregar plantillas al componente de inicio de sesión.
<mgt-login>
<template>
</template>
</mgt-login>
Definir una parte del componente que quiere crear como plantilla
Hay varias partes de datos disponibles para la plantilla para cada componente. Puede definir el elemento que quiere crear como plantilla mediante el atributo data-type en el elemento <template>. Por ejemplo, si quiere crear una plantilla del elemento del botón de inicio de sesión en el componente de inicio de sesión, agregue un atributo data-type con un valor de signed-in-button-content.
<mgt-login>
<template data-type="signed-in-button-content">
</template>
</mgt-login>
Seleccionar los datos que se van a enlazar a una plantilla
Las plantillas para los componentes del Kit de herramientas de Microsoft Graph le ayudan a seleccionar y mostrar contextos de datos específicos en la aplicación. Ahora que ha definido signed-in-button-content como el valor de tipo de datos de la plantilla, suponga que quiere mostrar el nombre del usuario en el botón de inicio de sesión.
El componente de inicio de sesión pasa un objeto {personDetails} al componente en tiempo de ejecución. El objeto {personDetails} proporciona todos los detalles sobre el usuario. Puede usar el objeto {personDetails} en la plantilla para mostrar los datos de usuario que quiera. Por ejemplo, para mostrar el nombre de pila del usuario, agregue {personDetails.givenName} en la plantilla.
<mgt-login>
<template data-type="signed-in-button-content">
<div>{{personDetails.givenName}}</div>
</template>
</mgt-login>
Sugerencia
Para ver qué datos están disponibles en la plantilla, escriba {{ this }}. En este paso se muestra todo el objeto enlazado a la plantilla. Si el {personDetails.givenName} valor es Waldek, el contenido del botón es similar al ejemplo siguiente.
En el ejercicio siguiente, aprenderá a usar plantillas con componentes del Kit de herramientas de Microsoft Graph para modificar la presentación de datos.