秋子

2022年8月24日読了時間: 5分

Bubble plugin Editorの Event trigger workflowとElement actions - triggered in workflowsについて

更新日：2023年12月8日

pluginを作成していると、plugin内からワークフローに処理を戻したり、逆にワークフローからpluginを実行したくなる場面があります。

「Events(Event trigger workflow)」「Element actions - triggered in workflows」plugin」を使うとワークフローとpluginを行き来することができます。

今回は「Events(Event trigger workflow)」「Element actions - triggered in workflows」について簡単に纏めてみたいと思います。

bubble Editorとplugin Editor

App画面とplugin画面を行き来しますので、それぞれ次のように呼称することを確認します。

bubble Editor

Appを作成する際に使っている通常のAppエディタです。

plugin Editor

pluginを作成する際に使うエディタです。

Events (Event trigger workflow)

プラグイン内のクリックイベント等をきっかけにして、pluginからワークフローに処理を移すことができます。ユーザーが後続のアクションを設定することができます。

ここでは例としてpluginが取得したエラーをワークフローに返し、ログとして保存する流れをみていきたいと思います。

plugin(エラー取得)→ワークフロー(エラー取得)→ワークフロー(ログとして保存)

*この例はより具体的には、クレジットカードの登録処理について作成したものです。pluginで用意したフォームからクレジットカード決済代行サービスに入力情報を渡し、カードが不正である場合にはエラーを受け取ってログを保存するというものです。今回は「Event trigger workflow」を説明するために、エラーを受け取ってログを保存するところだけを切り出しています。

plugin Editor

stateの定義

まずはplugin Editorでstateを定義します。ここで設定した値は後でbubble Editor内で使用できます。

stateの名前、キャプションを入力します。今回はログを書き出したいのでloggingとしました。

plugin Editor

Event(Event trigger workflow)を定義

ここで設定したイベントは後で「bubble Editor」→「ワークフロー」→「click here to add event」で配置することができます。名前は「push_log」としました。

plugin Editor

実行処理を書く

Function initialize()で次のように書きます。

この例では、state「logging」にエラーメッセージを代入します。その後Event(Event trigger workflow)で設定した「push_log」をinstance.triggerEventで実行します。これによってbubbleエディタのワークフロー内でイベント「push_log」が発火します。


 //ロギング
 instance.publishState("logging", r.error);
 //ワークフローに戻す
 instance.triggerEvent("push_log",function(err){
 });

Bubble Editor

Bubble Editorに戻ってワークフローを設定する

それではBubble Editor に戻ってワークフローを設定していきます。

「click here to add an event」をクリックし「Elements」を選択すると、先ほど定義した「push_log」というイベントが選択できるようになりました。

「push log」イベントの中にアクションを設定していきます。

ログをDBに保存していきたいので、「Data」→「create a new thing」を選択

し指定のテーブルにログを追加していきます。

下図で「's logging」というstateが設定されています。ここにplugin Editorで代入したエラーの値が入っています。

Bubble Editor

実行結果

Element actions - triggered in workflows

Events (Event trigger workflow)ではpluginからbubble Editorのワークフローを呼び出しました。今度は逆にワークフローからpluginを呼び出したいと思います。

例としてワークフローからpluginを呼び出してアラートを表示するという簡単な例を見ていきたいと思います。

ワークフロー(アラートメッセージ設定)→plugin(アラート表示)

plugin Editor

Element actions - triggered in workflowsを定義

plugin EditorでElement actionsを設定します。ここでは「alert action」としました。

入力フィールドが追加できるようになりました。フィールド名を入力して「create new field」をクリックします。

今回はアラートに表示するメッセージをワークフローで設定できるようにするため、フィールド名を「message」としました。短いテキスト文章ですのでEditorは「Static text」とします。

plugin Editor

実行処理を書く

plugin Editorのページ下部にエディタfunction「alert_action」が現れます。

引数「properties」には上で設定したフィールド「message」が入っています。

 alert(properties.message);

Bubble Editor

Bubbleエディタに戻ってワークフローを設定する

「Designタブ」で画面にエレメントと適当なボタンを配置しワークフローでアクションを設定していきます。今回は「アラートを表示する」というボタンを配置しました。「click here to add an action」」をクリックして「Element Actions」を選択すると「alert action a sample」が表示されています。

「alert action」は上で定義した「Element actions - triggered in workflows」です。

「alert action」のプロパティには上で定義したフィールド「message」が表示されます。

適当な値を入力して実行していきます。

Bubble Editor

実行結果

画面に配置したボタンをクリックするとアラートが表示します。

事例

Element actions - triggered in workflowsに関する事例です。

クレジットカードの登録処理を例に取り上げたいと思います。

独立してこのフォームを使用することもできますが、ボタンの位置やデザインを変えたい場合は、ボタンを消して、代わりにBubble Editorで配置したボタンをクリックして送信することができます。

実装方法はアラートの例と同じです。

Element actions - triggered in workflowsで「action create token」を設定し、「function action_create_token」に処理を追加します。最後にBubble Editorのワークフローから「action create token」を呼び出して完了です。