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は以下のルールに従う必要がある。
  • 本マニフェストファイルのディレクトリ名を指定
  • 入力可能な文字は以下の通り
    • 半角英数字:
      a~z A~Z 0~9
    • 半角の特殊文字:
      _ . ( ) -
  • 先頭文字が半角英数字かアンダーバー(_)
  • その他の注意点は「マニフェストファイル作成時の注意」2~4を参照
label: Yes マニフェストファイルに記載する運用機能の表示名
includes: No このマニフェストファイルで利用する関連マニフェストファイルを記載
メモメモ
  • 記載するマニフェストファイルはこのマニフェストファイル登録前にOps Iに登録されている必要があります。
  • includesキーを指定することにより、他のマニフェストファイルで定義した内容を取り込むことができます。例えば、UIで利用するデータ項目、入力値チェックやボタンクリック時のアクション、ワークフローに添付するファイルの命名ルールを定義した、Datamodel、Script、Attachmentのマニフェストファイルを取り込む場合に使用します。
- kind: Yes 読み込むマニフェストファイルの種類
  name: Yes 読み込むマニフェストファイルの内部名
description: No このマニフェストファイルに対する詳細説明
テンプレート機能を利用して記述することができる。
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のマニフェストファイルのname
    このUIをワークフローで使用する場合、typeにuipath、valueにworkflow_detail_by_context_idを指定する必要がある。
  • queryの場合、URLのクエリパラメータ名
  • fixedの場合、指定したい値
attachment: No Attachmentのマニフェストファイルの"name"
Attachmentはワークフローでのみ使用できる。
dataSource: No 使用するデータソース
schemas: No カスタムテーブルを使用せずに、入力されたデータを一時的に利用するフォームを使用したい場合に指定する。
例)フィルタ条件の入力、検索条件の入力など。
- name: Yes ユーザー定義名
schemasの中で一意である必要がある。
  schema: Yes includesで指定したDatamodelのマニフェストファイルのschema名
apis: No Formコンポーネントのルックアップフィールドのsourceキーにapiを使用する場合に指定する。
- name: Yes ユーザー定義名
apisの中で一意である必要がある。
  api: Yes 次の値を設定する。
  • ユーザーを表示する場合:
    user:UserList
  • グループを表示する場合:
    group:GroupList
  • 特定のグループの先祖グループを表示する場合:
    group:GroupAncestors
  • 特定のグループの子孫グループを表示する場合:
    group:GroupDescendants
詳細は「(表)dataSource.apisの設定」を参照。
  version: 1 No APIデータソースのバージョンをする。
詳細は「(表)dataSource.apisの設定」を参照。
  parameters: No
- name: Yes "id"、"sortBy"、"filterBy"、"subscribed"、"relatedDepth"から指定する。
詳細は「(表)dataSource.apisの設定」を参照。
  parameter: Yes
type: Yes 以下を指定できる。
  • uipath:URLのパスパラメータ
  • query:URLのクエリパラメータ
  • fixed:固定値
value: Yes typeによって、以下を指定する。
  • uipathの場合:指定したいパスパラメータにひもづくUipathのマニフェストファイルのname
  • queryの場合:URLのクエリパラメータ名
  • fixedの場合:指定したい値
  origin: No 対象データまでのパス
FormコンポーネントやTableコンポーネントのフィールドはこのフィールド以降のパスを指定する。APIのresponseのJSON Schemaに対して有効であることが必要となる。
tables: No カスタムテーブルを使用する場合指定する。
カスタムテーブルについては「データモデルの種類」を参照。
- name: Yes ユーザー定義名
tablesの中で一意である必要がある。
  table: Yes includesで指定したDatamodelのマニフェストファイルの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のマニフェストファイルのname
  • queryの場合、URLのクエリパラメータ名
  • fixedの場合、指定したい値
  autorefresh: 0 No 自動リフレッシュの間隔(秒)
  action: No データモデルで発生するアクションを指定する。
