Content Sidebar

ガイドインストール

Content Sidebar

Box Content Sidebar UI Elementを使用すると、開発者は、ファイル関連のメタデータ(Box Skillsを含む)とアクティビティフィード(バージョン、コメント、タスクを含む)を表示するためのサポートをデスクトップまたはモバイルウェブアプリで追加できます。

NPMまたはBox CDN経由でBox UI Elementsをインストールする方法は、こちらを参照してください。

ブラウザのサポート

古いブラウザでは、UI Elementsのサポートは限定的です。目的のブラウザに合ったpolyfillを必ず追加してください。

UI Elementsは認証に依存しない方法で設計されているため、Boxアカウントを持つユーザー(管理対象ユーザー)とBox以外のアカウントを持つユーザー(App User)のどちらにUI Elementsを使用するかどうかに関係なく、UI Elementsを使用するのに特別な設定は必要ありません。その理由は、UI Elementsは認証のために「トークン」を受け取ることのみを予期しており、Boxにはトークンの生成方法としてOAuthとJWTの2つがあるからです。

Learn about selecting an authentication method

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Box Content Sidebar</title>

    <!-- polyfill.io only loads the polyfills your browser needs -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script>
    <!-- Alternatively, use polyfill hosted on the Box CDN
    <script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script>
    -->

    <!-- Latest version of the sidebar css for your locale -->
    <link
      rel="stylesheet"
      href="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/sidebar.css"
    />
  </head>
  <body>
    <div class="container" style="height:600px"></div>
    <!-- Latest version of the sidebar js for your locale -->
    <script src="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/sidebar.js"></script>
    <script>
      var fileId = "123";
      var token = "abc";

      // At least one of the sub-sidebars (details, activity feed, skills, metadata) need to be turned on for something to render. Details is iteself further divided into notices, properties, access stats and versions, one of which need to be enabled for the details sidebar to render.
      var sidebar = new Box.ContentSidebar();
      sidebar.show(fileId, accessToken, {
        container: ".container",
        detailsSidebarProps: {
          hasNotices: true,
          hasProperties: true,
          hasAccessStats: true,
          hasVersions: true
        },
        hasActivityFeed: true,
        hasSkills: true,
        hasMetadata: true
      });
    </script>
  </body>
</html>

Content Previewを使用したサイドバー

Content Explorerを使用したサイドバー

const { ContentSidebar } = Box;
const sidebar = new ContentSidebar();

/**
 * Shows the file selection.
 *
 * @public
 * @param {String} fileId - The file id.
 * @param {String} token - The API access token.
 * @param {Object|void} [options] - Optional options.
 * @return {void}
 */
sidebar.show(fileId, token, options);

/**
 * Hides the sidebar, removes all event listeners, and clears out the HTML.
 *
 * @public
 * @return {void}
 */
sidebar.hide();

/**
 * Clears out the internal in-memory cache for the sidebar. This forces
 * items to be reloaded from the API.
 *
 * @public
 * @return {void}
 */
sidebar.clearCache();

/**
 * Adds an event listener to the sidebar. Listeners should be added before
 * calling show() so no events are missed.
 *
 * @public
 * @param {String} eventName - Name of the event.
 * @param {Function} listener - Callback function.
 * @return {void}
 */
sidebar.addListener(eventName, listener);

/**
 * Removes an event listener from the sidebar.
 *
 * @public
 * @param {String} eventName - Name of the event.
 * @param {Function} listener - Callback function.
 * @return {void}
 */
sidebar.removeListener(eventName, listener);

/**
 * Removes all event listeners from the sidebar.
 *
 * @public
 * @return {void}
 */
sidebar.removeAllListeners();

パラメータ	型	説明
`fileId`	String	BoxファイルID。サイドバーが必要なファイルのIDです。
`token`	String	使用するBox APIアクセストークン。このトークンには、上記のファイルに対する読み取り/書き込みアクセス権限を指定できます。このトークンのために渡される値は、サイドバーの表示中は有効期限切れにならないことが前提となっています。
`options`	Object	追加のオプション。たとえば、`sidebar.show(FILE_ID, TOKEN, {hasProperties: true})`を使用すると、サイドバーにファイルのプロパティが表示されます。

パラメータ	型	デフォルト	説明
`container`	String	`document.body`	CSS selector of the container in which the content sidebar should be placed. Calling `hide()` will clear out this container.
`hasActivityFeed`	Boolean	`false`	Set to true to show the activity feed that includes versions, comments and tasks.
`hasMetadata`	Boolean	`false`	Set to true to show box metadata for the file.
`hasSkills`	Boolean	`false`	Set to true to show the file skills data.
`detailsSidebarProps`	Object	`{}`	See section below.
`requestInterceptor`	Function		リクエストをインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリは`axios.js`で、インターセプタでは同様のアプローチに従っています。
`responseInterceptor`	Function		応答をインターセプトする関数。例については、このCodePenを参照してください。基盤となるXHRライブラリは`axios.js`で、インターセプタでは同様のアプローチに従っています。

パラメータ	型	デフォルト	説明
`hasProperties`	Boolean	`false`	Set to true to show file properties in the details sidebar.
`hasAccessStats`	Boolean	`false`	Set to true to show file access stats in the details sidebar.
`hasVersions`	Boolean	`false`	Set to true to show file versions in the details sidebar.
`hasNotices`	Boolean	`false`	Set to true to show file related notices in the details sidebar.

アプリケーションで、エンドユーザーがContent Sidebar機能のサブセットのみにアクセスできるようにする必要がある場合は、ダウンスコープを使用して、アクセストークンを適切にダウンスコープして必要な権限のセットを含むトークンを生成し、Content Sidebarを初期化するエンドユーザークライアントに安全に渡すことができます。

以下は、ダウンスコープと一緒に使用する、UI Element固有の新しいスコープのセットです。こうしたスコープにより、開発者は、ダウンスコープされたトークンに適切なスコープを構成して、Content SidebarのUIコントロールを有効/無効にすることができます。詳細については、Box UI Elementsの専用スコープを参照してください。

スコープ名	付与される権限
`base_sidebar`	Allows the user to get basic file info needed for the sidebar.

スコープ名	付与される権限
`item_comment`	Allows adding and editing comments.
`item_rename`	Allows editing of file description.
`item_upload`	Allows editing of file metadata.
`item_task`	Allows creating and resolving of tasks.

Content Sidebar

関連記事

Content Sidebar

インストール

ブラウザのサポート

認証

サンプルHTML

デモ

スタンドアロンサイドバー

Content Previewを使用したサイドバー

Content Explorerを使用したサイドバー

API

パラメータ

オプション

`detailsSidebarProps`

スコープ

基本スコープ

機能のスコープ

関連するガイド