# consentFlow Webform Development Guide

> consentFlow の Form.io スキーマ (webform JSON) を編集する全タスクの入口。Form.io コンポーネント `key` ↔ Notes アイテム `<prefix>{key}` の 1:1 マッピングが前提。`<prefix>` は consentFlow 側設定 (デフォルト `CF_`、既存アプリのモダナイズでは空文字もあり) で、**webform 側は接頭語非依存で書く** ([references/data-binding.md](https://mcp.cflow.cloud/docs/data-binding.md) §1)。

MCP endpoint (Streamable HTTP, no auth): https://mcp.cflow.cloud/mcp

## Docs
- [consentFlow Webform Development](https://mcp.cflow.cloud/docs/skill.md)
- [data-binding — Form.io key と Notes アイテムのマッピング、隠しフィールドの正しい型](https://mcp.cflow.cloud/docs/data-binding.md)
- [json-conventions — JSON ファイル整形、スキーマライフサイクル、prune scope](https://mcp.cflow.cloud/docs/json-conventions.md)
- [layout-styling — レイアウト・グルーピング、styleBlock CSS、modalEdit ダイアログ、参照モード disabled](https://mcp.cflow.cloud/docs/layout-styling.md)
- [scripting — Form.io 拡張点、button の自動注入変数、Chart.js、カスタムバリデータ](https://mcp.cflow.cloud/docs/scripting.md)
- [server-data — フォーム内 JS からサーバ側 Notes データを読み取る全経路](https://mcp.cflow.cloud/docs/server-data.md)

## Sections
- skill#overview — Overview (https://mcp.cflow.cloud/docs/skill.md)
- skill#premise — このガイドの前提 (Premise) (https://mcp.cflow.cloud/docs/skill.md)
- skill#red-flags-stop-and-check — Red Flags — STOP and check (https://mcp.cflow.cloud/docs/skill.md)
- skill#quick-reference-reference — Quick Reference (やりたいこと → 読む reference) (https://mcp.cflow.cloud/docs/skill.md)
- skill#decision-flow-js-notes — Decision flow: フォーム内 JS から Notes フィールド値を読みたい (https://mcp.cflow.cloud/docs/skill.md)
- skill#when-not-to-apply — When NOT to apply (https://mcp.cflow.cloud/docs/skill.md)
- skill#tips — 運用ルール (新規 TIPS の追記先) (https://mcp.cflow.cloud/docs/skill.md)
- data-binding#1-form-io-notes — 1. Form.io ↔ Notes フィールド命名規則 (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#1-1-valueproperty-datatype — 1. Form.io ↔ Notes フィールド命名規則 > 1.1 ⚠ `valueProperty` / `dataType` を**後から**変えると、既存文書の値が照合できなくなる (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#2-type-textfield-hidden-true-type — 2. 「裏で持つだけの値」は `type: "textfield" + hidden:true` ではなく `type: "hidden"` を使う (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#sec — 2. 「裏で持つだけの値」は `type: "textfield" + hidden:true` ではなく `type: "hidden"` を使う > 何が起きるか (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#sec-2 — 2. 「裏で持つだけの値」は `type: "textfield" + hidden:true` ではなく `type: "hidden"` を使う > 正しい設定 (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#type-hidden — 2. 「裏で持つだけの値」は `type: "textfield" + hidden:true` ではなく `type: "hidden"` を使う > `type: "hidden"` で省略してよい / 入れない方がよいプロパティ (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#sec-3 — 2. 「裏で持つだけの値」は `type: "textfield" + hidden:true` ではなく `type: "hidden"` を使う > 既存フォームを点検したいとき (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#sec-4 — 2. 「裏で持つだけの値」は `type: "textfield" + hidden:true` ではなく `type: "hidden"` を使う > 参考実装 (実運用フォームの実例) (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#3-input-false-skip — 3. `input: false` のコンポーネントはデータ系ライフサイクルを skip する (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#4-32-000-richtext — 4. 32,000 バイト超の文字列値は黙って RichText アイテムになりビュー列から消える (https://mcp.cflow.cloud/docs/data-binding.md)
- data-binding#red-flags — Red Flags (https://mcp.cflow.cloud/docs/data-binding.md)
- json-conventions#1-json — 1. JSON ファイル肥大化を避けるためのインデント運用 (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#1-1 — 1. JSON ファイル肥大化を避けるためのインデント運用 > 1.1 症状の見分け方 (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#1-2-json-round-trip — 1. JSON ファイル肥大化を避けるためのインデント運用 > 1.2 アンチパターン: 標準外の JSON フォーマッタでの round-trip (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#1-3 — 1. JSON ファイル肥大化を避けるためのインデント運用 > 1.3 推奨フォーマット (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#1-4-node-js — 1. JSON ファイル肥大化を避けるためのインデント運用 > 1.4 正規化レシピ (Node.js) (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#1-5 — 1. JSON ファイル肥大化を避けるためのインデント運用 > 1.5 編集時のチェックリスト (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#1-6-1-json-node-parse-stringify — 1. JSON ファイル肥大化を避けるためのインデント運用 > 1.6 改行ゼロの 1 行 JSON は Node の parse→stringify round-trip で構造編集する (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#1-7 — 1. JSON ファイル肥大化を避けるためのインデント運用 > 1.7 削除すべき不要スキーマ要素 (補足) (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#2-webformrevisionjson-fieldjson — 2. WebFormRevisionJson と FieldJson の使い分け (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#2-1-fieldjson-default — 2. WebFormRevisionJson と FieldJson の使い分け > 2.1 FieldJson は公開時プレビューの「評価済み」スナップショット — default 系は新規文書で再評価されない (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#3-prune-prefix-schema-data-referencedkeys — 3. 孤児アイテム自動削除 (prune) は prefix 空時に schema/Data 由来 referencedKeys で managed scope 判定 (https://mcp.cflow.cloud/docs/json-conventions.md)
- json-conventions#red-flags — Red Flags (https://mcp.cflow.cloud/docs/json-conventions.md)
- layout-styling#1-panel-container — 1. レイアウトのグルーピングは `panel` を使う — `container` は原則禁止 (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#2-disabled-choices-js-ace-quill — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#leaf — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > 自作再帰で leaf に到達できない (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#choices-js-select-tags-selectmultiple — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > Choices.js (select / tags / selectMultiple) は `component.disabled = true` だけでは UI が止まらない (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#ace-quill-form-io-disabled — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > ACE / Quill エディタは Form.io の disabled が内部インスタンスに伝わらない (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#datagrid-2-columns-input-disabled — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > DataGrid 2 行目以降 / columns 配下の input が disabled 属性を持たない (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#checkbox-radio-blanket-css-input — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > checkbox / radio は blanket CSS (`input { pointer-events: none }`) では止まらない (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#ccc-css-radio-selected — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > 参照モードの選択肢ラベル配色 (選択中=黒太字 / 非選択=#ccc) はコア共通 CSS の `radio-selected` 機構 (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#why-how-to-apply — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > Why / How to apply (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#2-1-webformreadonlycopyflg — 2. 参照モードで disabled が当たらない罠 (Choices.js / ACE / Quill / DataGrid) > 2.1 参照モードのテキストコピー許可 (WebFormReadOnlyCopyFlg) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#3-styleblock-css — 3. styleBlock (フォーム内カスタム CSS) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#sec — 3. styleBlock (フォーム内カスタム CSS) > 標準形 (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#sec-2 — 3. styleBlock (フォーム内カスタム CSS) > ルール (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#sec-3 — 3. styleBlock (フォーム内カスタム CSS) > 禁止事項・注意 (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#xpages-dom-styleblockglobal — 3. styleBlock (フォーム内カスタム CSS) > フォーム外の XPages DOM は `styleBlockGlobal` で狙う (承認フロー/承認履歴/親子文書パネル等) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#sec-4 — 3. styleBlock (フォーム内カスタム CSS) > 実装挙動の詳細 (デバッグ時に役立つ) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#sec-5 — 3. styleBlock (フォーム内カスタム CSS) > スコープ化されない要素を狙うアンチパターン (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#3-1-styleblock — 3. styleBlock (フォーム内カスタム CSS) > 3.1 styleBlock テンプレート運用 (推奨) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-modaledit-true-panel — 4. `modalEdit: true` Panel をダイアログとして使う (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-1 — 4. `modalEdit: true` Panel をダイアログとして使う > 4.1 最小定義 (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-2-dom — 4. `modalEdit: true` Panel をダイアログとして使う > 4.2 自動生成される DOM 構造 (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-3 — 4. `modalEdit: true` Panel をダイアログとして使う > 4.3 モーダル内のボタンから親フォームへ値を書く (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-3-1 — 4. `modalEdit: true` Panel をダイアログとして使う > 4.3.1 ダイアログ内の一時フィールドはセット後にリセットする (サーバー永続化を避ける) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-4-bootstrap-card-choices-js-dropdown — 4. `modalEdit: true` Panel をダイアログとして使う > 4.4 Bootstrap `.card` 装飾の打ち消し + 推奨レイアウト (Choices.js dropdown overflow) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-5 — 4. `modalEdit: true` Panel をダイアログとして使う > 4.5 「開く」ボタンをアイコン化したい (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#4-6 — 4. `modalEdit: true` Panel をダイアログとして使う > 4.6 落とし穴と注意点 (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#5-radio-selectboxes-segmented-control-css — 5. radio / selectboxes を「ボタン群 (segmented control)」に CSS で見せるとき (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#sec-6 — 5. radio / selectboxes を「ボタン群 (segmented control)」に CSS で見せるとき > 落とし穴: 選択状態が出ない (= 「選択が押せない」ように見える) (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#6-panel-customconditional — 6. 「ステップ切替」を panel × `customConditional` で作るときの素通りゲート (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#6-1 — 6. 「ステップ切替」を panel × `customConditional` で作るときの素通りゲート > 6.1 切替フラグは「保存値」ではなく**ページ変数**を読む — 開くたび先頭ステップに戻す (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#6-2 — 6. 「ステップ切替」を panel × `customConditional` で作るときの素通りゲート > 6.2 ⚠ この修正はフォームの再エクスポートで消えることがある — 機械ガードを置く (https://mcp.cflow.cloud/docs/layout-styling.md)
- layout-styling#red-flags — Red Flags (https://mcp.cflow.cloud/docs/layout-styling.md)
- scripting#1-javascript-script-form-io — 1. JavaScript ロジックは `<script>` 直書きせず Form.io 拡張点を使う (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#2-button-action-custom-js — 2. `button` (action:"custom") の JS スコープに自動注入される変数 (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#sec — 2. `button` (action:"custom") の JS スコープに自動注入される変数 > よく使うパターン (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#sec-2 — 2. `button` (action:"custom") の JS スコープに自動注入される変数 > 注意点 (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#3-chart-js-v2 — 3. Chart.js v2 が全ページに組込済 (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#sec-3 — 3. Chart.js v2 が全ページに組込済 > チャート表示の定石 (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#4-multi-select-validate-custom-input — 4. multi-select の `validate.custom` で input は string|array の両方が来る (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#5-calculatevalue-allowcalculateoverride-true — 5. `calculateValue` + `allowCalculateOverride:true` はソース変更時に再計算を止める (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#6-logic-datavalue-defaultvalue — 6. `logic[]` トリガーの空判定 `dataValue !== ""` は非文字列 `defaultValue` にすり抜かれる (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#7-logic-customaction-select-fieldlogic — 7. `logic[]` customAction で Select 選択肢を動的注入すると fieldLogic の巻き戻しで消える (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#8-validate-custom-approve — 8. `validate.custom` は承認 (approve) 時も参照モードで再実行される — 時間/状態依存の検証には未申請ガード必須 (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#9-1-scriptblock-cfapi-form — 9. 「文書を開いたとき 1 回だけ」実行する — 予約キー `scriptBlock` + `cfAPI.form` (フォームスクリプト) (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#9-1-consentflow-type-hidden-calculatevalue — 9. 「文書を開いたとき 1 回だけ」実行する — 予約キー `scriptBlock` + `cfAPI.form` (フォームスクリプト) > 9.1 フォールバック (旧バージョンの consentFlow): `type:"hidden"` + `calculateValue` + ガード (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#10-htmlelement-content-html — 10. `htmlelement` / `content` の本文中の `{{ … }}` はテンプレート式として評価される — 説明文にプレースホルダー例を書くなら HTML 実体参照 (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#11-htmlelement-js-content — 11. `htmlelement` に JS で書き込んだ中身は再描画で初期 `content` に戻る — 描き直しを仕組みにする (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#12-js-form-io-1 — 12. 別の項目の値を JS でまとめて書き換えるときの Form.io の癖 (変更通知の合体・計算の取りこぼし・条件の 1 回遅れ) (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#13-logic-trigger-event-form-io — 13. `logic[]` の `trigger.event` で Form.io 内部イベント (initialized / change / blur / focus / render / error / submit) を購読する — 対象は常に「フォーム全体」 (https://mcp.cflow.cloud/docs/scripting.md)
- scripting#red-flags — Red Flags (https://mcp.cflow.cloud/docs/scripting.md)
- server-data#1-cfglobal — 1. cfGlobal 直読 (最優先) (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#1-1-cfglobal — 1. cfGlobal 直読 (最優先) > 1.1 `cfGlobal` にプリロードされる標準フィールド (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#1-2-statusno — 1. cfGlobal 直読 (最優先) > 1.2 推奨パターン (StatusNo を例に) (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#1-3-cfglobal-cfapi-isnewnote — 1. cfGlobal 直読 (最優先) > 1.3 cfGlobal にない値を読む — このときだけ cfAPI + `isNewNote` ガード (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#1-4-form-io — 1. cfGlobal 直読 (最優先) > 1.4 ガードを忘れがちな Form.io 拡張ポイント (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#1-5 — 1. cfGlobal 直読 (最優先) > 1.5 既存フォームの棚卸し (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#1-6-cfglobal — 1. cfGlobal 直読 (最優先) > 1.6 cfGlobal を増やしたい場合 (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#2-myformio-syncfields-notes — 2. myFormio.syncFields() — 入力値を Notes 文書へ反映して承認者を再計算する (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-restviewjson-xsp-restdocjson-xsp-view — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-1 — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.1 用途比較 (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-2-url — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.2 URL とクエリパラメータ (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-2-1-keysex — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.2 URL とクエリパラメータ > 3.2.1 多列キー絞り込み (`keysEx`) (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-3 — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.3 レスポンス形状 (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-4-button-custom-ajax — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.4 呼び出しコードの定石 (Button の `custom` 内で `$.ajax`) (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-5-editgrid-datagrid — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.5 EditGrid / DataGrid 内コンポーネントへのアクセス (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-6 — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.6 落とし穴と注意点 (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-7-cfapi — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.7 cfAPI との使い分け (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-8-select-datatype — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.8 Select コンポーネントで「行オブジェクト全体」を保持したいときの `dataType` (落とし穴) (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-9-select-idpath-form-io — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.9 Select の `idPath` — 行の一意性を Form.io に教える (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#3-10-lazyload-url-select — 3. restViewJson.xsp / restDocJson.xsp (マスタ View 検索、別文書全フィールド) > 3.10 lazyLoad な URL Select の「空表示」は応答待ち、「生コード表示」は失敗 — 見分け方と監視パターン (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#4-rest-api-api-webform-rest — 4. 外部 REST API (API キー方式) は webform から直接呼ばず、システム連携 (REST API) 文書 + `restAPI.xsp?apiid=` 経由で呼ぶ (https://mcp.cflow.cloud/docs/server-data.md)
- server-data#red-flags — Red Flags (https://mcp.cflow.cloud/docs/server-data.md)

## Samples
- cfKitchenSink: https://mcp.cflow.cloud/samples/cfKitchenSink.json
- projectManagement: https://mcp.cflow.cloud/samples/projectManagement.json