Легко отображайте файлы в виде карточек с помощью Microsoft Graph Toolkit и hTWOo

Благодаря недавнему обновлению Microsoft Graph Toolkit отображение файлов в виде карточек стало еще проще. Проверьте это.

Отображение файлов в виде карточек с помощью Microsoft Graph Toolkit и hTWOo

Недавно я показал вам, как вы можете использовать набор инструментов Microsoft Graph для отображения файлов, хранящихся в Microsoft 365, в виде карточек.

Используя всего несколько строк кода, мы создали простое одностраничное приложение, защищенное с помощью Azure Active Directory, добавили проверку подлинности, чтобы пользователи могли входить в свою учетную запись Microsoft 365 и получать свои файлы. Мы сделали это с помощью Microsoft Graph Toolkit, который является самым простым способом подключения вашего приложения к Microsoft 365. Его поставщики аутентификации абстрагируют весь код аутентификации в одну строку. А благодаря его компонентам вы можете легко отображать данные из Microsoft 365 в своем приложении.

Чтобы показать файлы в виде карточек, мы использовали hTWOo, который представляет собой управляемую сообществом реализацию языка дизайна Fluent UI.

Полный пример приложения, использованный в этой статье, доступен на GitHub.

Неудобно показывать информацию о файле

Каждая карточка, которую мы показываем в нашем приложении, содержит информацию о файле, такую как его миниатюра, местоположение, имя, автор и изображение, а также время последнего изменения файла. Не вся эта информация доступна нам сразу, поэтому в нашем исходном решении нам пришлось добавить довольно много кода JavaScript для загрузки необходимой информации из Microsoft Graph. И тут все усложнилось.

Microsoft Graph Toolkit упрощает работу. Вместо создания запросов, анализа ответов и обработки ошибок вы добавляете готовые к использованию компоненты, которые делают все это за вас и позволяют вам сосредоточиться на создании своего приложения. Но вы не сильно выиграете, если вам все еще нужно писать запросы, потому что вы не можете получить все данные, которые вам нужны, не так ли?

Простое отображение файлов в виде карточек с помощью Microsoft Graph Toolkit

Недавно Microsoft Graph Toolkit был обновлен, и если вы хотите создать приложение, которое отображает файлы из Microsoft 365 в виде карточек, вам больше не нужно писать собственный код JavaScript. Вот код, который вам понадобится вместо этого:

<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@n8d/htwoo-core/dist/css/htwoo.min.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <mgt-msal2-provider client-id="d43f076b-c6a6-4805-97be-f9ef969241c0" authority="https://login.microsoftonline.com/M365x61791022.onmicrosoft.com"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-file-list>
    <template>
      <h1>My files</h1>
      <div class="hoo-cardgrid">
        <div data-for="file in files" class="hoo-doccard" data-props="{{@click: openFile}}">
          <div class="hoo-cardimage">
            <div data-if="file.folder"><img src="./folder.jpg" alt=""></div>
            <mgt-get data-if="!file.folder" resource="/drives/{{file.parentReference.driveId}}/items/{{file.id}}/thumbnails/0/c320x180_crop/content" type="image" cache-enabled="true">
              <template data-type="loading">
                <div class="hoo-ph-squared"></div>
              </template>
              <template data-type="error">
                <img src="./otter.jpg" alt="">
              </template>
              <template data-type="no-data">
                <img src="./otter.jpg" alt="">
              </template>
              <template data-type="default">
                <img src="{{image}}" width="320" height="180" alt="">
              </template>
            </mgt-get>
          </div>
          <div class="hoo-cardlocation">
            <mgt-get resource="/drives/{{file.parentReference.driveId}}" cache-enabled="true">
              <template data-type="loading">
                <div class="hoo-ph-row"></div>
              </template>
              <template data-type="error">
                <div class="hoo-ph-row"></div>
              </template>
              <template data-type="default">
                {{name}}
              </template>
            </mgt-get>
          </div>
          <div class="hoo-cardtitle">{{file.name}}</div>
          <div class="hoo-cardfooter">
            <div class="hoo-avatar">
              <mgt-get resource="/users/{{file.lastModifiedBy.user.id}}/photo/$value" type="image" cache-enabled="true">
                <template data-type="loading">
                  <div class="hoo-ph-circle"></div>
                </template>
                <template data-type="no-data">
                  <div class="hoo-ph-circle hoo-avatar-img"></div>
                </template>
                <template data-type="default">
                  <img src="{{image}}" alt="" class="hoo-avatar-img" loading="lazy">
                </template>
              </mgt-get>
            </div>
            <div class="hoo-cardfooter-data">
              <div class="hoo-cardfooter-name">{{file.lastModifiedBy.user.displayName}}</div>
              <div class="hoo-cardfooter-modified">{{formatDate(file.lastModifiedDateTime)}}</div>
            </div>
          </div>
        </div>
      </div>
      <button class="hoo-button-primary" data-props="{{@click: loadMore}}">
        <div class="hoo-button-label">Load more</div>
      </button>
    </template>
  </mgt-file-list>
  <script src="script.js"></script>
