> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.
# コンテンツエクスプローラ – メタデータビューv2
export const MultiRelatedLinks = ({sections = []}) => {
if (!sections || sections.length === 0) {
return null;
}
return
{sections.map((section, index) =>
;
};
export const RelatedLinks = ({title, items = []}) => {
const getBadgeClass = badge => {
if (!badge) return "badge-default";
const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
};
if (!items || items.length === 0) {
return null;
}
return ;
};
export const Link = ({href, children, className, ...props}) => {
const localizedHref = localizeLink(href);
return
{children}
;
};
必ずカスケードポリシーを有効にするようにしてください。詳細な手順については、[テンプレートのカスタマイズと適用の手順][apply-templates]を参照してください。
## インターフェースの領域
メタデータビューのインターフェースは、以下の領域で構成されています。
* **ヘッダー** – 現在のビューのタイトル、ナビゲーション、コンテキストに応じた情報 (選択数など) が表示されます。ヘッダーの値は、`title`プロパティで指定できます。定義されていない場合は、デフォルトで、`ancestor_folder_id`で指定されているフォルダ名に設定されます。
* **操作バー** – 各メタデータフィールドのフィルタチップ、並べ替えオプション、表示モードの切り替えボタン (リストまたはグリッド) が含まれています。
* **ページネーションのフッター** – \[**前へ**] および \[**次へ**] ナビゲーションボタンとページインジケータが提供されます。
## メタデータビューの表示
コンテンツエクスプローラのメタデータビューを表示するには、以下のプロパティが必要です。
| プロパティ | 説明 |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `token` | 開発者コンソールで生成された開発者トークン。 |
| `title` | コンポーネント全体のタイトル。定義されていない場合は、デフォルトで、`ancestor_folder_id`で指定されているフォルダ名が設定されます。 |
| `defaultView` | `metadata`に設定する必要があります。 |
| `features.contentExplorer.metadataViewV2` | メタデータビュー (v2) を有効にするには、trueに設定する必要があります。 |
| `metadataQuery` |
**大文字で記述された文字列は、カスタム値に置き換える必要があります。**
### Vanilla JavaScriptのコードスニペット
```js theme={null}
const contentExplorer = new Box.ContentExplorer();
contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
container: ".container",
defaultView: "metadata",
// metadataQuery must match the query files/folders by metadata API body request:
//
metadataQuery: {
from: "METADATA_SCOPE.TEMPLATE_KEY", // For example from: "enterprise_123456789.templatename" where the number is the enterprise_123456789 is metadata template scope)
ancestor_folder_id: "FOLDER_ID"
// Metadata fields and values pulled to the component
fields: [
"metadata.TEMPLATE_SCOPE.TEMPLATE_KEY.FIELD_KEY1",
"metadata.TEMPLATE_SCOPE.TEMPLATE_KEY.FIELD_KEY2",
"metadata.TEMPLATE_SCOPE.TEMPLATE_KEY.FIELD_KEY3", // For example "metadata.enterprise_123456789.templatename.date"
...
]
// Optional for filtering data with specific metadata value
query: "METADATA_FIELD_KEY = :arg1",
query_params: { arg1: "METADATA_FIELD_VALUE" },
},
features: {
contentExplorer: {
metadataViewV2: true, // Required for enabling V2
},
},
// NEW dynamic column configuration
metadataViewProps: {
columns // Required - for details see section below
...
}
});
```
### Reactのコードスニペット
```js theme={null}
import React from 'react';
import { IntlProvider } from 'react-intl';
import ContentExplorer from "box-ui-elements/es/elements/content-explorer"
// Fill with custom values of your metadata template
// You can use this endpoint to get all needed values: /reference/get-metadata-templates-id-id-schema/
const metadataScopeAndKey = `${METADATA_TEMPLATE_SCOPE}.${METADATA_TEMPLATE_KEY}`;
const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
const folderID = "FOLDER_ID"
const metadataQuery = {
// Check this endpoint for more details on query structure:
// /reference/post-metadata-queries-execute-read/
from: metadataScopeAndKey,
ancestor_folder_id: folderID,
fields: [
"metadata.METADATA_SCOPE.TEMPLATE_KEY.METADATA_FIELD_KEY1",
"metadata.METADATA_SCOPE.TEMPLATE_KEY.METADATA_FIELD_KEY2", // For example "metadata.enterprise_123456789.templatename.date"
...
]
};
// Required - for details see section below
const columns = [
{
textValue: "METADATA_FIELD_DISPLAY_NAME1", // or our your custom value
id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY1}`,
type: field.type,
allowsSorting: true,
minWidth: 150,
maxWidth: 150,
},
{
textValue: "METADATA_FIELD_DISPLAY_NAME2", // or our your custom value
id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY2}`,
type: field.type,
allowsSorting: true,
minWidth: 150,
maxWidth: 150,
},
...
];
const componentProps = {
features: {
contentExplorer: {
metadataViewV2: true,
},
},
metadataQuery,
metadataViewProps: {
columns
},
};
const ContentExplorerContainer = () => {
const { features, metadataQuery, metadataViewProps } = componentProps;
// Store token in a secure way
return (
);
};
export default ContentExplorerContainer;
```
## 列
列プロパティでは、メタデータテーブルの列の構造と動作を定義します。
| プロパティ | 型 | 必須 | 説明 |
| --------------- | ------- | --- | -------------------------------------------------------------------------- |
| `id` | string | はい | 次の形式のメタデータフィールド識別子: `metadata...` |
| `textValue` | string | はい | 列ヘッダーの表示名。 |
| `type` | string | はい | Boxメタデータフィールドのタイプ (`string`、`number`、`date`、`singleSelect`、`multiSelect`)。 |
| `allowsSorting` | boolean | いいえ | 列ヘッダーの並べ替えを有効にします。 |
| `minWidth` | number | いいえ | 列の幅の最小値 (ピクセル単位)。 |
| `maxWidth` | number | いいえ | 列の幅の最大値 (ピクセル単位)。 |
## 機能
### 行の選択の有効化
個々の行の選択を有効化できます。1行以上が選択されると、ヘッダーが更新され、選択記述子とメタデータ編集ボタンが表示されます。これにより、ユーザーは、単一の操作または一括操作を実行できます。行の選択の範囲は、ページ割りされたコンテンツに限定されます。
コンテンツエクスプローラのメタデータビューの`v1`は公式サポートが終了しました。`v1`は`24.0.0`パッケージで引き続き利用できますが、バグ修正や新機能は提供されなくなります。最新の機能が提供されるようにするには、移行ガイドに従い、コンテンツエクスプローラの`v2`のメタデータビューに切り替えてください。
`box-ui-elements`パッケージを使用してプロジェクト内で`v1`からv2に移行するには:
1. `box-ui-elements`パッケージのバージョンをバージョン`24.0.0`以上にアップグレードします。
2. `box-ui-elements`ピア依存関係が依存関係として`package.json`ファイルに追加されていることを確認します。これは、パッケージマネージャを使用してインストールします。
3. `features`フラグを追加して、強化されたメタデータビューを有効にします。
```js theme={null}
features: {
contentExplorer: {
metadataViewV2: true
}
}
```
4. メタデータの`fieldToShow`の構成を新しい列オブジェクトに変換します。Boxメタデータテンプレートの値に対応するフィールドタイプを追加します。列の配列を新しい`metadataViewProps`オブジェクトに渡します。
```js theme={null}
const columns = [
{
textValue: "METADATA_FIELD_DISPLAY_NAME", // Altenratively pass a custom value
id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY}`,
type: field.type,
allowsSorting: true, // Optional
minWidth: 150, // Optional; the default value is 220
maxWidth: 150, // Optional; the default value is 220
},
...
];
```
5. 必要に応じて、このガイドで説明されている追加機能を構成します。
### CDN
CDNのインポートを使用してプロジェクト内で`v1`からv2に移行するには:
1. CDNリンクにバージョン`24.0.0`以上のパッケージバージョンが含まれていることを確認します。
2. `features`フラグを追加して、強化されたメタデータビューを有効にします。
```js theme={null}
features: {
contentExplorer: {
metadataViewV2: true
}
}
```
3. メタデータの`fieldToShow`の構成を新しい列オブジェクトに変換します。Boxメタデータテンプレートの値に対応するフィールドタイプを追加します。列の配列を新しい`metadataViewProps`オブジェクトに渡します。
```js theme={null}
const columns = [
{
textValue: "METADATA_FIELD_DISPLAY_NAME", // Altenratively pass a custom value
id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY}`,
type: field.type,
allowsSorting: true, // Optional
minWidth: 150, // Optional; the default value is 220
maxWidth: 150, // Optional; the default value is 220
},
...
];
```
4. 必要に応じて、このガイドで説明されている追加機能を構成します。
[terminology]: /guides/metadata/#metadata-terminology
[creating-templates-ui]: https://support.box.com/hc/en-us/articles/360044194033-Customizing-Metadata-Templates
[apply-templates]: https://support.box.com/hc/en-us/articles/360044196173-Using-Metadata
## 前提条件
コンテンツエクスプローラのメタデータビュー`v2`を実装する前に、以下を準備できていることを確認してください。
* `box-ui-elements`パッケージ`v24.0.0`以上、React `v18.0.0`、`Node.js` `v18.0.0`以上
* 適切なCORS設定を含むBox Platformアプリ
* 有効な開発者トークン
* 対象のフォルダまたはファイルに適用されている構成済みのメタデータテンプレート。APIを使用したテンプレートの作成または[管理コンソールを使用したテンプレートの作成][creating-templates-ui]を確認してください。
選択機能を有効にするには、`metadataViewProps`オブジェクト内で`isSelectionEnabled`プロパティを`true`に設定します。
```js theme={null}
const contentExplorer = new Box.ContentExplorer();
contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
...
metadataViewProps: {
columns,
isSelectionEnabled: true
},
});
```
### メタデータ値の編集
1つ以上の項目が選択されると、コンポーネントのヘッダーには、選択した数が表示され、\[**メタデータ**] ボタンがアクティブになります。\[**メタデータ**] ボタンをクリックすると、サイドバーが開き、ユーザーは、選択した項目のメタデータを表示したり編集したりできます。
この動作は、デフォルトで有効になっています。つまり、有効にするために、追加のプロパティは必要ありません。
### メタデータのフィルタ
ファイルタイプで項目にフィルタをかけたり、フォルダにフィルタをかけたり、Boxのメタデータテンプレートで指定されたメタデータフィールド値でフィルタをかけたりできます。
フィルタチップは、デフォルトで有効になっています。\[**すべてのフィルタ**] チップを無効にするには、`actionBarProps`オブジェクトの`isAllFiltersDisabled`を`true`に設定します。
```js theme={null}
const contentExplorer = new Box.ContentExplorer();
contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
...
metadataViewProps: {
columns,
isSelectionEnabled: true,
actionBarProps: {
isAllFiltersDisabled: true,
}
},
});
```
### リストビューとグリッドビューの切り替え
グリッドビューは、操作バーにある表示モード切り替えボタンからデフォルトで利用可能です。グリッドビューがアクティブな場合は、ズームコントロールが使用可能になります。選択、フィルタ、編集などのその他の機能もこのビュー内で使用できます。
グリッドビューを無効にするには、`metadataViewProps`オブジェクト内で`actionBarProps.isViewModeButtonDisabled`を`true`に設定します。
```js theme={null}
const contentExplorer = new Box.ContentExplorer();
contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
...
metadataViewProps: {
columns,
actionBarProps: {
isViewModeButtonDisabled: true,
}
},
});
```
### ページネーション
このUI Elementでは、フッターが常に表示された状態で、マーカーベースのページネーションのみが使用されます。オフセットまたはページ番号は設定できません。ユーザーが移動する際は \[**前へ**] と \[**次へ**] しか使用できません。無制限のスクロールはサポートされていません。
## v1からv2への移行
### Npmパッケージ