6.2.2 UI（UIバージョン1.1）

以下にUI定義と定義例を示します。UIの詳細については「UI設計」を参照してください。

（表）UI定義（UIバージョン1.1）

ラベル						デフォルト値	必須^※	説明
apiVersion:							Yes	APIバージョン 1.1を指定する
kind:							Yes	uiを指定する
type:							No	resourceを指定する Ops Iの運用機能に追加する新しい定義であることを示す
name:							Yes	UI定義の内部名 nameは以下のルールに従う必要があります。本YAMLファイルのディレクトリ名を指定入力可能な文字は以下の通り半角英数字： a～z A～Z 0～9 半角の特殊文字： _ . ( ) - 先頭文字が半角英数字かアンダーバー（_）その他の注意点は「YAMLファイル作成時の注意」2～4を参照
label:							Yes	YAMLファイルに記載する運用機能の表示名
includes:							No	このYAMLファイルで利用する関連YAMLファイルを記載メモ記載するYAMLファイルはこのYAMLファイル登録前にOps Iに登録されている必要があります。 includesラベルを指定することにより、他のYAMLファイルで定義した内容を取り込むことができます。例えば、UIで利用するデータ項目、入力値チェックやボタンクリック時のアクション、ワークフローに添付するファイルの命名ルールを定義した、Datamodel、Script、AttachmentのYAMLファイルを取り込む場合に使用します。
	- kind:						Yes	読み込むYAMLファイルの種類
	name:						Yes	読み込むYAMLファイルの内部名
description:							No	このYAMLファイルに対する詳細説明テンプレート機能を利用して記述することができる
editmode:						normal	No	以下を指定できる。 normal：UI内を常に編集できる。 protected：アクションボタンのタイプが"edit"のボタンをクリックしないと編集できない。 readonly：常に読み取り専用
rememberViewSettings:						false	No	Tableコンポーネントで、ユーザーが表示を変更した場合の設定について以下を指定する。 true：表示設定を保存する false：表示設定を保存しない
context:							No	contextIDの取得方法
	type:						No	以下を指定できる。 uipath：URLのパスパラメータ query：URLのクエリパラメータ fixed：固定値
	value:						No	typeによって以下を指定できる。 uipathの場合、指定したいパスパラメータにひもづくUipathのYAMLファイルのname このUIをワークフローで使用する場合、typeにuipath、valueにworkflow_detail_by_context_idを指定する必要がある。 queryの場合、URLのクエリパラメータ名 fixedの場合、指定したい値
attachment:							No	AttachmentのYAMLファイルの"name" Attachmentはワークフローでのみ使用できる。
dataSource:							No	使用するデータソース
	schemas:						No	カスタムテーブルを使用せずに、入力されたデータを一時的に利用するフォームを使用したい場合に指定する。例）フィルタ条件の入力、検索条件の入力など
		- name:					Yes	ユーザー定義名。schemasの中で一意である必要がある。
		schema:					Yes	includesで指定したDatamodelのYAMLファイルのschema名
	apis:						No	Formコンポーネントのルックアップフィールドのsourceラベルにapiを使用する場合に指定する。
		- name:					Yes	ユーザー定義名。apisの中で一意である必要がある。
		api:					Yes	次の値を設定してください。ユーザーの場合： user:UserList グループの場合： group:GroupList 詳細は「（表）dataSource.apisの設定」を参照。
		parameters:					No
			- name:				Yes	"sortBy"、"filterBy"、"subscribed"から指定する。詳細は「（表）dataSource.apisの設定」を参照。
			parameter:				Yes
				type:			Yes	"fixed"を指定する。
				value:			Yes	固定値を指定してください。
		origin:					No	対象データまでのパス FormコンポーネントやTableコンポーネントのフィールドはこのフィールド以降のパスを指定する。APIのresponseのJSON Schemaに対して有効であることが必要。
	tables:						No	カスタムテーブルを使用する場合指定する。カスタムテーブルについては「データモデルの種類」を参照。
		- name:					Yes	ユーザー定義名。tablesの中で一意である必要がある。
		table:					Yes	includesで指定したDatamodelのYAMLファイルのtable名
		view:					No	データモデルの用途別詳細処理を指定する。
			<CRUD>:				No	用途（create/read/update/delete）を指定する。
				- graphql:			Yes	ユーザーが定義するGraphQL。nullだった場合は、UI基盤のデフォルトのGraphQLを使用する。modeにserverを指定しているFormまたはTableコンポーネントで使用する場合は、必ずnullを指定してください。
				override:			No	graphqlプロパティがnullだった場合に使用する。デフォルトのGraphQLのフィルタを上書きする。modeにclientを指定しているFormまたはTableコンポーネントで使用する場合に指定できる。
					<<HASURA table field arguments>>:		No	graphqlで使用可能なプロパティ
		parameters:					No	graphqlに対するパラメータ
			- name:				Yes	パラメータ名 parameters内で一意である必要がある。
			parameter:				Yes
				type:			Yes	以下を指定できる。 uipath：URLのパスパラメータ query：URLのクエリパラメータ fixed：固定値
				value:			Yes	typeによって以下を指定する。 uipathの場合、指定したいパスパラメータにひもづくUipathのYAMLファイルのname queryの場合、URLのクエリパラメータ名 fixedの場合、指定したい値
		autorefresh:				0	No	自動リフレッシュの間隔（秒）
		action:					No	データモデルで発生するアクションを指定する。アクションについては「Script」を参照。「（表）各コンポーネントでの実行タイミングおよび関数名一覧（UIバージョン1.1）」の"handleAfterLoadData"を捕捉して処理を実行する。
	views:						No	カスタムビューを使用する場合指定する。カスタムビューについては「データモデルの種類」を参照。
		- name:					Yes	ユーザー定義名。viewsの中で一意である必要がある。
		source:					Yes	includesで指定したDatamodelのYAMLファイルのview名
		view:					No	データモデルの用途別詳細処理を指定する。
			<CRUD>:				No	用途（create/read/update/delete）を指定する。readのみ指定可能。
				- graphql:		Yes	Yes	ユーザーが定義するGraphQL。nullだった場合は、UI基盤のデフォルトのGraphQLを使用する。modeにserverを指定しているFormまたはTableコンポーネントで使用する場合は、必ずnullを指定してください。
				override:			No	graphqlプロパティがnullだった場合に使用する。デフォルトのGraphQLのフィルタを上書きする。modeにclientを指定しているFormまたはTableコンポーネントで使用する場合に指定できる。
					<<HASURA table field arguments>>:		No	graphqlで使用可能なプロパティ
		parameters:					No	graphqlに対するパラメータ
			- name:				Yes	パラメータ名 parameters内で一意である必要がある。
			parameter:				Yes
				type:			Yes	以下を指定できる。 uipath：URLのパスパラメータ query：URLのクエリパラメータ fixed：固定値
				value:			Yes	typeによって以下を指定する。 uipathの場合、指定したいパスパラメータにひもづくUipathのYAMLファイルのname queryの場合、URLのクエリパラメータ名 fixedの場合、指定したい値
		autorefresh:				0	No	自動リフレッシュの間隔（秒）
		action:					No	データモデルで発生するアクションを指定する。アクションについては「Script」を参照。「（表）各コンポーネントでの実行タイミングおよび関数名一覧（UIバージョン1.1）」の"handleAfterLoadData"を捕捉して処理を実行する。
