4つの使用例で解説！bubbleのCustom stateの使い方
どうも、けいです〜(https://twitter.com/NoCoder_K)
普段はbubbleの特化エンジニアとして受託の開発を100%bubbleだけでやってる少し珍しいエンジニアです。
さて、今回の記事は、bubbleのcustom stateについてです。
custom stateとは
直訳すると「カスタム状態」。はい。意味わかりませんね〜。では公式のリファレスも見てみましょう。
以下、引用
Custom State
Elements can have data attached to them. This is done through Custom States. While this is an advanced feature, it is extremely handy if you need to store some information.
エレメントはそれ自体にデータを持つことができます。それをする方法がCustom States。高度な使い方だけど、データを保存するにはめっちゃ便利だよ〜。だって。
Use cases
Custom States are very useful when you want to store some information on the page, and not store it permanently in the database. Two main cases usually require such functionality:
Store the current view on the page. For instance, your page has two tabs, 'view' and 'edit', and users can switch between both modes. Storing in the page the current mode will be very handy to control which element to show and hide using conditions. When the user refreshes the page, the last mode will be lost.
Store temporary values in workflows. If you need to run some calculations, and want to store some intermediate results, using custom states can be useful to store the result and use it in the following actions.
custom stateはデータベースと違ってずっと情報を保存し続けるものではないよ〜。一時的な”状態”にすぎませんよ〜。ページをリロードしたり、新しくページを表示するとcustom stateは毎回リセットされるから気をつけてね〜だって。2つ例を紹介します。
1. メニュータブの表示切り替え・・・画面上に、EditタブとViewタブがあったとして、タブをクリックした時にそれに対応するグループを表示させますと。
2. ワークフローに一時的にデータを保存・・・何か計算をしたくて、ワークフロー上でまず１回目の計算を実行、それを一時的に保存しておいて、続く計算でその結果を使用する。みたいな時にも有効ですよと。
つまりcustom stateのポイントは上にも述べた通り、データベースに保存するまでもなく、一時的にデータを使用したい時に使うもので、画面内のエレメントの表示切り替えとかに使ったりします。と
ここまで書いてもまだフワッとしてるので、実際の使用例とcustom stateの設定方法を解説していきます。
Custom state使用例1：メニュー
まずエディターで、3つのボタンと1つのrepeating groupを作ってみます。
repeating groupに表示するデータはこんな感じ
で、メニューバーの「新規注文」「処理中」「完了」をクリックして押し分けることで、それぞれの”condition"の商品をrepeating groupに表示させます。
custom stateを用いなくても、show elementとhide elementで複数のrepeating groupを表示仕分ける方法や、あとはacitionで desplay repeating groupを使って表示する方法も可能ですが、今回はcustom stateを用います。その理由もあとで解説します。
ではまずは新規注文のタブから。
workflowタブで、"set state of an element"をactionとして選択してください。
すると、エレメントが選べるようになるので、今回はrepeating groupを選択
そうするとcustom stateのドロップダウンに"create a new custom state"と表示されてるのでクリック
データベースの設計の時のような入力項目が表示されます。
なんでもいいですが、今回は、State nameを"menu_condition"、State typeをtextで選択します。ここの項目は、選択したcustom stateを付与するエレメント(今回はrepeating group)に、どんな型のデータを保存するのかを指定します。この考えはデータベースの項目でもfieldの型として説明していますのでそちらをお読みください。
custom stateも同様にlistを選択することもできます。
今回はこれでOK。
そうすると、今度はValue欄が表示されるので、”新規注文”と入力してください。
これで、repeating groupには”新規注文”という一時的なtext型のデータを保有するエレメントになりました。
同様に、残りの「処理中」「完了」も行っていきます。
二度目以降の設定する場合、Custom stateのDropdownの選択肢に、先ほどの "menu_condition"が増えているのでそれを選択してください。新たに別のcustom stateの変数を用意する必要はありません。
これで3つのワークフローが完成しました。
では、これらの一時的な状態に対して、repeating groupのconditional でrepeating groupの表示切り替えを設定していきます。
デザインタブに戻り、repeating groupのconditionalタブを開き、when this repeating group とすると、1番下に先ほど作成したcustom stateの変数である、menu_conditionが表示されるのでそれを選択
で、そのmenu_condition is 新規注文と設定。
これで、この repeating groupのmenu_conditionが新規注文の時、という条件ができました。つまり、”新規注文”ボタンが押された時、ですね。
次は簡単で、Select a property to change when trueから、data sourceを選択して、下のように設定してください。
これを同様に、残りの「処理中」「完了」も設定します。
複製するときは1から作るのではなく、下の画像の辺りを右クリックしてCopy conditionを押してください。
そして、下の画像あたりを再びクリックして、Paste conditionで複製できます。
しっかり条件と、data sourceの中身の両方を変更してください。
「完了」も同様に。
はい、これで完成。
プレビューをみてみましょう。
こんな感じで、各ボタンを押すとそれに対応する状態の商品が表示されるようになりました。
では、途中で少し触れましたが、この動きをshow elementやhide elementを使わずにcustom stateで実現した理由を解説します。
まずこちらの完成系の画面をみてください。
今、どの状態のデータが表示されているか分かりますか？
分からないですよね。これではUX的によくありません。
そこで、couditionalを用いて、今選択されているタブの色を変えてみましょう。完成系はこんな感じ。
これも先ほどと全く同じで、buttomの"新規注文"のエレメントに対して、Repeating Group product_ordersのmenu_conditionが"新規注文"の時、という条件を追加して、back ground colorをグレーにしました。
これを同様に処理中にも完了にも設定します。右クリックで複製してください。
これ以上は手順は書きませんが、このように、一時的なエレメントの状態によってconditioalで色を変えていくことにも使えます。これは、show elementやdisplay repeating groupのactionでは実現できませんね。
この理由で、メニューなどの切替でGroupやRepeating groupの表示するデータを入れ替える場合にはcustom stateを用いた方が便利です。
後もう一点、次の事例に行く前にポイントになる箇所を紹介します。
今の現状だと、ページを新たにロードした際、repeating groupには何もcustom stateが代入されていませんね。
そういった場合、予期せぬことが起こる可能性があるのでこれを回避します。
page load時にset stateのactionを組むのもいいんですが、workflowも増えますし、別の方法を紹介します。
custom stateを定義したエレメントのプロパティエディタを開いてください。
その右上の[i]マークをクリックすると、このエレメントが持つcustom stateの変数やactionの一覧を確認できます。
注目は上の写真において、赤の四角で囲ったところのDefault valueです。
ここに、”新規注文”と初めから指定しておくと、page load時に毎回デフォルトでcustom stateに状態が保存されます。
ただ、ユーザー情報などによる条件分岐をしてcustom stateを変えたい場合は、page loadをアクションにonly whenでset stateするしかないので注意ください。
あと、ここの値はなぜかdynamicに指定できないのも注意です・・・
これに関しては改善して欲しいですね。
Custom state使用例2：複数のRepeating Groupの切替
2つ目の事例です。これ以降は、実装方法は詳しく解説しないので、こんな時にも使えるのか、という感じで捉えてください。
こちらの動画をご覧ください。
これは、商品一覧を違う形式で表示したい時に使いました。
ブロック型で作ったrepeating group、ブロックと文字が混ざったレイアウトのrepeating group、文字だけのレイアウトのrepeating groupという3つのrepeating groupの表示の切り分けを行っています。
また、それに伴って、右上のアイコンで、今どのレイアウトで表示しているのかを色分けで表しています。
Custom state使用例3：文章の全体を表示
ブログでよく見かけるこんな画面ありますよね。これも再現できます。
もっと読む、を押すと、テキストエレメントのcustom stateのyes/noを切り替えて、yesのときは全文を表示させる条件をテキストエレメントのconditionalに設定します。
ちなみに、通常状態がこちら。truncated to は、指定文字数でスパッと切り落とすもの。
で、custom stateがyesのときはこんな状態。つまりtruncated toがない状態にしています。
Custom state使用例4：カウントを計算する
ボタンを押して押された回数だけカウントを行うこともできます。
custom stateでnumber型のものを0からスタートさせて、クリックごとに+1。データベースでこれをしようとすると、同時に複数人のユーザーが画面を開いて同じデータを共有してたら、自分はクリックしていないのにどんどんカウントが足されてしまう奇妙なことになってしまいますよね。
などなど。
いろいろなところでcustom stateは使えます。
データベースに保存するのではなく、一時的に、目の前で画面を開いているユーザーが見ている時だけ、何かしらのエレメントに状態を与えます。
といったところで今回の解説記事は以上です。
今後も、日本語のリソースがないような初心者が躓きやすい箇所を解説していこうと思いますので、noteのフォローとTwitterのフォローをお願いします。
この記事が気に入ったらサポートをしてみませんか？