カード ギャラリーは、テーブルやビューのデータをカードに表示するデータ コントロールです。 Power Pages サイトでカード ギャラリーを追加、スタイル設定、構成する方法を、デザイン スタジオまたは Liquid Code を使用できます。
カード ギャラリーを追加
デザイン スタジオでカード ギャラリーを追加するには:
デザイン スタジオを開き、サイトのコンテンツやコンポーネントを編集します。
ヒント
コードを使用してカード ギャラリーを追加することもできます。
Pages のワークスペースに移動します。
編集するページを選択します。
カード ギャラリーを追加したいセクションを選択します。
編集可能なキャンバス エリアにカーソルを合わせ、コンポーネント パネルから カード ギャラリー アイコンを選択します。
レイアウトを選択する
カード ギャラリー デザイン ボタンを選択して、使用可能な 4 つのレイアウトのいずれかを選択します。
既存のカード ギャラリーが利用可能な場合は、そこから選択することもできます。
カード ギャラリーのデータ ソースを設定する
カード ギャラリーのデータ ソースを構成する方法:
カード ギャラリー デザイン ボタンを選択し、データを選択します。
データ ソース ルックアップ フィールドから既存のテーブルを選択します。
ビュー ドロップダウンから対応するビューを選択します。
各カード ギャラリー要素 (画像、タイトル、説明、ボタン、テキスト ハイパーリンク) について、データの選択 オプションを選択して、ビュー列にバインドします。
注意
Button 要素と hyperlink 要素については、name と url の 2 つの設定を構成する必要があります。 両方の構成をビュー列にバインドする必要があります。
含めない要素の横にあるトグルスイッチを無効にします。
トグル スイッチの左側にあるアイコンを選択し、要素を目的の位置にドラッグすることで、各要素の位置を並べ替えることができます。
サポートされている列の種類
各要素は、特定のデータ型をサポートします。
サポートされている列の種類
各要素は、特定のデータ型をサポートします。
| Element | データ型 |
|---|---|
| 肩書き | テキスト (1 行テキスト) 電話番号 整数 10 進法 検索 日付のみ 日時 |
| プロパティ | リッチ テキスト テキスト エリア (複数行のテキスト) 電話番号 整数 10 進法 日付のみ 日時 |
| Image | ファイル - 画像 |
| Button | ボタンのラベル:
ボタン URL:
|
| テキストのハイパーリンク | テキスト ハイパーリンク ラベル:
テキスト ハイパーリンク URL:
|
| カスタム テキスト | テキスト (1 行テキスト) |
カード ギャラリーのスタイルと構成
ギャラリー、カード、要素レベルでスタイル プロパティを構成することで、カード ギャラリーをスタイルできます。
検索フィルター処理
検索を有効にする トグルをオン/オフにして、検索フィルター処理を追加または削除します。
カード ギャラリーのプレビュー
カード ギャラリーを構成すると、キャンバスでサンプル データを含むプレビューを確認できます。
注意
サイト訪問者がカード ギャラリーを閲覧し操作できるようにするには、テーブルの権限を設定する必要があります。
コードを使用してカード ギャラリーを追加する
Liquid を使用してカード ギャラリーを編集することもできます。
新しいカード ギャラリーを追加する
データ バインドやデータ構成なしで新しいカード ギャラリーを追加するには、次の Liquid タグを使用します。
{% codecomponent name:Pages.CardGallery %}
既存のカード ギャラリーを追加する
既存のカード ギャラリーを追加するには、Liquid タグを使用して {your card gallery id} を既存のカード ギャラリーの ID に置き換えます。
{% codecomponent name:Pages.CardGallery id: '{your card gallery id}' %}