4.4.3 テーブル表示

ここでは次の項目について説明します。

UIバージョン1.1では、タスク、リクエストアプリケーションのワークフロー詳細画面や、ユーザーが作成するアプリケーションの画面で表示されるテーブルに表示の保存や表示方式などの設定ができます。Ops Iが提供するアプリケーションの一部にはテーブル表示の保存機能が搭載されています。該当のアプリケーションは「（表）テーブル表示の保存機能が設定されているアプリケーション」を参照してください。

（1）テーブル表示の保存

本機能により、ユーザーが操作中に変更したテーブルの以下の設定を保存し、次回表示時に同じ設定で表示できます。

  • 列の表示・非表示
  • 列の順序
  • 列幅の変更
  • ソートの状態
  • フィルタの状態

注意事項注意事項

  • ルックアップダイアログには、本機能は適用されません。
  • チケットアプリケーションのフィルタ機能では、本機能は使用できません。
  • 設定はブラウザーで保存されるため、異なるブラウザーや端末で表示した場合、設定は初期状態に戻ります。
  • 設定はキャッシュクリアなどで消えることがあります。

ユーザーは、タスク、リクエストアプリケーションのワークフロー詳細画面や、ユーザーが作成するアプリケーションの画面に本機能の設定ができます。
UI（UIバージョン1.1）のYAMLファイルの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）」を参照してください。


（5）ルックアップフィールドから取得できるユーザー・グループ情報の変更

ユーザーまたはグループの指定にルックアップフィールドを使用する場合、APIで取得できるユーザー情報またはグループ情報を以下に表示できます。

  • ルックアップダイアログのユーザーまたはグループの属性
  • フィールドの表示名

APIで取得できるユーザー情報、グループ情報の詳細は「JP1 Cloud Service 運用統合 APIリファレンス」の「APIリファレンス詳細＞標準提供API」の以下を参照してください。

  • APIの詳細「GET /users/{id}」のレスポンスの詳細「dtos.UserDTO」
  • APIの詳細「GET /groups/{id}」のレスポンスの詳細「dtos.GroupDTO」

APIを使用しない場合にユーザーまたはグループを指定するルックアップフィールドで表示される項目については、「（表）userテーブル」と「（表）groupテーブル」を参照してください。

APIを使用する場合、設定は以下の手順で行います。

  1. dataSource.apisの設定
    dataSource.apisラベルを設定してください。

    （表）dataSource.apisの設定
    ラベル 設定値
    apis:
    - name: ユーザー定義名を指定してください。
    コンポーネントから参照するときに使用します。apisの中で一意である必要があります。
    api: 次の値を設定してください。
    • ユーザーの場合：
      user:UserList
    • グループの場合：
      group:GroupList
    このとき、"user:UserList"を指定する場合はinclude.kindラベルに"api"とinclude.nameラベルに"user_apis"を、"group:GroupList"を指定する場合はinclude.kindラベルに"api"とinclude.nameラベルに"group_apis"を指定してください。
    parameters: 表示されるデータに対して、あらかじめソートやフィルタリングをしたい場合や、課金ユーザー/非課金ユーザーを選択して表示したい場合に設定してください。
    - name: "sortBy"、"filterBy"、"subscribed"※のいずれかを指定してください。
    • sortBy：
      表示するデータをあらかじめソートしておきたい場合に指定
      例）作成日時の降順で表示する場合
      - name: sortBy
        type: fixed
        value: createdOn:desc
    • filterBy：
      表示するデータをあらかじめフィルタリングしておきたい場合に指定
      例）会社名がhitachiのユーザーを表示する場合
      - name: filterBy
        type: fixed
        value: company:eq:hitachi
    • subscribed：
      課金ユーザー/非課金ユーザーを選択して表示したい場合に指定
      例）課金ユーザーを表示する場合
      - name: subscribed
        type: fixed
        value: true
    parameter:
    type: "fixed"を指定してください。
    value: 固定値を指定してください。
    指定できる値は「JP1 Cloud Service 運用統合 APIリファレンス」の「APIリファレンス詳細＞標準提供API」の「GET /users」と「GET /groups」を参照してください。
    origin: "content"を指定してください。
    ※グループの場合、"subscribed"は指定できません。

  2. Formコンポーネントのlookupラベルの設定
    lookupラベルを含むFormコンポーネントを作成し、lookupラベルからapiを参照します。

    （表）Formコンポーネントのlookupラベルの設定
    ラベル 設定値
    displayName: 次の形式で表示するカラム名を設定してください。
    dataSource.apis.nameの値.カラム名
    lookup:
    mode: "client"または"server"を指定してください。
    "server"の指定を推奨します。
    field: 次の形式でidを設定してください。
    dataSource.apis.nameの値.id
    labelQuery: デフォルト値から変更が不要なため、定義は不要です。
    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）複数テーブルの結合表示

複数のテーブルを結合して表示できます。
詳細は「データモデルの種類」を参照してください。