4.4.1 UIバージョン

UIのバージョンは1.0と1.1があり、UIバージョン1.0に対しUIバージョン1.1は以下が改良、追加されています。

  • ユーザーが作成する画面の自由度が向上
  • Ops Iで用意されている画面のカスタム性が向上
  • UIのYAMLファイルの可読性向上、記述量減少

改良、追加機能の詳細は「改良、追加機能」を参照してください。

ワークフロータブ、チケットタブ、スケジュールタブでOps Iとして提供する画面はUIバージョン1.1が適用されています。また、ユーザーが画面を作成する場合、ワークフロータブ、チケットタブ、スケジュールタブについてはUIバージョン1.1のコンポーネントを使って画面を作成できます。詳細は「UIバージョンの指定」、「YAML定義方法の差異」を参照してください。

ただし、UIバージョン1.1ではStepperコンポーネントとLoad機能は未サポートです。これらの機能を使用する場合は、UIバージョン1.0を使用してください。

（1）UIバージョンの指定

UIバージョンの指定は、YAMLファイルのapiVersionラベルで行います。UIバージョン1.0で作成したUIと、UIバージョン1.1で作成したUIはどちらも表示可能です。

  • UIバージョン1.0の場合、「apiVersion: 1.0」
  • UIバージョン1.1の場合、「apiVersion: 1.1」

ScriptのYAML定義とuipathのYAML定義はUIのYAMLファイルのUIバージョンによらず同じ定義ですが、アクション内容を定義したJavaScriptの定義はUIバージョンによって異なります。詳細は下表の参照先を確認してください。

（表）UIバージョン別の定義ファイル

YAML定義 UIバージョン1.0 UIバージョン1.1
UI UI（UIバージョン1.0） UI（UIバージョン1.1）
Script Script（apiVersionは1.0です。）
JavaScript アクションのスクリプト（UIバージョン1.0） アクションのスクリプト（UIバージョン1.1）
Uipath Uipath（apiVersionは1.1です。）

（2）YAML定義方法の差異

定義方法にはUIバージョンによって以下の違いがあります。

1. Attachmentの定義方法

UIバージョン1.0では、UIからDatamodelを介してAttachmentの定義を参照しますが、UIバージョン1.1では、UIから直接Attachmentの定義を参照します。

（図）Attachmentの定義方法

Attachmentの定義方法 Attachmentの定義方法

2. データソースの定義方法

UIバージョン1.0では、FormやTableごとにデータソースを指定しますが、UIバージョン1.1ではUIごとにデータソースを指定します。これにより通信性能が向上します。

（図）データソースの定義方法

データソースの定義方法 データソースの定義方法


3. アクションのスクリプト

UIバージョン1.0に対しUIバージョン1.1は、各コンポーネントのスクリプトが機能に対しわかりやすい名称になっています。

以下にUIバージョン1.0とUIバージョン1.1でスクリプトが変更になるアクションについて記載します。詳細は「アクションのスクリプト（UIバージョン1.0）」、「アクションのスクリプト（UIバージョン1.1）」を参照してください。

（表）スクリプトのバージョン対応表

アクション UIバージョン1.0 UIバージョン1.1
【Workflow】
contextの取得		 OICommon(Form名).getComponent().[Form名].context OIUi.getContext()
【Form】
現在入力値の取得		 OICommon(Form名).getComponent().[Form名].current.table[customTable名] OIForm(Form名).getFieldValues()
OIForm(Form名).getFieldValue("field1")
指定したフィールドの値のみ取得することも可能
【Form】
バリデーションの実施		 OICommon(Form名).formValid() OIForm(Form名).validate()
【Table】
選択行IDの取得		 OICommon(Table名).getComponent().[Table名].rowsSelected OITable(Table名).getSelectedRows()
選択行の全データが取得できる。
【全般】
表示の切り替え		 OICommon(オブジェクト名).hide()/show() OIForm(Form名).setVisible(true/false)
OIActionButton(ActionButton名).setVisible(true/false)
FormのField単位では切り替え不可 OIForm(Form名).setFieldVisible(FieldName, true/false)


（3）改良、追加機能

UIバージョン1.1で改良、追加された機能を説明します。

1. Formコンポーネントの表現力向上
  • Gridレイアウトでフィールドの幅を比率で自由に設定できます。
    （UIバージョン1.0ではtextAreaはForm幅、textArea以外はFormの半分の幅で固定）
  • 任意の位置での配置折り返しができます。
  • 3つ以上のtextAreaを配置できます。
  • textAreaの幅をWindowサイズに合わせて指定できます。
  • フィールドにチェックボックスやプルダウンの表示ができます。
  • 以下のアクションでフィールドの値を設定することができます。
    • OIForm.setFieldValue
    • OIForm.setFieldExtensions
2. AttachmentのUI改良
  • ファイルの表示が横並びではなく縦に配置できます。
  • ドラッグアンドドロップのファイル保存ができます。

3. Cardコンポーネント（ステータスのアイコン）の追加
  • リンクなどに使えるカードコンポーネントが使用できます。

4. icon、icon buttonコンポーネントの追加
  • セルの左右にMaterial UIのアイコンが表示できます。
  • 条件によって表示を制御できます。
  • アイコンにアクションをひもづけることができ、クリック時の実行が可能です。

5. chipコンポーネント（ステータスのアイコン）のカスタム性向上
  • カラーコードによって色のカスタムができます。
  • 条件による色の切り替えができます。

6. Tableコンポーネントのリスト内のstepperアイコン追加、リスト値の表示
  • 種類を指定したstepperアイコンの表示ができます。
  • 条件によってアイコンの種類を切り替えることができます。
  • 1つのセルに複数の値を表示できます。

7. その他
  • オリジナルのフィールド構成のFormコンポーネントを作成することができ、そのFormに入力した値をTableコンポーネントの値に反映することができます。
  • チケットブラウザー画面のチケット詳細タブのように、選択したチケットなどをタブで表示できます。詳細は「（図）チケットブラウザー画面」②を参照してください。
  • ワークフローのOps Iで提供しているアクションボタン（標準アクションボタン）をカスタムすることができます。詳細は「標準アクションボタンをカスタムしたい場合」を参照してください。
  • テーブルに対してユーザーが行った表示設定を保存する機能を設定できます。詳細は「テーブル表示の保存」を参照してください。
  • ユーザーが作成する画面の各入力フィールドにヒントメッセージを表示する機能を設定できます。詳細は「ヒントメッセージの表示」を参照してください。