WixCodeの使い方(その5:インデックスページの作成)

WixCodeの使い方(その5:インデックスページの作成)

Posted at November 30,2017 12:03 AM
Tag:[Wix]

「WixCodeの使い方(その4:ダイナミックページの作成)」でダイナミックページを作成する手順を説明しました。

ですが、ダイナミックページを作成しただけではブログのページからリンクされていません。

本エントリーではインデックスページを作成し、ダイナミックページへのリンクを設定する手順を説明します。

1.インデックスページの作成

画面上の「ページ:ブログ」をクリック。

ページ:ブログ

ダイアログが表示されるので「新しいページ」をクリック。

新しいページ

「ページ」をクリック。

ページ

ページタイトル編集に切り替わるので、ここでは「商品一覧」と入力して「完了」をクリック。

ページタイトル編集

この段階でページに「商品一覧」というリンクが自動的に表示されます。

商品一覧

2.ページタイトルの配置

インデックスページにタイトル部分を配置します。「追加」→「テキスト」→「ページタイトル」を選択してページ上にドラッグ。

ページタイトル

編集して「商品一覧」と入力します。

商品一覧

2.商品一覧の配置

次にダイナミックページの一覧になるテーブルを配置します。

「追加」→「ユーザー入力」をクリックして、下の方にある任意のテーブルをページにドラッグします。

ユーザー入力

このような感じで配置します。

配置

関連付けるためのデータセットをページに追加します。「追加」→「Database」→「データセット」をクリック。

データセット

これでデータセットがページに追加されました。

データセットがページに追加

データセットの「Manage Dataset」をクリック。

Manage Dataset

データセット設定ダイアログが開きます。

データセット設定ダイアログ

「コレクションを接続」のプルダウンから「Products」を選択。

コレクションを接続

「Dataset name」に「Products dataset」が設定されたことを確認してダイアログを閉じます。

Dataset name

データセットアイコンの名称が「Products dataset」になりました。

Products dataset

テーブルをクリックして、右上のデータベースアイコンをクリック。

テーブル

「Connect Table」ダイアログが開きます。

「Connect Table」ダイアログ

「Connect a dataset」のプルダウンから「Products dataset」を選択。

Test dataset

選択すると、その下に「Connection Options」の項目が表示されます。

「Connection Options」の項目

ダイナミックページへのリンクを設定します。「Product Name(Text)」の右側にあるリンクアイコンをクリック。

リンクアイコン

その下の「Product Name column links to」のプルダウンをクリックして、「Dynamic pages」→「Products(Product Name)」を選択。

Product Name column links to

このような設定になります。ダイアログはこのまま閉じます。

ダイアログ

テーブルの表示がProductsデータベースの内容になりました。

テーブル

3.テーブルの管理

テーブルヘッダに表示するテキストや順番の入れ替え、項目を減らしたい場合は、「テーブルを管理」をクリック。ここではヘッダの名称を変更してみます。

テーブル

「テーブルを管理」ダイアログが開きます。

テーブルを管理

項目の右側にある「...」をクリック。

項目の右側にある「...」

「ラベルを編集」をクリック。

ラベルを編集

「商品名」に変更して「Done」をクリック。

「商品名」に変更

他の項目も同様に変更します。

他の項目も同様に変更

これでテーブルのヘッダ表示が変わりました。

テーブル

2.インデックスページのプレビューと公開

設定が完了したら、右上の「プレビュー」をクリック。

プレビュー

インデックスページのプレビューが行なえます。テーブルにデータベースの内容が表示されました。

インデックスページのプレビュー

商品名のタイトルがリンクになっていることを確認します。クリックすればダイナミックページにジャンプします(商品一覧ページに戻るには上部リストの「商品一覧」をクリック)。

タイトルリンク

「エディタに戻る」をクリックすれば、インデックスページの編集画面に戻ります。

エディタに戻る

右上の「公開」をクリック。

公開

これでインデックスページが公開されました。「おめでとうございます!」というダイアログが表示されまるので、そのまま閉じます。

おめでとうございます!

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)