Datos de la organización: recuperar archivos, chats y enviar mensajes a Teams

En el entorno digital actual, los usuarios trabajan con una amplia gama de datos de la organización, incluidos correos electrónicos, chats, archivos, eventos de calendario, etc. Esto puede dar lugar a cambios de contexto frecuentes( cambiar entre tareas o aplicaciones), lo que puede interrumpir el foco y reducir la productividad. Por ejemplo, un usuario que trabaja en un proyecto podría necesitar cambiar de su aplicación actual a Outlook para encontrar detalles cruciales en un correo electrónico o cambiar a OneDrive para la Empresa para encontrar un archivo relacionado. Esta acción de ida y vuelta interrumpe el foco y pierde el tiempo que podría dedicarse mejor a la tarea en cuestión.

Para mejorar la eficacia, puede integrar los datos de la organización directamente en las aplicaciones que los usuarios usan todos los días. Al incorporar datos de la organización a las aplicaciones, los usuarios pueden acceder a la información y administrarla de forma más fluida, minimizando los cambios de contexto y mejorando la productividad. Además, esta integración proporciona información valiosa y contexto, lo que permite a los usuarios tomar decisiones informadas y trabajar de forma más eficaz.

En este ejercicio, aprenderá a:

Obtenga información sobre cómo se puede usar el componente web mgt-search-results del kit de herramientas de Microsoft Graph para buscar archivos.
Obtenga información sobre cómo llamar directamente a Microsoft Graph para recuperar archivos de OneDrive para la Empresa y mensajes de chat de Microsoft Teams.
Obtenga información sobre cómo enviar mensajes de chat a canales de Microsoft Teams mediante Microsoft Graph.

Uso de la característica de datos de la organización

