CMSなどのデータを紐づける動的リスト

動的リストとは、CMSダッシュボードで管理するCMSデータや、API連携やRSS連携で取得した外部サービス上のデータを紐付け、自由にデザインできるリストのことです。

データは絞り込んだり、自由にデザインできます。

動的リストは、プリセットされたCMSリストなど配置しするか、手動で作成したリストにデータを紐付けて作成できます。

エディター左側の追加パネル内CMS、API、RSSタブにそれぞれのデータが紐づいたリストがあります。これらリストはドラッグ＆ドロップまたはクリックでスクリーン上に配置できます。

※事前に連携や追加が必要です

手動で作成したリストには「データを紐付け」からデータが選択できます。

一度配置したリストは、画面左のレイヤーパネルから参照するデータが変更できます。

CMSモデルまたはコレクション、API、RSSデータへ切り替えられます。

※データを変更してもデザインに影響はありません。ただし、変更前後のプロパティ構造が異なる場合は、プロパティを紐付けしなおす必要があります

リスト上に表示させるアイテムの最大数が指定できます。レイヤーパネルの「表示数」で数値を指定します。

リスト内のアイテムが０件の場合に表示するデザインの調整ができます。

「０件の表示」を有効にして、表示プレビューで確認しながらデザインしましょう。

CMSリストでは、表示する項目数に上限を設けることができます。表示項目数の上限を超える項目がある場合、リストの下に「もっと見るボタン」が表示されます。このボタンを押すと、指定された件数分の項目を追加で読み込んで表示します。

表示数は50件まで設定できます。それ以上アイテムがある場合は「もっと見るボタン」をクリックして読み込めます。また、読み込むアイテムがない場合には、ライブプレビューと公開サイトでボタンは表示されません。

※CMSコレクション、APIリスト、RSSリストには「もっと見るボタン」を設定できません。

ボタンのスタイルはエディタ上の表示プレビューで確認・調整できます。

フィルターを使うと、リストに表示させるアイテムを絞り込むことができます。フィルターでは、CMSの参照モデルとそのアイテムが指定できます。

※フィルターは、CMSモデルにのみ設定できる項目です

フィルターでは、参照モデル以外に「検索ワード」が選択できます。これは、CMSアイテムを検索する際に使用します。詳しくは、検索ページ｜STUDIO U をご覧ください。

ページ毎に表示させるアイテムが動的に切り替わるダイナミックフィルター(Dynamic) が設定できます。

※ダイナミックフィルターは、CMSモデルにのみ設定できる項目です

関連記事

カテゴリー（参照アイテム）別記事一覧ページを作成する | STUDIO U

リスト内のテキストや画像ボックスなどにプロパティを紐付け、データを表示することができます。

プロパティはレイヤーパネルとボックス設定パネルの２ヶ所から紐付け可能です。紐付け方法はそれぞれの記事でご確認ください。

なお、テキストプロパティにはフィルタの設定が可能です。日付のフォーマットを変えたり、表示文字数を指定できます。詳しくは、プロパティの文字列フィルタ l STUDIO U をご覧ください。

動的リスト内の各要素のスタイル変更ができます。スタイルは、リスト内アイテムで共通となります。ですが、条件付きスタイルなどを活用すると、特定の条件でスタイルを個別に変更できます。

条件付きスタイルの「最初のアイテム」では、リストの先頭のアイテムだけスタイルを変更できます。ブール値プロパティ（表示条件、条件付きスタイル）を活用すると、「条件に応じ、特定アイテムの要素のみ表示・非表示、またはスタイルを変化させる」ことができます。

詳しくは、それぞれの記事をご覧ください。

※APIリストには最初のアイテム機能のみ使用できます。

ブログ 記事 一覧 API RSS