ノーコード ラボ

No Code のツールやアプリについて紹介します

Bubble でドラッグ&ドロップの並び替えをする方法

今回は、Bubbleでドラッグ&ドロップのプラグイン「Draggable Elements」を使用して、並び替えを行う方法についてご紹介します。

では、早速はじめましょう!今回のゴールは以下のようにドラッグ&ドロップで並び替えをすることです。ドラッグすると青色のボーダーが表示され、ドロップダウンで並び替えを確定します。

f:id:yksmt:20191101160933g:plain

1. Draggable Elements プラグインをインストール

まず、Bubbleでドラッグ&ドロップが使用できるようにするため、「Draggable Elements」をインストールしましょう。プラグインは Pluginsタブから「+Add plugins」をクリックして追加していきます。

f:id:yksmt:20191101161154p:plain

2. データベースの準備

次にデータベースを準備します。今回は従業員テーブル「Employee」を作成します。フィールドは「ID」「Name」「Order Number」の3つを作成し、サンプルデータを登録しておきます。

f:id:yksmt:20191101161350p:plain

今回は、5件ほど登録しました。「Order Number」フィールドには、並び替えをしたい順に番号を登録しておきます。

f:id:yksmt:20191101161401p:plain

3. Designタブの設定

では次に Designタブで画面を作成していきましょう。

3-1. Repeating Group の設定

まずは、データベースから従業員データを取得する Repeating Groupを作成します。ポイントは Sort by で Order Numberフィールドを選択し、Descendingで"no"と設定しておきます。なお、このRepeating GroupをGroupエレメント(Group リストデータ)の中にネストさせておいてください。Workflowタブの設定時に使用します。

f:id:yksmt:20191101161538p:plain

3-2. DropArea の設定

Repeating Group の1行目にドロップエリアを設定します。ドロップエリアは、ターゲットとなる行よりも上位に並び替えるか、もしくは下位に並び替えるかが選べるように、上下2つ作成します。

ここでは上部を「DropArea Above」とし、下部を「DropArea Below」と設定しました。

また、ドロップエリアにオーバーされた際に、青色のボーダーが表示されるようにConditionalを設定します。 DropArea Above では「This DropArea is dragged ober」の時、Boder color-topを「#0091FF」、Border style-topを「Solid」、Border width-top を「5」とします。なお、ボーダーを個別に設定できるようにするには、Appearance で 「Define each border independently」にチェックをいれておく必要があります。

f:id:yksmt:20191101161657p:plain

DropArea Below では、属性をTopではなく、Boder color-bottom や Border style-bottom としましょう。

f:id:yksmt:20191101161711p:plain

3-3. Drag/dropGroup の設定

次に ドラッグ&ドロップで移動させたいグループ、Drag/dropGroup を作成します。

ドロップエリアと同様、Repeating Group の1行目に、Drag/dropGroupを配置し、Make this element droppable にチェックを入れ、Behavior post drop で「Move back」を選択します。Type of contentで「Employee」を選択し、Data sourceを「Current cell's Employee」とします。

f:id:yksmt:20191101162001p:plain

Drag/dropGroup の中には、表示順と従業員名を表示させましょう。テキストを配置し、Appearanceで表示順は「Curren cell's index」、従業員名は「Parent group's Employee's Name」とします。

f:id:yksmt:20191101162014p:plain

3-4. Hidden 項目の設定

並び替えに重要な Hidden項目を設定していきます。設定はRepeating Group直下に Inputエレメントが2つ、Groupエレメントが2つの合計4つを設定します。

これらのエレメントは画面上は非表示としたいのでリリース時は「This element is visible on page load」のチェックを外しておきましょう。 デバッグ中は、逆に表示しておくと値が確認できるので分かりやすいですね。

ドロップエリアの時と同様、上下にInputエレメントを配置します。 上部を Input Previous として、Initial content を「Current cell's index-1」とし、Content format を「Integer」で設定します。