En un ejercicio anterior , creó un registro de aplicación en el identificador de Microsoft Entra e inició el servidor de aplicaciones y el servidor de API. También ha actualizado los siguientes valores en el .env archivo.
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Asegúrese de que ha completado el ejercicio anterior antes de continuar.
Vuelva al explorador (http://localhost:4200). Si aún no ha iniciado sesión, seleccione Iniciar sesión en el encabezado e inicie sesión con un usuario del inquilino de Microsoft 365 Developer.
Nota:

Además de autenticar al usuario, el componente web mgt-login también recupera un token de acceso que Microsoft Graph puede usar para acceder a archivos, chats, correos electrónicos, eventos de calendario y otros datos de la organización. El token de acceso contiene los ámbitos (permisos), como Chat.ReadWrite, Files.Read.Ally otros que vio anteriormente:
```
Providers.globalProvider = new Msal2Provider({
    clientId: ENTRAID_CLIENT_ID, // retrieved from .env file
    scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
             'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
});
```
Seleccione Ver contenido relacionado para la fila de Adatum Corporation en datagrid. Esto hará que los datos de la organización, como archivos, chats, correos electrónicos y eventos de calendario se recuperen mediante Microsoft Graph. Una vez que se carguen los datos, se mostrará debajo de la datagrid en una interfaz con pestañas. Es importante mencionar que es posible que no vea ningún dato en este momento, ya que aún no ha agregado ningún archivo, chats, correos electrónicos o eventos de calendario para el usuario en el inquilino de desarrollador de Microsoft 365. Vamos a corregirlo en el paso siguiente.
Es posible que su inquilino de Microsoft 365 no tenga ningún dato organizativo relacionado para Adatum Corporation en esta fase. Para agregar algunos datos de ejemplo, realice al menos una de las siguientes acciones:
- Agregue archivos visitando https://onedrive.com e iniciando sesión con sus credenciales de inquilino de Microsoft 365 Developer.
  - Seleccione Mis archivos en el panel de navegación izquierdo.
  - Seleccione + Agregar nuevo y, a continuación, Cargar carpeta en el menú.
  - Seleccione la carpeta openai-acs-msgraph/customer documents del proyecto que ha clonado.
- Agregue mensajes de chat y eventos de calendario visitando https://teams.microsoft.com e iniciando sesión con sus credenciales de inquilino de Microsoft 365 Developer.
  - Seleccione Teams en el panel de navegación izquierdo.
  - Seleccione un equipo y un canal.
  - Seleccione Iniciar una publicación.
  - Escriba Nuevo pedido realizado para Adatum Corporation para el asunto y cualquier texto adicional que desee agregar en el cuerpo del mensaje. Seleccione el botón Publicar .
    
    No dude en agregar mensajes de chat adicionales que mencionen a otras empresas que se usan en la aplicación, como Adventure Works Cycles, Contoso Pharmaceuticals y Tailwind Traders.
  - Seleccione Calendario en el panel de navegación izquierdo.
  - Seleccione Nueva reunión.
  - Escriba "Meet with Adatum Corporation about project schedule" (Reunirse con Adatum Corporation sobre la programación del proyecto) para el título y el cuerpo.
  - Haga clic en Guardar.
- Agregue correos electrónicos visitando https://outlook.com e iniciando sesión con sus credenciales de inquilino de Microsoft 365 Developer.
  - Seleccione Nuevo correo.
  - Escriba su dirección de correo electrónico personal en el campo Para .
  - Escriba Nuevo pedido realizado para Adatum Corporation para el sujeto y todo lo que le gustaría para el cuerpo.
  - Seleccione Enviar.
Vuelva a la aplicación en el explorador y actualice la página. Seleccione Ver contenido relacionado de nuevo para la fila Adatum Corporation . Ahora debería ver los datos mostrados en las pestañas en función de las tareas que haya realizado en el paso anterior.
Vamos a explorar el código que habilita la característica de datos de la organización en la aplicación. Para recuperar los datos, la parte del lado cliente de la aplicación usa el token de acceso recuperado por el componente mgt-login que miró anteriormente para realizar llamadas a las API de Microsoft Graph.

Exploración del código de búsqueda de archivos

Sugerencia

Si usa Visual Studio Code, puede abrir archivos directamente seleccionando:

Windows/Linux: Ctrl + P
Mac: Cmd + P

A continuación, escriba el nombre del archivo que desea abrir.

Empecemos examinando cómo se recuperan los datos de archivo de OneDrive para la Empresa. Abra files.component.html y dedique un momento a examinar el código. La ruta de acceso completa al archivo es client/src/app/files/files.component.html.
Busque el componente mgt-search-results y anote los atributos siguientes:
```
<mgt-search-results 
    class="search-results" 
    entity-types="driveItem" 
    [queryString]="searchText"
    (dataChange)="dataChange($any($event))" 
/>
```
El componente mgt-search-results forma parte del Kit de herramientas de Microsoft Graph y, como su nombre indica, se usa para mostrar los resultados de búsqueda de Microsoft Graph. El componente usa las siguientes características en este ejemplo:
- El class atributo se usa para especificar que la search-results clase CSS se debe aplicar al componente.
- El entity-types atributo se usa para especificar el tipo de datos que se va a buscar. En este caso, el valor es driveItem que se usa para buscar archivos en OneDrive para la Empresa.
- El queryString atributo se usa para especificar el término de búsqueda. En este caso, el valor se enlaza a la searchText propiedad que se pasa al componente de archivos cuando el usuario selecciona Ver contenido relacionado para una fila en la datagrid. Los corchetes alrededor queryString indican que la propiedad está enlazada al searchText valor .
- El dataChange evento se desencadena cuando cambian los resultados de la búsqueda. En este caso, se llama a una función de cliente denominada dataChange() en el componente de archivos y los datos del evento se pasan a la función. El paréntesis alrededor dataChange indica que el evento está enlazado a la dataChange() función.
- Dado que no se proporciona ninguna plantilla personalizada, la plantilla predeterminada integrada mgt-search-results se usa para mostrar los resultados de la búsqueda.
Una alternativa al uso de componentes como mgt-search-results es llamar a las API de Microsoft Graph directamente mediante código. Para ver cómo funciona, abra el archivo graph.service.ts y busque la searchFiles() función . La ruta de acceso completa al archivo es client/src/app/core/graph.service.ts.
- Observará que se pasa un query parámetro a la función . Este es el término de búsqueda que se pasa cuando el usuario selecciona Ver contenido relacionado para una fila de datagrid. Si no se pasa ningún término de búsqueda, se devuelve una matriz vacía.
```
async searchFiles(query: string) {
    const files: DriveItem[] = [];
    if (!query) return files;

    ...
}
```
- A continuación, se crea un filtro que define el tipo de búsqueda que se va a realizar. En este caso, el código busca archivos en OneDrive para la Empresa, por lo que driveItem se usa tal como se vio anteriormente con el mgt-search-results componente . Esto es lo mismo que pasar driveItem al entity-types componente mgt-search-results que vio anteriormente. A query continuación, el parámetro se agrega al queryString filtro junto con ContentType:Document.
```
const filter = {
    "requests": [
        {
            "entityTypes": [
                "driveItem"
            ],
            "query": {
                "queryString": `${query} AND ContentType:Document`
            }
        }
    ]
};
```
- A continuación, se realiza una llamada a /search/query Microsoft Graph API mediante la Providers.globalProvider.graph.client.api() función . El filter objeto se pasa a la post() función que envía los datos a la API.
```
const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);
```
- A continuación, los resultados de la búsqueda se recorren en iteración para buscar hits. Cada hit contiene información sobre un documento que se encontró. Una propiedad denominada resource contiene los metadatos del documento y se agrega a la files matriz.
```
if (searchResults.value.length !== 0) {
    for (const hitContainer of searchResults.value[0].hitsContainers) {
        if (hitContainer.hits) {
            for (const hit of hitContainer.hits) {
                files.push(hit.resource);
            }
        }
    }
}
```
- A files continuación, la matriz se devuelve al autor de la llamada.
```
return files;
```
Al examinar este código, puede ver que el componente web mgt-search-results que ha explorado anteriormente hace mucho trabajo para usted y reduce significativamente la cantidad de código que tiene que escribir. Sin embargo, puede haber escenarios en los que quiera llamar directamente a Microsoft Graph para tener más control sobre los datos que se envían a la API o cómo se procesan los resultados.
Abra el archivo files.component.ts y busque la search() función . La ruta de acceso completa al archivo es client/src/app/files/files.component.ts.

Aunque el cuerpo de esta función se comenta debido a que se usa el componente mgt-search-results , la función podría usarse para realizar la llamada a Microsoft Graph cuando el usuario selecciona Ver contenido relacionado para una fila en la red de datos. La search() función llama searchFiles() a en graph.service.ts y le pasa el query parámetro (el nombre de la empresa en este ejemplo). A continuación, los resultados de la búsqueda se asignan a la data propiedad del componente.
```
override async search(query: string) {
    this.data = await this.graphService.searchFiles(query);
}
```
Después, el componente de archivos puede usar la data propiedad para mostrar los resultados de la búsqueda. Puede controlarlo mediante enlaces HTML personalizados o mediante otro control del Kit de herramientas de Microsoft Graph denominado mgt-file-list. Este es un ejemplo de enlazar la data propiedad a una de las propiedades del componente denominadas files y controlar el itemClick evento a medida que el usuario interactúa con un archivo.
```
<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>
```
Tanto si decide usar el componente mgt-search-results mostrado anteriormente como si escribe código personalizado para llamar a Microsoft Graph dependerá de su escenario específico. En este ejemplo, el componente mgt-search-results se usa para simplificar el código y reducir la cantidad de trabajo que tiene que hacer.

Exploración del código de búsqueda de mensajes de chat de Teams

Vuelva a graph.service.ts y busque la searchChatMessages() función. Verá que es similar a la searchFiles() función que miró anteriormente.
- Envía datos de filtro a la API de /search/query Microsoft Graph y convierte los resultados en una matriz de objetos que tienen información sobre teamId, channelIdy messageId que coinciden con el término de búsqueda.
- Para recuperar los mensajes del canal de Teams, se realiza una segunda llamada a la /teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId} API y teamId, channelIdy messageId se pasan. Esto devuelve los detalles completos del mensaje.
- Se realizan tareas de filtrado adicionales y los mensajes resultantes se devuelven del searchChatMessages() autor de la llamada.

