Bubble

Bubbleのリストデータを改行してメール送信で使用する方法

masahide

エストニアにKoronCoron OÜ設立|親子向けノーコード教育事業展開、Webアプリケーション受託、デザイン修正などを展開 朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。

スポンサーリンク

前提条件

前提条件

  • Bubbleに登録している(FreeプランでOK)
  • Bubbleの触り方がわかる
  • ToDoアプリが作成できる

前提条件として、表示用データが必要になります。

今回の場合は、ToDoリストを作成したいので、以下のデータベース設計を参考にしてください。

テストデータとして3つほど追加しておいてください。

ToolBoxプラグインを使用しますが、無料プランの状態で使用できるので、お気軽にお試しください。

  • Data types:Todo
    • Fieldtype1 = date:date
    • Fieldtype2 = title:text

この章で学べること

この章で学べること

  • ToolBoxプラグインの使い方
  • Javascript to Bubbleの設定方法

複数データをメールに落とし込むときに、段落を分けて表示する方法を解説します。

選択したToDoリストをメール送付する際に、1つ目のToDo、2つ目のToDoというように横並びに表示することは簡単ですが、段落を分けるのには少し工夫が必要です。

動画のような構築をゴールとしています。

画面収録 2023-08-06 12.48.24

 

プラグインのインストール

  • Tool boxプラグインをインストール

  • デザインタブからJavascript to Bubbleを選択します。
    • ①bubble_fn_suffix:名前を入力(わかりやすい名前でOK)
    • ②Publish value:チェックをいれる
    • ③Value type:textを選択(戻したい型になります)

UI設定

Reapeting Groupの作成

RepeatingGroupを使って、ToDoデータをすべて表示します。

チェックボックスの追加

RepeatingGroupにチェックボックスを追加します。

CustomStateの作成

ToDoを保存しておくリストをCustomStateに作成します。

  • name : checked_todo
  • type : Todo
  • List型にチェック

動作設定

チェックボックスのWorkFlow作成

WorkFlowのAn element is clickedからCheckboxが変更された際にCustomStateにアイテムを追加&削除の処理を書いていきます。

条件はCustomStateにクリックしたChekBoxがあるときはminus itemにして削除をする

ない時はplus itemにして追加する。

CustomStateにクリックしたTodoが含まれている場合

CustomStateにクリックしたTodoが含まれていない場合

Javascriptの設定

ボタンを一つ配置し、WorkFlowを設定します。

Step1にRun javascriptを設定します。

以下のコードを参考にしてください。

var titles = [CustamStateのTodoタイトル];

var deadlines = [CustamStateのTodo期限];

function generateMailBody(titles, deadlines) {

let mailBody = '';
for (let i = 0; i < titles.length; i++) {
const title = titles[i];
const deadline = deadlines[i];
mailBody += `${i + 1}つ目のタイトル:${title}\n期限:${deadline}\n\n`;
}
return mailBody;
}

var mailBody = generateMailBody(titles, deadlines);

bubble_fn_for_todo(mailBody)

1行目から解説します。

  • var titles = [CustamStateのTodoタイトル];
    functionで使用するためのタイトルのリストデータを指定
  • var deadlines = [CustamStateのTodo期限];
    functionで使用するための期限のリストデータを指定
  • function generateMailBody(titles, deadlines)
    functionで使用するための引数として先に指定した(titles, deadlines)を設定
  • let mailBody = '';
    空の変数を用意
  • for (let i = 0; i < titles.length; i++)
    title変数の数分繰り返し処理を行う設定
  • const title = titles[i];
    title変数を設定し、[i]番目のtitleを格納
  • const deadline = deadlines[i];
    deadline変数を設定し、[i]番目のdeadlineを格納
  • mailBody += `${i + 1}つ目のタイトル:${title}\n期限:${deadline}\n\n`;
    functionの中で指定したmailBosy変数に改行コードを含めて格納
    ${i + 1}つ目のタイトル:表題を設定しているので、自由に変更可能
    ${title}\n:[i]番目のタイトル
    期限:${deadline}\n\n:[i]番目の期限
    ※${変数名}はfunction(titles, deadlines)で指定した引数を設定しています。
  • bubble_fn_for_todo(mailBody)
    bubble側にデータを渡すお作法になります。
    「bubble_fn_ 」までは固定値ですが、「for_todo」はelementで指定したsuffixを設定します。
    (mailBody)はvar mailBody = generateMailBody(titles, deadlines);で受け取った値を格納しています。

 

CustomStateの中身を整形する必要があります。

何もしないと[title1,title2,title3...];となってしまい、作動しません。

正しくは、ダブルクォーテーションを入れてあげます。["title1","title2","title3"...];

  • format as textを選択
  • Content to show per list item : "This text"
    • テキストの前と後ろに「"」を配置します。
  • Delimiter : ,
    • リストの区切り文字は「,」とします。

表示確認

テキストを配置して、この結果を確認しましょう。

  • 生成されたメール文書というテキストを配置
  • あなたの登録したTodoリストというテキストを配置
  • 冒頭に作成したJavascript to Bubbleのエレメントを表示するテキストを配置

プレビューをして複数のTodoを選択し、Create Listをクリックすると結果が表示されるはずです。

メール送付設定

ここまできたら、この文章をメール送信する処理をつけて完了です。

ボタンの配置

一つだけsend mailというボタンを配置しましょう。

WorkFlowの設定

send mailを選択して、必要項目を埋めましょう。

  • To:受信できるメールアドレス
  • Sender name:送信者名
  • Subject:件名
  • Body:Javascript to Bubbleの値

改行されてメールが届けば成功です。

まとめ

以上が複数項目を改行してメールで送付する方法になります。

Run Javascriptを走らせた後にそのままメールにすると値が入らないことがあるので、お気をつけください。

スポンサーリンク

  • この記事を書いた人

masahide

エストニアにKoronCoron OÜ設立|親子向けノーコード教育事業展開、Webアプリケーション受託、デザイン修正などを展開 朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。

-Bubble
-

© 2023 まさブログ Powered by AFFINGER5