ゼロからの Aras Innovator ~CUIを利用した画面のカスタマイズ方法のご紹介(前編)~

みなさま、こんにちは!アラスジャパン トレーナーの時田です。

今回・次回と2回にわたり、CUI(Configurable User Interface)を利用した画面のカスタマイズ方法をご紹介していきます。
貴社にとって、よりわかりやすく使いやすい画面作りの参考にしてみてください。

 

  1. CUIとは
  2. CUIのデータモデル
    • プレゼンテーションコンフィグレーション
    • ウィンドウセクション
    • コントロール
    • コマンドバーセクション
    • コマンドバーアイテム
  3. CUIを利用した設定例
    • ツールバーへのボタンの追加
    • メニューの削除
    • ショートカットの追加

  


  

1. CUIとは

 

CUIConfigurable User Interfaceとは、管理者が画面のレイアウトと動作を定義するためのAras Innovatorのモデリングメカニズムです。 

CUIは、Aras Innovator 11.0の初期のサービスパックで導入され、当初は、「ツールバー」・「メニュー」・「キーボードのショートカット」のモデリング(カスタマイズ)を目的としていました。

Aras Innovator 12.0になり、WebクライアントのUX / UIが機能強化されたことでCUIの対応範囲も拡張され、「TOC」・「サイドバー」・「コンテキストメニュー」・「アコーディオンセクション」なども、モデリング(カスタマイズ)できるようになりました。

 

 

 

2. CUIのデータモデル

 


 

CUIのデータモデルは上記の5つのエレメントで構成されています。 

  1. プレゼンテーションコンフィグレーション
  2. ウィンドウセクション
  3. コントロール
  4. コマンドバーセクション
  5. コマンドバーアイテム

  

 それぞれ簡単にご説明していきます。

 

 

【1】 プレゼンテーションコンフィグレーション

「プレゼンテーションコンフィグレーション(※)」は、CUIのコンテナとして機能します。
※以前の日本語ラベルでは、「クライアントスタイル」という表現を用いています。

Aras Innovator全体に対して定義したい場合は、プレゼンテーションコンフィグレーション「Globalを利用し、アイテムタイプ固有の定義を行いたい場合は、各アイテムタイプ内にある「クライアントスタイル」タブを利用します。

 

 

 

なお、アイテムタイプの中で定義した内容は、プレゼンテーションコンフィグレーション「Global」の設定を上書き・拡張します。

 

 

 

【2】 ウィンドウセクション

「ウィンドウセクション」は、Aras Innovatorのウィンドウ構成の定義に利用し、プレゼンテーションコンフィグレーション「Global」と各アイテムタイプの双方に設定できます。

「ウィンドウセクション」には「データモデル」と「メソッド」の2パターンあり、「データモデル」は定義したいウィンドウ構成があらかじめ決まっている場合に、「メソッド」はプログラムが必要になる場合に利用します(例:プログラムで条件判定をして画面上にアコーディオンを追加する、など)。

 

 

 

 

 

 

【3】 コントロール

「コントロール」では、各「ウィンドウセクション」内のレイアウトを定義します。管理者は、「アクション」を指定することで、各コントロールを「追加」・「削除」・「置換」・「すべてをクリア」することができます。

 

 

上記の「Global」同様に、アイテムタイプでも「コントロール」を定義することができます。

 

なお、「コントロール」には以下のタイプがあります。
※設定例は、次回のブログでご紹介します。

  • Toolbar Control(ツールバーコントロール)
  • Accordion Element Control(アコーディオンエレメントコントロール)
  • Tab Container Control(タブコンテナコントロール)
  • Tab Element Control(タブエレメントコントロール)
  • Form Control(フォームコントロール)

 

 

 

【4】 コマンドバーセクション

「コマンドバーセクション」は、「プレゼンテーションコンフィグレーション」および「アイテムタイプのクライアントスタイル」に関連づいていて、「データモデル」と「メソッド」の2パターンあり、設定するプロパティも似通っているという点で、前述の「ウィンドウセクション」とよく似ています。