components:							Yes	UIコンポーネント
	- name:						Yes	コンポーネントの内部名
	label:						No	コンポーネントの表示名
	type:						Yes	コンポーネントのタイプを指定する。コンポーネントタイプについては「（表）使用できるコンポーネント（UIバージョン1.1）」を参照。ただしattachmentはUI内で1つとする。
	properties:						No	プロパティの値をタイプによってラベル:値の形式で指定する。プロパティの詳細は「（表）Gridのプロパティ（UIバージョン1.1）」～「（表）Iconのプロパティ（UIバージョン1.1）」を参照。
	children:						No	コンポーネント上に表示される子コンポーネント。親コンポーネントと同じプロパティ、制約が適用される。
		- name:					No
		(others):					No
	action:						No	コンポーネント内で実行するアクションを定義する。アクションについては「Script」を参照。
buttons:							No	アクションボタンを定義 UI全体を制御するボタンとして規定の位置に表示される。
	- name:						Yes	ボタンの内部名
	label:						No	ボタンの表示名
	type:						Yes	標準で用意されたものか、ユーザーが独自に設定したものを指定する。タイプについては「（表）アクションボタンのタイプ（UIバージョン1.1）」を参照
	description:						No	ボタンの説明
	order:						No	ボタンの表示順序を決めるための値を設定する。昇順で表示される。
	properties:						No	プロパティの値をラベル:値の形式で指定する。プロパティの詳細は「（表）Buttonのプロパティ（UIバージョン1.1）」参照
	action:						No	ユーザーが独自に設定したボタン、または標準で用意されたボタンをカスタムしたボタンをクリックした時に実行されるアクションを指定する。標準で用意されたボタンをカスタムせずに使用する場合は、指定しないこと。詳細は「Script」を参照

※入れ子関係にないラベルの必須が「No」の場合は、定義が必須ではありません。入れ子関係にあるラベルの場合は、下層ラベルの必須は、上層ラベルの必須が「Yes」である場合に適用されます。

（表）アクションボタンのタイプ（UIバージョン1.1）

タイプ	説明
start	ワークフローを開始する。
save	現在のレコードを保存する。
cancel	レコードの編集を破棄して前の画面に戻る。
accept	core.ask アクションに {oi_response: "accept"}で応答する。ワークフローを次に進める場合に使用する。
reject	core.ask アクションに {oi_response: "reject"}で応答する。ワークフローを元に戻す場合に使用する。
complete	core.ask アクションに {oi_response: "complete"}で応答する。ワークフローを完了する場合に使用する。
custom	ユーザーが独自に設定するボタン。action項目に設定するスクリプトを実行する。
edit	"editmode"が"protected"に指定されているUIのフォームの編集可否を変更する。

core.askアクションにaccept、reject、completeのアクションボタンを用いて応答する場合、以下のようにTask modelのinputにschemaを追加し、応答の構造を指定する必要があります。

    input:
      schema:
        type: object
        properties:
          oi_response:
            type: string
            required: true

Task modelについては「Workflow」を参照してください。

UI定義ではReactとMaterial-UIを用いて画面を構成します。画面を構成する際のレイアウトは下図のようにGridやPaperなどを用いて階層構造になるように構成します。

（図）ReactとMaterial-UIを用いた画面構成の概念図（UIバージョン1.1）

以下にUI定義内で使用できるコンポーネントとそのプロパティを示します。

（表）使用できるコンポーネント（UIバージョン1.1）

コンポーネント	Material-UI	説明
Grid	Grid	UIのグリッド。詳細は以下を参照。 https://v7.mui.com/material-ui/react-grid/
Paper	Paper	Material-UIのPaperコンポーネント。コンテンツが紙の上に載っているようにする。詳細は以下を参照。 https://v7.mui.com/material-ui/react-paper/
Form	TextField、 Checkbox、 Select	指定したテーブルのレコードの内容の表示、編集を行う。詳細は以下を参照。 https://v7.mui.com/material-ui/react-text-field/#main-content https://v7.mui.com/material-ui/react-checkbox/#main-content https://v7.mui.com/material-ui/react-select/#main-content
Table	DataGrid	Material-UIのDataGridコンポーネント。詳細は以下を参照。 https://v7.mui.com/x/react-data-grid/ 指定したテーブルのレコード一覧をリスト表示する。
Button	Button	各コンポーネントに対してアクションを定義して実行する。
Card	Card	Material-UIのCardコンポーネント。リンクなどに使用できるカードを表示する。
Iframe	-	URLで指定したコンテンツを表示する。
Tabs	-	"tab"、"toggle"、"dynamic"からタブの種類を指定する。
Tab	Tabs	Tabsコンポーネントのtypeが"toggle"の場合、表示するアイコンをMaterial-UIのTabsコンポーネントの中から指定する。Tabコンポーネントを、単独で使用することや、Tabsコンポーネント以外の子コンポーネントとして配置することはできない。
Article	-	吹き出しデザインのメモを表示する。
Attachment	-	任意のファイルのアップロードやダウンロードを実行する。 Attachmentはワークフローでのみ使用できる。
Label	Typography	テキストを表示する。
Icon	Material Icons	アイコンを表示する。詳細は以下を参照。 https://v7.mui.com/material-ui/material-icons/

