ver.2サポートサイト

HOME機能サイト管理ブロックレコードリストブロックのビジュアル設定

レコードリストブロックのビジュアル設定

機能概要

レコードリストブロックの設定方法を「ビジュアル設定」にすることでHTMLを直接編集することなく画面上でコンテンツ作成/編集ができます。

機能仕様

・ビジュアル設定ではフィールドの追加・削除・並び順変更やページネーション要素に関する設定、各パーツレイアウト変更などが行えます。
※ビジュアル設定になっているレコードリストブロックをソース設定に変更することは可能ですが、一度ソース設定にしたレコードリストブロックをビジュア設定に変更することはできません。

レコードリストブロックの作成

レコードリストブロックの作成方法はこちらをご参照ください。

レコードリスト設定

プレビュー

プレビューを見ながら、「レコードリスト」タブからカスタマイズしていきます。

レコードリスト

1.テキストパーツ

テキストパーツはレコードリストの各フィールドとは独立したテキストブロックを追加することができます。
ページのタイトルや説明テキストなどに使用できます。

※テキストパーツはHTMLタグを使用して編集することはできません。(HTMLタグがそのまま表示されます)


テキストリンク

外部ページのリンク指定や同サイト内の別ページのリンク指定を行うことができます。

▼外部ページ

▼サイト内ページ選択


ファイル挿入

サイトファイルのファイルを挿入することができます。

▼新規ファイル追加

▼既存ファイル選択


 

2.パーツ追加

パーツの上下にマウスカーソルをあわせると「+」ボタンが表示されます。

こちらからテキストパーツの追加ができます。


3.ページネーションパーツ(上部)

ページネーションパーツ(上部)は現在表示範囲、総件数、表示件数切替、ページナビゲーションなどの要素の利用可否や表示位置を設定できます。

パーツ(上部)の追加・削除はできませんが利用可否を設定することは可能です。

ページネーションパーツの要素について(上部)・(下部)

総件数

レコードリストブロック上に表示するレコードの総件数を表す要素を設定できます。

現在表示範囲

レコードリストブロック上に表示するレコード数の表示範囲を設定できます。

表示件数切替

レコードリストブロック上に表示するレコード件数の表示件数切替を設定できます。

ページナビゲーション

レコードリストブロック上に表示するページャーを設定できます。


4.リストパーツ

リストパーツは、フィールドのヘッダ利用可否、フィールド(カラム)の追加・削除、フィールドの表示順、レコードが0件の場合に表示する文言を設定できます。


カラム詳細設定

リストパーツ上の各フィールドをクリック、またはリストパーツ内のカラム設定からフィールド名をクリックするとカラム詳細設定が開きます。
カラム詳細設定はフィールド毎のラベル設定、ヘッダーソートの利用可否、カラム幅、ページ内リンク設定などを設定できます。

 

ラベル レコードリストブロック上に表示されるフィールド名を編集できます。

項目ラベル

(セレクト/マルチセレクト

フィールドのみ)

DBで設定したラベルの表示を変更したいときに使用します。

使用例)表示ラベルを英語に変更

※変更したラベルはレコードリスト上での表示のみ適用されます。

ヘッダソート

ヘッダーフィールドをクリックした際のソート有無を設定できます。

※事前にインデックスを設定しておく必要があります。

ソートで選択できるフィールドタイプの種類については、初期ソートをご確認ください。

カラム幅 フィールドの表示幅を設定できます。
行寄せ

フィールド名およびフィールド値の表示位置を設定できます。

リンク設定

(ファイルフィールドは対象外)

フィールド値に同サイト内の別ページへ画面遷移するリンクを指定できます。
また、リンク先のページ内に配置するブロックを選択、作成できます。

リンク先ページ追加で追加するページが非認証ページの場合、レコードアイテムブロックのみ選択できます。

リンク先ページ追加で追加するページが認証ページの場合、更新フォームブロック、削除フォームブロック、レコードアイテムブロックのいずれかを選択できます。

