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

前提条件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step1にRun javascriptを設定します。

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

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

var deadlines = [CustamStateのTodo期限];

function generateMailBody(titles, deadlines) {

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);で受け取った値を格納しています。