（表）Gridのプロパティ（UIバージョン1.1）

ラベル			デフォルト値	必須	説明
components:				Yes	UIコンポーネント
	type:			Yes	"grid"を指定する。グリッドを調節することができる。詳細は以下を参照 https://v7.mui.com/x/react-data-grid/
	properties:			No
		xs:	12	No	Gridの横幅のサイズを指定する。横幅のサイズは、1行を12カラムとし、指定した値がそのうち何カラム分を占有するかを指定する。ブラウザーの横幅ごとに、整数1～12の割合でサイズを指定でき、省略した場合はより小さい横幅の設定が適用される。極小（xs）：0px～小（sm）：600px～中（md）：900px～大（lg）：1200px～特大（xl）：1536px～例えば、smに6を指定すると、ブラウザーの横幅が600px以上では1行の50%、600px未満では1行の100%が横幅のサイズになる。すべての横幅の指定を省略すると、デフォルト値（xs: 12）に従い、常に1行の100%が横幅のサイズになる。ただしwidthまたはmaxWidthが指定されていると横幅のサイズは適用されない。
		sm:		No
		md:		No
		lg:		No
		xl:		No
		container:	false	No	Grid内の親要素であることを指定する。
		item:	false	No	Grid内の子要素であることを指定する。
		justifyContent:		No	親要素（Grid container）で、子要素（Grid item）を横軸のどの位置に配置するかを指定する。Material-UIのjustifyContentプロパティに基づいて指定できる。詳細は以下を参照。 https://v7.mui.com/material-ui/react-grid/
		maxHeight:		No	最大高さ
		maxWidth:		No	最大幅
		minHeight:		No	最小高さ
		minWidth:		No	最小幅
		height:		No	高さ
		width:		No	幅

（表）Paperのプロパティ（UIバージョン1.1）

ラベル			デフォルト値	必須	説明
components:				Yes	UIコンポーネント
	type:			Yes	"paper"を指定する。詳細は以下を参照 https://v7.mui.com/material-ui/react-paper/
	properties:			No
		icon:		No	Paperのラベルのアイコンを指定する。以下のMaterial iconsから指定する。 https://v7.mui.com/material-ui/material-icons/ 例） AccountBalance
		collapsible:	false	No	Paperを開閉可能にするかどうかを指定する。 true：開閉可能 false：開閉不可
		expanded:	true	No	Paperを開いた状態にするかどうかを指定する。collapsibleが"true"の場合に有効。 true：開いた状態 false：閉じた状態
		hintMessage:		No	ヒントメッセージとして表示する文字列を設定する。ラベルの横にはてなマークのアイコンを表示し、はてなマークのアイコンをクリックすると設定値を表示する。

（表）Formのプロパティ（UIバージョン1.1）

