ソース設定に切り替える前に
一度ソース設定にしたフォームブロックをビジュアル設定に変更することはできません。
ビジュアル設定である程度フォームのレイアウトやデザインを設定をした上でソース設定に変更することをお勧めします。
ビジュアル設定の詳しい説明は、SPIRAL ver.2 サポートサイト フォームブロックのビジュアル設定をご参照ください。
ビジュアル設定である程度フォームのレイアウトやデザインを設定をした上でソース設定に変更することをお勧めします。
ビジュアル設定の詳しい説明は、SPIRAL ver.2 サポートサイト フォームブロックのビジュアル設定をご参照ください。
ソース編集が必要ないパターン
下記の表示を変えたい場合
・入力必須
・ラベル
・ヘルプテキスト
・エラーメッセージ
・項目ラベル（セレクト、マルチセレクト）
これらの設定や文言は、設定画面上から変更することができます。
ソースに直書きはされていないため、ソースの編集は不要です。
・ラベル
・ヘルプテキスト
・エラーメッセージ
・項目ラベル（セレクト、マルチセレクト）
これらの設定や文言は、設定画面上から変更することができます。
ソースに直書きはされていないため、ソースの編集は不要です。
ヘッダーやフッターを追加したい場合
フリーコンテンツブロックで分けて作成する方法を推奨します。
ヘッダー、フォーム、フッターとそれぞれブロックを分けることで、変更を加える際の影響範囲を分けることができます。
また、共通のヘッダーやフッターを、複数ページへ簡単に適用できるようになります。
ヘッダー、フォーム、フッターとそれぞれブロックを分けることで、変更を加える際の影響範囲を分けることができます。
また、共通のヘッダーやフッターを、複数ページへ簡単に適用できるようになります。
入力フィールドやreCAPTUREなどを追加したい
ソースの編集は必要ですが、一から書く必要はありません。
ソース編集画面の「＋」ボタンから、ソースを追加することができます。
ソース編集画面の「＋」ボタンから、ソースを追加することができます。
ソースと画面の対応
登録フォームブロックのソースと画面は以下のように対応しています。
今回は、フォームの項目部分のソース（緑色の箇所）について詳しくご説明します。
登録フォームブロックのソース
フォームの1項目のソース
どのフィールドについての記載かを判別しやすくするためのコメントです。
コメントは実行されないため画面や動作と関係はありませんが、ソースの可読性の向上のため残しておくことを推奨します。
フォームで使用するDBフィールドを指定するタグです。
このタグを削除してしまうと、DBに入力値が保存されなくなってしまいます。
表示名ラベル、入力必須ラベルを囲うタグです。
「th:text="${fields['f01'].label}"」の記載により、DBのフィールドに設定した表示名が「Label」の部分に表示されます。
登録フォームブロックにてラベルを設定している場合はそちらが優先されて表示されます。
管理画面やアプリ利用画面で表示される表示名は「氏名」にして、フォームで表示されるラベルは「お名前」とするなど、アプリとサイトで表示を分けることが可能です。
「th:if="${fields['f01'].required}"」の記載により、フィールドが入力必須に設定されている場合に自動で入力必須ラベルを表示します。
「th:text="${fields['f01'].requiredIndicator}"」の記載により、フォームブロックの共通タブで設定されている入力必須ラベルが表示されます。
入力必須ラベルが設定されていない場合、デフォルトラベル「*」が表示されます。
インプットタグ、ヘルプテキスト、エラーメッセージを囲うタグです。
「th:if="${fields['f01'].help != null}"」の記載により、フォームブロックのフィールド設定、または共通設定にてヘルプテキストが設定されている場合に自動でヘルプテキストを表示します。
「th:text="${fields['f01'].help}"」の記載により、設定されているヘルプテキストが「Help text」の部分に表示されます。
ヘルプテキストが設定されていない場合は自動で非表示になります。
「th:if="${errors['f01'] != null}"」の記載により、エラーとなる値が送信された場合にエラーメッセージを表示します。
「th:text="${errors['f01'].message}"」の記載により、設定されているエラーメッセージが「Error message」の部分に表示されます。
表示されるエラーメッセージは、エラーの原因によって変わります。（未入力、重複、不正な値 など）
各エラーメッセージが設定されていない場合はデフォルトメッセージが表示されます
今回は、フォームの項目部分のソース（緑色の箇所）について詳しくご説明します。
登録フォームブロックのソース
※ソースは一部折りたたんでいます
※最初からソース設定でフォームブロックを作成した場合、ステップフローは生成されません
※最初からソース設定でフォームブロックを作成した場合、ステップフローは生成されません
コメント
コメントは実行されないため画面や動作と関係はありませんが、ソースの可読性の向上のため残しておくことを推奨します。
フォーム項目
このタグを削除してしまうと、DBに入力値が保存されなくなってしまいます。
フィールドのブロック
ラベルブロック
－ 表示名ラベル
登録フォームブロックにてラベルを設定している場合はそちらが優先されて表示されます。
管理画面やアプリ利用画面で表示される表示名は「氏名」にして、フォームで表示されるラベルは「お名前」とするなど、アプリとサイトで表示を分けることが可能です。
－ 入力必須ラベル
「th:text="${fields['f01'].requiredIndicator}"」の記載により、フォームブロックの共通タブで設定されている入力必須ラベルが表示されます。
入力必須ラベルが設定されていない場合、デフォルトラベル「*」が表示されます。
データブロック
－ インプットタグ
－ ヘルプテキスト
「th:text="${fields['f01'].help}"」の記載により、設定されているヘルプテキストが「Help text」の部分に表示されます。
ヘルプテキストが設定されていない場合は自動で非表示になります。
－ エラーメッセージ
「th:text="${errors['f01'].message}"」の記載により、設定されているエラーメッセージが「Error message」の部分に表示されます。
表示されるエラーメッセージは、エラーの原因によって変わります。（未入力、重複、不正な値 など）
各エラーメッセージが設定されていない場合はデフォルトメッセージが表示されます
