動画で学ぶ SPIRAL ver.2 基本機能　～【サイト管理】レコードリスト / レコードアイテム / レコード検索ブロック～

ブロック名	動作	利用用途
レコードリストブロック	DB内のレコード情報を表形式で公開する	セミナー一覧 FAQ一覧など
レコードアイテムブロック	DB上の1レコードの詳細情報を公開する	セミナー情報詳細ページ FAQ詳細ページなど
レコード検索ブロック	レコードリストブロック上に表示されたレコードを任意の条件で検索をし、レコードを絞り込み表示する	セミナー検索 FAQ検索など

レコードリスト / レコードアイテム / レコード検索ブロック作成

動画を見る
※レコードリスト / レコードアイテム / レコード検索ブロック作成について説明している部分（1:08～）へジャンプします。

レコードリスト / レコードアイテム / レコード検索ブロック作成

ブロックメニューからは、それぞれ個別にブロックを作成することができます。
ページメニューからは、3ブロック同時に作成することができます。

作成したいブロックを選択し、＋ボタンをクリックして作成を進めていきます。
ページメニューから作成の場合は「レコード検索＋レコードリストブロック」を選択すると、レコードリストブロック作成後にレコード検索ブロック作成に進むことができます。

レコードリストブロック作成時には、リスト上に表示するレコード情報をサイトの中でどこまでアクセス・閲覧可能なレコードとするか、公開範囲を指定する必要があります。
レコード公開範囲未設定DBの場合は、最初に”レコード公開範囲設定”を行います。

【レコード検索ブロックご注意】
検索フィールドとして追加できるフィールドは、”検索対象のレコードリストブロックに含まれるフィールド” かつ ”インデックスが設定されている「テキスト」「セレクト」「マルチセレクト」「日付」フィールド” のみとなります。

各ブロック作成後に詳細設定を行います。
現時点では、3ブロックとも設定方法はソース設定のみとなります。ご了承ください。

ソース設定

HTML編集やCSS設置など、自由にカスタマイズする方法

レコードリストブロック詳細設定

プレビュー	設定したレコードリストブロックのプレビューを確認することが可能
レコードリスト	表示列の変更やサイト内ページへのリンク追加などが可能
CSS	CSS専用の設置場所
JS	JavaScript専用の設置場所
リスト設定	フィルタ、初期ソート、初期表示件数の変更が可能

レコードリスト

項目追加は、コードボタンをクリックし、該当のものを選択します。
表示列を追加したい場合は、コードタイプを”リスト要素”にし、追加したいフィールドを選択すると、
フィールドに該当するリストヘッダコードとリストデータコードが生成されます。
それぞれを表示させたい箇所に挿入します。

データフィールド一覧

ヘッダー部分の項目名やレコードリストブロックを表示した際の選択肢名の変更が行えます。

リスト設定

フィルタや初期ソート、初期表示件数の変更が行えます。

レコードリストブロックでもHTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。

レコードアイテムブロック詳細設定

プレビュー	設定したレコードアイテムブロックのプレビューを確認することが可能
レコードアイテム	表示項目の変更やサイト内ページへのリンク追加、ファイル追加などが可能
CSS	CSS専用の設置場所
JS	JavaScript専用の設置場所

レコ―ドアイテム

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

フィールド一覧

項目名やレコードアイテムブロックを表示した際の選択肢名の変更が行えます。

レコードアイテムブロックでもHTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。

レコード検索ブロック詳細設定

プレビュー	設定したレコード検索ブロックのプレビューを確認することが可能
レコード検索	検索フィールドの変更やファイル追加などが可能
CSS	CSS専用の設置場所
JS	JavaScript専用の設置場所

レコード検索

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

フィールド一覧

項目名やレコード検索ブロックを表示した際の選択肢名の変更、ヘルプテキストの設定が行えます。

レコード検索ブロックでもHTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。

参考リンク

・レコードリストブロック
・レコードアイテムブロック
・レコード検索ブロック
・レコード公開範囲
・ソース設定とThymeleaf
・Thymeleaf 特集
・ブロックのソース解説

最後に

レコードリストブロック、レコードアイテムブロック、レコード検索ブロックを組み合わせることで、お知らせ一覧やセミナー一覧などを簡単に作成することができます。
デフォルトデザインはシンプルですが、各ブロックCSSやJavaScriptの設置ができますので装飾可能です。
ナレッジサイトでも簡単に装飾できるコピペCSSを用意していますので、是非お試しください。