本チャプターでは、SPIRAL ver.2の主要機能であるサイト管理の中でも レコードリスト / レコードアイテム / レコード検索 ブロック をピックアップしてお伝えします。
また、各ブロックの概要についても説明いたします。
- SPIRAL ver.2 概要
- 【アプリ管理】アプリ作成
- 【アプリ管理】DB作成
- 【アプリ管理】DBトリガ レコードアクション
- 【アプリ管理】DBトリガ 非同期アクション
- 【アプリ管理】スケジュールトリガ メールアクション
- 【アプリ管理】アプリロール / アプリ利用画面
- 【サイト管理】サイト作成
- 【サイト管理】ページ
- 【サイト管理】フォームブロック
- 【【サイト管理】フォームブロック ビジュアル設定
- 【サイト管理】フォームブロック ソース設定
- 【サイト管理】レコードリスト / レコードアイテム / レコード検索 ブロック
- 【サイト管理】フリーコンテンツブロック
- 【サイト管理】認証エリア
- 【アカウント管理】ユーザ
- 【アカウント管理】グループ
- 【アカウント管理】APIエージェント
レコードリスト / レコードアイテム / レコード検索 ブロック説明(0:20~)
レコードリスト / レコードアイテム / レコード検索 ブロックついて説明しています。
ブロック名 | 動作 | 利用用途 |
---|---|---|
レコードリストブロック | DB内のレコード情報を表形式で公開する | セミナー一覧 FAQ一覧 など |
レコードアイテムブロック | DB上の1レコードの詳細情報を公開する | セミナー情報詳細ページ FAQ詳細ページ など |
レコード検索ブロック | レコードリストブロック上に表示されたレコードを 任意の条件で検索をし、レコードを絞り込み表示する |
セミナー検索 FAQ検索 など |
レコードリスト / レコードアイテム / レコード検索ブロック作成(1:08~)
レコードリスト / レコードアイテム / レコード検索ブロック作成について説明しています。
ページメニューからは、3ブロック同時に作成することができます。
作成したいブロックを選択し、プラスボタンをクリックして作成を進めていきます。
ページメニューから作成の場合は「レコード検索 + レコードリストブロック」を選択すると、レコードリストブロック作成後にレコード検索ブロック作成に進むことができます。
レコードリストブロック作成時には、リスト上に表示するレコード情報をサイトの中でどこまでアクセス・閲覧可能なレコードとするか、公開範囲を指定する必要があります。
レコード公開範囲 未設定DBの場合は、最初に”レコード公開範囲設定”を行います。
現時点では、3ブロックとも設定方法はソース設定のみとなります。ご了承ください。
Thymeleafの詳細はサポートサイト、ナレッジサイトをご参照ください。
・ソース設定とThymeleaf
・Thymeleaf 特集
・ブロックのソース解説
レコードリストブロックの詳細はサポートサイトをご参照ください。
・レコードリストブロック
Thymeleafの詳細はサポートサイト、ナレッジサイトをご参照ください。
・ソース設定とThymeleaf
・Thymeleaf 特集
・ブロックのソース解説
レコードアイテムブロックの詳細はサポートサイトをご参照ください。
・レコードアイテムブロック
レコードリスト / レコードアイテム / レコード検索ブロック作成
ブロックメニューからは、それぞれ個別にブロックを作成することができます。ページメニューからは、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を用意していますので、是非お試しください。
デフォルトデザインはシンプルですが、各ブロックCSSやJavaScriptの設置ができますので装飾可能です。
ナレッジサイトでも簡単に装飾できるコピペCSSを用意していますので、是非お試しください。

2022年9月7日(水)
レコードリストで使えるコピペCSS 「カスタムデザイン」