アクションについては「Script」を参照。「(表)各コンポーネントでの実行タイミングおよび関数名一覧(UIバージョン1.1)」の"handleAfterLoadData"を捕捉して処理を実行する。
views: No カスタムビューを使用する場合指定する。
カスタムビューについては「データモデルの種類」を参照。
- name: Yes ユーザー定義名
viewsの中で一意である必要がある。
  source: Yes includesで指定したDatamodelのマニフェストファイルの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のマニフェストファイルの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)」~「(表)ItemListのプロパティ(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: 2147483647 No ボタンの表示順序を決めるための値を-2147483648~2147483647で設定する。
ボタンは昇順で表示される。同じ値が設定されている場合、マニフェストファイルで定義した順に表示される。
  properties: No プロパティの値をキー:値の形式で指定する。
プロパティの詳細は「(表)Buttonのプロパティ(UIバージョン1.1)」参照。
  action: No ユーザーが独自に設定したボタン、または標準で用意されたボタンをカスタムしたボタンをクリックした時に実行されるアクションを指定する。
標準で用意されたボタンをカスタムせずに使用する場合は、指定しないこと。詳細は「Script」を参照。
※入れ子関係にないキーの必須が「No」の場合は、定義が必須ではありません。入れ子関係にあるキーの場合は、下層キーの必須は、上層キーを設定している場合に適用されます。

(表)アクションボタンのタイプ(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)

(図)ReactとMaterial-UIを用いた画面構成の概念図(UIバージョン1.1) (図)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/
ItemList - データソースのデータ件数に応じて、UIコンポーネントを繰り返し表示する。

(表)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・Tableコンポーネントのフィールドの種類とDatamodelのマニフェストファイルのカスタムテーブルのカラムのタイプの対応表」または「(表)Form・Tableコンポーネントのフィールドの種類とDatamodelのマニフェストファイルのJSON Schemaファイルの定義の対応表」を参照。
- name: Yes fields内で一意の名前を指定する。
  source: Yes 使用するdataSourceのタイプを"table"、"view"、"schema"、"padding"から指定する。
  field: 説明欄に記載 sourceが"table"または"schema"の場合は"all"を指定する。
sourceが"view"の場合は"read"を指定する。
sourceが"padding"以外の場合は設定が必須となる。
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: 説明欄に記載 Form上での表示名を指定する。
sourceが"padding"以外の場合は設定が必須となる。
  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: No ルックアップダイアログで表示するカラム情報の配列
定義した順に表示される。
- 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: 説明欄に記載 No modeが"server"かつsourceが"api"の場合に使用する。
デフォルトでは、columnキーに指定されたデータソース名以降の値が設定される。
フィルタおよびソートを実施したときに送信されるAPIのクエリパラメータfilterByおよびsortByに設定される任意のフィールド名を指定する。例えば、デフォルトでは「filterBy=user.name:eq:任意のユーザー名」と指定されるところを、「filterBy=userName.eq:任意のユーザー名」としたい場合は、queryNameに"userName"と指定する。
  hide: false No カラムを非表示にするかどうかを指定する。
  • true:非表示
  • false:表示
  type: auto
No "auto"または"chip"を指定する。

(表)Form・Tableコンポーネントのフィールドの種類とDatamodelのマニフェストファイルのカスタムテーブルのカラムのタイプの対応表

フィールドの種類 カラムのタイプ
テキスト varchar、inet、uuid
数値(整数) integer
数値(実数) numeric、decimal※1
リッチテキストエディター text
ドロップダウン enum
チェックボックス boolean
日時 timestamp
日付 date
時間※2 time
※1:numericとdecimalのどちらを指定しても違いはありません。
※2:時間型のフィールドでは、ユーザーのタイムゾーン間で時刻が自動変換されません。例えば、UTC+09:00のユーザーが「05:00」と入力した場合、他のタイムゾーンのユーザーでも「05:00」と表示されます。
タイムゾーンの異なるユーザーが利用する環境においては、日時型のフィールドの使用を推奨します。
時間型のフィールドを使用する場合、タイムゾーンも入力フィールドとしてフォームに配置することを推奨します。

(表)Form・Tableコンポーネントのフィールドの種類とDatamodelのマニフェストファイルのJSON Schemaファイルの定義の対応表

フィールドの種類 カラムのタイプ format enum formControl items
テキスト※1 string - - - -
数値(整数) integer - - - -
数値(実数) number - - - -
リッチテキストエディター string - - text -
ドロップダウン string - あり - -
チェックボックス boolean - - - -
日時 string date-time - - -
日付 string date - - -
時間※2 string time - - -
※1:カスタムテーブルのカラムタイプinet、uuidに相当するものはJSON Schemaファイルでは指定できません。
※2:時間型のフィールドでは、ユーザーのタイムゾーン間で時刻が自動変換されません。例えば、UTC+09:00のユーザーが「05:00」と入力した場合、他のタイムゾーンのユーザーでも「05:00」と表示されます。
タイムゾーンの異なるユーザーが利用する環境においては、日時型のフィールドの使用を推奨します。
時間型のフィールドを使用する場合、タイムゾーンも入力フィールドとしてフォームに配置することを推奨します。

(表)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 カラム名
columnsの中で一意である必要がある。
  column: Yes カラムの各アクションで使用するデータソースを指定する。
フィールドの種類の詳細は、「(表)Form・Tableコンポーネントのフィールドの種類とDatamodelのマニフェストファイルのカスタムテーブルのカラムのタイプの対応表」または「(表)Form・Tableコンポーネントのフィールドの種類とDatamodelのマニフェストファイルのJSON Schemaファイルの定義の対応表」を参照。
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: 説明欄に記載 No modeが"server"かつsourceが"api"の場合に使用する。
デフォルトでは、column.readキーに指定されたデータソース名以降の値が設定される。
フィルタおよびソートを実施したときに送信される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のマニフェストファイルと同じディレクトリに格納する。
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"を指定する。
  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のマニフェストファイルのname
  • queryの場合、URLのクエリパラメータ名
  • fixedの場合、指定したい値
  ds: Yes チケットAPIのdsの取得元を指定する。
type: Yes 以下が指定できる。
  • uipath:URLのパスパラメータ
  • query:URLのクエリパラメータ
  • fixed:固定値
value: Yes typeによって以下を指定する。
  • uipathの場合、指定したいパスパラメータにひもづくUipathのマニフェストファイルの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: Yes フォーマットの方法を指定する。
  • 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キーで指定した値を表示する。

(表)ItemListのプロパティ(UIバージョン1.1)

キー デフォルト値 必須 説明
components: Yes UIコンポーネント
  type: Yes "itemList"を指定する。
  properties: No
  source: Yes 使用するdataSourceのタイプ
"table"、"view"から指定する。
  itemsRef: Yes データソース名
ここで指定したデータソースのデータ件数に応じて、itemキーに定義したUIコンポーネントを繰り返し表示する。
  idRef: Yes データソースのフィールド名を指定する。
データソース名.フィールド名の形式で指定する。itemsRefが参照するデータソースの行データを、一意に特定する値として使用する。
例)
itemListが参照するデータソースのデータ例
[
  { id: "1", name: "item-1" },
  { id: "2", name: "item-2" },
]
データ例の各行データはidキーの値によって一意となるので、"データソース名.id" を指定する。
  loadSize: No 一度に読み込むデータのサイズ