f:id:yksmt:20191101162047p:plain

下部を Input Next として、Initial content を「Current cell's index+1」とし、Content format を「Integer」で設定します。

f:id:yksmt:20191101162059p:plain

Grupエレメントを配置していきます。上部を Group Above として、Type of contentを「number」、Data sourceに「RepeatingGroup 従業員's List of Employees:item #Input Previous's value's Order Number」とします。意味は、Current index の1つ前の Order Numberフィールドの値となります。

f:id:yksmt:20191101162112p:plain

下部を Group Below として、Type of contentを「number」、Data sourceに「RepeatingGroup 従業員's List of Employees:item #Input Next's value's Order Number」とします。意味はCurrent index の1つ後ろの Order Numberフィールドの値となります。

f:id:yksmt:20191101162125p:plain

Group Below には Conditionalをあわせて設定します。Whenに「RepeatingGroup 従業員's List of Employees:item #Input Next's value is empty」と入力し、Data sourceを「Current cell's Employee's Order Number+1」とします。これは、Current行が最終行の場合は、Order Numberフィールドに1加えた値を設定するという意味になります。

f:id:yksmt:20191101162718p:plain

以上で、画面項目の設定が完了しました!

4. Workflow タブの設定

では、最後にWorkflowタブでドラッグ&ドロップで行った並び替えをデータベースに反映させましょう。

4-1. DropArea Above

Workflowタブの「Click here to add an event...」で「Elements」から「A drop area has a group dropped on it」を選択しイベントを追加します。

f:id:yksmt:20191101162513p:plain

Elementで「DropArea Above」を選び、Type of thing は「Employee」とします。

f:id:yksmt:20191101162526p:plain

次にStep1のアクションを追加していきます。「Click here to add an action...」から、「Data(Things)」→「Make changes to thing...」を選択します。

f:id:yksmt:20191101162538p:plain

Thing to change を「Current Workflow Employee」とし更新する値を「Order Number = Group Above's number + Current cell's Employee's Order Number / 2」と設定します。

これで、自分より一つ前のOrderNumber(Group Above)に自分のOrderNumber/2 を加えた値で更新することにより並び替えできるようになりました。

f:id:yksmt:20191101162554p:plain

Step2 に Repeating Group を Groupエレメントでネストさせておいた「Group リストデータ」をリセットしておきます。

f:id:yksmt:20191101162611p:plain

4-2. DropArea Below

では Above同様、Belowも設定していきましょう。「Click here to add an event...」で「Elements」から「A drop area has a group dropped on it」を選択しイベントを追加します。Elementで「DropArea Below」を選び、Type of thing は「Employee」とします。

f:id:yksmt:20191101162642p:plain

アクションを追加します。「Click here to add an action...」から、「Data(Things)」→「Make changes to thing...」を選択、Thing to change を「Current Workflow Employee」とし更新する値を「Order Number = Group Below's number + Current cell's Employee's Order Number / 2」と設定します。 Belowには条件も設定します。「Current cell's index < RepeatingGroup 従業員's List of Employees:count」

これで、最終行でない場合、自分より一つ後ろのOrderNumber(Group Above)に自分のOrderNumber/2 の値を加えた値で更新することにより並び替えをします。

f:id:yksmt:20191101162655p:plain

そして最後に最終行の場合のアクションを追加します。 更新内容を「Order Number = Group Below's number」とし、条件を「Current cell's index ≧ RepeatingGroup 従業員's List of Employees:count」として、最終行の場合は、OrderNumberを Group Belowの値(つまりはConditionalで設定した Current行のOrderNumber+1)で更新することとします。

f:id:yksmt:20191105152606p:plain

まとめ

いかがでしたか?今回は、ドラッグ&ドロップで並び替えをする方法についてご紹介しました。次回以降、並び替えの応用編についても紹介できればと思っていますので、どうぞお楽しみに!