ラベル							デフォルト値	必須	説明
components:								Yes	UIコンポーネント
	type:							Yes	formを指定する。レコードの表示、編集を行う。
	properties:							No
		fields:						Yes	Formのフィールドを指定する。ここで定義した順に表示される。フィールドの種類の詳細は、「（表）Formコンポーネントのフィールドの種類とDatamodelのYAMLファイルのカスタムテーブルのカラムのタイプの対応表」または「（表）Formコンポーネントのフィールドの種類とDatamodelのYAMLファイルのJSON Schemaファイルの定義の対応表」を参照。
			- name:					Yes	fields内で一意の名前を指定する。
			source:					Yes	使用するdataSourceのタイプを"table"、"view"、"schema"、"padding"から指定する。
			field:					sourceが"padding"以外の場合は必須	sourceが"table"または"schema"の場合は"all"を指定する。sourceが"view"の場合は"read"を指定する。
				all:				No	sourceが"table"または"schema"の場合にFormのフィールドに関連づけるデータソースのフィールドを指定する。table.field形式。table部分は dataSource.tables.nameに存在するか、「context」を指定すること。現状「context」は次のように指定可能。 context.title context.description context.category context.due_date context.note_1 context.note_2 context.note_3
				read:				No	sourceが"view"の場合にFormのフィールドに関連づけるデータソースのフィールドを指定する。
			label:					sourceが"padding"以外の場合は必須	Form上での表示名を指定する。
			displayName:					sourceに"table"が指定されデータモデルで" ref-sys"が指定されている場合は必須	表示する値。検索に使用する。表示するカラム名を指定する。その際はref-sys table name.ref-sys column nameの書式で指定する。例）sourceが"table"かつ、"ref-sys"が指定されている場合 displayName: user.name
			hintMessage:					No	ヒントメッセージとして表示する文字列を設定する。フィールドにはてなマークのアイコンを表示し、はてなマークのアイコンをクリックすると設定値を表示する。
			properties:					No	object array内のフィールド属性を指定する。"readOnly"、"password"、"required" 、"operator"、"visible"、"checkbox"、"xs"、"sm"、"md"、"lg"、"xl"を指定。例） properties: readOnly: false
				readOnly:			false	No	"true"または"false"を指定する。"true"を指定した場合、当該フィールドの値は変更不可となる。
				password:			false	No	パスワードであるかを指定する。パスワードの場合は入力値がマスクされる。 "true"または"false"を指定する。
				required:			false	No	"true"または"false"を指定する。"true"を指定した場合、当該フィールドの入力は必須となり、値が指定されていない状態で保存するとエラーが表示される。
				operator:			false	No	テキストフィールドの左側にオペレータ選択リストを表示するかどうかを指定する。 "true"または"false"を指定する。
				visible:			true	No	以下を指定できる。 true：最初から表示する。 false：scriptで表示を指示するまでこのフィールドは非表示。
				checkbox:			false	No	以下を指定できる。 true：チェックボックスを表示する。 false：チェックボックスを表示しない。
				xs:			12	No	Formのフィールドの横幅のサイズを指定する。横幅のサイズは、1行を12カラムとし、指定した値がそのうち何カラム分を占有するかを指定する。ブラウザーの横幅ごとに、整数1～12の割合でサイズを指定でき、省略した場合はより小さい横幅の設定が適用される。極小（xs）：0px～小（sm）：600px～中（md）：900px～大（lg）：1200px～特大（xl）：1536px～また、同じForm上に複数のフィールドがある場合は、各フィールドのサイズに従い、1行が最大12カラムになるように詰めて表示される。例えば、smに6を指定すると、ブラウザーの横幅が600px以上では1行の50%がフィールドのサイズになりフィールドが2列で表示され、600px未満では1行の100%がフィールドのサイズになり、1列で表示される。すべての横幅の指定を省略すると、デフォルト値（xs: 12、sm: 6）に従い、ブラウザーの横幅が600px未満では1列、600px以上では2列で表示される。
				sm:			6	No
				md:				No
				lg:				No
				xl:				No
				multiline:			false	No	以下を指定できる。 true：TextFieldが複数行表示できる。 false：TextFieldを1行表示する。
				maxRows:				No	行数を指定する。指定した行数に達するまで自動でTextFieldの高さを変更する。multilineが"true"の場合に有効。
				rows:				No	行数を指定する。最初から指定した行数の高さで表示する。multilineが"true"の場合に有効。
			validation:					No	入力チェックルール
				regex:				フィールドのデータタイプが文字列型の場合必須	テキストの正規表現を指定する。フィールドのデータタイプが文字列型の場合に有効。tableの場合は"varchar"や"text"など、apiの場合は"string"が該当する。フィールドのデータタイプは、tableの場合は「（表）カラムのタイプ」を参照、apiの場合はJSON Schemaで定義できるタイプを使用する。
				min:				フィールドのデータタイプが数値型の場合必須	最小値を指定する。フィールドのデータタイプが数値型の場合に有効。tableの場合は"integer"など、apiの場合は"integer"や"number"などが該当する。フィールドのデータタイプは、tableの場合は「（表）カラムのタイプ」を参照、apiの場合はJSON Schemaで定義できるタイプを使用する。
				max:				フィールドのデータタイプが数値型の場合必須	最大値を指定する。フィールドのデータタイプが数値型の場合に有効。tableの場合は"integer"など、apiの場合は"integer"や"number"などが該当する。フィールドのデータタイプは、tableの場合は「（表）カラムのタイプ」を参照、apiの場合はJSON Schemaで定義できるタイプを使用する。
				message:				No	入力チェックエラー時に表示するメッセージテンプレートを使用可能。データベースには格納しない。
			lookup:					No	lookupが指定されるとルックアップフィールドとして扱われる。
				source:				No	使用するdataSourceのタイプとして"table"、"view"または"api"を指定する。 Ops Iのv02-90以降は、代わりにcomponents.properties.fields.lookup.columns.sourceの使用を推奨。
				style:			single	No	"single" または"multi"を指定できる。 "multi"の場合は複数選択可能とする。ただしその場合はDatabaseに選択値は反映できない。（一時的制限）
				filter:				No	フォームのフィールドに表示する内容に対するフィルタ条件を設定する。 dataSourceのタイプが"table"の場合に使用できる。
					-			No	複数の条件があった場合は、or条件で判定される。この下のレベルの条件はand条件で判定される。
						- operator:		No	このコンディションの条件演算子。"eq"、"ne"、 "gt"、 "ge"、 "lt"、 "le"、 "regex"、 "wildcard"、 "in"、 "notIn"が使用できる。 firstOperandで指定したFieldの値がsecondOperandで指定したリスト（カンマ（,）区切り）の要素に含まれるかどうか判断する。条件演算子はfirstOperandとsecondOperandの値を文字列形式で比較します。
						firstOperand:		No	比較の1番目のターゲット。テーブルのフィールド名を指定する。例）role.id
						secondOperand:		No	比較の2番目のターゲット。firstOperandと演算子の値を指定する。テンプレート定義を利用可能。使用できるテンプレート定義については「（表）使用可能なテンプレート定義」を参照。 operatorでin/notInを利用してテンプレートを利用しない場合は、カンマ（,）区切りのstringでリストを記載する。例）テンプレート定義を使用しない場合： "Service Desk Agent" dataSourceのタイプが"table"でテンプレート定義を使用する場合： '{{ .GetValue ".Requester.Customer" }}' operatorでin/notInを利用してテンプレートを利用しない場合： groupA,groupB,groupC
				field:				Yes	参照テーブルのフィールド名。テーブルの中で一意の値が格納されているカラムを指定する。 components.properties.fields.lookup.columns.sourceが"table"または"view"の場合、カラム名を指定する。テーブル名とカラムはtable.columnの書式で指定する。例）group.id components.properties.fields.lookup.columns.sourceが"api"の場合、プロパティ名を指定する。dataSource.apis.nameの値.プロパティ名の書式で指定する。
				mode:			client	No	ソートとフィルタをどこでするかを"client"または"server"で指定する。 client：指定したテーブルのレコードを全件読み込み、ブラウザー上でソートとフィルタをする。 server：1ページに表示する行数（rowCountの値）分のレコードをページを表示する度に取得する。また、ソートやフィルタをする度にサーバーからレコードを取得する。
				labelQuery:			説明欄に記載	No	fieldに表示する値を取得するためのフィルタ条件式を指定する。 lookupのsourceが"api"、かつmodeが"server"の場合に使用する。デフォルト値は次の通り。 styleが"single"の場合：filterby=フィールド名:eq: styleが"multi"の場合：filterby=フィールド名:in: dataSourceのparametersに設定したパラメータはこの取得式に適用されない。そのため、取得式に同じパラメータを設定したい場合、以下の例のように記述する。例） filterBy=userName:ne:--,id:eq:
				displayColumn:				No	ルックアップダイアログで選択肢として表示されるカラムをtable name.column nameで指定する。 Ops Iのv02-90以降は、代わりにcomponents.properties.fields.lookup.columnsの使用を推奨。テーブルの定義方法と詳細については「Datamodel」を参照。（例） user.id user.username 指定しない場合はすべてのプロパティが表示される。（例） displayColumn: - user.name - user.role - user.group
					- (column name):			No	カラム名 Ops Iのv02-90以降は、代わりにcomponents.properties.fields.lookup.columns.nameの使用を推奨。
				filterable:				No	フィルタ条件に表示するカラム名を指定する。 Ops Iのv02-90以降は、代わりにcomponents.properties.fields.lookup.columnsの使用を推奨。指定が省略された場合、displayColumnに指定したすべてのカラムでフィルタが可能になる。
					- (column name):			No	カラム名 Ops Iのv02-90以降は、代わりにcomponents.properties.fields.lookup.columns.nameの使用を推奨。
				columns:				Yes	ルックアップダイアログで表示するカラム情報の配列定義した順に表示される。
					- name:			Yes	カラム名 columnsの中で一意である必要がある。
					column:			Yes	カラムの各アクションで使用するデータソースを指定する。データソース名.フィールド名の書式で指定する。データソース名はcolumns内で同じものを指定する。
					source:			Yes	"table"、"view"または"api"を指定する。
					label:			No	カラムヘッダーに表示する文字列省略された場合はnameラベルの値を表示する。
					filterable:		false	No	フィルタ可能かどうかを指定する。 true：フィルタ可能 false：フィルタ不可 modeが"client"の場合、カラムに指定したデータソースフィールドのタイプに関わらず文字列としてフィルタされる。 modeが"server"の場合、カラムに指定したデータソースフィールドのタイプに応じてフィルタに使用できるオペレータが変更される。
					sortable:		false	No	ソート可能かどうかを指定する。 true：ソート可能 false：ソート不可データソースフィールドのタイプが"enum"の場合、modeに"server"を指定すると、データモデルを登録した際の登録順にソートされる。
					queryName:		columnラベルに指定されたデータソース名以降の値	No	modeが"server"かつsourceが"api"の場合に使用する。フィルタおよびソートを実施したときに送信されるAPIのクエリパラメータfilterByおよびsortByに設定される任意のフィールド名を指定する。例えば、デフォルトでは「filterBy=user.name:eq:任意のユーザー名」と指定されるところを、「filterBy=userName.eq:任意のユーザー名」としたい場合は、queryNameに"userName"と指定する。
					hide:		false	No	カラムを非表示にするかどうかを指定する。 true：非表示 false：表示
					type:		auto	No	"auto"または"chip"を指定する。

