CMS:ベージ要素をコレクションコンテンツに接続する方法について

読了時間:4分
コンテンツの接続とは、ページ要素をコレクションに接続するプロセスです。 それによって以下の操作ができます:
  • コレクションのコンテンツをサイトページに表示する
  • ユーザー入力をキャプチャしてコレクションに保存する
要素をコレクション内のコンテンツに接続するには、まずデータセットをページに追加し、それをコレクションに接続します。 これで、ページ要素でそのコレクションを使用できます。

データセットは以下の項目を制御します:
注意
データセットはエディタでは要素として表示されますが、公開したサイトでは表示されません。 データセットは、ページのどこにでも配置できます。
データセットはページ上の要素とコレクション間のブリッジまたはコネクターと考えることができます。 最初にデータセットをコレクションに接続し、次に要素をデータセットに接続します。 これで、以下の図のように要素がコレクションに接続されます。
同じデータセットに接続されたページ上のすべての要素は、データセットの定義に従って、コレクションのコンテンツを処理します。 また、データセットは、コレクション内のどのアイテムが現在フォーカスされているかを追跡します。 これによって、コレクションのコンテンツの表示方法とユーザー入力をキャプチャする方法が変わってきます。 これが機能する仕組みをいくつかの例で見てみましょう。

コンテンツを表示する

レストランのサイトがあって、訪問者がメニューオプション全体をスクロールできるようにしたいとします。 以下のように、メニュー内のすべてのアイテムおよび表示したい各アイテムに対するコレクションを用意します。
  • 料理の名前
  • 給仕するタイミング
  • その料理は前菜、メインデュッシュ、またはデザートか
  • 料理に関するアレルギー情報
  • 料理の写真
ページは以上のアイテムをそれぞれを表示するように設計できますが、最初に次の準備が必要です:
  • コレクション内のさまざまなアイテムを表示するため、ページ上の要素を接続する。
  • 訪問者が料理全体をスクロールできるボタンをページに追加する。
  • 同期して変化するように要素を設定する。 言い換えれば、1 つの要素にコレクション内の特定アイテムの情報が表示される場合、すべての要素に、同じアイテムの対応する情報が表示されなければなりません。
コレクション内のさまざまなアイテムを表示するため、ページ上の要素を接続する
要素を設定するには、それらの要素をページに追加し、「データに接続する 」アイコン で、それらをすべて同じデータセットに接続します。 また、コレクションのどのフィールドを表示するかを定義します。
訪問者が料理全体をスクロールできるボタンをページに追加する
訪問者がデータセットで前や次のアイテムに移動できるボタンをページに追加します。 これらのボタンは要素と同じデータセットに接続します。

同期して変化するように要素を設定する
訪問者がページで「前へ」または「次へ」ボタンをクリックすると、すべての要素でコレクション内の同じアイテムのコンテンツが表示されます。 このように動作するのは、同じデータセットに接続されているすべての要素が連動するように、現在フォーカスしているアイテムをデータセットが追跡しているためです。 要素の 1 つでフォーカスしている現在のアイテムが変更されると、そのデータセットに接続されているすべての要素でも変更されます。

コンテンツをキャプチャする

訪問者が無料ディナーに新規登録できるレストランのフォームを作成したいとします。 ユーザー入力要素で、訪問者から必要な情報を収集するフォームを設定します。

また、「データに接続する」アイコンで、各要素を同じデータセットに接続します。 また、訪問者が各入力要素で入力するデータの保存に、コレクション内のどのフィールドを使用するかを定義します。
ヒント:
ユーザーがコレクションに書き込めるように、コレクションとデータセットのアクセス権限を必ず設定してください。
また、送信ボタンも作成してください。 訪問者はフォームに記入してから、このボタンをクリックし、情報をユーザーのコレクションに送信します。

このボタンはユーザー入力要素の場合と同じデータセットに接続してください。 訪問者が「送信」ボタンをクリックすると、各ユーザー入力要素で入力されたすべての情報でコレクションに新しいアイテムが作成されます。

このように新しいアイテムが作成されるのは、データセットがコレクション内で現在のアイテムを追跡しているからです。 このとき、データセットはコレクション内の新しい空のアイテムを参照しています。 すべての要素は同じデータセットに接続されるため、すべて同じアイテムに保存されます。

動的ページのデータセットについて

動的ページを作成すると、動的ページのデータセットがページに自動的に追加されます。 標準データセットと同様に動的ページのデータセットで、ページの要素をコレクションに接続できます。 ただし、動的ページのデータセットはいくつかの点で標準データセットと異なります。

動的ページに表示されるコンテンツは、その URL で制御されます。 そのため、標準データセットとは異なり、動的ページのデータセットでは、データセットが接続されているコレクションを変更できません。

ページに表示されるコンテンツは URL によって制御されるため、URL は、コレクションのコンテンツに対するフィルターの役割も果たします。 ここでも、コンテンツのフィルタリングは、ページ設定で URL の定義を変更して変更します。 ただし、動的ページのデータセットの設定で、さらにフィルターを追加してページのコンテンツを並べ替えることもできます。

また、動的ページのデータセットはページから削除できません。 データセットを削除するには、動的ページを標準ページに変換する必要があります。

お役に立ちましたか?

|