</body>
</html>

Вот что изменилось.

Загрузить миниатюру документа с помощью mgt-get

Изначально мы использовали пользовательский JavaScript для загрузки миниатюры документа из Microsoft Graph и добавления ее в шаблон. Начиная с Microsoft Graph Toolkit v2.3.1 мы можем загружать изображения с помощью Получить компонент:

<mgt-get data-if="!file.folder" resource="/drives/{{file.parentReference.driveId}}/items/{{file.id}}/thumbnails/0/c320x180_crop/content" type="image" cache-enabled="true">
  <template data-type="loading">
    <div class="hoo-ph-squared"></div>
  </template>
  <template data-type="error">
    <img src="./otter.jpg" alt="">
  </template>
  <template data-type="no-data">
    <img src="./otter.jpg" alt="">
  </template>
  <template data-type="default">
    <img src="{{image}}" width="320" height="180" alt="">
  </template>
</mgt-get>

В компоненте мы используем 4 шаблона:

loading, который отображается, пока компонент Get ожидает ответа от Microsoft Graph.
error, если Microsoft Graph вернул ошибку
no-data, это новый шаблон, добавленный в компонент Get в Microsoft Graph Toolkit версии 2.3.1, который отображается, когда запрос не возвращает данные. Когда вы запрашиваете изображение, оно также отображается, когда запрос возвращает ошибку 404.
default, который отображается при успешном извлечении данных

Теперь мы можем использовать компонент Get не только для предварительного просмотра документа, но и для загрузки аватара пользователя, который последним изменил файл.

Загрузить местоположение файла

Другой запрос, для которого мы изначально написали пользовательский JavaScript, заключался в получении места, где хранится файл. В этой версии мы заменили этот код другим экземпляром компонента Get:

<mgt-get resource="/drives/{{file.parentReference.driveId}}" cache-enabled="true">
  <template data-type="loading">
    <div class="hoo-ph-row"></div>
  </template>
  <template data-type="error">
    <div class="hoo-ph-row"></div>
  </template>
  <template data-type="default">
    {{name}}
  </template>
</mgt-get>

Пока данные загружаются, мы показываем мерцание — анимированный заполнитель, который сообщает пользователям, что контент загружается. После того, как мы получили местоположение файла из Microsoft Graph, мы вместо этого показываем его.

С этими изменениями остался только один кусок JavaScript:

document.querySelector('mgt-file-list').templateContext = {
  formatDate: date => {
    const d = new Date(date);
    return d.toLocaleString();
  },
  openFile: (e, context, root) => {
    window.open(context.file.webUrl, '_blank');
  },
  loadMore: (e, context, root) => {
    root.parentNode.renderNextPage();
  }
};

Мы используем эти пользовательские функции для форматирования даты изменения файла, открытия выбранного файла в новой вкладке и загрузки дополнительных файлов. Обратите внимание, что нам больше не нужно вручную вызывать Microsoft Graph для получения данных, обработки ответов и обработки ошибок!

Краткое содержание

Набор инструментов Microsoft Graph — это самый простой способ подключить ваше приложение к Microsoft 365. Поскольку он обеспечивает проверку подлинности, а также получение и отображение данных в вашем приложении, вы можете сосредоточиться на создании своего приложения. Благодаря недавнему изменению в Microsoft Graph Toolkit вы можете создавать еще более богатые визуализации без необходимости писать собственный код JavaScript и вручную вызывать Microsoft Graph.

Если вы новичок в Microsoft Graph Toolkit, лучше всего начать с Пути обучения Microsoft Graph Toolkit в MS Learn.

Первоначально опубликовано на https://blog.mastykarz.nl.

Легко отображайте файлы в виде карточек с помощью Microsoft Graph Toolkit и hTWOo