（表）Formコンポーネントのフィールドの種類とDatamodelのYAMLファイルのカスタムテーブルのカラムのタイプの対応表

フィールドの種類	カラムのタイプ
テキスト	varchar、inet、uuid
数値（整数）	integer
数値（実数）	numeric、decimal^※
リッチテキストエディター	text
ドロップダウン	enum
チェックボックス	boolean
日時	timestamp
日付	date
時間	time

※numericとdecimalのどちらを指定しても違いはありません。

（表）Formコンポーネントのフィールドの種類とDatamodelのYAMLファイルのJSON Schemaファイルの定義の対応表

フィールドの種類	カラムのタイプ	format	enum	formControl	items
テキスト^※	string	-	-	-	-
数値（整数）	integer	-	-	-	-
数値（実数）	number	-	-	-	-
リッチテキストエディター	string	-	-	text	-
ドロップダウン	string	-	あり	-	-
チェックボックス	boolean	-	-	-	-
日時	string	date-time	-	-	-
日付	string	date	-	-	-
時間	string	time	-	-	-

※カスタムテーブルのカラムタイプinet、uuidに相当するものはJSON Schemaファイルでは指定できません。

（表）Tableのプロパティ（UIバージョン1.1）

ラベル								デフォルト値	必須	説明
components:									Yes	UIコンポーネント
	type:								Yes	"table"を指定する。指定したテーブルのレコード一覧をリスト表示する。
	properties:								No
		mode:						client	No	ソートとフィルタをどこでするかを"client"または"server"で指定する。 client：指定したテーブルのレコードを全件読み込み、ブラウザー上でソートとフィルタをする。 server：1ページに表示する行数（rowCountの値）分のレコードをページを表示する度に取得する。また、ソートやフィルタをする度にサーバーからレコードを取得する。
		selection:							No	"checkbox"または"radio"を指定する。指定した場合、チェックボックスまたはラジオボタンが追加される。メモラジオボタンは、単一指定のチェックボックス形式となります。
		toolbar:							No
			columns:					true	No	カラムの表示切替
			filter:					true	No	フィルタ
			density:					true	No	行の高さ
			export:					true	No	エクスポート機能
		rowCount:						0	No	省略（または「0」指定）時、Ops IのGUI上で表の右下に表示される「ページあたりの行」で選択した値に連動した高さになる。
		columns:							Yes	テーブルのカラムを指定する。ここで定義した順に表示される。
			- name:						Yes	カラム名。arrayの中で一意である必要がある。
			column:						Yes	カラムの各アクションで使用するデータソースを指定する。
				all:					No	sourceが"table"または"schema"の場合にTableのカラムに関連づけるデータソースフィールドを指定する。
				read:					No	sourceが"view"の場合にTableのカラムに関連づけるデータソースフィールドを指定する。
			source:						Yes	"table"、"view"または"schema"を指定する。
			label:						No	カラムの表示名を指定する。
			editable:					false	No	編集可能かどうかを指定する。 true：編集可能 false：編集不可データベースへ変更を反映するには、保存アクションを実行する必要がある。データソースがviewの場合、falseのみ指定可能。false以外を指定した場合エラーが表示される。
			filterable:					true	No	フィルタ可能かどうかを指定する。 true：フィルタ可能 false：フィルタ不可
			sortable:					false	No	ソート可能かどうかを指定する。 true：ソート可能 false：ソート不可データソースフィールドのタイプが"enum"の場合、modeに"server"を指定すると、データモデルを登録した際の登録順にソートされる。
			queryName:					column.readラベルに指定されたデータソース名以降の値	No	modeが"server"かつsourceが"api"の場合に使用する。フィルタおよびソートを実施したときに送信されるAPIのクエリパラメータfilterByおよびsortByに設定される任意のフィールド名を指定する。例えば、デフォルトでは「filterBy=user.name:eq:任意のユーザー名」と指定されるところを、「filterBy=userName.eq:任意のユーザー名」としたい場合は、queryNameに"userName"と指定する。
			hideable:					true	No	カラムを隠すことができるかを以下で指定する。 true：隠すことができる false：隠すことができない
			hide:					false	No	カラムを非表示にするかどうかを指定する。 true：非表示 false：表示
			width:						No	カラム幅の固定値を指定する。（単位はpx）
			type:					auto	No	カラムの表示形式。"auto"、"chip"、"stepper"を指定できる。詳細は「（表）Tableのカラムタイプ（UIバージョン1.1）」を参照
			action:						No	このカラムに対して実行するアクションを指定する。アクションについては「Script」を参照。「（表）各コンポーネントでの実行タイミングおよび関数名一覧（UIバージョン1.1）」の"handleCellClick"と"handleCellValueChange"を捕捉して処理を実行する。
			properties:						No	プロパティを設定する。現在は"chip"タイプにのみ使用できる。 "chip"タイプの場合、propertiesを設定していないとエラー（An error occurred）が表示される。
				link:				false	No	表示文字列をハイパーリンク表示かつセルをクリッカブルにする。セルクリックイベントが発生するので画面遷移などはカスタムスクリプトでハンドルする。
				leftIcon:					No	テーブルセルの左側に表示するアイコンを指定する。
					type:				Yes	Material-UIで用意されているアイコンを指定。 https://v7.mui.com/material-ui/material-icons/
					action:				No	アイコンをクリックした際のアクションを指定する。アクションについては「Script」を参照。「（表）各コンポーネントでの実行タイミングおよび関数名一覧（UIバージョン1.1）」の"handleIconClick"を捕捉して処理を実行する。
					tooltip:				No	アイコンのツールチップに表示する値を指定する。
					conditions:				No	アイコンを表示する条件を指定する。指定しない場合は常に表示される。
						-			No
							- operator:		Yes	"eq"、"ne"、"gt"、"ge"、"lt"、"le"、"regex"、"wildcard"、"in"、"notIn"を指定できる。
							firstOperand:		Yes	評価に使用するデータソースのフィールド名を指定する。
							secondOperand:		Yes	評価に使用する値を指定する。
				rightIcon:					No	テーブルセルの右側に表示するアイコンを指定する。
					type:				Yes	Material-UIで用意されているアイコンを指定。 https://v7.mui.com/material-ui/material-icons/
					action:				No	アイコンをクリックした際のアクションを指定する。アクションについては「Script」を参照。「（表）各コンポーネントでの実行タイミングおよび関数名一覧（UIバージョン1.1）」の"handleIconClick"を捕捉して処理を実行する。
					tooltip:				No	アイコンのツールチップに表示する値を指定する。
					conditions:				No	アイコンを表示する条件を指定する。指定しない場合は常に表示される
						-			No
							- operator:		Yes	"eq"、"ne"、"gt"、"ge"、"lt"、"le"、"regex"、"wildcard"、"in"、"notIn"を指定できる。
							firstOperand:		Yes	評価に使用するデータソースのフィールド名を指定する。
							secondOperand:		Yes	評価に使用する値を指定する。
				color:				primary	いずれかを指定	以下のcolor prop を指定できる。 https://v7.mui.com/material-ui/react-chip/#color-chip
				colorTokens:					いずれかを指定	セルの色をカラーコードで指定する。（typeがchipの場合のみ使用可能。）
					main:				Yes	chipの背景色をカラーコードで指定する。
					contrastText:			#ffffff	No	chip内の文字色をカラーコードで指定する。
				variant:				filled	No	以下を指定できる。 filled：塗りつぶし outlined：外枠
				switch:					No	データソースのフィールド名を指定する。chipタイプの色やstepperタイプのアイコンをデータソースフィールドの値によって変化させたい場合に使用する。
				cases:					switchを指定した場合、必須
					- case:				Yes	switchで指定したデータソースフィールドとの評価に用いる値を指定する。
					color:				いずれかを指定	以下のcolor prop を指定できる。 https://v7.mui.com/material-ui/react-chip/#color-chip
					colorTokens:				いずれかを指定	switchとcaseの値が一致した場合のセルの色をカラーコードで指定する。typeがchipでのみ使用可能。
						main:			Yes	chipの背景色をカラーコードで指定する。
						contrastText:		#ffffff	No	chip内の文字色をカラーコードで指定する。
					variant:				column.typeが"chip"の場合必須	以下を指定できる。 filled：塗りつぶし outlined：外枠

