【Bubble】RepeatingGroup内でGroupFocus風ボックスを表示する方法

ノーコードツールBubbleのRepeatingGroupの中ではGroupFocusが使えません…(設置できない)。

GroupFocusが使えればたとえば、三点リーダーをクリックしたときに直下にオプションボックスを表示させることが容易にできますが、できないものはしょうがない。じゃあ、どうやって実現するかを考えるのが開発の醍醐味です。

夜な夜な試行錯誤を繰り返し、やっと実現できたのでこの場を借りて同様の悩みを抱えているBubblerの方々に向けて、RepeatingGroup内でGroupFocusのような親要素に対して絶対位置で表示するボックスの実装方法を紹介します!

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

  • 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
  • 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
  • リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴
  • 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
  • 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
  • マーケティングまで支援が可能
目次

実装イメージ

サンプル動画ではRepeatingGroupでUser一覧を表示しています。ユーザー名の右端に三点リーダーを設置。

三点リーダーをクリックすると、すぐ下にオプションボックス(編集と削除ボタン)を表示します。

各ボタンをクリックすると、ポップアップが出現し、それと同時にオプションボックスは非表示に戻るという挙動です。

実装手順

以下の手順で実装します。

  1. RepeatingGroupと直下にGroupエレメントで一覧デザインを構築する
  2. HTMLエレメントを設置し、Group オプションボックスのCSSを記載する
  3. 三点リーダーをクリックしたときのワークフローを設定する

RepeatingGroupと直下にGroupエレメントで一覧デザインを構築する

まずは上の添付Element treeのようにRepeatingGroup及びその中のGroupエレメントや必要な要素を設置していきましょう。

Group親要素のLayoutはRowに設定し、子要素を横並びにします。Groupオプションボックスは最初非表示にしておきたいので、This element is visible on page loadのチェックを外しておきます。

また、GroupオプションボックスをGroup親要素に対して絶対位置で表示させるためのCSSを後ほど適用するために、GroupオプションボックスのID attributeにクラスoption-boxを入力しておきます。

{class:["option-box"]}

クラスはプラグイン「Classify」をインストールすると上記のように指定できます。

HTMLエレメントを設置し、Group オプションボックスのCSSを記載する

適当な場所にHTMLエレメントを設置します。

入力欄には以下のようなCSSを入れてGroupオプションボックスを相対位置(position: relative)から絶対位置(absolute)に上書きします。

<style>
.option-box {
  position: absolute!important;
  top: 24px;
  right: 6px;
}
</style>

三点リーダーをクリックしたときのワークフローを設定する

最後に、三点リーダーをクリックしたときのワークフローを設定します。ここでは、Toggleアクションを使います。

Toggleアクションを使うことで、三点リーダーをクリックするたびに、対象となるGroupオプションボックスが非表示状態の場合は表示させる、逆にGroupボックスが表示されていたら非表示に切り替えることができます。

ここまでで一旦、RepeatingGroupの中でGroupFocus風のボックスの表示は実装できました!

あとはご自身のプロジェクトの要件にあわせて、たとえば実装イメージ動画のように編集や削除ボタンを設けて、それをクリックしたときに該当のポップアップを表示させて…などの機能を実装していってください。

その際は、Groupオプションボックスはそのままだと、表示されっぱなしになってしまうので、Group内の「編集」「削除」ボタンそれぞれタップした際に三点リーダーのクリックアクション同様に、上の添付画像のようにToggleアクションを使ってGroupボックスを非表示にしてあげることもお忘れなく。

また、親要素内の兄弟要素の重なり順の問題のせいでGroupオプションボックスが他の要素に隠れてしまうときは、以下の記事を参考にしながら重なり順を調整してみてくださいね。

【Bubble】エレメントの重なり順(z-index)を操作する方法

【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

    氏名

    法人名

    メールアドレス

    日中繋がりやすい電話番号

    お問い合わせ詳細 ※分かる範囲でご記入ください

    フォームの送信によりGoogleのプライバシーポリシー利用規約に同意したものとみなされます。

    日本最大級のノーコード開発実績!アプリ・システム開発サービス
    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    ノーコード開発ツールを使ったアプリ・システム開発にお困りですか?
    1からの開発も、途中からの開発も、お気軽にEPICsにご相談ください!
    著者・監修者
    大熊滉希
    日本最大級のノーコード開発実績を誇るEPICs株式会社の代表。株式会社DRAFT役員として新規事業のコンサルティングに従事した後、EPICsを創業。ノーコード開発の顧問として上場企業に支援も行っている。
    監修者
    石森裕也
    EPICs株式会社CTO。サイバーエージェントのグループ会社での経験を経てEPICsに参画した。これまでで100件以上のノーコード開発に従事。開発経験は10年。
    目次