Forum Academy Marketplace Showcase Pricing Features

RepeatingGroup のレコードを別のページの RepeatingGroup に渡すには

あるページの RepeatingGroup に表示しているレコードの内容を、別のページの RepeatingGroup にそのままの状態(検索結果やソート順を維持して)で表示したい。


概要

商品のデータベースを作り、一覧表のページで検索やソートを行う。詳細ページに移行した際は、一覧表のページの検索結果やソート順を維持したまま、各商品の詳細情報を閲覧したい。


データ構成例

Type name:
product

Fields for type product:
name(text)
overview(text)
price(number)
note(text)


ページ構成例

list-page(RepeatingGroup で一覧表を表示)
detail-page(RepeatingGroup を Rows 1、Columns 1 にして詳細を表示)

各ページの Type of content は product を設定。
それぞれのページのヘッダーには、detail または list へ移行するボタンを配置する。


現状

RepeatingGroup の行をクリックして、そのレコードだけを表示することはできた。
例えば、Data to send で Current cell’s product を指定し、移行先のページの RepeatingGroup の Data source で Get path from page URL:converted to List を指定または、一覧から詳細への移行ボタンの Data to send で RepeatingGroup product’s List of product:first item などと指定し、移行先のページの RepeatingGroup の Data source で Get path from page URL:converted to List を指定するなど。

一つのレコードを渡すことはできたが、RepeatingGroup に表示している複数のレコードの内容を、別のページの RepeatingGroup にそのままの状態(検索結果やソート順を維持して)で渡すにはどのようにしたらよいだろうか。ヒントをいただければ幸いです。

@yasu さん、ようこそ。
そのRepeating Groupを「Reusable elementにコンバートして、それぞれのページで再利用する」ってのがあります。簡単なダミーレコードを作って、それをReusable elementにコンバートして実験してみてください。Groupもコンバートできます。

rio さん、ありがとうございます!
いろいろ試してみます。
取り急ぎ御礼まで。

結果報告です。
RepeatingGroup を Reusable elements にして試しました。

まず、各ページでの SearchBox 検索は、Reusable elements のカスタムイベントを Trigger して、Reusable elements 内の RepeatingGroup を検索することで何とかなりそうです。

list ページと card ページのレイアウトの切り替えは、Reusable elements 内の RepeatingGroup を list 用(複数行の一覧表)と card 用(Rows 1、Columns 1 の詳細表示)の2つを用意して、 conditional でページ名をもとに visible にする感じで何とかなりそうです。

ただ、list ページの SearchBox を使った検索結果を card ページでそのまま表示する方法が思いつきません。list で RepeatingGroup を検索した後、card ページに切り替えても同じレコードの構成(検索結果やソート状態)にしたいのですが、何かよい方法はないでしょうか?
結局、card に切り替えたときに、list と同じ検索やソートを実行しなければならないでしょうか?

別ページでデータの引き渡しをするにはGet path from page URLを使いますが、そのキーをRGに検索やソートで利用できていますか?RGのData sourceやfilter条件のスクリーンショットを見せてもらえますか?

あと今さらですが、listとcardは別ページでないといけない理由があるのでしょうか?というのも、実行結果をページ間で引き継ぐ手段は限られているからです。もしlistとcardを一つのページであれば、custom stateを使って容易に、現在の状態を保持したままviewの制御ができます。

rio さん、ありがとうございます。
的確なリプライに感謝します。

RG に検索やソートで渡しているデータは不十分な状態です。これは私の知識不足のためです。

今は、Data to send で検索結果の1レコードだけを渡して、そのデータを RG に表示できることを確認しています。RG の Data source や filter 条件の設定までは実現できていません。

list から card に切り替えるボタンの Workflow は以下のとおりです。

Go to page card
Distination: card
Data to send: Serach for product:first item
Serach for products
Type: product
name contains SearchBox 検索’s value’s name

card 用の RepeatingGroup は以下のとおりです。

Type of content:product
Data source:Get path from page URL:converted to list
Type:Path
Type:product

本当は検索結果の複数のレコードの情報を渡したいのですが、上記の処理で、検索結果の1レコードだけを渡せることを確認しています。

list と card を別ページに分ける理由は、ページ毎にデータの見せ方が違うためです。各ページ毎にデザインが異なるため、ページ毎に分離して作り込みたいと思ったからです。異なる用途のレイアウトを一つのページに重ねて(条件分け)作るのではなく、デザインや用途毎にページを分離し、データベースの内容は共有したいと考えました。

しかしながら、ページ間のデータ受け渡しが非効率なら、ご指摘のとおり list と card を一つのページで作ることも試してみます。いといろ勉強しながらやってみます。貴重なアドバイスをありがとうございます。

1 Like

@yasu さんのケースのようにlistからcardを呼び出すような場合、ページに分けてしまうと、そのページを行き来する度にページをリロードするためUXが落ちますね。その点、SPAにしてしまうと最初だけローディングに時間かかるのですが、その後はサクサク動いてくれます。通常のウェブサイトはページを細かく分けて作りますが、ウェブアプリの場合はネイティブアプリと同じようにSPAで運用した方が、データの受け渡し含めて都合がいいことが多いと、個人的には思ってます。

1 Like

@rio さん、ありがとうございます。
大変勉強になりました。そうですね。UX を優先しないと。
あと少し実験してから、SPA を基本として作り直してみます。

ありがとうございます!