（表）Tableのカラムタイプ（UIバージョン1.1）

カラムタイプ	説明
auto	データモデルの指定されたカラムに沿って設定される。
chip	チップをカラムの値とともに表示する。詳細は以下を参照。 https://v7.mui.com/material-ui/react-chip/
stepper	作業の進捗や状態を表すアイコンを表示する。

（表）Buttonのプロパティ（UIバージョン1.1）

ラベル				必須	説明
components:				Yes	UIコンポーネント
	type:			Yes	"button"を指定する。コンポーネントごとに定義されるアクションを実行する。グリッドの右端に配置される。
	properties:			No
		buttons:		Yes	ボタンの詳細を設定する。
			- name:	Yes	ボタンの名前
			label:	No	ボタンの表示名
			action:	Yes	ボタンをクリックした時に実行されるアクションを指定する。詳細は「Script」を参照

（表）Cardのプロパティ（UIバージョン1.1）

ラベル					デフォルト値	必須	説明
components:						Yes	UIコンポーネント
	type:					Yes	"card"を指定する。
	properties:					No
		image:				No	画像を表示する場合に指定する。
			src:			No	画像のファイル名画像は、Cardコンポーネントを使用するUIのYAMLファイルと同じディレクトリに格納する。
			position:		left	No	画像の位置 "top"、"bottom"、"left"、"right"、"background"を指定できる。
			sx:			No	Material-UIのsxプロパティに基づいて指定する。詳細は以下を参照 https://v7.mui.com/system/getting-started/the-sx-prop/
				height:		No	高さ
				width:		No	幅
		link:				No	クリック時の遷移先
		content:				No	表示内容 HTML形式で指定する。指定がない場合はlinkに設定した遷移先が表示される。
		clickable:			all	No	クリック可能範囲以下を指定できる。 all：全体 image：画像のみ none：なし
		sx:				No	Material-UIのsxプロパティに基づいて指定する。詳細は以下を参照 https://v7.mui.com/system/getting-started/the-sx-prop/
			height:			No	高さ
			width:			No	幅

