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："type"が"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	schemaを使用する場合指定する。
		- name:					Yes	ユーザー定義名。schemaの中で一意である必要がある。
		schema:					Yes	includeで指定したdatamodelのYAMLファイルのschema名
	tables:						No	datamodelを使用する場合指定する。
		- name:					Yes	ユーザー定義名。tableの中で一意である必要がある。
		table:					Yes	includeで指定したdatamodelのYAMLファイルのtable名
		view:					No	datamodelの用途別詳細処理を指定する。
			<CRUD>:				No	用途（create/read/update/delete）を指定する。
				- graphql:			Yes	ユーザーが定義するGraphQL。nullだった場合は、UI基盤のデフォルトのGraphQLを使用する。
				override:			No	graphqlプロパティがnullだった場合に使用する。デフォルトのGraphQLのフィルタを上書きする。
					<<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	datamodelで発生するアクションを指定する。アクションについては「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）」～「（表）Labelのプロパティ（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://v5.mui.com/material-ui/react-grid/
Paper	Paper	Material-UIのPaperコンポーネント。コンテンツが紙の上に載っているようにする。詳細は以下を参照 https://v5.mui.com/material-ui/react-paper/
Form	TextField、 Checkbox、 Select	指定したテーブルのレコードの内容の表示、編集を行う。詳細は以下を参照 https://v5.mui.com/material-ui/react-text-field/#main-content https://v5.mui.com/material-ui/react-checkbox/#main-content https://v5.mui.com/material-ui/react-select/#main-content
Table	DataGrid	Material-UIのDataGridコンポーネント。詳細は以下を参照 https://v5.mui.com/x/react-data-grid/ 指定したテーブルのレコード一覧をリスト表示する。
Button	Button	各コンポーネントに対してアクションを定義して実行する。
Card	Card	Material-UIのCardコンポーネント。リンクなどに使用できるカードを表示する。
Tabs	-	"tab"、"toggle"、"dynamic"からタブの種類を指定する。
Tab	Tabs	Tabsコンポーネントのtypeが"toggle"の場合、表示するアイコンをMaterial-UIのTabsコンポーネントの中から指定する。Tabコンポーネントを、単独で使用することや、Tabsコンポーネント以外の子コンポーネントとして配置することはできない。
Article	-	吹き出しデザインのメモを表示する。
Attachment	-	任意のファイルのアップロードやダウンロードを実行する。 Attachmentはワークフローでのみ使用できる。
Label	Typography	テキストを表示する。

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

ラベル			デフォルト値	必須	説明
components:				Yes	UIコンポーネント
	type:			Yes	"grid"を指定する。グリッドを調節することができる。詳細は以下を参照 https://v5.mui.com/x/react-data-grid/
	properties:			No
		xs:	12	No	以下の領域幅に応じて整数1～12の割合でサイズを指定できる。極小（xs）：0px～小（sm）：600px～中（md）：900px～大（lg）：1200px～特大（xl）：1536px～
		sm:	12	No
		md:	12	No
		lg:	12	No
		xl:	12	No
		container:	false	No	Grid内の親要素であることを指定する。
		item:	false	No	Grid内の子要素であることを指定する。
		justifyContent:		No	親要素（Grid container）で、子要素（Grid item）を横軸のどの位置に配置するかを指定する。Material-UIのjustifyContentプロパティに基づいて指定できる。詳細は以下を参照。 https://v5.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://v5.mui.com/material-ui/react-paper/
	properties:			No
		icon:		No	Paperのラベルのアイコンを指定する。以下のMaterial iconsから指定する。 https://v5.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のフィールドを指定する。ここで定義した順に表示される。
			- name:					Yes	fields内で一意の名前を指定する。
			source:					Yes	使用するdataSourceのタイプを"table"、"schema"、"padding"から指定する。
			field:					sourceが"padding"以外の場合は必須	sourceが"table"または"schema"の場合は"all"を指定する。
				all:				No	table.field形式。table部分は dataSource.tables.nameに存在するか、「context」を指定すること。現状「context」は「context.title」のみ指定可能。
			label:					sourceが"padding"以外の場合は必須	Form上での表示名を指定する。
			displayName:					"type"に"table"が指定されDatamodelで" ref-sys"が指定されている場合は必須	表示する値。検索に使用する。表示するカラム名を指定する。その際はref-sys table name.ref-sys column nameの書式で指定する。例）typeが"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:				No	以下の領域幅に応じて整数1～12の割合でサイズを指定できる。極小（xs）：0px～小（sm）：600px～中（md）：900px～大（lg）：1200px～特大（xl）：1536px～
				sm:				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:				Yes	使用するdataSourceのタイプとして"table"を指定する。
				style:			single	No	"single" または"multi"を指定できる。 "multi"の場合は複数選択可能とする。ただしその場合はDatabaseに選択値は反映できない。（一時的制限）
				filter:				No	フィルタリングコンディションを指定する。タイプが"table"の場合で指定されたフィールドがドキュメントに関連している場合、表示されるレコードをフィルタする。
					-			No	複数の条件があった場合は、or条件で判定される。この下のレベルの条件はand条件で判定される。
						- operator:		Yes	このコンディションの条件演算子。"eq"、"ne"、 "gt"、 "ge"、 "lt"、 "le"、 "regex"、 "wildcard"、 "in"、 "notIn"が使用できる。 firstOperandで指定したFieldの値がsecondOperandで指定したリスト（カンマ（,）区切り）の要素に含まれるかどうか判断する。条件演算子はfirstOperandとsecondOperandの値を文字列形式で比較します。
						firstOperand:		Yes	比較の1番目のターゲット。テーブルのフィールド名を指定する。例）role.id タイプが"table"の場合、ドキュメントのパスでも指定可能。指定されたフォルダは以下のすべてのファイルが判定される。例）/myGroup/myRepository/MyDocPath
						secondOperand:		Yes	比較の2番目のターゲット。firstOperandと演算子の値を指定する。テンプレート定義を利用可能。使用できるテンプレート定義については「（表）使用可能なテンプレート定義」を参照。 operatorでin/notInを利用してテンプレートを利用しない場合は、カンマ（,）区切りのstringでリストを記載する。例）テンプレート定義を使用しない場合： "Service Desk Agent" タイプが"table"でテンプレート定義を使用する場合： '{{ .GetValue ".Requester.Customer" }}' operatorでin/notInを利用してテンプレートを利用しない場合： groupA,groupB,groupC
				field:				Yes	参照テーブルのフィールド名 typeが"table"の場合、カラム名を指定する。テーブル名とカラムはtable.columnの書式で指定する。例）group.id
				mode:				No	ソートやフィルタをどこで行うかを"client"または"server"で指定する。
				labelQuery:				modeが"server"の時は必須	fieldに表示する値の取得式を指定する。
				displayColumn:				No	lookupで選択肢として表示されるカラムをtable name.column nameで指定する。テーブルの定義方法と詳細については「Datamodel」を参照。（例） user.id user.username 指定しない場合はすべてのプロパティが表示される。（例） displayColumn: - user.name - user.role - user.group
					- (column name):			No	カラム名
				filterable:				No	フィルタ条件に表示するカラム名を指定する。指定が省略された場合、displayColumnに指定したすべてのカラムでフィルタが可能になる。
					- (column name):			No	カラム名

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