1以上の整数を指定する。
itemListの初期表示時、あるいは「さらに表示」ボタンをクリック時に、loadSizeで指定されたサイズのデータを読み込む。省略された場合は、サイズを設定せずにデータを読み込む。
  loadingMode: manual No データのロード方法を指定する。
  • manual
    初期表示時にデータをロードし、以降は「さらに表示」ボタンをクリック時にデータを追加でロードする。loadSizeの指定がない場合は「さらに表示」ボタンは表示されない。
  • none
    データをロードしない。公開関数からデータを設定する場合に使用する。「さらに表示」ボタンは表示されない。
  • once
    初期表示時に一度だけデータをロードする。「さらに表示」ボタンは表示されない。
  columnBreakpoints: No itemListコンポーネントの横幅(px値)に応じて変動する列数のブレークポイントを指定する。レスポンシブなグリッド表示を行いたい場合に指定する。省略された場合は、常に1列で表示する。
例)
columnBreakpoints:
 # itemListコンポーネントの幅が0px以上の場合、2列で表示
 - widthUp: 0
   col: 2
 # itemListコンポーネントの幅が500px以上の場合、3列で表示
 - widthUp: 500
   col: 3
- widthUp: Yes ブレークポイントの条件
0以上の整数を指定する。
itemListコンポーネントの横幅が、widthUpに指定されたピクセル数以上の場合、colに指定された列数でアイテムを表示する。
ピクセル数は数値で指定する。
例)widthUp: 200
  col: Yes ブレークポイントの条件に一致したときの列数