（表）Iframeのプロパティ（UIバージョン1.1）

ラベル				必須	説明
components:				Yes	UIコンポーネント
	type:			Yes	"iframe"を指定する。
	properties:			No
		url:		Yes	埋め込みたいURLを指定する。
		sx:		No	Material-UIのsxプロパティに基づいて指定する。詳細は以下を参照 https://v7.mui.com/system/getting-started/the-sx-prop/
			maxHeight:	No	最大高さ
			maxWidth:	No	最大幅
			minHeight:	No	最小高さ
			minWidth:	No	最小幅
			height:	No	高さ
			width:	No	幅
		allow:		No	iframeのallowオプションの値を指定する iframeの内部のページから、次のようなクリップボード操作を行うために必要。 clipboard-write：クリップボードに書き込む clipboard-read：クリップボードから読み取るダッシュボード機能ではクリップボード操作が行われる場合があるため、以下のような指定が必要。 allow: clipboard-read https://dash.{{.System.domain}}; clipboard-write https://dash.{{.System.domain}}

（表）Tabsのプロパティ（UIバージョン1.1）

ラベル			必須	説明
components:			Yes	UIコンポーネント
	type:		Yes	"tabs"を指定する。
	properties:		No
		type:	Yes	"tab"、"toggle"、"dynamic"を指定できる。"toggle"で直上がPaperの場合、Paperのタイトルラベルの位置にボタンを表示する。

（表）Tabのプロパティ（UIバージョン1.1）

ラベル					デフォルト値	必須	説明
components:						Yes	UIコンポーネント
	type:					Yes	"tab"を指定する。
	properties:					Yes
		icon:				No	"toggle"タイプの場合に表示するアイコンをMUIアイコンの中から指定する。
		visible:			true	No	以下を指定できる。 true：最初から表示する。 false：scriptで表示を指示するまでこのフィールドは非表示。
		dataSource:				No	tab専用のdataSourceを指定する。Dynamicタブで同一dataSourceをタブごとに使用するケースで指定する。
			schemas:			No
				- ref:		Yes	schemaデータソース名を指定する。uiManifest.dataSource.schemas[]に定義されているnameが指定されていること。
			tables:			No
				- ref:		Yes	tableデータソース名を指定する。uiManifest.dataSource.tables[]に定義されているnameが指定されていること。
				action:		No	tableデータソースで発生するイベントをハンドルするアクションを指定する。

（表）Articleのプロパティ（UIバージョン1.1）

ラベル				デフォルト値	必須	説明
components:					Yes	UIコンポーネント
	type:				Yes	"article"を指定する。
	properties:				No
		ticketid:			Yes	チケットIDの取得元を指定する。
			type:		Yes	以下が指定できる。 uipath：URLのパスパラメータ query：URLのクエリパラメータ fixed：固定値
			value:		Yes	typeによって以下を指定する。 uipathの場合、指定したいパスパラメータにひもづくUipathのYAMLファイルのname queryの場合、URLのクエリパラメータ名 fixedの場合、指定したい値
		ds:			Yes	チケットAPIのdsの取得元を指定する。
			type:		Yes	以下が指定できる。 uipath：URLのパスパラメータ query：URLのクエリパラメータ fixed：固定値
			value:		Yes	typeによって以下を指定する。 uipathの場合、指定したいパスパラメータにひもづくUipathのYAMLファイルのname queryの場合、URLのクエリパラメータ名 fixedの場合、指定したい値
		customer:		false	No	顧客用画面であるかどうかを指定する。 "true"または"false"を指定する。
		maxHeight:			No	最大高さ
		maxWidth:			No	最大幅
		minHeight:			No	最小高さ
		minWidth:			No	最小幅
		height:			No	高さ
		width:			No	幅

（表）Attachmentのプロパティ（UIバージョン1.1）

ラベル			デフォルト値	必須	説明
components:				Yes	UIコンポーネント
	type:			Yes	"attachment"を指定する。任意のファイルのアップロードやダウンロードを実行する。
	properties:			No
		editable:	false	No	以下を指定できる。 true：編集可能 false：編集不可
		hintMessage:		No	ヒントメッセージとして表示する文字列を設定する。ラベル横にはてなマークのアイコンを表示し、はてなマークのアイコンをクリックすると設定値を表示する。

（表）Labelのプロパティ（UIバージョン1.1）

ラベル					デフォルト値	必須	説明
components:						Yes	UIコンポーネント
	type:					Yes	"label"を指定する。テキストを表示する。
	properties:					No
		source:				No	使用するdataSourceのタイプ "table"を指定する。 contentRefが指定されている場合は必須。
		contentRef:				No	labelコンポーネントとカラムに表示するデータのパスデータソース名.フィールド名で指定する。 sourceが指定されている場合は必須。
		content:				No	表示する文字列を指定する。「\n」で改行できる。 contentRefとcontentの両方が指定されている場合、contentが優先される。
		fontSize:				No	文字のサイズを指定する。
		fontWeight:				No	文字の太さを指定する。
		color:				No	文字色を指定する。
		maxLines:			0	No	最大表示行数折り返しの行数が設定値を超えた場合は、末尾に省略記号「...」を表示する。0が指定された場合、行数の制限はなし。
		showTooltip:			false	No	trueが指定された場合、ツールチップを表示する。ツールチップにはlabelコンポーネントに表示されている文字列が表示される。maxLinesで省略して表示している場合でも、すべての文字列が表示される。
		formats:				No	contentRefで指定されたデータ、もしくはcontentの値にフォーマットを適用する。フォーマットの方法はmethodで指定し、methodに応じたパラメータをparametersに指定する。配列の形式で、上から順に適用される。
			- method:			No	フォーマットの方法を指定する。 datetime ISO 8601形式の日付文字を、指定された形式にフォーマットする。 number 入力値を数値形式にフォーマットする。 affix 表示値の左右に任意の文字列を表示する。
			parameters:			No	methodに応じたパラメータを設定する。 datetime fromNow displayFormat toUserTimezone number decimalPoint rounding affix prefix suffix
				fromNow:		No	trueが指定された場合、入力された日付を現在時刻からの相対時間に変換する。例）入力値が「2025-06-10T12:00:00Z」、現在時刻が「2025-06-10T15:00:00Z」の場合、「3時間前」と表示。
				displayFormat:		No	表示する日付のフォーマットを指定する。省略された場合はOps I標準のフォーマットを適用する。例） yyyy/MM/dd：2025/05/08 MM月dd日：05月08日
				toUserTimezone:	true	No	trueが指定された場合、入力された日付をユーザーのタイムゾーン日付に変換する。falseが指定された場合は、ブラウザーのタイムゾーンが使用される。
				decimalPoint:		No	表示する小数点以下の最大桁数（JavaScriptの表示桁数以内）を指定する。
				rounding:	round	No	以下のいずれかを指定する。 round 表示桁数で四捨五入 roundup 表示桁数で切り上げ rounddown 表示桁数で切り捨て
				prefix:		No	表示値の左側に表示する文字列。
				suffix:		No	表示値の右側に表示する文字列。

