https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/index.html Recent content in 4.4 UI設計 on JP1 Cloud Service 運用統合 利用ガイド Hugo -- gohugo.io ja https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/ui_version/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/ui_version/index.html 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の定義方法 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名). https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/uipath/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/uipath/index.html （1）機能概要 本機能により、以下の画面について、画面遷移にあわせたURLが表示されます。 ワークフロータブ（タスクアプリケーション、リクエストアプリケーション） チケットタブ（タスクアプリケーション、リクエストアプリケーション） スケジュールタブ（タスクアプリケーション） 定義したURLをアドレスバーに直接入力すると、該当する画面に遷移できます。定義されていないURLをアドレスバーに入力すると「NotFound」が表示されます。 また、パンくずリストの表示内容の定義ができ、パンくずリストの各階層にリンクを設定できます。 （図）チケット画面のURL表示・パンくずリスト （2）URL定義方法 ユーザー固有のアプリケーションを作成する際、アプリケーションにひもづけるUIに対してURL表示とパンくずリスト表示を定義できます。アプリケーション機能の詳細は「Application」を参照してください。 URL表示は、UipathのYAMLファイルとApplicationのYAMLファイルで定義し、[第1階層]/[第2階層]/[第3階層]/[第4階層以降]の構成からなります。 またパンくずリスト表示は、UipathのYAMLファイルで定義し、[第1階層]＞[第2階層以降]の構成からなります。 （図）チケット画面のURL表示・パンくずリスト構成 URL表示、パンくずリスト表示の各階層に表示される値について、以下に示します。設定を行うYAMLファイルは、ドキュメントを管理する任意のリポジトリに格納してください。 （表）各階層に表示される値 表示場所 YAMLファイル 表示される値 URLの第1階層 Application nameの値 URLの第2階層 tabs.nameの値 URLの第3階層 Uipath pathの値（pathTypeがstaticの場合） 任意の値※（pathTypeがdynamicの場合） URLの第4階層以降 子コンポーネントのUipath パンくずリストの 第1階層 Uipath labelの値（pathTypeがstaticの場合） 任意の値※（pathTypeがdynamicの場合） パンくずリストの 第2階層以降 子コンポーネントのUipath ※URLとパンくずリストに共通の、任意の値が割り当てられます。 Uipathの設定をする場合、ApplicationのYAMLファイルのtabsにuiではなくuipathを設定します。また、Uipathから遷移先情報を「navigateTo」、子コンポーネント情報を「children」で設定します。 （図）YAMLファイルの関係 【ApplicationのYAMLファイル】 ApplicationのYAMLファイルでは、tabsにuipathを設定し、作成したUipathのYAMLファイルの「name」を指定します。UipathのYAMLファイルの詳細は「Application」を参照してください。 （図）ApplicationのYAMLファイルの編集 【UipathのYAMLファイル】 本機能を使用する画面ごとにUipathのYAMLファイルが必要です。 UipathのYAMLファイルでは、表示コンポーネントのパスセグメント情報（pathType）、表示コンポーネントの遷移先情報（navigateTo）、子コンポーネントの情報（children）を設定します。 UipathのYAMLファイルの詳細は「Uipath」を参照してください。 （図）UipathのYAMLファイル https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/table_save/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/table_save/index.html ここでは次の項目について説明します。 テーブル表示の保存 配列の表示 カラムの表示・非表示 表示方式の設定 ルックアップフィールドから取得できるユーザー・グループ情報の変更 複数テーブルの結合表示 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で取得できるユーザー情報またはグループ情報を以下に表示できます。 https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/hint/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://itpfdoc.hitachi.co.jp/manuals/JCS/JCSM71029001/customer/uidesign/hint/index.html 本機能により、ワークフロー詳細画面の各入力フィールドにヒントメッセージを表示できます。 （図）ヒントメッセージの表示イメージ ヒントメッセージの設定をすると、入力フィールドにはてなマークのアイコンが表示されます。 はてなマークのアイコンをクリックするとヒントメッセージが出力され、ヒントメッセージ以外の箇所をクリックするとヒントメッセージが消えます。はてなマークのアイコンが表示される場所は入力フィールドの種類によって異なります。「（表）ヒントメッセージを使用できるコンポーネント・フィールド」を参照してください。 表示できるヒントメッセージには以下の特徴があります。 文字数：1～4096文字 1行に表示される文字数：40～50文字（この文字数を超えると折り返して表示します） コピー＆ペーストができる リンクの定義はできない フィールドが非活性の場合も表示される 本機能はUI（UIバージョン1.1）のYAMLファイルのhintMessageラベルで設定できます。詳細は「UI（UIバージョン1.1）」を参照してください。 【使用できるコンポーネントとフィールド】 ヒントメッセージの設定ができるコンポーネントとフィールドを以下に示します。 （表）ヒントメッセージを使用できるコンポーネント・フィールド コンポーネント フィールドの種類 表示位置 Form チェックボックス フィールドの右側 リッチテキストエディター※ ラベルの右側 その他 フィールドの左側 Paper ラベルの右側 Attachment ラベルの右側 ※リッチテキストエディターは以下の方法で表示することができます。 components.properties.fields.source: table（UIのYAMLファイル）の場合： Include先のDatamodelのYAMLファイルにて、columnの設定としてtype: textとする場合 components.properties.fields.source: schema（UIのYAMLファイル）の場合： Include先のDatamodelのYAMLファイルにて、schemas.fileで指定したJSON schemaファイルに、fieldの設定として以下を設定する場合 type: stringまたはnumber formControl: text YAML定義についての詳細は「UI（UIバージョン1.1）」、「Datamodel」を、JSON schemaファイルの設定についての詳細は「（表）フィールドのタイプと設定値の関係」を参照してください。