1以上の整数を指定する。
  rowGap: No アイテム行の余白
数値を指定した場合はpxとして設定される。文字列で指定する場合はpxやemなどが指定可能。詳細は以下を参照。
https://developer.mozilla.org/ja/docs/Web/CSS/length
  columnGap: No アイテム列の余白
数値を指定した場合はpxとして設定される。文字列で指定する場合はpxやemなどが指定可能。詳細は以下を参照。
https://developer.mozilla.org/ja/docs/Web/CSS/length
  noItemsLabel: アイテムがありません No データが存在しない場合に、代わりに表示するラベル
  selectionMode: none No アイテムの選択モード
  • none:選択なし
  • single:単数選択
  • multi:複数選択
  sx: No アイテムリストのスタイルを指定する。
Material-UIのsxキーに基づいて指定する。詳細は以下を参照。
https://v7.mui.com/system/getting-started/the-sx-prop/
  width: No アイテムリストの横幅
数値を指定した場合はpxとして設定される。文字列で指定する場合はpxやemなどが指定可能。詳細は以下を参照。
https://developer.mozilla.org/ja/docs/Web/CSS/length
  item: Yes 繰り返し表示するUIコンポーネント(アイテム)の定義、およびアイテムのコンテナのスタイルを指定する。
  components: Yes 繰り返し表示するUIコンポーネント(アイテム)を定義する。
このキーで定義したアイテムは、データソースのデータ件数に応じて繰り返し表示される。
アイテムからは、Itemデータソースを通して対応するデータを参照できる。
- name: Yes コンポーネントの内部名
  label: No コンポーネントの表示名
  type: Yes コンポーネントのタイプを指定する。
  • grid
  • paper
  • button
  • card
  • label
  • icon
  properties: No typeで指定したコンポーネントのpropertiesを指定する。
各コンポーネントのデータソースを指定するキーでは、Itemデータソースを指定できる。ItemデータソースにはitemsRefで指定したデータソースの1行分(表示されたアイテムに対応する行)のデータが格納される。

Itemデータソースを指定する場合は、item.フィールド名の形式で指定する(itemは予約語)。
例)
labelコンポーネントの場合
properties:
  contentRef: item.name
  children: No 子コンポーネントを指定する。
指定可能な子コンポーネントのタイプは、typeで指定可能なコンポーネントのみ。この制約は子コンポーネント以降のchildrenに対しても適用される。
  width: No アイテムの横幅
数値を指定した場合はpxとして設定される。文字列で指定する場合はpxやemなどが指定可能。詳細は以下を参照。
https://developer.mozilla.org/ja/docs/Web/CSS/length
  minWidth: No アイテムの最小幅
数値を指定した場合はpxとして設定される。文字列で指定する場合はpxやemなどが指定可能。詳細は以下を参照。
https://developer.mozilla.org/ja/docs/Web/CSS/length
  maxWidth: No アイテムの最大幅
数値を指定した場合はpxとして設定される。文字列で指定する場合はpxやemなどが指定可能。詳細は以下を参照。
https://developer.mozilla.org/ja/docs/Web/CSS/length
  sx: No アイテムのコンテナのスタイルを指定する。
Material-UIのsxプロパティに基づいて指定する。詳細は以下を参照。
https://v7.mui.com/system/getting-started/the-sx-prop/
  height: No アイテムの高さ
例)150px、100%
  border: No アイテムの枠線
例)"1px solid #CCC"
  borderRadius: No アイテムの枠線の角丸
例)20px
  padding: No アイテム内の余白
例)8px、"8px 16px"

<定義例>

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