top of page
  • 執筆者の写真秋子

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」を呼び出して完了です。




ノーコード開発ならシースリーレーヴへお任せください!


シースリーレーヴでは「地球上で最も顧客の成功を実現する企業」をモットーに開発だけでなく、企画からデザイン・開発、リリース後のマーケティングやサポートまでWebサービスやアプリの受託開発に関する相談、開発を承っております。


お客様は、リリースが終わりではなく、そこからがスタート!

サービスを通して、お客様、そしてユーザーが本当に成し遂げたい事を実現するお手伝いをさせて頂きます。

弊社はノーコード開発・システム開発もできる弊社だからこその技術で、圧倒的な短納期・低価格ながら高パフォーマンスなサービスを実現いたします。


どんなお悩みでもまずはぜひ一度ご連絡ください。解決の糸口を必ず見つけ出します!

実際に開発してみたいけれど、予算は?こんなサービスを作りたいけどノーコードでできるのか?最短でどれくらい?どんな小さなことでも、ぜひお気軽にご相談下さい。

技術スタッフがご相談させて頂きます!

ノーコード開発に関するお問い合わせはこちら

ノーコード開発に関するお役立ち資料も無料でダウンロードできますのでぜひご参照ください。

ノーコードに関する資料のダウンロードはこちら


最後まで読んでいただき、ありがとうございました!

Kommentare


資料ダウンロード.jpg

ノーコードに関するお役立ち資料をご用意しました。

ぜひご活用ください。

☑︎ノーコード開発ツールアプリケーション開発事例集

☑︎新規事業に最適な開発系ノーコードツール紹介

☑︎ローコード/ノーコード開発のセキュリティ対策

☑︎誰でもわかる!ノーコードとローコード

開発実績バナーFIX.jpg
最新記事
ノーコード開発お問い合わせバナー

ノーコードに関するお問い合わせや、ご相談などお気軽にどうぞ!

カテゴリー
bottom of page