管理ツールバーを使用することで、管理者はアプリの検索コンテナの結果を管理できます。検索結果の表示タイプをフィルター処理、並べ替え、選択できるため、ドキュメント、Webコンテンツ、アセットエントリなど、探しているものをすばやく特定できます。管理ツールバーは完全にカスタマイズ可能であるため、すべてのコントロールを実装することも、アプリに必要なコントロールのみを実装することもできます。
管理ツールバーを作成するには、clay:management-toolbar
taglibを使用します。ツールバーにはいくつかの重要なセクションが含まれています。各セクションは、異なる属性を使用してグループ化および構成されます。これらの属性については、以下で詳しく説明します。
表示コンテキストを使用して管理ツールバーを構成する
表示コンテキスト(管理ツールバーの表示オプションを設定するための個別のクラス)を使用してツールバーのすべてまたは一部の設定オプションを定義する場合、displayContext
属性で表示コンテキストを指定できます 。以下に例を示します。
<clay:management-toolbar
displayContext="<%= viewUADEntitiesManagementToolbarDisplayContext %>"
/>
Filtering and Sorting Items with the Management Toolbarのチュートリアルで、表示コンテキストのユースケースの例を確認でき ます。 管理ツールバーの構成に表示コンテキストは必要ありません。表示コンテキストを使用して、管理ツールバーの構成オプションを必要な数だけ指定できます。
チェックボックスとアクション
actionItems
、searchContainerId
、selectable
、およびtotalItems
属性を使用すると、すべての検索コンテナの結果を選択し、それらに対して一括操作を実行するチェックボックスをツールバーに追加できます。個々の結果がオンになっている場合、またはツールバーのマスターチェックボックスがオンになっている場合は、アクションと合計アイテム数が表示されます。
actionItems
:1つの結果がオンになっている場合、または管理ツールバーのマスターチェックボックスがオンになっている場合に表示するドロップダウンアイテムのリスト。ページ間で複数の結果を選択できます。管理ツールバーは、選択された結果の数を追跡します。
searchContainerId
:管理ツールバーに接続された検索コンテナのID
selectable
:管理ツールバーにチェックボックスを含めるかどうか
totalItems
:ページネーション全体のアイテムの総数。この数字は、1つまたは複数のアイテムが選択された場合に表示されます。
構成例を以下に示します。
actionItems="<%=
new JSPDropdownItemList(pageContext) {
{
add(
dropdownItem -> {
dropdownItem.setHref("#edit");
dropdownItem.setLabel("Edit");
});
add(
dropdownItem -> {
dropdownItem.setHref("#download");
dropdownItem.setIcon("download");
dropdownItem.setLabel("Download");
dropdownItem.setQuickAction(true);
});
add(
dropdownItem -> {
dropdownItem.setHref("#delete");
dropdownItem.setLabel("Delete");
dropdownItem.setIcon("trash");
dropdownItem.setQuickAction(true);
});
}
}
%>"
アクションアイテムは、ページネーション全体で選択されたアイテムの数とともに、[Actions]メニューにリストされます。
上記の例の削除アクションやダウンロードアクションなど、アクションにアイコンが指定されている場合、アイコンはアクションメニューの横にも表示されます。
検索結果のフィルタリングと並べ替え
filterItems
、sortingOrder
、およびsortingURL
属性を使用すると、検索コンテナの結果をフィルタリングしたり並べ替えたりできます。フィルタリングと並べ替えは、1つの便利なドロップダウンメニューにまとめられています。
filterItems
:検索コンテナのフィルタリングオプションを設定します。このフィルターは、すべてのコントロールパネルアプリケーションに含める必要があります。フィルタリングオプションには、並べ替え条件、並べ替え順序などを含めることができます。
sortingOrder
:現在の並べ替え順序(昇順または降順)。
sortingURL
:並べ替え順序を変更するURL
以下の例では、2つのフィルターオプションと2つの並べ替えオプションを追加します。
filterItems="<%=
new DropdownItemList(_request) {
{
addGroup(
dropdownGroupItem -> {
dropdownGroupItem.setDropdownItemList(
new DropdownItemList(_request) {
{
add(
dropdownItem -> {
dropdownItem.setHref("#1");
dropdownItem.setLabel("Filter 1");
});
add(
dropdownItem -> {
dropdownItem.setHref("#2");
dropdownItem.setLabel("Filter 2");
});
}
}
);
dropdownGroupItem.setLabel("Filter By");
});
addGroup(
dropdownGroupItem -> {
dropdownGroupItem.setDropdownItemList(
new DropdownItemList(_request) {
{
add(
dropdownItem -> {
dropdownItem.setHref("#3");
dropdownItem.setLabel("Order 1");
});
add(
dropdownItem -> {
dropdownItem.setHref("#4");
dropdownItem.setLabel("Order 2");
});
}
}
);
dropdownGroupItem.setLabel("Order By");
});
}
}
%>"
検索フォーム
clearResultsURL
、searchActionURL
、searchFormName
、searchInputName
、およびsearchValue
属性を使用すると、検索フォームを設定できます。管理ツールバーの主要部分は、検索フォーム用に予約されています。
clearResultsURL
:検索をリセットするURL
searchActionURL
:検索フォームを送信するアクションURL
searchFormName
:検索フォームの名前
searchInputName
:検索入力の名前
searchValue
:検索入力の値
構成例を以下に示します。
<clay:management-toolbar
clearResultsURL="<%= searchURL %>"
disabled="<%= isDisabled %>"
namespace="<%= renderResponse.getNamespace() %>"
searchActionURL="<%= searchURL %>"
searchFormName="fm"
searchInputName="<%= DisplayTerms.KEYWORDS %>"
searchValue="<%= ParamUtil.getString(request, searchInputName) %>"
selectable="<%= false %>"
totalItems="<%= totalItems %>"
/>
情報パネル
infoPanelId
およびshowInfoButton
属性を使用すると、検索コンテナの結果に関連する追加情報を表示する格納可能なサイドバーパネルを追加できます。
infoPanelId
:切り替える情報パネルのID
showInfoButton
:情報ボタンを表示するかどうか
以下の構成例では、showInfoButton
属性が(displayContext
属性で指定されている)表示コンテキストで指定されており、infoPanelId
がJSPで明示的に設定されています。
<clay:management-toolbar
displayContext="<%= journalDisplayContext %>"
infoPanelId="infoPanelId"
namespace="<%= renderResponse.getNamespace() %>"
searchContainerId="<=% searchContainerId %>"
/>
表示タイプ
viewTypes
属性は、検索コンテナの結果の表示オプションを指定します。次の3つの表示オプションから選択できます。
**カード:**検索結果の列を横型または縦型カードに表示します。
**リスト:**検索結果の列の要約された詳細とともに詳細な説明を表示します。
テーブル: デフォルトのビュー。検索結果の列を左から右にリストします。
構成例を以下に示します。
viewTypes="<%=
new JSPViewTypeItemList(pageContext, baseURL, selectedType) {
{
addCardViewTypeItem(
viewTypeItem -> {
viewTypeItem.setActive(true);
viewTypeItem.setLabel("Card");
});
addListViewTypeItem(
viewTypeItem -> {
viewTypeItem.setLabel("List");
});
addTableViewTypeItem(
viewTypeItem -> {
viewTypeItem.setLabel("Table");
});
}
}
%>"
上記の例はJSPでビュータイプを設定する方法を示していますが、各ビュータイプをいつ使用するかを指定する必要もあります。
作成メニュー
creationMenu
属性は、1つまたは複数のアイテムにメニューの追加ボタンを作成します。新しいエンティティ(新しいブログエントリなど)の作成に使用されます。
addPrimaryDropdownItem()
メソッドを使用してトップレベルアイテムをドロップダウンメニューに追加するか、addFavoriteDropdownItem()
メソッドを使用してセカンダリアイテムをドロップダウンメニューに追加します。
以下の構成例では、2つのプライマリ作成メニュー項目と2つのセカンダリ作成メニュー項目を追加します。
creationMenu="<%=
new JSPCreationMenu(pageContext) {
{
addPrimaryDropdownItem(
dropdownItem -> {
dropdownItem.setHref("#1");
dropdownItem.setLabel("Sample 1");
});
addPrimaryDropdownItem(
dropdownItem -> {
dropdownItem.setHref("#2");
dropdownItem.setLabel("Sample 2");
});
addFavoriteDropdownItem(
dropdownItem -> {
dropdownItem.setHref("#3");
dropdownItem.setLabel("Favorite 1");
});
addFavoriteDropdownItem(
dropdownItem -> {
dropdownItem.setHref("#4");
dropdownItem.setLabel("Other item");
});
}
};
%>"