改行

(テキストエリアフィールドのみ)

テキストエリアフィールドのフィールド値を表示する際、文字列内の改行有無を設定できます。詳細はこちらをご確認ください。

 

リンク設定の引用レコード/パラメータ付与

リンク設置でページ選択後、引用レコードおよびページ内リンクURLに付与するパラメータの設定を行います。

引用レコード 自DBレコード

レコードリスト上のレコード値をリンク先ページに引き継ぐ際に指定します。

参照先DBレコード

レコードリスト上の参照フィールドの値を引き継ぐ際、参照先レコードを選択、引継ぎ対象の参照フィールドを選択します。

レコード公開範囲を設定しているDBを参照している参照フィールドのみ選択可能です。

パラメータ付与

ページ内リンクURLに任意のパラメータを付与することができます。記述方法はパラメータ付与をご参照ください。

参照先DB内に含まれるフィールドの追加について

レコードアイテム上に参照フィールドの参照先DB内に含まれるフィールドを追加することができます。
詳細については参照先DBのフィールド追加をご参照ください。


5.ページネーションパーツ(下部)

ページネーションパーツ(下部)は現在表示範囲、総件数、表示件数切替、ページナビゲーションなどの要素の利用可否や表示位置を設定できます。

パーツ(下部)の追加・削除はできませんが利用可否を設定することは可能です。

設定例

1.フィールド追加

2.サイト内リンクページ追加

フィールド追加

※例ではレコードリストに「会場」というフィールドを追加します。

1.追加したいフィールドを選択

「レコードリスト」タブよりリストパーツ編集画面を開き、カラム設定「+」ボタン から「会場」を選択します。

リストパーツに「会場」が追加されます。

2.保存

プレビューで画面を確認し、保存します。

保存後、レコードリストブロックを配置しているページのURLへアクセスし、配置したフィールドが表示されるかご確認ください。

 

サイト内ページリンク追加

※例では「会場」のリンク先に、新規の非認証ページ(引用レコードを自DBレコード)+レコードアイテムブロックを追加する手順を記載します。

※リンク先ページを非認証ページ/認証ページとして追加する場合の挙動については、レコードリストブロックのソース設定をご参照ください。

 

1.ページリンクを追加する

「レコードリスト」タブよりリストパーツ編集画面を開きます。

リストパーツから「会場」をクリック、またはリストパーツのカラム設定から「会場」をクリックしカラム詳細設定を開き、リンク設定の「変更」ボタンをクリックします。

「新規ページ」をクリックします。

ページ表示名、ページ識別名を設定し、「次へ」ボタンをクリックします。

ブロック表示名、DBを設定し、「次へ」ボタンをクリックします。

レコードアイテムブロックで使用するフィールドを設定します。

「+」ボタンをクリック、追加するフィールドを選択することで、レコードアイテム上に使用するフィールドを設定できます。

「反映」ボタンをクリックします。

リストパーツの「会場」にリンクが追加されます。

2.保存

プレビューで画面を確認し、保存します。

保存後、レコードリストブロックを配置しているページのURLへアクセスし、リンク先からページや配置したブロックが表示されるかご確認ください。

 

スタイル

ビジュアル設定での「スタイル」ではCSSを触ることなくブロックの見た目を変更できます。

シンプル

少ないスタイルの指定で全体の統一感を設定します。

項目名 説明
リストヘッダ レコードリストのヘッダ部分のデザインを編集できます
リストアイテム

リストパーツ内のリンク設定のリンク色を編集できます

アクティブページ レコードリストのページナビゲーション部分のデザインを編集できます

JS

設定したJavaScriptはレコードリストブロックのJavaScriptに適用されます。

設定したJavaScriptは「共通ソースCSS/JavaScript」「ページのCSS/JavaScript」より後に読み込まれます。

詳細はこちらをご確認ください。

リスト設定

レコードのフィルタ表示やレコードの表示件数の初期件数の指定などを設定することができます。
詳しくはリスト設定をご参照ください。