みなさま、こんにちは！アラスジャパン トレーナーの時田です。
今回は、以前ご紹介した CUI（Configurable User Interface）を利用した画面のカスタマイズ方法の後編 です。
以下の内容は 前編のブログ でご紹介していますので、ご興味のある方は、まずこちらからご覧ください。
- CUIとは
- CUIのデータモデル
- CUIを利用した設定例
- ツールバーへのボタンの追加
- メニューの削除
- ショートカットの追加
後編となる今回は、以下の内容をご紹介していきます。
- CUIを利用した設定例
- TOCへのメニューの追加
- アイテムの画面へのアコーディオンの追加
- アイテムの画面のサイドバーへの表示項目の追加
- メインウィンドウのヘッダーへのボタンの追加
- 検索ビューのタイトルバーへのメニューの追加
1. CUIを利用した設定例
ではさっそく、CUIを利用した具体的な設定例をご紹介していきます。
今回は、「TOC」・「アコーディオン」・「サイドバー」・「ヘッダー」・「タイトルバー」に対して設定していきます。
【1】 TOCにメニューを追加する
一つ目の例では、TOCに任意のWebページを開くためのメニューを追加してみます。
今回追加するメニューは、データを管理する目的ではないため、アイテムタイプを作らずにCUIの設定だけで行えます。
まず、今回利用するメソッドアイテムを新規作成します。
今回のサンプルコード（青字部分）は以下です。
window.open("https://www.google.com/search?q=aras+innovator");
TOC ＞ アドミニストレータ ＞ コンフィグレーション の中にある 「クライアントプレゼンテーション」のデータを検索します。
検索結果として表示されるデータの「Global」リンクをクリックします。
「コマンドバーセクション」タブで、シンプルサーチを選択し、ロケーションが「TOC」で
名称が「com.aras.innovator.cui_default.toc」のアイテムを検索し、ダブルクリックして開きます。
開いた画面で「編集」ボタンを押し、「コマンドバーアイテム」タブを開きます。
データを新規追加して以下のように入力したら、右クリックして開きます。
【アイテムタイプ】 メニューボタン（Menu Button）
【名称】 任意の名称（この例では、test_TOC_WebSearch）
【アクション】 追加
【アイデンティティ】 TOCにこのメニューを追加するアイデンティティ（この例では、World）
開いた画面で以下のように入力し、「完了」ボタンを押してタブを閉じます。
【ラベル】 TOC上に表示するメニュー名（この例では、Web検索）
【親メニュー】 このメニューを含めるTOCカテゴリ（この例では、（「My Innovator」フォルダ（com.aras.innovator.cui_default.toc_My Innovator）を指定）
【クリックメソッド】 任意のメソッド（この例では、最初に作成したメソッド）
【イメージ】 TOCやメインウィンドウのタイルに表示するアイコン
「コマンドバーセクション（com.aras.innovator.cui_default.toc）」の画面も「完了」ボタンを押して、閉じます。
ログインしなおし、TOCおよびメインウィンドウのタイルに、メニューが表示されていることを確認します。
【2】 アイテムの画面にアコーディオンを追加する
二つ目の例では、アイテムの画面にアコーディオンを追加してみます。
今回は、パーツの画面に3つ目のアコーディオンを追加し、「ドキュメント」と「CADドキュメント」のタブを表示します。
今回は、パーツの画面への変更なので、アイテムタイプ「Part」の「クライアントスタイル」タブを開き、データを右クリックして開きます。
開いた画面で「編集」ボタンを押し、「cui_PresentConfigWinSection」タブを開きます。
データを新規追加して以下のように入力したら、右クリックして開きます。
【分類】 Data Model
【名称】 任意の名称（この例では、Addordion3）
【ロケーション】 ItemView
【For Identity】 このアコーディオンを追加する任意のアイデンティティ（この例では、World）
開いた画面で、以下を参考に1行ずつデータの「新規作成」→「保存」を繰り返します。
4行追加し終えたら、「完了」ボタンを押してタブを閉じます。
【タイプ】 Accordion Element Control
【名称】 任意の名称（この例では、Acc3_Container）
【追加データ】 {"cssClass": "aras-item-view__relationship-accordion"}
【ソート順】 任意の数字（この例では、2000）
【アクション】 追加
【For Identity】 アコーディオンを追加する任意のアイデンティティ（この例では、World）
【タイプ】 Tab Container Control
【名称】 任意の名称（この例では、Doc_Tab_Container）
【追加データ】 {"attributes" : {"slot": "header"}}
【親】 Acc3_Container（上記で作成したアイテム）
【ソート順】 任意の数字（この例では、2050）
【アクション】 追加
【For Identity】 このアコーディオンにタブを追加する任意のアイデンティティ（この例では、World）
【タイプ】 Tab Element Control
【名称】 任意の名称（この例では、Document_Tab）
【ラベル】 タブに表示するラベル（この例では、ドキュメント）
【追加データ】 {"relTypeId": "09CBB0294FAB477AA7300906DC035462"}（右記のIDはタブ内に表示したいアイテムタイプのID）
【親】 Doc_Tab_Container（上記で作成したアイテム）
【ソート順】 任意の数字（この例では、3000）
【アクション】 追加
【For Identity】 アコーディオンにこのリレーションシップタブを追加する任意のアイデンティティ（この例では、World）
【タイプ】 Tab Element Control
【名称】 任意の名称（この例では、CAD_Tab）
【ラベル】 タブに表示するラベル（この例では、CADドキュメント）
【追加データ】 {"relTypeId": "C65FB7DC8C3A4EFC97A6EE8196C0B448"}（右記のIDはタブ内に表示したいアイテムタイプのID）
【親】 Doc_Tab_Container（上記で作成したアイテム）
【ソート順】 任意の数字（この例では、3050）
【アクション】 追加
【For Identity】 アコーディオンにこのリレーションシップタブを追加する任意のアイデンティティ（この例では、World）
4行データを追加し終えたら、「完了」ボタンを押してタブを閉じます。
「クライアントスタイル」の画面も「完了」ボタンを押して、閉じます。
任意のパーツのデータを開き、3つ目のアコーディオンが追加され、「ドキュメント」と「CADドキュメント」タブが追加されていることを確認します。
なお、上図で2つ目のアコーディオンに表示されている「ドキュメント」と「CADドキュメント」タブを非表示にしたい場合は、各リレーションシップタイプの中で設定します。
該当のリレーションシップタイプを開き、「全て非表示」にチェックを入れて保存すると、2つ目のアコーディオン内のタブが非表示になります（チェックを外すと再表示されます）。
【3】 アイテム画面のサイドバーに「ツリーグリッドビュー」アイテムを表示する
３つ目の例では、アイテム画面のサイドバーからツリーグリッドビューを参照できるようにします。
今回は、パーツ画面のサイドバーに設定します。
まず、ひとつ前の例（アコーディオンの追加）と同様の手順で、アイテムタイプ「Part」の「クライアントスタイル」タブ内のデータを右クリックして開きます。
開いた画面で「編集」ボタンを押し、「コマコマンドバーセクション」タブを開きます。
データを新規追加して以下のように入力したら、右クリックして開きます。
【分類】 Data Model
【名称】 任意の名称（この例では、Part_Custom_Sidebar）
【ロケーション】 ItemWindowSidebar
【sort_order】 任意の数字（この例では、256）
【アイデンティティ】 サイドバーにツリーグリッドビューを表示する任意のアイデンティティ（この例では、World）
開いた画面で「コマンドバーアイテム」タブを開きます。
データを新規追加して以下のように入力したら、右クリックして開きます。
【アイテムタイプ】 ボタン（Button）
【名称】 任意の名称（この例では、My_TGV_Button）
【並び順】 任意の数字（この例では、1200）
【アクション】 追加
【アイデンティティ】 サイドバーにボタンを追加する任意のアイデンティティ（この例では、World）
開いた画面で以下のように入力し、「完了」ボタンを押してタブを閉じます。
【追加データ】 { "tgvdId": "<ツリーグリッドビューアイテムのID>", "startConditionProvider": "ItemDefault({\"id\":\"id\"})" }
【クリックメソッド】 sidebar_default_tgv_click
【イメージ】 任意のイメージを選択（サイドバーがアクティブでないときに表示するアイコン）
【追加のイメージ】 任意のイメージを選択（サイドバーがアクティブなときに表示するアイコン）
「コマンドバーセクション（この例では、Part_Custom_Sidebar）」の画面も「完了」ボタンを押して、閉じます。
「クライアントスタイル」の画面も「完了」ボタンを押して、閉じます。
任意のパーツのデータを開き、サイドバーにボタンが追加され、ツリーグリッドビューが参照できるようになっていることを確認します。
【4】 メインウィンドウのヘッダーにボタンを追加する
4つ目の例では、メインウィンドウのヘッダーに、「ログアウト」ボタンを追加してみます。
TOC ＞ アドミニストレータ ＞ コンフィグレーション の中にある 「クライアントプレゼンテーション」のデータを検索します。
検索結果として表示されるデータの「Global」リンクをクリックします。
「コマンドバーセクション」タブで、シンプルサーチを選択し、名称が「com.aras.innovator.cui_default.mwh_header」のアイテムを検索し、ダブルクリックして開きます。
開いた画面で「編集」ボタンを押し、「コマンドバーアイテム」タブを開きます。
データを新規追加して以下のように入力したら、右クリックして開きます。
【アイテムタイプ】 ボタン（Button）
【名称】 任意の名称（この例では、Custom_Logout_Button）
【並び順】 任意の数字（この例では、200）
【アクション】 追加
【アイデンティティ】 ボタンを追加する任意のアイデンティティ（この例では、World）
開いた画面で以下のように入力し、「完了」ボタンを押してタブを閉じます。
【ツールチップテンプレート】 このボタンにカーソルを当てた時に表示する任意のテキスト
【追加データ】 {"right":true}
【クリックメソッド】 cui_default_mwh_onLogoutCommand
【イメージ】 任意のイメージを選択
「コマンドバーセクション（com.aras.innovator.cui_default.mwh_header）」の画面も「完了」ボタンを押して、閉じます。
ログインしなおし、Aras Innovatorのヘッダーにログアウト用のボタンが追加されていることを確認します。
【5】 検索ビューのタイトルバーにボタンを追加する
最後の例では、検索画面のタイトルバーに、該当のアイテムタイプを開くボタンを追加します。
また、このボタンはシステム管理者にのみ表示されるようにします。
まず、今回利用するメソッドアイテムを新規作成します。
以下のサンプルコード（青字部分）をコピーしてご利用ください。
var topWindow = aras.getMostTopWindowWithAras(window);
var workerFrame = topWindow.work;
if (workerFrame && workerFrame.itemTypeID) {
aras.uiShowItem('ItemType',workerFrame.itemTypeID);
}
TOC ＞ アドミニストレータ ＞ コンフィグレーション の中にある 「クライアントプレゼンテーション」のデータを検索します。
検索結果として表示されるデータの「Global」リンクをクリックします。
「コマンドバーセクション」タブで、シンプルサーチを選択し、名称が「searchview.titlebar.default」のアイテムを検索し、ダブルクリックして開きます。
開いた画面で「編集」ボタンを押し、「コマンドバーアイテム」タブを開きます。
データを新規追加して以下のように入力したら、右クリックして開きます。
【アイテムタイプ】 ボタン（Button）
【名称】 任意の名称（この例では、Open_ItemType_From_SearchView）
【並び順】 任意の数字（この例では、768）
【アクション】 追加
【アイデンティティ】 このボタンを追加する任意のアイデンティティ（この例では、Administrators）
開いた画面で以下のように入力し、「完了」ボタンを押してタブを閉じます。
【追加データ】 { "cssClass": "aras-button_d" }
【クリックメソッド】 任意のメソッド（この例では、最初に作成したメソッド）
【イメージ】 任意のイメージを選択
「コマンドバーセクション（searchview.titlebar.default）」の画面も「完了」ボタンを押して、閉じます。
任意のメニューの検索画面を開き、タイトルバーにアイテムタイプを開くボタンが追加されていることを確認します。
また、このボタンが表示されているのは、管理者（Administrators）のみであることも確認します。
前編・後編と２回にわたり、CUIについて紹介させていただきました。
貴社にとってより分かりやすく使いやすい画面作りの参考にしていただけますと幸いです。
それではまた次回、こちらでお会いしましょう★
アラスジャパン トレーナー 時田 和佳奈