フィールドのスタイルを設定
概要
setFieldStyle 関数は、フィールドの値を書き換えずに見た目だけを変更します。
DOM構造に触れないため、getFieldElement で要素を取得して直接操作するよりも安全です。
構文
atPocket.app.record.setFieldStyle(fieldUid, config, rowIndex);
引数
| 引数名 | 型 | 説明 |
|---|---|---|
| fieldUid | string | フィールドのUID。明細（SubTable）の場合は列のUID |
| config | object | string | 適用するスタイル。'DEFAULT' を指定すると適用前の状態へ戻します |
| rowIndex | number | 明細の行インデックス（0始まり・任意）。省略して列UIDのみを指定した場合はその列の全行が対象 |
config の指定先
| キー | 適用先の要素 | 指定できるプロパティの例 |
|---|---|---|
| content | 値エリア（明細の場合はセル要素） | backgroundColor / color / fontWeight / textDecoration / borderColor |
| background | フィールド枠全体 | backgroundColor |
| label | ラベル部 | color / fontWeight / textDecoration |
上記以外の任意の CSS プロパティ（キャメルケース）も指定できます。
戻り値
| 型 | 説明 |
|---|---|
| Promise<void> | 内部で描画の完了を待つため、await は必須ではありません |
使用可能画面
- レコード詳細画面
- レコード作成画面
- レコード編集画面
使用例
// 背景色と文字の太さを変更する
await atPocket.app.record.setFieldStyle('field-2', {
content: { backgroundColor: '#fff3cd', fontWeight: 'bold' },
});
// ラベルの色も合わせて変更する
await atPocket.app.record.setFieldStyle('field-2', {
content: { backgroundColor: '#f8d7da' },
label: { color: '#c00' },
});
// 適用したスタイルを解除する
await atPocket.app.record.setFieldStyle('field-2', 'DEFAULT');
明細のセル・列に適用する
// 明細の1行目のセルに適用する
await atPocket.app.record.setFieldStyle('field-6_1', {
content: { backgroundColor: '#fff3cd' },
}, 0);
// 列の全行に適用する
await atPocket.app.record.setFieldStyle('field-6_2', {
content: { color: '#c00' },
});
明細（SubTable）に適用する場合の注意
- 明細のセルは
contentのみ対応します。background/labelは無視されます - 行の追加・コピー・削除・並び替えを行うと、適用したスタイルは解除されます。行操作の
changeイベントで再適用してください
備考
'DEFAULT' は空文字での消去ではなく、適用前の状態への復元です。アプリのフィールド設定に由来する見出し色などは保持されます。