bubbleでインプットフォームの入力値をリアルタイムで重複チェックする方法

Bubbleでサインアップ時にニックネームの重複チェックをリアルタイムで行うには、いくつかの方法があります。プラグインを使う方法もありますが、Bubbleの標準機能でも十分に実現可能です。

以下は、リアルタイムでニックネームの重複をチェックし、ユーザーに再入力を促す方法です。

データベースのプライバシー設定で、対応する項目にチェックをいれてFind this in searchesにもチェックが入っていないといけません。

手順

1. ニックネーム入力フィールドの設定
2. 条件付き表示の設定
3. カスタムステートの設定
4. ワークフローの設定

1. ニックネーム入力フィールドの設定

まず、サインアップフォームにニックネーム入力フィールドを追加します。

1. インプットフィールドの追加:
   • フォームにインプットフィールドを追加し、Nicknameとして設定します。
   • インプットフィールドのIDを設定（例：nicknameInput）。

2. 条件付き表示の設定

次に、ニックネームがすでに存在する場合に警告メッセージを表示するための条件付き表示を設定します。

1. テキストエレメントの追加:
   • テキストエレメントを追加し、This nickname is already taken. Please choose another one.などのメッセージを設定します。
   • このテキストエレメントを非表示に設定します。
2. 条件付き表示の設定:
   • テキストエレメントの「Conditional」タブを開き、以下の条件を追加します：rustコードをコピーするDo a search for Users:count > 0 (where Users' nickname = nicknameInput's value)
   • 条件が満たされたときに表示されるように設定します。

3. カスタムステートの設定

ニックネームの重複をチェックするためのカスタムステートを設定します。

1. ページまたはグループにカスタムステートを追加:
   • ページまたは適切なグループにカスタムステートを追加し、nicknameExistsという名前でBoolean型に設定します。

4. ワークフローの設定

ニックネーム入力フィールドが変更されたときに、重複チェックを行い、カスタムステートを更新します。

1. イベントの設定:
   • Input nicknameInput's value is changedイベントを作成します。
2. アクションの追加:
   • 以下のアクションを追加します：
     1. Set State:
        • Element: ページまたはグループ
        • Custom state: nicknameExists
        • Value: Do a search for Users:count > 0 (where Users' nickname = Input nicknameInput's value)

まとめ

1. ニックネーム入力フィールドの追加
2. 条件付き表示の設定
3. カスタムステートの設定
4. ワークフローの設定

これにより、ニックネームの重複をリアルタイムでチェックし、ユーザーに再入力を促すことができます。