SPIRAL ver.2 チュートリアル動画【レコードリスト / レコードアイテム / レコード検索ブロック】

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

レコードリスト / レコードアイテム / レコード検索ブロック作成（1:08～）

レコードリスト / レコードアイテム / レコード検索ブロック作成について説明しています。

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

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

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

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

レコード公開範囲の詳細はサポートサイトをご参照ください。
・レコード公開範囲

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

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

ソース設定

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

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

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

レコードリスト

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

データフィールド一覧

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

リスト設定

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

レコードリストブロックでもHTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。
Thymeleafの詳細はサポートサイト、ナレッジサイトをご参照ください。
・ソース設定とThymeleaf
・Thymeleaf 特集
・ブロックのソース解説

レコードリストブロックの詳細はサポートサイトをご参照ください。
・レコードリストブロック

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

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

レコ―ドアイテム

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

フィールド一覧

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

レコードアイテムブロックでもHTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。
Thymeleafの詳細はサポートサイト、ナレッジサイトをご参照ください。
・ソース設定とThymeleaf
・Thymeleaf 特集
・ブロックのソース解説

レコードアイテムブロックの詳細はサポートサイトをご参照ください。
・レコードアイテムブロック

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

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

レコード検索

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

フィールド一覧

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

レコード検索ブロックでもHTMLエディタでテンプレートエンジンの”Thymeleaf”を使用することができます。
Thymeleafの詳細はサポートサイト、ナレッジサイトをご参照ください。
・ソース設定とThymeleaf
・Thymeleaf 特集
・ブロックのソース解説

レコード検索ブロックの詳細はサポートサイトをご参照ください。
・レコード検索ブロック

最後に

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