ただし、果たす役割は異なり、「ウィンドウセクション」がウィンドウ構成を定義するのに対し、「コマンドバーセクション」ではウィンドウ上で利用する様々なコンテンツ(ツールバーやコンテキストメニューなど)の定義を行います。

 

 

 

  

 

 

【5】 コマンドバーアイテム

「コマンドバーアイテム」は、上記の「コマンドバーセクション」の中で利用され、レイアウトや見た目だけではなくUI操作時の振る舞いも定義します。

 

  

上記の「Global」同様に、アイテムタイプでも「コマンドバーアイテム」を定義することができます。

 

なお、「コマンドバーアイテム」には、以下の種類があります。
※設定例は後述します。

  • ボタン
  • チェックボックス
  • ドロップダウン
  • セパレータ
  • メニュー
  • メニューボタン
  • メニューセパレータ
  • メニューチェックボック
  • ショートカット
  • 編集

 

 

 

 

3. CUIを利用した設定例

 

ここからは、CUIを利用した具体的な設定例をご紹介していきます。

今回は「ツールバー」・「メニュー」・「ショートカット」に対して設定していきます。
TOC」・「アコーディオン」・「サイドバー」・「ヘッダー」・「タイトルバー」への設定例は、次回のブログでご紹介)

 

 

【1】 ツールバーにボタンを追加する

一つ目の例では、各アイテムの画面のツールバー「画面分割し、タブを左右に移動させる」ボタンを追加します。

まずは、今回利用する2つの「メソッド」アイテムを新規作成します。

 

 

以下のサンプルコード(青字部分)をコピーしてご利用ください。

 

【sample_CUI_DockTab】

var tabsContainer = aras.getMainWindow().mainLayout.tabsContainer;
if (!tabsContainer.isDockedTab(window.name)) {
    tabsContainer.dockTab(window.name);
}

 

【sample_CUI_UndockTab】

var tabsContainer = aras.getMainWindow().mainLayout.tabsContainer;

// スクリーン分割していない場合は一度全てのタブをドック(左へ移動)
if (tabsContainer.dockHeaderTabs.tabs.length === 0) {
    var to_dock = Array.from(tabsContainer.undockHeaderTabs.tabs);
    for (var i = 0; i < to_dock.length; ++i) {
        tabsContainer.dockTab(to_dock[i]);
    }
}

// 自タブがドックされていたらアンドック(右へ移動)
if (tabsContainer.isDockedTab(window.name)) {
    tabsContainer.undockTab(window.name);
}

 

 

メソッドが完成したら、プレゼンテーションコンフィグレーション「Global」を開きます。

  1. TOC > アドミニストレータ > コンフィグレーション > クライアントプレゼンテーション を開きます。
  2. 「クライアントプレゼンテーション」の検索グリッドを開いて、検索実行します。
  3. 検索されたアイテムのGlobal」リンクをクリックします。

 

 

  1. 「コマンドバーセクション」タブを開きます。
  2. 「シンプルサーチ」を選択します
  3. 「ロケーション」「ItemView.ItemCommandBar」を指定し、検索実行します。
  4. 「分類」Data Modelのアイテム(名称itemview.itemcommandbar.default)をダブルクリックして開きます。

 

 

  1. 「編集」ボタンを押し、「コマンドバーアイテム」タブを開いて「新規追加」ボタンを押します。
  2. ダイアログから「ボタン」を選択します。
  3. 「はい」を押します。

 

 

  1. 上図を参考に「名称」・「並び順」・「アクション」・「アイデンティティ」を指定します。
  2. 同じ操作を繰り返して、2つ目のボタンも新規追加してください。
  3. ボタンを2つ追加したら、1行ずつ右クリックして開きます。

 

 

  1. 「ツールチップテンプレート」を指定します。
  2. 「クリックメソッド」に最初に作成したメソッドを指定し、「イメージ」も選択します。
  3. 「完了」ボタンを押して、タブを閉じます。

  

 

  1. 「コマンドバーセクション(itemview.itemcommandbar.default)」の画面でも「完了」ボタンを押し、タブを閉じます。
  2. これで設定が完了しました!!動作確認してみます。

 

 

  1. 任意のアイテムを複数開きます。
  2. 新規追加したボタンを利用し、画面分割されたり、タブが左右に移動したりすることを確認します。 

