Chippify Repeating Group - chips/tags in pure Bubble

This plugin lets you turn a native Bubble Repeating Group into an inline list that flows from one line to the next:

Example

image

Possible uses

  • chips aka tags with complete styling freedom
  • clickable tags to enable and disable options
  • flow posts, images, products

Use

Note: it works only using the New Responsive Engine, which is theoretically still in Beta as of writing

It’s simple to use - just drop the Chippify element into your page immediately before the Repeating Group you want to restyle. Ensure your Repeating Group is set to a variable number of rows and a fixed number of columns (specifically: 1 column).

After that, create content in the Repeating Group. A common scenario for the Repeating Group content will be:

  • create a Group with row layout, rounded corners and a background color;
  • put some text and an icon inside the Group to represent the thing being shown;
  • add conditional formatting to show the state of the thing; and
  • add a Click workflow to the Group to toggle the state of the thing.

Technical notes

The plugin is extremely lightweight: <100 characters. It won’t do anything on pages that you’re not using it on, and it won’t affect any Repeating Group other than the one you put the Chippify element immediately before.

Plugin page

However, this link currently seems to be broken - I think because while the plugin is available in the Install New Plugins popup inside your app, the plugin page isn’t published by Bubble yet.

8 Likes

Hello, could you please give any example on Bubble editor for this Chippify plugin.
Thanks :slight_smile:

Releasing version 1.1 which has the ability to specify which corner of the Repeating Group the chips start from - top left, top right, bottom left or bottom right.

image

Plugin page

I think this is just what I’m looking for! However I don’t understand what you mean by placing the element “immediately before” the repeating group. I’m new to Bubble, so perhaps that’s why. Please clarify :slight_smile:

In the responsive editor, you place the Chippify element onto your page. Make sure you place the element just BEFORE the Repeating Group that you want to modify. Check the page tree on the left side to be sure.

In any event, the Chippify plugin may not be needed anymore:

2 Likes