Abra el archivo chats.component.ts y busque la search() función . La ruta de acceso completa al archivo es client/src/app/chats/chats.component.ts. La search() función llama searchChatMessages() a en graph.service.ts y pasa el query parámetro a él.

override async search(query: string) {
    this.data = await this.graphService.searchChatMessages(query);
}

Los resultados de la búsqueda se asignan a la data propiedad del componente y el enlace de datos se usa para recorrer en iteración la matriz de resultados y representar los datos. En este ejemplo se usa un componente de tarjeta material de Angular para mostrar los resultados de la búsqueda.

@if (this.data.length) {
    <div>
        @for (chatMessage of this.data;track chatMessage.id) {
            <mat-card>
                <mat-card-header>
                    <mat-card-title [innerHTML]="chatMessage.summary"></mat-card-title>
                    <!-- <mat-card-subtitle [innerHTML]="chatMessage.body"></mat-card-subtitle> -->
                </mat-card-header>
                <mat-card-actions>
                    <a mat-stroked-button color="basic" [href]="chatMessage.webUrl" target="_blank">View Message</a>
                </mat-card-actions>
            </mat-card>
        }
    </div>
}

Ver chats de Teams

Envío de un mensaje a un canal de Microsoft Teams

Además de buscar mensajes de chat de Microsoft Teams, la aplicación también permite al usuario enviar mensajes a un canal de Microsoft Teams. Esto se puede hacer llamando al /teams/${teamId}/channels/${channelId}/messages punto de conexión de Microsoft Graph.

En el código siguiente verá que se crea una dirección URL que incluye los teamId valores y channelId . Los valores de las variables de entorno se usan para el identificador de equipo y el identificador de canal en este ejemplo, pero esos valores se pueden recuperar dinámicamente, así como con Microsoft Graph. La body constante contiene el mensaje que se va a enviar. A continuación, se realiza una solicitud POST y los resultados se devuelven al autor de la llamada.

async sendTeamsChat(message: string): Promise<TeamsDialogData> {
    if (!message) new Error('No message to send.');
    if (!TEAM_ID || !CHANNEL_ID) new Error('Team ID or Channel ID not set in environment variables. Please set TEAM_ID and CHANNEL_ID in the .env file.');

    const url = `https://graph.microsoft.com/v1.0/teams/${TEAM_ID}/channels/${CHANNEL_ID}/messages`;
    const body = {
        "body": {
            "contentType": "html",
            "content": message
        }
    };
    const response = await Providers.globalProvider.graph.client.api(url).post(body);
    return {
        id: response.id,
        teamId: response.channelIdentity.teamId,
        channelId: response.channelIdentity.channelId,
        message: response.body.content,
        webUrl: response.webUrl,
        title: 'Send Teams Chat'
    };
}

El aprovechamiento de este tipo de funcionalidad en Microsoft Graph proporciona una excelente manera de mejorar la productivbidad del usuario al permitir que los usuarios interactúen con Microsoft Teams directamente desde la aplicación que ya usan.

Paso siguiente

Datos de la organización: recuperación de correos electrónicos y eventos de calendario

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2025-06-13