【Bubble開発】カンマで区切るタグの表示を3個まで制限する方法
こんにちは！
EPICs株式会社です。
Bubbleでは、Inputフィールドにカンマ区切りで複数のタグを入力させるような設計が可能ですが、標準機能では「タグの数を制限する」処理が難しい場面があります。
本記事では、JavaScript to Bubble（Toolboxプラグイン）を活用して、カンマで区切りるタグ入力を3つまでに制限する方法をご紹介します。
実装のイメージ動画はこちら！
また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
実装手順
- Input欄にカンマ区切りでタグを入力させる
- 入力値が3つ以上のとき、JavaScriptで3つ目までを抽出
- JavaScript to Bubbleで抽出結果をBubbleへ返す
- Display dataアクションで結果をGroupに格納・再表示
- 初期値の設定や、タグの表示も併せて設定
実装方法
1. Inputタグの設定
- Placeholder：例）「東京都、ショップ、近場」
- Initial content：Parent group’s text でタグを初期表示可能に
- Content format：Text
ユーザーが自然にカンマ区切りで複数ワードを入力できるようにします。
2. JavaScriptによるカット処理の準備（Toolboxプラグイン）
Run JavaScript アクションに以下のコードを記述します。
function truncateAfterThirdComma(text) {
return text.split(“, “).slice(0, 3).join(“, “);
}
//BubbleのJavascript to Bubbleに結果を返す
bubble_fn_truncateResult(truncateAfterThirdComma(properties.param1));
- param1には、Inputタグの値を渡します（例：This Input’s value）
これにより、カンマ区切りのうち最初の3つのみが抽出されます
3. JavaScript to Bubbleで結果を受け取る
- bubble_fn_suffix：truncateResult
- Trigger event：チェックON（イベントを発火）
- Publish value：チェックON（値をBubble側へ返す）
- Value type：Text
この設定により、JavaScriptから返された3つのタグがBubbleで扱える状態になります。
4. 入力が3つを超えたときにJSを実行
「Input tag’s value is changed」イベントで、以下の条件を設定。
This Input’s value:split by (“, “):count > 3
この条件を満たしたときに、Run JavaScriptアクションを実行します。
5. 結果を表示する（再入力として反映）
JavaScriptの結果が返されたら、Display dataアクションを使って、以下のように表示内容を上書きします。
- Element：g tag（Groupなど
- Data to display：This JavaScripttoBubble’s value
これにより、入力値が3つを超えたときには自動的に最初の3つに制限され、それがUIに再表示されます。
6. 初期値の設定（編集画面などでの活用）
すでに登録されたタグ情報を編集画面などで表示する場合は、下記のように記述できます。
Initial content:
Current page’s Company’s Tags:format as text
これにより、登録済みのタグリストをカンマ区切りでInputに表示できます。
-
facebookで
シェアする -
Xで
シェアする -
LINEで
送る -
URLをコピーしました！