なお、今回は、アイテムの画面のツールバーを対象にしましたが、検索グリッドのツールバーやタイトルバー等にも同様の手順で設定できます。

 

 

 

【2】 メニューを削除する

二つ目の例では、特定のユーザ(今回は、All Suppliersグループのメンバー)のみ、各アイテムの画面のツールバーから「共有」メニューを削除する方法をご紹介します。

 

 

先ほどと同様の手順でプレゼンテーションコンフィグレーション「Global」を開き、先ほどと同じ「コマンドバーセクション(名称itemview.itemcommandbar.default)」を検索して開きます。

  1. 「編集」ボタンを押し、「コマンドバーアイテム」タブを開いて「既存のアイテムを追加」ボタンを押します。
  2. アイテムタイプがMenuで名称が「itemview.itemcommandbar.default.share」のコマンドバーアイテムを検索し、選択します。
  3. 「はい」を押します。

 

 

  1. 上図を参考に「並び順」・「アクション」・「アイデンティティ」を指定します。
  2. 「完了」ボタンを押します。
  3. これで設定が完了しました!!動作確認してみます。

 

 

  1. 「共有」メニューを削除したAll Suppliers」のメンバーでログインします。
  2. 「共有」メニューが表示されないことを確認します。
  3. それ以外のメンバーでログインします。
  4. これまで通り、「共有」メニューが表示されることを確認します。

 

 

 

【3】 ショートカットを追加する

最後の例では、各アイテムのフォーム上で、新規作成画面を開くための「ショートカット」を追加します。

 

まずは、今回利用する「メソッド」アイテムを新規作成します。

 

以下のサンプルコード(青字部分)をコピーしてご利用ください。

 

sample_CUI_NewItem

var itemtype = window.itemTypeName;
if (itemtype) {
    aras.uiNewItemEx(itemtype);
}

 

 

メソッドが完成したら、また同じ手順でプレゼンテーションコンフィグレーション「Global」を開きます。

  1. プレゼンテーションコンフィグレーション「Globalを開いたら、「コマンドバーセクション」タブを選択します。
  2. 名称が「com.aras.innovator.cui_default.itemWindowShortcuts「コマンドバーセクション」を検索し、開きます。

 

 

  1. 「編集」ボタンを押し、「コマンドバーアイテム」タブを開いて「新規追加」ボタンを押します。
  2. ダイアログから「ショートカット」を選択します。
  3. 「はい」を押します。

 

 

  1. 上図を参考に「名称」・「並び順」・「アクション」・「アイデンティティ」を指定します。
  2. 右クリックして開きます。

 

 

  1. 「ショートカット(alt+ctrl+n)を指定します。
  2. 「ハンドラ」に最初に作成したメソッドを指定します。
  3. 「完了」ボタンを押して、タブを閉じます。

 

 

  1. 「コマンドバーセクション(com.aras.innovator.cui_default.itemWindowShortcuts)」の画面でも「完了」ボタンを押し、タブを閉じます。
  2. これで設定が完了しました!!動作確認してみます。

 

 

  1. 任意のアイテムの画面を開きます。
  2. フォーム上で「Ctrl + Alt + N」を押します。
  3. 新規作成画面が開くことを確認します。

 

 

 

今回は、CUIのデータモデルと、データモデルを利用した「ツールバー」・「メニュー」・「ショートカット」への設定例を紹介させていただきました。

なお、マニュアル「Configurable User Interface Administrator Guide.pdf」には、より詳細な説明や、上記以外の設定例も掲載されていますので、ぜひあわせてご覧ください。

次回のブログ(後編)では、TOC」・「アコーディオン」・「サイドバー」・「ヘッダー」・「タイトルバー」に設定していきます。

 

それではまた次回、こちらでお会いしましょう★
アラスジャパン トレーナー 時田 和佳奈