（表）Iconのプロパティ（UIバージョン1.1）

ラベル				デフォルト値	必須	説明
components:					Yes	UIコンポーネント
	type:				Yes	"icon"を指定する。
	properties:				No
		source:			No	使用するdataSourceのタイプ "table"を指定する。 switch、casesとセットで設定が必要。
		type:			Yes	Material UIで用意されているアイコンを指定する。詳細は以下を参照。 https://v7.mui.com/material-ui/material-icons/
		color:		#666666	No	アイコンの色を指定する。詳細は以下を参照。 https://developer.mozilla.org/ja/docs/Web/CSS/color_value
		size:		18px	No	アイコンのサイズを指定する（縦横に同じサイズを設定）。数値を指定した場合はpxとして設定される。文字列で指定する場合はpxやemなどが指定可能。詳細は以下を参照。 https://developer.mozilla.org/ja/docs/Web/CSS/length
		tooltip:			No	アイコンのツールチップに表示する値を指定する。
		switch:			No	データソースのフィールド名を指定する。データソース名.フィールド名の形式で指定。casesラベルのcaseの値と比較し、一致しているかどうかの判定に使用。 source、casesとセットで設定が必要。
		cases:			No	一致条件、および一致した場合のアイコンの種類、色を指定する。 source、switchとセットで設定が必要。
			- case:		Yes	switchで指定したデータソースフィールドとの評価に用いる値を指定する。
			type:		No	条件が一致した場合に表示するアイコンを指定する。Material UIで用意されているアイコンを指定。指定がない場合は上の階層のtypeラベルで指定したアイコンを表示。
			color:		No	条件が一致した場合に表示するアイコンの色を指定する。指定がない場合は上の階層のcolorラベルで指定した色を表示する。詳細は以下を参照。 https://developer.mozilla.org/ja/docs/Web/CSS/color_value
			tooltip:		No	条件が一致した場合にアイコンのツールチップに表示する値を指定する。指定がない場合は上の階層のtooltipラベルで指定した値を表示する。

＜定義例＞

apiVersion: 1.1
kind: ui

## Meta data
type: resource
name: sample_request_1_ui
label: sample_request_1_ui
description: sample_request_1_ui

## Dependencies
includes:
  - kind: datamodel
    name: all_type_columns_datamodel
  - kind: script
    name: check_value_input
  - kind: attachment
    name: test_attachment

context:
  type: uipath
  value: workflow_detail_by_context_id

attachment: test_attachment

dataSource:
  tables:
    - name: table_ds1
      table: type1_table
    - name: table_ds3
      table: type3_table
    - name: table_ds2
      table: type2_table
    - name: group
      table: group

components:
  - name: grid_container
    type: grid
    properties:
      container: true
      justifyContent: center
    children:
      - name: grid_item
        type: grid
        properties:
          item: true
        children:
          - name: test_paper
            label: テスト用フォーム1
            type: paper
            properties:
              icon: Assignment
            children:
              - name: test_form1
                label: test_form1
                type: form
                properties:
                  fields:
                    - field:
                        all: table_ds1.smallint
                      label: smallint
                      name: smallint
                      source: table
                      properties:
                        required: true
                        xs: 3
                        sm: 3
                    - field:
                        all: table_ds1.integer
                      label: integer
                      name: integer
                      source: table
                      properties:
                        xs: 3
                        sm: 3
                    - field:
                        all: table_ds1.decimal
                      label: decimal
                      name: decimal
                      source: table
                      properties:
                        xs: 3
                        sm: 3
                    - field:
                        all: table_ds1.serial
                      label: serial
                      name: serial
                      source: table
                      properties:
                        readOnly: true
                        xs: 12
                        sm: 12
                      load: false
                    - field:
                        all: table_ds1.money
                      label: money
                      name: money
                      source: table
                    - field:
                        all: table_ds3.enum
                      label: enum
                      name: enum
                      source: table
                    - field:
                        all: table_ds3.cidr
                      label: cidr
                      name: cidr
                      source: table
                    - field:
                        all: table_ds2.varchar
                      label: varchar
                      name: varchar
                      source: table
                    - field:
                        all: table_ds2.date
                      label: date
                      name: date
                      source: table
                    - field:
                        all: table_ds2.text
                      label: text
                      name: text
                      source: table
                    - source: table
                      name: lookup
                      field:
                        all: table_ds2.lookup
                      label: lookup
                      properties:
                        required: true
                        xs: 12
                        sm: 12
                        md: 12
                      displayName: group.name
                      lookup:
                        source: table
                        field: group.id
                        displayColumn:
                          - group.name
              - name: attachment_name
                type: attachment
                label: attachment
                properties:
                  editable: true

buttons:
  - type: save
    name: save
    label: 保存
  - type: accept
    name: accept
    label: 申請
  - type: custom
    name: check_value
    action: check_value_input
    label: Check Value
  - type: custom
    name: save_attachment
    action: save_attachment
    label: Save Attachment