More than 3 years have passed since last update.

bubbleのページ間で値をキャッチボールする方法

Last updated at 2021-02-03Posted at 2021-01-24

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」の中の数字を入れてあげます。

これで問題ページの「第ｎ問」の数字が解答ページの「第ｎ問の解説」に反映されます。