ラベル								デフォルト値	必須	説明
components:									Yes	UIコンポーネント
	type:								Yes	"table"を指定する。指定したテーブルのレコード一覧をリスト表示する。
	properties:								No
		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:					Yes	CRUDすべてのアクションで使用するデータソースフィールドを指定する。
			source:						Yes	"table"を指定する。
			label:						No	カラムの表示名を指定する。
			editable:					false	No	編集可能かどうかを指定する。 true：編集可能 false：編集不可データベースへ変更を反映するには、保存アクションを実行する必要がある。
			sortable:					false	No	ソート可能かどうかを指定する。 true：ソート可能 false：ソート不可
			sortname:					false	No	データソースがAPIの場合に指定する。ソートの条件を指定するAPIのパラメータのnameを指定する。未指定時はcolumnの値がAPIのパラメータとして使われる。
			hidable:					true	No	カラムを隠すことができるかを以下で指定する。 true：隠すことができない false：隠すことができる
			hide:					false	No	カラムを非表示にするかどうかを指定する。 "true"を指定した場合、非表示になる。
			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://v5.mui.com/material-ui/material-icons/
					action:				No	アイコンをクリックした際のアクションを指定する。アクションについては「Script」を参照。「（表）各コンポーネントでの実行タイミングおよび関数名一覧（UIバージョン1.1）」の"handleIconClick"を捕捉して処理を実行する。
					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://v5.mui.com/material-ui/material-icons/
					action:				No	アイコンをクリックした際のアクションを指定する。アクションについては「Script」を参照。「（表）各コンポーネントでの実行タイミングおよび関数名一覧（UIバージョン1.1）」の"handleIconClick"を捕捉して処理を実行する。
					conditions:				No	アイコンを表示する条件を指定する。指定しない場合は常に表示される
						-			No
							- operator:		Yes	"eq"、"ne"、"gt"、"ge"、"lt"、"le"、"regex"、"wildcard"、"in"、"notIn"を指定できる。
							firstOperand:		Yes	評価に使用するデータソースのフィールド名を指定する。
							secondOperand:		Yes	評価に使用する値を指定する。
				color:				primary	いずれかを指定	以下のcolor prop を指定できる。 https://v5.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://v5.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	Datamodelの指定されたカラムに沿って設定される。
chip	チップをカラムの値とともに表示する。詳細は以下を参照。 https://v5.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://v5.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://v5.mui.com/system/getting-started/the-sx-prop/
			height:			No	高さ
			width:			No	幅

（表）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のタイプを指定する。 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	表示値の右側に表示する文字列。

＜定義例＞

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