Playing with workflows and repeating groups

This article includes:

  1. One section for Bubble beginners
  2. One section for more experienced Bubble makers
  3. One cool app built with Bubble
  4. One tweet related to Bubble that I found inspiring and helpful.

Feel free to skip to the section you think you’ll enjoy the most!

The Beginners Bubble

As we saw in the previous issue, Bubble has 3 main parts, the Design tab, the Workflows tab and the Database tab.

Today we’ll focus on the Workflows tab: where you build your app logic.

When you create a workflow, you’re basically telling Bubble:

“When this happens, then do that

Some examples of basic workflows could be:

  • When an image is clicked (for example a logo), bring the user to another page
  • When a user is not logged in, show him a Sign up button.
  • When 5 seconds pass, show a popup to subscribe to a newsletter
  • When a button is clicked, store an element in the database (for example, a task in a to-do list)

As you can see, they all follow that structure:

“When this happens, then do that

I have prepared an app for you to play with some basic workflows. You will encounter this type of workflows a lot of times (only not with GIFs).

Quick overview of the app I prepared

The Makers Bubble

Today I want to share how to alternate your row colors inside a Repeating Group, to improve the readability and make them look more organized.

Alternating the row colors will mimic the look in a spreadsheet and it can be very useful when handling long lists of data.

I have prepared this simple webpage to show you an example.

Screenshot from the example webpage

How to alternate row colors in a Repeating Group?

  1. Group all of your elements in the Repeating Group cell
  2. Go to the conditionals tab and add the following condition

As you can see, to differentiate odd and even rows, you need to use the “modulo” operation, which basically calculates the remainder of a division. What we do is divide the row number (current cell’s index) by 2 and then tell Bubble to change the background color if the remainder is 1 (rows 1,3,5…).

You can go creative and instead of picking just 2 colors choose 3 or even more. For example, if you wanted to choose 3, you would just need to create 2 conditionals: one where the reminder of the division is 1 and another one where it’s 2.

Bubble App of the Week

App of the week is Dev Shopper, a platform that helps you find developers for your tech project within 48 hours (they actually start a 48-hour countdown timer once a project is posted!).

I love the clean interface and their use of negative space in the different web app screens. It’s also a good app to have a look at if you’re planning on building a messaging system for your app, as they put a big focus on the communication between software development service providers and users.

Lazar Stojkovic, the founder, has been in tech for about 15 years and came across Bubble this year. Some motivation for us makers…

Bubble Tweet of the Week

This week I’m sharing a tweet by Gregory John, probably the most talented instructor there is in the Bubble space. You’re probably already familiar with him.

No-code can seem all about building apps very quickly but it’s not. The truly great thing about no-code is that it allows you to spend more time talking to your customers and validating ideas, to iterate faster and build something people actually need. I think we all need a reminder every now and then. It’s just so tempting to keep building new products!

I hope you enjoyed reading this article as much as I enjoyed sharing what I’m learning. If you have ideas for things you would like to see covered in the next articles, don’t hesitate to hit me up on Twitter!

Leave a Reply