4.4.3 テーブル表示
ここでは次の項目について説明します。
UIバージョン1.1では、タスク、リクエストアプリケーションのワークフロー詳細画面や、ユーザーが作成するアプリケーションの画面で表示されるテーブルに表示の保存や表示方式などの設定ができます。Ops Iが提供するアプリケーションの一部にはテーブル表示の保存機能が搭載されています。該当のアプリケーションは「（表）テーブル表示の保存機能が設定されているアプリケーション」を参照してください。
（1）テーブル表示の保存
本機能により、ユーザーが操作中に変更したテーブルの以下の設定を保存し、次回表示時に同じ設定で表示できます。
- 列の表示・非表示
- 列の順序
- 列幅の変更
- ソートの状態
- フィルタの状態
注意事項
- ルックアップダイアログには、本機能は適用されません。
- チケットアプリケーションのフィルタ機能では、本機能は使用できません。
- 設定はブラウザーで保存されるため、異なるブラウザーや端末で表示した場合、設定は初期状態に戻ります。
- 設定はキャッシュクリアなどで消えることがあります。
ユーザーは、タスク、リクエストアプリケーションのワークフロー詳細画面や、ユーザーが作成するアプリケーションの画面に本機能の設定ができます。
UI（UIバージョン1.1）のマニフェストファイルのrememberViewSettingsキーで設定します。詳細は「UI（UIバージョン1.1）」を参照してください。
またOps Iで提供するアプリケーションの中で、本機能が搭載されているアプリケーションを以下に示します。
（表）テーブル表示の保存機能が設定されているアプリケーション
| アプリケーション | タブ | 項目 | 対象 |
|---|---|---|---|
| リクエスト | ワークフロー | ワークフロー詳細画面以外のテーブル ワークフロー詳細画面は、ユーザーの設定に依存します。 |
|
| チケット | チケット詳細画面の関連レコードのテーブル（ワークフロー、チケット）、サービスカタログ | ||
| タスク | ワークフロー | ワークフロー詳細画面以外のテーブル ワークフロー詳細画面は、ユーザーの設定に依存します。 |
|
| チケット | チケット詳細画面の関連レコードのテーブル（ワークフロー、チケット）、サービスカタログ | ||
| スケジュール | 作業項目 | 対象のテーブルはありません | |
| リソース | |||
| 予定表管理 | 予定表 ただしフィルタ機能では本機能は使用できません。 |
||
（2）配列の表示
テーブルのカラムにデータ型が配列の値が設定されると、1つのカラム内に複数の値が表示されます。デフォルトでは、値はカンマ（,）区切りで表示されます。表示される文字列が表示しきれない文字列は、
アイコンをクリックすると、すべて表示されます。
ロール名にカンマ（,）が使用されているなどの理由から区切り文字を使用したくない場合、chipコンポーネントを使用して配列のカラムを表示することもできます。chipコンポーネントを使用する場合、typeキーに"chip"を指定してください。詳細は「（表）Formのプロパティ（UIバージョン1.1）」と「（表）Tableのプロパティ（UIバージョン1.1）」を参照してください。
（3）カラムの表示・非表示
テーブルに表示されるカラムをデフォルトで表示するかどうかを設定できます。
デフォルトで非表示にしたい場合は、hideに"true"を指定してください。
hideキーの詳細は「（表）Formのプロパティ（UIバージョン1.1）」と「（表）Tableのプロパティ（UIバージョン1.1）」を参照してください。
（4）表示方式の設定
テーブルの表示方式を切り替えられます。表示形式を切り替えるには、以下のFormコンポーネント、Tableコンポーネントのmodeキーで、"client"または"server"を指定します。
- Formコンポーネント：
properties.fields.lookup.mode - Tableコンポーネント：
properties.mode
"client"を指定すると、指定したテーブルのレコードを全件読み込み、ブラウザー上でソートとフィルタをします。ブラウザー上でソートとフィルタをするため、操作性が向上します。ただし、レコードを全件読み込むため、GUIに表示されるまで時間がかかることがあります。レコード数が1,000件以下のテーブルを表示する場合に使用することを推奨します。
"server"を指定すると、1ページに表示する行数（rowCountの値）分のレコードを、ページを表示する度に取得します。また、ソートやフィルタをする度にサーバーからレコードを取得します。"client"の指定では表示に時間がかかる場合や、数千件を超えるようなテーブルを表示する場合に使用することを推奨します。
modeキーの詳細は「（表）Formのプロパティ（UIバージョン1.1）」と「（表）Tableのプロパティ（UIバージョン1.1）」を参照してください。
注意事項
- Tableコンポーネントのmodeキーで"server"を指定している場合、Tableコンポーネントで選択中の行のレコードが削除されてもGUIから検知できず選択状態が解除されません。
そのため、UIのアクション内でレコードを削除する際に明示的に選択状態を解除するか、選択したレコードに対して操作する際にレコードが存在するかをチェックすることを推奨します。
選択状態の変更はアクションで行えます。詳しくは「アクションのスクリプト（UIバージョン1.1）」を参照してください。 - Tableコンポーネントのmodeキーが"client"の場合、カラムのソートはブラウザーの言語が考慮されます。modeキーが"server"の場合、カラムのソートは言語が考慮されません。
そのため、カラム内の値に記号や漢字が含まれると、以下のように表示が異なることがあります。- modeキーの値によって、ソート結果が異なる
- modeキーが"client"の場合、初期表示時のソート結果とテーブル操作によるソート結果が異なる
（5）ルックアップフィールドから取得できるユーザー・グループ情報の変更
ユーザーまたはグループの指定にルックアップフィールドを使用する場合、APIで取得できるユーザー情報またはグループ情報を以下に表示できます。
- ルックアップダイアログのユーザーまたはグループの属性
- フィールドの表示名
APIで取得できるユーザー情報、グループ情報の詳細は「JP1 Cloud Service 運用統合 APIリファレンス」の「APIリファレンス詳細＞標準提供API」の以下を参照してください。
- user:UserList：標準提供API（v1）のGET /users
- group:GroupList：標準提供API（v1）のGET /groups
- group:GroupAncestors：標準提供API（v2）のGET /groups/{id}/ancestors
- group:GroupDescendants：標準提供API（v2）のGET /groups/{id}/descendants
APIを使用しない場合に、ユーザーまたはグループを指定するルックアップフィールドで表示される項目については、「（表）userテーブル」と「（表）groupテーブル」を参照してください。
APIを使用する場合、設定は以下の手順で行います。
- dataSource.apisの設定
dataSource.apisキーを設定してください。
（表）dataSource.apisの設定キー 設定値 apis: - name: ユーザー定義名を指定してください。
コンポーネントから参照するときに使用します。apisの中で一意である必要があります。api: 次の値を設定してください。 - ユーザーを表示する場合：
user:UserList - グループを表示する場合：
group:GroupList - 特定のグループの先祖グループを表示する場合：
group:GroupAncestors - 特定のグループの子孫グループを表示する場合：
group:GroupDescendants
version: group:GroupAncestorsとgroup:GroupDescendantsの場合は、必ず"2"を指定してください。
user:UserListとgroup:GroupListの場合は、省略もしくは"1"を指定してください。parameters: - name: "id"、"sortBy"、"filterBy"、"subscribed"、"relatedDepth"から指定してください。使用するAPIによって、指定できるパラメータが異なります。 - id：
"group:GroupAncestors"、"group:GroupDescendants"で必ず指定する。
基準となるグループのIDを指定する。
- name: id
type: query
value: groupId - sortBy：
"user:UserList"、"group:GroupList"、"group:GroupAncestors"、"group:GroupDescendants"で指定できる。
表示するデータをあらかじめソートしておきたい場合に指定する。
例）作成日時の降順で表示する場合
- name: sortBy
type: fixed
value: createdOn:desc - filterBy：
"user:UserList"、"group:GroupList"、"group:GroupAncestors"、"group:GroupDescendants"で指定できる。
表示するデータをあらかじめフィルタリングしておきたい場合に指定する。
例）会社名がhitachiのユーザーを表示する場合
- name: filterBy
type: fixed
value: company:eq:hitachi - subscribed：
"user:UserList"で指定できる。
課金ユーザー/非課金ユーザーを選択して表示したい場合に指定する。
例）課金ユーザーを表示する場合
- name: subscribed
type: fixed
value: true - relatedDepth：
"group:GroupAncestors"、"group:GroupDescendants"で指定できる。
基準となるグループから近い階層の先祖もしくは子孫グループだけを表示する場合に指定する。
例）親グループもしくは子グループを表示する場合
- name: relatedDepth
type: fixed
value: 1
parameter: type: 以下を指定してください。 - uipath：URLのパスパラメータ
- query：URLのクエリパラメータ
- fixed：固定値
value: typeによって、以下を指定してください。 - uipathの場合：指定したいパスパラメータにひもづくUipathのマニフェストファイルのname
- queryの場合：URLのクエリパラメータ名
- fixedの場合：指定したい値
origin: "content"を指定してください。
- ユーザーを表示する場合：
- Formコンポーネントのlookupキーの設定
lookupキーを含むFormコンポーネントを作成し、lookupキーからapiを参照します。
（表）Formコンポーネントのlookupキーの設定キー 設定値 displayName: 次の形式で表示するカラム名を設定してください。
dataSource.apis.nameの値.カラム名lookup: mode: "client"または"server"を指定してください。
"server"の指定を推奨します。field: 次の形式でidを設定してください。
dataSource.apis.nameの値.idlabelQuery: デフォルト値から変更が不要なため、定義は不要です。 columns: ルックアップダイアログに表示されるカラムを指定します。 column: 次の形式でルックアップダイアログに表示されるカラムを指定してください。
dataSource.apis.nameの値.プロパティ名source: "api"を指定してください。
記載されていない項目は「（表）Formのプロパティ（UIバージョン1.1）」を参照のうえ、設定してください。
＜定義例＞
- dataSource.apisの定義例
includes:
- kind: api
name: user_apis
dataSource:
- name: searchUser
api: user:UserList
origin: content
parameters:
- name: filterBy
parameter:
type: fixed
value: department:eq:OPF
- Formコンポーネントのlookupキーの定義例
- name: test_form
type: form
properties:
fields:
- name: user
source: schema
field:
all: test_form_schema.user
label: ユーザー
properties:
xs: 12
sm: 12
displayName: searchUser.username
lookup:
mode: server
field: searchUser.id
columns:
- name: username
column: searchUser.username
label: ユーザー名
source: api
filterable: true
sortable: true
- name: email
column: searchUser.email
label: メールアドレス
source: api
filterable: true
sortable: true
（6）複数テーブルの結合表示
複数のテーブルを結合して表示できます。
詳細は「データモデルの種類」を参照してください。