[bubble] Option Setsを使って選択肢のリストを管理する

森亮介

2021.10.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

アプリを作成していると、選択肢のリストを表示してユーザーに選択させて登録する　といったケースが出てくることもあります。

例えば、曜日・年月日・言語　などが考えられます。

Bubbleでも静的なリストを設定し、プラグラミングでいう変数のように使用できます。これがOption Setsという機能です。

やってみる

Profile編集のページで使用言語とタイムゾーンなどを設定できるフォームをユースケースとして使ってみます。

イメージ:

上記ではテキストで固定していますが、言語をOption Setsに置き換えていきます。

アプリの管理画面のDataメニューに設定できる画面があります。

New option set の欄に独自の名前を入力して作成できます。

注意点なのですが、カスタムデータ型と同じ名前を使っている場合、予期しない動作が発生する可能性があるとのことです。例えば、一方に残されたメモがもう片方にも表示されたりとか。

オプションを作成後、属性を追加できるようになります。

Typeのカスタムフィールドのようなもので、属性名とタイプを設定できます。

ここで追加した属性に対してアプリからアクセスすることが可能になります。

デフォルトでは Display属性が存在していて、オプションの名前をドロップダウンリストに表示させる場合などに使えます。

今回は使用言語を選択できるドロップダウンリストを想定し、languageListsというOption Setsを作成し、 indexという属性をnumber型で作成します。

属性追加後、New optionの箇所からオプションの名前を入力して追加できます。

追加したオプションの一覧が表示されるようになりますが、modify attributesをクリックすると、追加した別属性も設定できるようになります。

indexという属性を追加したので、数字を追加で入力していきます。

Option Setsは、ドロップダウンリストやRepeating groupなどのカスタムタイプが使用できる箇所であればどこでも使用できます。

ドロップダウンのエレメントを配置した後、Choices style　を　Dyanmic choices にします。

Type of choicesで、作成したOption Setsを選べるようになっているはずなので、対応するものを選択します。

Choices sourceでは表示させるオプションの条件を設定できます。今回はAll languageListを選択します。オプションにセットしたものが全て表示されます。

Opstion captionは、Current optionを選択し、Display属性を表示させるようにします。

Previewで確認してみると、上記画像のように設定したリストが表示さrます。

ラジオボタンでも同じ設定で表示させることができました。

Userタイプやカスタムタイプに保存した値をドロップダウンリストのデフォルト表示にしたい場合、設定を少し変更しないと意図通りに動きませんでした。

上記画像は、UserタイプのLangというフィールドに、ドロップボックスで選択したDisplay属性の値を保存した時の状態です（Langの型はText）

Type of choices
- Text (フィールドの型と同じに)
Choices source
- All <<option sets名>>'s Display
  - 今回の例だと、All languageList's Display
Opstion caption
- Current option
Default value
- Current User's<<カスタムフィールド名>>
  - 今回の例だと、Current User's Lang

このようにテキストタイプを使用することでDataに保存した値をデフォルトに設定できました

Option Setsを使ってアプリでアクセスする静的なリストを作成してみました。

カスタムタイプでも同じようなことはできますが、データベースにアクセスしないので読み取りは高速、新しいオプションの追加や変更などの拡張が容易、検索も簡単　といった特徴があります。

ただし、カスタムタイプとは違ってプライバシー設定(今後の記事で検証します)ができないので、機密情報を扱う場合などは向いていません。

ケースにより使い分けることが必要ですね。