NoCodeWalkerというオンラインサロンに所属していますよしおと申します。
サロン内で質問があり、日本語Web上に無さそうなbubble.ioの情報発信を目的としてつらつらを記しております。
今回は、「ページ遷移の際に前のページのデータを遷移後のページに渡す方法を書いていきます。
bubble内では’set state'といいますが要は「変数」で
'set state'はページ遷移すると基本消えます。
今回はクイズのアプリを作る際に、問題回答をすると別ページに遷移し
解説をしたいが問題番号が続いていかないといったお悩みに解答したので
その方法を共有します。
解説
問題出題ページの解答ボタンをクリックすると解説ページに遷移
（問題出題ページをindex,問題解説ページをanswer_pageとしています）
↓
- 解説ページ「第ｎ問」の問題番号を出題ページの「第ｎ問」と同じ番号で表示させる
- 解説ページの「次の問題へ」ボタンをクリックすると問題ページへ遷移し問題番号が増える(１→２など）
についての解説
解説ページ「第ｎ問」の問題番号を
出題ページの「第ｎ問」と同じ番号で表示させる
問題出題ページの「第ｎ問」のTextの設定を下のように設定します。
ポイントは、「第ｎ問」の番号をCustom statesで設定することです。
ここでは、「quiz number」として設定してあげています。
次に解答ボタンをクリックた際の処理を設定します。
Workflowのタブに移動して
Go to page answer_pageのstepを設定してあげるとともに
Send more paramaetersのチェックボックスにチェックを入れます。
チェックを入れると、Keyとvalueをいれるinput boxが表示されるので
ここではkeyを「no」、valueを「Text A's quiz number」とします。
処理をまとめると、「解答ボタン」をクリックすると「解答ページ」に遷移し、
遷移先の解答ページに「Text A」の中の「quiz number」を、
「no」という「Key」にして送ってあげています。
次に、遷移した先のページに送ったデータを表示してあげます
answer_page(問題解説ページ）のDesignページの設定は下記のようにします。
（ほとんどindexと同じです/Setしたstate名は意図的に変えてるわけではないです。。。）
重要なのはWorflowのほうです。
処理としては、このページが表示された際に
「Text A」の「QuizNumber」というStateに、前のページから送られた
「no」という「Key」の中の数字を入れてあげます。
これで問題ページの「第ｎ問」の数字が解答ページの「第ｎ問の解説」に反映されます。
長くなりそうなので続きはこちら
https://qiita.com/yoshio_y/private/34eed184e5211edcb564