動画で学ぶ SPIRAL ver.2 基本機能　～【サイト管理】フォームブロックソース設定～

プレビュー	画面ごとのプレビューを確認することが可能
登録フォーム	入力画面や確認画面、完了画面などの各画面のソース編集による設定やメールアクション、自動登録設定が可能
CSS	CSS専用の設置場所
JavaScript	JavaScript専用の設置場所
共通	全フィールド共通のエラーメッセージや入力必須ラベルなどの設定が可能

登録フォーム

【入力画面】

項目追加は、追加したい場所にカーソルを合わせて＋ボタンをクリックし、該当のものを選択します。

リンクやファイル追加もボタン操作で行え、1からソースを記述する必要はありません。

フィールドごとの詳細設定は、画面右上のフィールド一覧ボタンをクリックしてフィールド設定から設定します。

【確認画面】

確認画面では入力画面で追加した項目は自動的に反映されません。
確認画面でのソース追加もお忘れなく行ってください。

【完了画面、締切画面、エラー画面】

自由にHTML編集が行えます。
完了画面においては、登録した値を表示させることができるレコード値挿入も可能です。

CSS

フォームデザインはCSSで変更します。専用の設置場所があり、ソースの可読性が高くなります。

フォームブロックでも各画面のHTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。

フォームブロック表示 Thymeleaf使用例（2:56～）

動画を見る
※フォームブロック表示 Thymeleaf使用例について説明している部分（2:56～）へジャンプします。

項目名部分

項目名は直接HTMLソース上に記述されていませんが、ThymeleafによりDB上のフィールド表示名を呼び出して表示しています。
f01やf02などの番号は、フォームブロックを作成しているDBのフィールドIDのことを指しています。

（例）氏名部分のHTMLソース

選択形式フィールドの選択肢部分

セレクトやマルチセレクトの選択形式フィールドも選択肢部分の記述はありませんが、ThymeleafによりDB上のラベル設定内容を呼び出して表示しています。

（例）都道府県（セレクトフィールド）部分のHTMLソース

なお、フィールド一覧からも項目名や選択肢名の変更が可能で、フィールド一覧での変更内容が優先されて表示されます。

フォームブロック作成後に、項目名の変更や選択肢の追加というメンテナンスを行うことがあります。
SPIRAL ver.2のフォームブロックではThymeleafにて表示していますので、DBやフィールド一覧で設定した内容がそのままフォームに自動反映されます。
ソース編集を行う必要がなく、メンテナンスがしやすいです。

参考リンク

・ソース設定とThymeleaf
・登録フォームブロックのソース設定
・更新フォームブロックのソース設定
・削除フォームブロックのソース設定
・ログインフォームブロックのソース設定
・パスワード再登録フォームブロックのソース設定
・レコード照合フォームブロックのソース設定
・Thymeleaf 特集
・ブロックのソース解説

最後に

SPIRAL ver.2 のフォームブロックソース設定は、HTMLソース追加も簡単で、フォームの表示変更の場合もHTML編集はフィールド削除の場合のみなど、最低限に押さえることができます。
ソース設定と聞くと難しいというイメージがありますが、SPIRAL ver.2ではその難しさを軽減する仕組みを用意していますので、安心してご利用ください。

前の動画

【サイト管理】フォームブロックビジュアル設定

次の動画

【サイト管理】レコードリスト / レコードアイテム / レコード検索ブロック