関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。Tumblr今回は、前回の記事でご紹介した、基本の並び替えを発展させて、もう少し複雑な並び替えについてご紹介したいと思います。並び替えの仕様は以下の通りです。従業員はチーム内でも、もしくはチームを移動しても並び替えを行うことができます。チーム自体も並び替えを行うことができます。Elements)をインストールしていきましょう。plugins」をクリックして追加していきます。インストール済みの場合は、次項へ進んでくださいね。次にデータベースを準備していきます。前回作成した「Employee」テーブルに加えて、今回は所属するチームのテーブル「Team」を作成します。Number」の3つです。前回作成した「Employee」と同様のフィールドですね。続けて前回作成した「Employee」テーブルを拡張します。Number」の2フィールドを新たに追加します。この際のポイントは、「Team」フィールドのTypeを、先に作成した「Team」テーブルを指定しましょう。id」から「ID」に変更します。fields」ボタンから行います。これで「Employee」テーブルの「Team」フィールドには「Team」テーブルの「ID」が登録できるようになりました。「Team」テーブルと「Employee」テーブルにテストデータを登録していきましょう。Designタブの設定(チーム)では、次にDesignタブで画面を作成していきましょう。チームから作成していきます。Number」フィールドでソートをして取得します。scrolling」として水平方向に表示させることにしましょう。Team」を配置し、Conditionalでこのエリアにオーバーされた時に、右側のボーダーラインを表示するように設定します。今回は太さが「5」のオレンジ色のボーダーとしました。次にドラッグ&ドロップできるグループを設定していきます。Team」を配置します。ドラッグ時に分かりやすいよう背景色も変えておきましょう。tree」のアイ(目)マークアイコンを利用しましょう。アイコンをクリックすることで、エレメント非表示することが出来るので、Group外に配置したい場合などに便利です。Name」としてチーム名を表示します。次に、並び替え順を算出するためのHidden項目を設定しましょう。Below」というGroupエレメントを配置します。formatを「Integer」とします。Number」とします。Number」の値となります。Below」にはConditionalも合わせて設定しましょう。Number」に+1した値とします。Group」でグループにまとめてしまいましょう。sourceの設定を自動で行ってくれるので便利です。load」のチェックを外します。Designタブの設定(従業員)チームの次は、従業員を並び替えできるよう画面を作成していきましょう。従業員」を配置していきます。Number」でソートして取得するようにします。list」としておきます。「DropArea」エレメントは2つ配置します。Below」を配置します。Below」はチームの最後尾に従業員を加える場合のドロップエリアです。Above」にはオーバー時に背景色が変わるようConditionalも設定しておきましょう。従業員」と同階層に配置します。Above同様にConditionalを設定します。従業員データ」を作成します。Above」と同階層です。従業員」と同階層なので注意してくださいね。Employee」とします。ドラッグ時に背景色が変わるようにConditionalを設定しても良いですね。従業員データ」直下にはテキストエレメントを配置して行番号と従業員名を表示しましょう。従業員を並び替えする際に使用するHidden項目です。チームの時と同様の方法で配置していきます。従業員」と同階層に作成します。Above」を作成し、グループでまとめて非表示設定をしましょう。タブの設定では、ドラッグ&ドロップで並び替えた順位をデータベースに反映させていきましょう。ポイントワークフローを設定する前に、ポイントを整理します。取得したい値は以下の表を参考にしてくださいね。it」を選択しイベントを追加します。「Team」とします。次にStep1のアクションを追加していきます。thing...」を選択します。加えた値で更新することにより並び替えできるようになりました。「Employee」とします。次にStep1のアクションを追加していきます。Team」をValueに設定します。Stateの値」と設定します。Number」フィールドの更新が出来るようなりました。Below」を設定していきましょう。「Employee」とします。stateを設定します。Team」と設定してください。Number」の最大値に+1した値を設定します。thing...」です。Stateの値」と設定します。以上で、すべての設定が完了しました!早速Previewして動作を確認してみましょう。type)が出力される場合があります。要素をドラッグ&ドロップしたい場合に、プラグインが実行エラーを返却してくるメッセージです。イベントはトリガーされて動くけど、ワークフローは実行されないため、データ上に影響はありません。実際の所「エラー」というよりは、どちらかと言うと「注意」といった意味合いになりますが、この問題を回避する場合は、同一エリア内でドロップエリアを重複させないようにするなど、レイアウトで工夫してみてくださいね。以下は、プラグインの参考リファレンスです。使い方でも触れていますので、是非参考にしてみてくださいね。ここまで、お読みいただきありがとうございました。nocodelabスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。