ノーコードツールのbubbleで共通ロジックを実現する方法 #nocode

この記事は何か

ノーコードツールのbubbleで開発をしていて、「ロジックを共通化したい」ような気持ちになることがあるのではないでしょうか。
この記事ではロジックを共通化するための手段を１つ紹介できればと思います

今回は求人を作成する場面で考えます。求人を作成しようとしている時下記の要件が考えられます。

これらの要件は「全て入力できているかどうかを判断する」ロジックが共通しています。
素直にbubbleで用件を実現しようとすると下記のような条件式をエラー文言・ボタンにそれぞれ実装しなければなりません。
このような場合に、どうロジック共通化を実現するのかを紹介していきます。

まずはプラグイン「Toolbox」をインストールします。
このプラグインの説明は他のサイトに譲ります。今回はこのプラグインでjavascriptでの処理結果をbubbleのアクションへ渡すために利用しました。

reusable elementで「InputCompleteCheckLogic」という名前でエレメントを作成しました。

エレメントには全てCustom statesを設定することができます。
reusable elementのルートエレメント（言葉が適切か怪しいですが）に設定したCustom statesは、このエレメントを使っている側で参照することができます。

このエレメントを使う時に指定できるプロパティを設定します。
今回は入力項目の数だけプロパティを設定しました。

このエレメントを配置すると、そのページが開かれている時「bubble_fn_{指定した名前}」で関数が呼べるようになります。
この関数を呼ぶとイベントをトリガーし、bubbleで設定したロジックを実行できるようになっています。

今回は入力項目が全て入力されているかどうか、を判断したいので value type を「yes / no」にしました。

このエレメントを配置するとjavascriptのコードを実行でき、返り値をbubbleで扱うことができるようになります。
今回は「入力項目が全て入力されているかどうかの判断結果をJavascripttoBubbleへ渡す」ために利用しました。

JavascripttoBubbleのイベントをトリガーにCustom statesを更新するように設定しました。

作成した共通ロジックを画面の任意の場所に配置します。
あらかじめインプット要素を設定しているので、プロパティにそれぞれの値を与えてあげるようにします。

バリデーションエラーテキスト	掲載ボタン

実際の動作

以上で必要な準備が全て完了しました。

今回はバリデーションエラーテキストと、ボタン側でこの共通ロジックのCustom states を参照するだけで用件を実現できることができるようになりました。

ノーコード開発で何かしらの助けになれば幸いです。