If you're starting on Bubble, one of the first things you'll notice is the Groups in the Containers category. But what are these elements, and why do they matter? In this article, we'll delve into everything you need to know about Groups, discussing each type in-depth.

What are Groups in Bubble?

Let me break it down for you in simple terms. In Bubble, elements refer to everything you place on your app canvas — texts, buttons, images.

Groups function as containers for all these elements, making organising and managing them more manageable. Think of it as a virtual basket that keeps all your goodies in one place!

Groups can contain other elements

Think of Groups as parents and every element inside of them as children. It makes editing your Bubble app much easier since you can move, copy/paste, or delete all elements in a group in one go.

You can even nest groups inside of other groups, creating a hierarchy that makes it easy to navigate and identify different parts of your app.

Groups are also handy to organise your Element tree. For example, you can name a group "Edit User" and see that it contains input elements for first and last names. And if you want to hide any elements (including children) in the editor, click the eye symbol.

Groups can hold data

Picture this: You're setting up a form where users can update their Company name and address. You can create a group with the data type "Company" to simplify things. This way, all elements within the group will reference that particular Company record.

Are you still feeling confused?

Let's say you have a text field in the group. You can set the dynamic value of the text as Group A's Company's name. But which Company are we talking about?

This is where the Group comes in. We can tell Bubble we want Group A to hold a Company value. You can then reference this value.

As Group A holds a Company value, we can pass the value on to all the Group's child elements.

It is the quickest way to instruct Bubble on which Company to work on. In the example above, we're fetching the name of the Company loaded into the Group – which we defined in the last step.

You can store any kind of data in a Group – text, number, data type, expression or Option set.

Types of Groups in Bubble

There are 5 types of groups in Bubble — Group, Repeating Group, Floating Group, Focus Group and Popup.

Groups

The first type of container is a Group. It is simply a container to organise elements and store data.

You can place a group directly on a page, inside another group or even inside the other containers (floating group, popups etc.).

1. Using Groups for responsive design

You can use Groups in Bubble to group different elements together and have them all behave and move together.

You'll save the effort of applying the same responsive settings on the child elements by applying the settings to the parent group — margins, padding, min-width etc.

2. Using Groups to store data

As explained above in the example, you can fetch and store a record's value in the Group. As a Group is a singular element and doesn't repeat, you can only keep 1 value in the Group. You'll need to use a Repeating Group to hold more than one value.

3. Using Groups to hide/show elements conditionally

There can be cases where you want to display only certain sections depending on some conditions. In such a scenario, you can put the section in a collapsible group and show/hide it using conditionals.

4. Using Groups in SPA

A Single Page App relies on having the entire functionality on a single page. You can imagine the challenges of putting all the workflows on one page.

It is why an experienced Bubble developer will use reusable elements to build the SPA. They will put all the reusable elements in various collapsible groups and show/hide them. The height and width of the group will collapse to 0 pixels when it's not visible.

Repeating Groups

If you want to display a list of items in your Bubble app, Repeating Groups will help you get the job done. Unlike regular Groups that display information about one user or item, Repeating Groups can show a whole list of them neat and organised.

Here's how it works: you provide a list of items you want to display, and Bubble creates a row for each item. Each row is a cell of the Repeating Group, and you only need to design the first row. Bubble will handle the rest by repeating the elements you designed for each row.

Imagine you're running a social media platform where users can post photos. You want to display all the photos in a grid-like format, each with a title and a brief description underneath. This is where Repeating Groups come in handy.

You can set the content type of the Repeating Group to Posts, and Bubble will automatically display all the Posts in the list. You only need to design the first cell with its title and description, and Bubble will repeat the design for each Post in the list.

Inside each cell of the Repeating Group, you can reference the specific photo from that row and display its corresponding title and description.

Repeating Groups make displaying all the photos neatly and organised easily without having to design each cell separately.

If fewer photos are in the list than the number of cells you've set in the settings, Bubble will display the available number of cells. If there are more photos, Bubble will keep loading them as the user scrolls.

1. Using Repeating Groups to store temporary data

Sometimes you can also use the Repeating Group to store temporary data. Let's say you're displaying a list of records in a Repeating Group, but you'd like to filter this output with another set of records.

We can create a hidden Repeating Group inside a Popup and filter our list.

Another use case is to fetch a list of records and reference the same list multiple times in our app.

2. Using Repeating Groups to improve loading time

A Repeating Group can also affect the load times of your application. The amount of data we want to display dictates the page load speed.

A large amount of data to be displayed means a slower page load speed.

So how does a Repeating Group help us? We can limit the data we show at any given time. Using pagination, we can display 10 records instead of 100 records. Or we can implement lazy loading to fetch new records as the user scrolls down, just like Instagram.

Popups

Popups are Groups that appear over all other elements on your page and are typically used to display messages or alerts to your users. But the beauty of Popups is that you can use them for a range of different purposes.

So, what makes Popups different from regular Groups? For starters, Popups are above other elements on the Z axis. In other words, if your screen were a 3D space, it would float above everything else.

This means they don't affect the layout of the rest of your app like Groups would. It makes them perfect for displaying alerts or messages you want to draw your users' attention to without messing up the rest of your app's design.

Another great thing about Popups is that they can be used to partially or wholly black out or blur the screen, only showing the content of the popup. It is a great way to focus your user's attention on specific information without distractions.

Of course, just like regular Groups, Popups can contain any data you want to be referenced by its child elements.

With their ability to draw attention to specific tasks or information, and their flexibility in terms of design, Popups are a must-have tool for any Bubble developer looking to take their app to the next level.

1. Creating hidden popups to store data

A neat trick many Bubble developers employ is to use a Popup to store frequently accessed data. You can create multiple Groups and Repeating Groups in the Popup and reference them in your application.

Let's say you have a Project Management tool. You can create a Repeating Group inside the Popup to store the list of Projects. Wherever you need to display the list of Projects, you can reference this Repeating Group. It will help you avoid creating multiple searches and make it easier to update the search in the future.

2. Reusable popup elements

Using a Popup to display alerts or messages is common in web development. You can convert the Popup into a separate, reusable element to make your app more efficient and reusable.

It allows you to easily place the Popup wherever it's needed in your Bubble app without having to duplicate the same Popup over and over again. Doing so can save time and reduce the risk of errors in your code.

3. Popups as a security measure

If you're a new Bubble developer, chances are you're using Popups as a security measure to hide access to your app or data.

Popups are not designed for security purposes and should not be relied upon to protect your app or data. Anyone with even basic technical skills can easily bypass them.

Instead, use authentication and authorisation techniques, such as user roles and permissions, to control your app and data access. These measures are much more effective and provide a more secure environment for your users and your app.

Floating Groups

Groups are great, but if you want an element of your app to stay on the screen even if the user scrolls, you need Floating Groups. You can lock Floating Groups to a specific screen part, such as the top, bottom, or side, and remain there no matter what.

One great example of using Floating Groups is a sidebar on a CRM. By locking the sidebar to the left corner of the screen with a Floating Group, the user can easily use the app and navigate the platform using the sidebar.

But the beauty of Floating Groups is that you can use them in all sorts of creative ways.

For example, you can freeze a Floating Group relative to the bottom right of the screen, as seen in the example below. We can use this to create a chat button that hovers near the edge of the screen, always visible to the user no matter where they are on the page.

1. Creating a menu with Floating Groups

We can create the sidebar shown above. We'll add a Floating Group with a defined max-width to the page. It will be our sidebar container. Within the Floating Group, we'll add the button, icons and text to serve as menu items.

We will position the Floating Group to float vertically relative to Both and horizontally float relative to the Left.

2. Creating headers with Floating Groups

We can place a Floating Group similarly to create a sticky header at the top as the user scrolls down.

The Floating Group will float vertically relative to the Top and horizontally float relative to the Left. The only difference will be that we'll not constrain its width like the sidebar above.

Group Focus

The Group Focus behaves similarly to the Floating Group but has some differences.

First, it is positioned relative to another element on the page. Secondly, it will disappear/close when it is not in focus (you click anywhere outside the Group Focus).

Let's understand this behaviour. When we say it is positioned relative to another element, it means if the position of the selected element changes, the Group Focus also moves.

If, on the desktop version, the selected element is in the right corner, the Group Focus will be in the right corner (assuming it is not offset by too much).

And if the selected element is in the bottom left corner on the mobile version, the Group Focus will shift its position.

This is defined in the Group Focus settings, where we define the selected element. Once defined, we can change the offset to control its distance from the element.

However, one drawback is that Group Focus aren't responsive. They won't change their sizing and spacing based on the screen size. It can be a challenge in certain situations.

1. Creating a collapsible dropdown menu

Suppose you display the user's avatar in the top right corner as most platforms, and you want to show a dropdown menu to the users when they click the avatar.

You can't use collapsible Groups as they'll push the elements down when visible. Neither can you use a Popup as it'll be centred relative to the page. Your only option is a Group Focus.

You can create a new Group Focus and position it relative to the avatar.

How does the number of elements affect your app performance?

Remember that adding more elements to your page will slow down your app, including any groups you add. It's best to avoid adding unnecessary groups to keep the total number of elements low.

However, don't be afraid to use groups when necessary. Just don't go overboard and create groups within groups without good reason. Remember, less is often more.

I’d love to hear how you use Groups in your Bubble app. Let me know in the comments.

One common mistake people make when building no-code apps with Bubble.io is attempting to take on too much at once. It can be tempting to try to build a complex application immediately. Still, it's important to start with a more simplified version and gradually add complexity as you become more familiar with the platform.

Another common mistake is not using Bubble's extensive documentation and community resources, which can help answer questions and guide the process.

Finally, people sometimes overlook the importance of testing their application thoroughly before launching it. Skipping this step can result in a bad user experience and potentially harm your reputation.

What is the impact of these mistakes?

These mistakes can significantly impact the effectiveness and functionality of the app.

An unclear user interface and poor navigation can confuse and frustrate users, causing them to abandon the app.

A poor database design can result in slow app performance and potential data loss.

Inadequate testing can lead to buggy and unreliable app behaviour.

A lack of scalability can limit the app's potential to grow and serve a larger user base.

Lastly, not correctly considering user needs and feedback can result in an app that fails to meet user expectations and ultimately fails to succeed.

Don't Overcomplicate Your App

Start with a simple, clean design and focus on the essentials. Rather than adding too many features at once, test your app with a few users to gather feedback and ensure it remains user-friendly and easy to navigate.

This approach is similar to building a house. You start with a strong foundation and then build up from there. By perfecting the basics, you can ensure that your app is stable and easy to use.

As you add more features, you can continue to test and gather feedback to improve the user experience.

Avoid Using Too Many Plugins

While using plugins to add more features to your no-code app may be tempting, avoiding going overboard is important. Too many plugins can slow down your app and make it more challenging to maintain in the long run.

Instead, focus on using a select few plugins that are essential to the functionality of your app. Consider using built-in Bubble.io features and integrations before adding additional plugins.

When selecting which plugins to use, please consider how frequently they are updated and how well they are supported. Maintaining plugin updates can help ensure your app remains stable and secure.

Honest guide to Bubble templates and why you should care [2023]

When building Bubble apps, you might feel overwhelmed with the work needed. One way to save time and resources is with templates. However, using a template may not be the best choice for everyone.

NocodeAssistantHimanshu Sharma

Test Your App Thoroughly Before Launching

One mistake beginner Bubble.io builders make is not thoroughly testing their app before launching. It can lead to issues and bugs that could have been prevented with proper testing.

To avoid this, take the time to test every feature and functionality of your app.

• Use real-life scenarios and try all possible outcomes.
• Have a group of beta testers to provide feedback on the app.
• Perform load testing to ensure the app can handle high traffic.
• Make sure the app is cross-browser compatible and works well on all devices.

By testing your app thoroughly before launch, you can avoid the headache of dealing with issues and ensure a better user experience for your audience.

Remember — a well-tested app is a successful one.

Ensure App Responsiveness on Different Devices

One of the most crucial aspects of app development is ensuring that your app is responsive on different devices.

It's easy to forget that users might access your app from various devices with different screen sizes and resolutions.

Test your app on different devices and resolutions to ensure it looks and works best for all users. You don't want to lose potential users because they can't use or interact with your app properly.

Regularly Monitor and Update Your App

Another mistake Bubble.io builders make is launching their app and forgetting about it. You need to monitor your app regularly and update it if necessary.

Regular monitoring allows you to catch any issues with your app before they become significant problems. You can also gather user feedback to improve your app's functionality and design.

3 proven tips to make your Bubble.io app searches faster today

Learn how to solve the problem of a slow app (without upgrading your server). 1. Use privacy rules 2. Reduce nested searches 3. Avoid advanced filters

NocodeAssistantHimanshu Sharma

Updating your app regularly also keeps it up to date with any updates Bubble will have made to its platform. It will ensure that your app remains relevant and valuable to your target audience and can attract new users.

Can you create the perfect Bubble app?

Creating the perfect Bubble app is a challenging task, but it's not impossible. It requires combining technical knowledge, creativity, and a good understanding of your target audience.

Every app is flawed. Be open to feedback and make improvements based on user suggestions to create a better product over time.

• Start small and take incremental steps in your development to detect and fix issues before they become significant problems.
• Double-check and carefully consider your choices when using plugins or third-party services, as they can sometimes interfere with your app's functionality.
• Keep your data well-organized and easy to read by labelling everything in a way that identifies its purpose and contents.
• Take advantage of the Bubble.io community by asking for help with issues or recommendations on avoiding common errors.
• Test your app rigorously and often to ensure everything functions correctly and prevent bugs from creeping in.

By keeping these tips in mind and being diligent with your app-building process, you can avoid common no-code development errors and create a successful and functional app with Bubble.io.

Keep learning, iterating, and experimenting, and soon you'll have a thriving app you can be proud of.

Honest Bubble.io Review - the most user-friendly and powerful app builder?

Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

NocodeAssistantHimanshu Sharma

In Bubble, the Boolean or yes/no field is a field that has one of two possible values (usually denoted true/false or yes/no).

You can use the Boolean in various cases.

1. Storing the user_active status as a boolean field and marking it as yes for active users and no for inactive users.
2. Storing the onboarding status of a user and marking it as yes for users who have completed onboarding and no for users who have yet to complete the onboarding.

You can imagine many more use cases.

Creating a Boolean field in Bubble

To create a Boolean field, select the yes / no field type. This will create a new Boolean field.

You can choose to set a default value if you'd like.

Storing the Boolean value in Bubble

You can update the Boolean field in various ways. You can

1. Use a checkbox and store the value as yes if the checkbox is ticked and vice versa.
2. Use a toggle input and store the value as yes if the Toggle is enabled and vice versa.

Both methods are similar, so for this tutorial, let's create the workflows with a toggle input.

I've placed a toggle button, and I want to store the value in the database. As we'll be creating a new record whenever we press the 'save' button, the workflow will create a new record.

Storing a 'Toggle input's value is checked' is the way to store its value, even though it may initially seem unclear.

Bubble will save the current value of the Toggle value regardless of whether the Toggle is checked or unchecked. It works weirdly, but that is how it operates.

Updating the Boolean value in Bubble

The dynamic expression will remain the same if we want to update an existing Boolean value.

1. Find the record we want to update.
2. Pass the new value we want to over-write.

For the sake of this tutorial, I have assigned a type of content to the Group Master and have passed a random record to that group. I will use the record in this group and update its 'value' field.

We'll use a new button to update the value. The same expression, 'Toggle input's value is checked', will be used to overwrite the existing value.

Auto-binding the Boolean value in Bubble

Auto-binding is a feature that lets you modify and update a field in your Bubble database without using a workflow. It allows us to reduce the number of workflows in our app and improve the UX for our users.

To auto-bind the boolean field, there are two steps.

1. Create privacy rules to enable auto-binding
2. Define the field which auto-binds to the toggle value.

Read the other tutorial to understand auto-binding and create appropriate privacy rules.

Simple guide to learn auto-binding in Bubble

Auto binding is a method of updating the Bubble database without creating or triggering a workflow.

NocodeAssistantHimanshu Sharma

We'll check the 'Enable auto-binding' checkbox. This will present us with the option to auto-bind to the Toggle.

As our boolean field is called 'value', we'll select this field from the dropdown.

Once we do this, Bubble will prompt us to create privacy rules.

To get around the requirement, we'll create a basic privacy rule.

Once the rule is created, we're all set.

Bubble will automatically fetch the value of this field of the chosen record and set the Toggle as checked if yes and unchecked if no.

And whatever changes we make to the Toggle's value will be automatically updated in the database without any workflows.

Formatting the output of a boolean field

We can format the output of a boolean field in different ways. We can display text based on the value.

For example, if the value of a field stores the verification status as no, we can display the output as "Verification pending" or if it is yes, "Verification completed".

We can use the :formatted as text operator to achieve the result.

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/boolean
Editor - https://bubble.io/page?type=page&name=boolean&id=nocodeassistant-tutorials&tab=tabs-1

3 proven tips to make your Bubble.io app searches faster today

Learn how to solve the problem of a slow app (without upgrading your server). 1. Use privacy rules 2. Reduce nested searches 3. Avoid advanced filters

NocodeAssistantHimanshu Sharma

Contact us today to explore how Bubble can help your business. We would love to chat with you about how we could work together!

A no-code platform is a platform that enables non-technical users to build applications. You do this by dragging and dropping elements and components.

And you don't need a coding background to build applications using no-code.

It's hard to believe this is real. Enterprise consumers without technical backgrounds were already creating full-fledged apps! And now it was the turn of the non-enterprise customers.

Does no-code work?

Yes!

There is some debate over whether it is scalable. People think no-code is only helpful for prototyping and validating your idea. And that if you want to scale, you need a custom solution.

No-code is perfect for quickly building a prototype, but you can also use no-code to launch a full-fledged product. At NocodeAssistant, we've made products ranging from marketplaces, CRMs, internal tools, job boards and e-commerce platforms. All on Bubble.

Simply because no-code is suitable for prototyping doesn't mean you cannot use no-code at scale. Over 80,000 people use our client applications. Everything is running smoothly.

What is Bubble.io?

Bubble is a no-code development platform that allows you to program, design, host and scale web applications without writing a line of code. Joshua Haas and Emmanuel Straschnov founded Bubble in 2012.

Its customers include bootstrappers, funded startups and Fortune 500 companies.

A traditionally coded solution requires experience in front-end development, back-end development, database architecture and deployment. Bubble challenges this approach.

Bubble removes the need for coding background and gives an intuitive editor to build a web application.

Is Bubble.io suitable for a startup MVP?

MVPs are usually very stripped-down products with only the essential features. The product is improved with more features and functions after being validated.

Eric Ries describes an MVP as

the minimum viable product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort

Even though many founders understand the value of MVPs, they still need help to bring themselves to launch something so temporarily basic.

Bubble is the perfect mix of speed and flexibility. While custom-coded solutions offer more flexibility in some edge cases, they are slower to implement. It is better to build a product quickly and validate it than create an over-engineered product.

This doesn't mean you should move away from Bubble once you have a validated product. Far from it.

Bubble will let you create any application, connect it with other tools using APIs, schedule workflows and allow you to scale your database to any number of users. You don't have to worry about a server, framework or security risks.

5 common mistakes to avoid when building with Bubble

Are you building with Bubble.io? Avoid these 5 common mistakes when building your Bubble.io app.

NocodeAssistantHimanshu Sharma

What can you build with Bubble?

Bubble allows you to create your database, design your UI and use workflows to create the business logic. There is no limitation on the database architecture, UI or workflows. You can develop pixel-perfect applications using the latest responsive engine.

Here are some of the applications that you can build on Bubble.

• Internal dashboards
• Client portals
• Marketplace
• Job boards
• Project management tools
• E-commerce
• Productivity tools
• CRMs

And this is a partial list. Barring a few exceptions (games, native mobile apps etc), you can build anything on Bubble.

Some of the well-known startups built on Bubble are:

1. Codemap
2. Dividend Finance
3. Comet
4. Goodgigs
5. Incomee
6. Moone

How do I know Bubble is there for the long haul?

Bubble has been building its product and its team since 2012. That is a long time for any technology and company to cement its position in the industry. And the exploding user adoption and funding is a testament to that.

They have started creating detailed tutorials, conducting boot camps, making significant updates to their product, and adapting it to market changes.

Bubble recently updated the underlying mechanism of rendering UI using the flexbox layout model. They are working on optimizations in the backend and making the product fast and reliable. Bubble is also working towards SOC 2 compliance to appeal to enterprise users.

Finally, Bubble has promised that if they shut down, they will open-source the source code. So your business can continue running without any interruptions.

Finally, we want to make sure you feel secure about building on the Bubble platform, so, although we plan to be around for a very long time, here's our guarantee: if for some reason we ever have to close down shop, we will release the Bubble source code under an open-source license so that you can set up your own Bubble server and keep your app running.

What are the limitations of Bubble?

While Bubble is arguably the best no-code builder, there are a few limitations.

1. You cannot build native mobile apps.
2. You cannot create games.
3. You cannot run Python or other scripts.

Yet, there are workarounds for most of the limitations.

For building native mobile apps, you can use Flutterflow and connect it using API to Bubble. Bubble will serve as the backend for the mobile app.

You can use a third-party wrapper to convert it into a mobile app.

For running a Python script, you can use AWS to run the Python script and connect it with Bubble with an API.

3 proven tips to make your Bubble.io app searches faster today

Learn how to solve the problem of a slow app (without upgrading your server). 1. Use privacy rules 2. Reduce nested searches 3. Avoid advanced filters

NocodeAssistantHimanshu Sharma

Can Bubble scale?

Yes. Bubble can scale. However, should scalability be your top priority when testing if there is a demand for your product?

Our clients often ask this question. And typically, coders are sceptical. And they have every right to be suspicious. But many examples of Bubble apps have scaled to thousands of users and raised funding.

Codemap, a marketplace for finding and hiring no-code talent, has thousands of users and hundreds of jobs posted monthly. Of course, this is not comparable to Fiverr or Upwork, but Codemap has already validated its product and market demand. The purpose of an MVP is achieved.

There is no limit to the number of users your Bubble application can support. The only limit is capacity. And Bubble allows you to upgrade your capacity based on your requirements. You can scale from 10 users a day to 500,000 users a day.

Is there any example of a Bubble application that can handle 500,000 users a day? Bubble's landing page is built on Bubble itself. That's right. They use their platform to serve half a million users.

3 proven tips to make your Bubble.io app searches faster today

Learn how to solve the problem of a slow app (without upgrading your server). 1. Use privacy rules 2. Reduce nested searches 3. Avoid advanced filters

NocodeAssistantHimanshu Sharma

How Much Does Bubble Cost?

Bubble is free to sign up. You can build your app for free and subscribe to a paid plan starting from $29/month when you're ready to launch.

A subscription is required to put your Bubble application on a custom domain. For most people, the Personal is good enough to begin.

Is Bubble open source?

Bubble is a proprietary platform. Bubble is not open-source.

However, Bubble has promised that if they shut down, they will open-source the source code. So your business can continue running without any interruptions.

Does Bubble have templates and plugins?

Bubble has a marketplace where you can purchase third-party templates and plugins. Some well-known Bubble developers build templates and products that are mainly stable to use for a commercial product.

Honest guide to Bubble templates and why you should care [2022]

When building Bubble apps, you might feel overwhelmed with the work needed. One way to save time and resources is with templates. However, using a template may not be the best choice for everyone.

NocodeAssistantHimanshu Sharma

Can you export the code from Bubble?

You can export your data but cannot export your app's source code. Bubble apps will only run on the Bubble platform.

This is similar to how you can export your Adobe Photoshop files and designs but cannot export the source code of Adobe Photoshop. And Adobe has no ownership of your design files.

Similarly, you own your Bubble app data and can export it anytime.

Is Bubble HIPAA compliant?

Bubble is not HIPAA compliant.

However, you can use Xano for the database and Bubble as the front end. This will ensure that your Bubble app stays HIPAA compliant.

Is Bubble Reliable?

While Bubble may have some limitations, it is arguably the best no-code development platform.

You might be wondering, what if the company vanishes tomorrow? Is it safe to build your business on top of another platform? That's a valid concern, but you don't need to worry.

Their product is stable and has been in existence since 2012. In that time, they gained the trust of over 1 million users. This large user base will attract more users, further accelerating the adoption and investment in Bubble.

Contact us today to explore how Bubble can help your business. We would love to chat with you about how we could work together!

A recursive workflow is a workflow that can schedule itself to run in the future. You can think of it as a workflow that can and will run in a loop until terminated.

A recursive workflow is a "Do X While Y" loop, where both the parameters can be dynamic.

Recursive workflows need to be triggered from the front end (a page), but they run in the back end (backend workflow). They will continue to run until the exit condition is not met. They help you work on a large list, one item at a time.

Example use cases

1. Sending an email to all app users that are members of a group.
2. Marking 200 user accounts as inactive.
3. Create new database records

In any scenario where you want to make changes, create new records or trigger an action in bulk, you can use recursive workflow.

Honest Bubble.io Review - the most user-friendly and powerful app builder?

Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

NocodeAssistantHimanshu Sharma

Benefits of recursive workflows

Why would you use recursive workflows when you have the "Make changes to a list" or "Copy a list" action?

The reason is that your Bubble app may time out if the list you want to work with is large. Some records may be skipped, or the entire workflow may be terminated. If you wish to continue from the point of failure, you won't be able to find the workflow's point of failure.

Another advantage of recursive workflows is that you can control the exit condition. This lets you create complex workflows and have complete control.

And finally, you can also start another recursive workflow from the same workflow.

Enabling recursive workflows

Recursive workflows are available for all paid plans on Bubble. However, they need to be enabled.

Go to Settings > API > Enable Workflow API and backend workflows to enable them.

How to set up a recursive workflow

To better understand recursive workflows, let's examine two examples.

In the first example, we'll send emails to all our app users. While in the second example, we will accept a list of names using an input field and create records in the 'Ships' using those names. Each ship will have a name from the initial list of names.

Sending an email to all our app users

We'll start by creating a new API workflow. We need to give a name to this workflow.

After naming our workflow, we can set its parameters.

The list that we'll be working on will be a list of Users. So the first parameter that we need to create for this workflow is Users.

We also need an 'iteration' parameter of the type number. This parameter helps us control when the recursive workflow ends. It will store how many iterations of this workflow have been run.

Once the parameters have been defined, we can begin creating the actions.

We need to add the 'Send email' action to send the email. Now we'll work on the list of Users one by one.

You would typically put one email address. But we need to email a list of Users.

We'll pick a User from the list, email them, then pick the next User and repeat the process.

From the list of users, we'll pick the User number iteration.

In the first iteration, User number 1 will be picked. In the next loop, the iteration number will be increased to 2, so User number 2 will be selected.

The next step is to schedule the same workflow for a future time. We will schedule the same workflow to run 5 seconds in future. Give a small gap between each iteration.

We will pass the entire list of Users to the workflow and increase the 'iteration' parameter by 1.

You now have a recursive workflow that will schedule itself!

You can trigger this workflow from anywhere in your app and send it a list of Users. Ensure that the 'iteration' value is set as 1 when you start it.

Creating new records using a recursive workflow

We have an input field where a user can type a name and add the name to a custom state. The custom state stores a list of names.

We will pass the custom state value to a recursive workflow and create a new record in the 'Ships' data type.

Complete guide to Operations on List in Bubble.io

In this short Bubble tutorial, we’ll teach you how to work with lists. The two aspects of them: creating and manipulating.

NocodeAssistantHimanshu Sharma

We'll again begin by creating a new API workflow and defining the parameters. The parameters will be a list of text and 'iteration'. The role of the 'iteration' parameter is the same as explained above.

We'll pick a name from the list, create a new record, then pick the next name and repeat the process.

From the list of names, we'll pick the name number iteration.

In the first iteration, name number 1 will be picked. In the next loop, the iteration number will be increased to 2, so the name number 2 will be selected.

The next step is to schedule the same workflow for a future time. We will schedule the same workflow to run 2 seconds in future. Give a small gap between each iteration.

We will pass the entire list of names to the workflow and increase the 'iteration' parameter by 1.

Your recursive workflow can be triggered from anywhere in the app.

Exit conditions in recursive workflows

The recursive workflows we just set up have one big flaw. They will run indefinitely as they lack an exit condition!

An exit condition will terminate a recursive workflow when the condition is met.

The 'iteration' parameter will help us create the exit condition.

In the first example, we want to stop the recursive workflow when all the users have been emailed. The exit condition can be that we will not schedule it further when the iteration is equal to the no of users.

We will add an Only when condition to the workflow so that it will be scheduled only if the iteration is less than the count of users.

In the second example, we want to stop the recursive workflow when all the names have been used to create a new record. The exit condition can be that we will not schedule it further when the iteration is equal to the list size.

We will add an Only when condition to the workflow so that it will be scheduled only if the iteration is less than the count of names.

Cancelling a recursive workflow

You can cancel an upcoming recursive workflow if there is enough time.

To manually cancel a recursive workflow, go to your Bubble app's Scheduler section under the Logs tab. Click Show.

All the upcoming workflows will be listed. Next to each workflow is a 'Cancel' button. You can cancel all the workflows that you want. You can also click 'Cancel all' to cancel all the upcoming workflows.

Backend workflows for Beginners | Bubble.io

Backend workflows are server-side workflows in Bubble.io. Use them to schedule actions in the future or work with a big list.

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

If you have a list of 50-100 items, you can use repeating groups to display them in Bubble without problems. But once you have several hundred entries on the screen, you may start experiencing slowdowns.

Google spreadsheets can handle vast amounts of data, but Bubble would struggle. Bubble can't display data as well as a Google spreadsheet.

That brings us to another question related to app performance - which is faster fetching data in Bubble? Is it quicker to fetch data from lists or searches?

5 common mistakes to avoid when building with Bubble

Are you building with Bubble.io? Avoid these 5 common mistakes when building your Bubble.io app.

NocodeAssistantHimanshu Sharma

What is the difference between Lists and Searches?

Lists and Searches have pros and cons, but both are useful in different instances. The use cases depend on a few factors; no one approach will work in all scenarios.

A search is performed on a data type with constraints to filter out specific results. This approach ensures that we only fetch and download the specific records.

Lists, however, are saved as a field in a data type. They don't have their own separate data type. An example of a list is a list of texts stored in a data type. This list can be used to store notes, updates etc., and it will be a single field inside a single record.

Filtering data using Lists and Searches

While most database searches are performed server-side, lists depend on client-side filtering. That means the user's hardware dictates the performance of list filtering.

This can be a severe handicap for businesses that need to cater to people with low-end devices or poor internet connectivity.

Complex searches using Lists and Searches

Searching for records in the database with specific criteria like Team name or Status=true is fast.

It is not always easy to get more advanced searches without merging and intersecting multiple searches into one list. This can cause the server to do various searches and move processing to the client-side, slowing down searches with many records.

As lists also use client-side filtering, this can negate the speed and scalability advantage that Searches have over Lists.

3 proven tips to make your Bubble.io app searches faster today

Learn how to solve the problem of a slow app (without upgrading your server). 1. Use privacy rules 2. Reduce nested searches 3. Avoid advanced filters

NocodeAssistantHimanshu Sharma

How to decide between Lists and Searches?

There is a general rule of thumb which we can use.

A list will be faster if you know that the List will not have more than 20-30 items. Let's say you want to store a list of User Roles that an employee is granted. There is a definitive upper ceiling in this case, and the list will be small. It makes sense to store it as a list rather than storing it as a different record in a data type.

If, on the other hand, you want to store the products that a user has liked, a list will be slower. As there is no definite upper ceiling and the user can potentially like hundreds or thousands of items, storing it in a different data type makes sense.

You can create a new data type, Liked Products, and a link to the User and Product. And when you need to display, you can Search the Liked Products table.

A list is helpful when the number of items in the list won't be large. According to Bubble's co-founder, Josh

If your list is short – you know you'll never have more than 20 - 30 invoices per company, for instance – then yes, using a list will load a little faster. However, ... the list will start slowing things down once the total number of invoices goes beyond the number you actually want to display at any one time.

Lists are great for small data sets, but please don't use them when you don't need to. To create a feature similar to wishlists, likes, retweets, etc., where the number of items can be thousands, use a different data type to store the information.

Complete guide to Operations on List in Bubble.io

In this short Bubble tutorial, we’ll teach you how to work with lists. The two aspects of them: creating and manipulating.

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

Airtable is a spreadsheet that has database capabilities. In other words, it combines a spreadsheet and a database. Airtable is unique from traditional databases and spreadsheets because of its pre-made templates, integrations, forms and automation.

This tutorial covers the steps to connect Airtable and perform operations on your Airtable data with Bubble.

Getting the Airtable API key

Every Airtable user has a unique API key that they need to connect Airtable with their Bubble app. You can find the key can be found under the account settings.

All users can access the API key; you don't need to be on a paid Airtable plan.

Installing the Airtable plugin

We must install the Airtable plugin in our Bubble app to connect and sync our Airtable account.

Head over to the plugins sections and install the free plugin created by the Bubble team.

Once installed, Bubble will ask you to give a label to your connection. This label is only for your reference, so choose whatever you like. Then click on expand and paste the API key.

We now need to connect our Airtable base to our Bubble app. Choose the Base, Table and View that you want to connect. You can choose which actions you want to perform to your Airtable base.

Hit Initialise. Bubble will make an API call to your base and show you a schema of the response. Make any adjustments, if necessary, to your data.

These settings affect how you can manipulate your Airtable data in the Bubble app. If you choose to 'Ignore field', Bubble will not fetch this field, and you won't access this field in your app.

Click Save.

Reading the Airtable base in Bubble

Let's say you want to display the data in a repeating group.

The Type of Content of the Repeating group will be the name of the Airtable base. In the current case, the Type of Content will be 'Teams' as this is the name of the base.

As we use an API (the plugin makes API calls) to connect Airtable and Bubble, the Data source will be an external API.

Now you can use the repeating group the way you usually do.

Creating a record in Airtable using Bubble

Adding a new record to your Airtable base is like creating a record in your Bubble app database.

You need a workflow and an action where you'll pass the input values.

The only difference is that you will not use the "Create a new thing" action. Instead, you'll use the "Airtable - Create a new record" action.

I have created 2 input fields and 2 date pickers in the Bubble app and a button to trigger the workflow.

Bubble will send the date and time values in a format Airtable can understand, so you don't have to worry about formatting the date.

Modify a record in Airtable using Bubble

Modifying a record has a few steps.

1. We will create a popup and input fields to display the current value of the record.
2. We'll pass the relevant Airtable record to the popup.
3. We will create a workflow to modify the selected record.

I've created a simple popup and added the input fields and date pickers.

To pass and work on a specific Airtable record, we will give a Type of content to our popup. We can then dynamically pass the Airtable record using workflows.

To display the current record data like the Name and Status of the record, we can define the Initial content of the input fields. The initial content is the initial value of any input field.

Once we finish the first step, let's move on to the next step.

We will create a workflow where the user clicks on any cell of the repeating group, showing the popup and passing the current cell's Team to the popup.

Once we have the setup to show a popup, pass the current cell's Team and display the current information as initial content, we can move on to the final step.

Modifying the record.

We will trigger a workflow when the button 'Update' is clicked.

The 'Airtable - Modify a record' action will allow us to pass the updated values and the appropriate record id.

List or Searches - Which is faster in Bubble.io?

Is it quicker to fetch data from lists or searches? It depends on a few factors, and no one approach will work in all scenarios.

NocodeAssistantHimanshu Sharma

Deleting a record in Airtable using Bubble

Deleting a record is a one-step workflow. I've created an icon in the repeating group that will trigger the workflow when clicked.

We need to add an action 'Airtable - Delete a record'. We will need to pass the Team record that has to be deleted, which in this case will be the Current cell's Team or the Parent group's Team.

Why can't we filter on all of our fields?

You can filter data to the extent that Airtable allows.

Why can't we create or modify all of the fields?

Some fields in Airtable have been generated automatically, such as Rollups and Counts. These values are not alterable or creatable via API calls.

What type of values can we send to Airtable?

Currently, we can only send text and number values to Airtable.

How can we modify linked records?

For linked records, you need to get them from Airtable. To create a new record with a collaborator field, you must have that collaborator on another record. Then use that collaborator field.

Honest Bubble.io Review - the most user-friendly and powerful app builder?

Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

NocodeAssistantHimanshu Sharma

Editor - https://bubble.io/page?type=page&name=airtable_plugin&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/airtable_plugin

What are some of the ways you use Airtable with Bubble? How have they worked for you?

If you enjoyed this article, share it with your friends and colleagues!

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

Congratulations! You've created a product in Bubble, and it's gaining traction. Your app is receiving praise from the press and users.

You're now getting responses like these: "Your app is neat. However, I find it to be a bit slow. Can you make the data searches faster?"

So you're wondering, "Should I upgrade my Bubble server or not?"

A quick tip from a fellow Bubble developer: make sure your database searches are set up correctly before worrying about upgrading your server capacity.

Don't get me wrong — upgrading your server capacity is a good thing. But what if I told you there was an alternative where you could solve the problem of slow app speed at just about no cost?

I'm not going to tell you how to get 100,000 items from your database in 0.01 seconds. That's not the aim of this Bubble tutorial.

What are database searches?

A database search is a way of finding specific information stored in your Bubble app database. The search can be for a single item or a list of items.

Searching for a single item is usually straightforward. Even if you set up this search poorly, it won't slow down your Bubble app too much.

However, when fetching a list of items, even a tiny mistake can compound and slow your app.

And no matter which application you build, your application revolves around CRUD (Create Read Update Delete) operations.

Getting the Read part right is essential for any app. There are many different ways to build a search. But not all of them are great.

Before we start optimising our Bubble app, let's look at the difference between Client-side and server-side filtering.

Client-side vs server-side filtering

1. Server-side filters - The filters and constraints are applied on the Bubble server. These filters are faster because fewer data has to download to filter the results.

2. Client-side filters - The filters and constraints are applied not on the Bubble server but in the user's browser itself. It may lead to slower performance. When you filter a search client-side, Bubble downloads the complete dataset to your browser and then filters the downloaded data.

It is clear that we need to try and avoid client-side filtering as much as possible.

Now let's see how we can optimise our database searches.

1. Use privacy rules

You might be wondering how privacy rules can help improve the app's speed. Aren't privacy rules used to keep your Bubble app secure, and who has access to the data?

Yes. Privacy rules are for your Bubble app's security.

However, we need to understand how privacy rules work in Bubble.

When you use server-side filtering, Bubble searches your database for records.

If we add constraints to this search, Bubble will have to search fewer records, and the search will be faster as a result. Easy to understand.

Bubble's privacy settings ensure that data is accessible only to people who meet some criteria. They work like search constraints.

Having privacy rules will make Bubble search fewer records in some instances.

2. Reduce nested searches

Suppose you're building a project management application. This application has three different data types: Projects, Tasks, and Sub-tasks.

Project is the overarching concept, and all the Tasks and Sub-tasks can be said to be a part of a Project.

Each Project has multiple Tasks, and each Task has multiple Sub-tasks.

Task data type has a field to store a relational link to the relevant Project. And Sub-task field has a field to store a relational link to the appropriate Task.

We want to list all the upcoming Sub-tasks in a table for the user to see.

One method would be to search for all Sub-tasks where the Task is in a search for all the Tasks associated with this Project.

Sounds complicated?

Well, it is. And if something seems complicated to understand with words, it is likely to be even more complex when you build it. And slow.

Another method, which is simpler and faster, is to create a field in the Sub-tasks data type to store a relational link to the relevant Project.

You can now search for all the Sub-tasks where the Project is the current Project.

This will reduce the database search time and reduce the time it takes to perform CRUD operations in workflows.

3. Avoid advanced filter

Advanced filters are a powerful component of Bubble. However, it would be best if you were carefully using them.

Advanced filters in Bubble use client-side filtering. And client-side filters can significantly slow down your app if the dataset is large.

Let's say we have a list of 10,000 Products. We want to fetch Products where the Name field contains "A".

One way to do this is Search for Product (unconstrained) :filter (Advanced: This Product's Name contains "W")

This will load the list of 10,000 Products into the user's browser and then filter it.

The other way to do it is Search for Product (constraint Name contains W)

The second method is more efficient.

But there will be times when you'll need to use advanced filters. In such a case, we should try to send the user's browser as few items as possible.

Don't just send everything. Send only the list of things that could pass the Advanced filter you will do afterwards.

Optimise.

You may not think about it, but Bubble gives you much control over how your database searches are structured and executed.

Your app's performance is just as important as the user experience. Design is essential, but the end results are more critical.

Instead of upgrading your server capacity, try to optimise your database search queries.

List or Searches - Which is faster in Bubble.io?

Is it quicker to fetch data from lists or searches? It depends on a few factors, and no one approach will work in all scenarios.

NocodeAssistantHimanshu Sharma

Did you find the strategies listed in this tutorial helpful? What are some of your favourite ways to improve your database searches? How have they worked for you?

If you enjoyed this article, share it with your friends and colleagues!

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

When building apps, one of the things you might think about is how to save time and resources. One way to do this with Bubble is to use templates.

However, there are reasons why using a Bubble template may not be the best option. There are also reasons why using a template could be the best choice for your Bubble MVP.

What is an MVP?

The moment you have an idea for a business, you need to assess if it's a viable one. There are a few different ways to approach this. One option is to launch a minimum viable product — or MVP.

MVPs are simple, and the core components of the template are adequate for you to test your business concept. For example, let's say you want to start a service that connects people who need help moving with people who have trucks. That's a great idea!

Your MVP might be a website that takes information from users and connects them by email. You can get this done quickly and cheaply, so you can start testing your idea in the real world.

The nice thing about MVPs is they are prototypes, not finished products. You can change or improve them based on what you learn during testing.

Creating an MVP helps you avoid months of work developing something no one will use — or even worse, jumping right into building something that no one will ever see because it doesn't solve a problem for anyone.

After all, it's easy to think your ideas are excellent when they're just floating around in your head — but it's quite another thing to find out if others agree once you put those ideas out there in some tangible form.

Why use Bubble.io to build an MVP

With no-code tools like Bubble, you can get your product to market faster.

"Good enough is better than perfect" applies here: fast to market is better than perfect. And you can build a product way more quickly in Bubble than from scratch.

Because of its flexibility, no-code lets you iterate without a headache.

And because startups often pivot, you want the process of making changes to be as smooth as possible - especially if you're trying to keep development costs down.

Using a flexible stack, you can change it yourself without needing a dev team or a technical founder.

Honest Bubble.io Review - the most user-friendly and powerful app builder?

Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

NocodeAssistantHimanshu Sharma

What is a Bubble template?

These Bubble templates can be a great starting point for creating your MVP. Templates are pre-made pages or elements with or without built-in functionality. They can help you save time and make your Bubble app look professional.

The templates make it possible for you to use copies of apps that are already successful and come with pre-integrated features.

For example, if you're building a marketplace similar to Airbnb, you can use a template for Airbnb in Bubble. This way, you'll have most of the core features taken care of without building it yourself in Bubble.

Types of templates in Bubble

Different Bubble.io developers and agencies offer templates in Bubble. And the way they build the templates can vary.

You'll find hundreds of templates on offer on the Bubble marketplace. Some of the most common Bubble templates are:

1. CRMs
2. Dashboard
3. Landing pages
4. Marketplaces
5. E-commerce sites
6. Internal tools
7. Directory sites
8. On-demand services
9. Project management
10. Online stores

Bubble templates can be a great way to start your own business, usually costing between $149 and $399.

Benefits of using a Bubble.io template?

Bubble is a no-code platform that allows you to create an app without writing code. However, the language it's designed in is its language, and it takes some learning to get up to speed.

Some of the apparent benefits of using a Bubble template are

1. It will take you less time to build your MVP.
2. It will save you the money you would've otherwise paid for a Bubble developer.
3. The template might come with pre-built complex features like payments, oAuth login etc.
4. You can learn the basics of Bubble with a template than if you were starting entirely from scratch.

Problems with using templates in Bubble.io?

There are a few disadvantages to using a Bubble template. A few are only encountered when you try to scale your Bubble MVP.

1. The template might not be optimised, and you might need to rebuild your app from scratch. This might be due to the database architecture, workflows that use many resources, or a clunky design.
2. The templates are provided as-is. They don't come with customisation support. If you need to make any changes to the template, you can either do it yourself or hire a Bubble developer.
3. The Bubble template may not have detailed documentation. This can slow you down as even experienced Bubble developers will need some time to familiarise themselves with the template.
4. They may not be a perfect fit for your business use case. Every market is unique, and businesses can differ significantly from one another. The template may not be designed to meet your industry's business processes and standards.

When should you use a Bubble template?

1. Your MVP is simple, and the core components of the template are a good foundation for you to test your business concept.
2. You want to copy a template feature in a separate Bubble app. Once you have the template, you can see the workflows and understand how it is designed. You can use this knowledge to create a module like this in your app.
3. You want to use the template as a starting point and add the features missing in the template on your own.

How to find Bubble templates?

1. Go to the Bubble Marketplace.
2. Search for keywords related to your app. For example, if you want to build a site like Airbnb, try typing "marketplace."
3. To narrow it further, select the template category from the dropdown.

What does it cost to use a template?

Most Bubble templates sell for $149 to $399, but a few sell for a higher price.

For most people, their ideal Bubble template will cost them $299. This template will have the UI, workflows, data structure and security measures.

You might need to change some of the practices in these templates when you want to scale your app. This should not discourage you as you use the MVP template.

Can you make a Bubble template?

Yes, you can. You can convert a Bubble app into a template and launch it on the Bubble marketplace.

1. Create your seller identity by going to your Bubble account page. Go to Marketplace - Seller profile. Create a Seller profile to list plugins and templates on the Bubble marketplace.
2. Go to the Template section in your Bubble account. Click on "New template".
3. You can name your template and choose to either use an existing app or create a new one.
4. Once you're done, submit it for review.

How to use a Bubble template in your app?

You cannot import Bubble templates into an existing app. You can only use a Bubble template for a new app.

The Bubble template serves as the foundation of your Bubble.io app. The template contains all the pages, data structures, workflows and integrations required for your app to function. These templates are easily customised so that you can make them fit your needs.

1. Go to your Bubble.io account and create a new app.
2. Give a name to your app and fill in the rest of the details.
3. Select the template you purchased in the "Start from a template" dropdown.

Can you edit a Bubble template?

Yes. You can edit everything from the text styling, colours, branding, workflows, database structure etc. You can edit a template as you would edit any Bubble app.

How to customise a Bubble template?

It's not uncommon to make changes to your Bubble template. As I mentioned above, they may not be a perfect fit for your business.

You have two ways of customising a Bubble template.

1. Do it yourself. If you are familiar with Bubble, you can do it yourself. After all, Bubble is meant to help non-technical people build apps without writing a line of code.
2. Hire a Bubble developer. You can find Bubble developers on Codemap.io, the Bubble forum or put in a Request for Proposal from Bubble agencies. At NocodeAssistant we can help you tweak the template.

3 proven tips to make your Bubble.io app searches faster today

Learn how to solve the problem of a slow app (without upgrading your server). 1. Use privacy rules 2. Reduce nested searches 3. Avoid advanced filters

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

Backend workflows are server-side workflows. You can use them for the majority of your work, but there are some things that they are not suitable for.

If you're working with an extensive data set or need to 'schedule' a workflow to run in the future, the standard workflows you're familiar with will not work.

In this tutorial, we'll understand how and where we can use backend workflows in Bubble.io.

Where do the backend workflows run in Bubble?

The backend workflows don't run in the browser of the user. They run server-side.

These workflows won't use up the user's computing/processing power.

Why use backend workflows in Bubble?

1. If you need to 'schedule' some actions in the future, you'll need to use backend workflows. For example, charge the user after one month when the trial ends; send a reminder a week before an event.
2. Another benefit is that the user doesn't have to wait for these background workflows to finish. The user can navigate to another page, start another backend workflow or do anything else. Bubble will handle these workflows in the background, so you won't notice them.
3. You are iterating on a big list. With the standard workflows, you can either change a single thing or a list of things together. With backend workflows, you can work on a list one item at a time. This can be useful if you're working with a big list as you won't blow up your Bubble application's capacity.
4. Your application will be well-organised as you can create a backend workflow and trigger it from various places. You only need to update the workflow once rather than multiple times.

Enabling backend workflows in Bubble

Backend workflows are available for all paid plans on Bubble. However, they need to be enabled.

Go to Settings > API > Enable Workflow API and backend workflows to enable them.

Creating a backend workflow in Bubble

Go to the backend workflows sections in your Bubble app.

Add a new backend workflow under General > New API workflow...

Once you do that, you can now configure the workflow's settings. You can give it a name, event colour etc. Ignore the rest of the options for now, and let's begin with adding a parameter.

As these workflows run in the background, we pass the required data to the backend workflow and let Bubble run it. This information that we give is with the help of parameters.

Parameters have a 'Type of Content' and a 'Key'.

The 'Type of Content' is the type of data you're passing. Typically it is a data type, but you can also pass numbers, text etc. The Key is nothing but a name that you use to reference your value.

You can also choose whether some value you're passing is a list of things or optional.

Sending birthday emails to your app users

Let's create a backend workflow to send an email to the user on their birthday.

We'll start by creating a new API workflow.After naming our workflow, we set its parameters.

We need to know the user who is supposed to get the email and the birthdate for this workflow. To keep things simple, we will send the birthday email only once. The birthdate is optional, as we can schedule it for the birthdate and then reschedule it to run again after one year.

As we need to pass the User record, the Type of user parameter will be the User data type. For the birthday, it will be a date.

We don't need to pass multiple dates or users, so we'll keep the 'is a list/array' checkbox unchecked.

We'll add a 'Send email' step in this backend workflow. We can refer to the parameters that we have defined in our actions.

For the To field, we can use the user parameter that we just defined and access all the User table fields. Furthermore, if we needed to mention the birthday in the email, we could use the birthday parameter that we created.

Triggering a backend workflow in Bubble

We can start a backend workflow from any page in our Bubble application. To start a backend workflow in Bubble, we'll find the "Schedule API workflow" action under custom events.

After selecting the desired workflow, a new set of settings will open.

We'll need to pass the parameters we defined when creating this backend workflow. Bubble will show you all the parameter values that you need to provide.

You can use any means necessary to pass this information. You can use 'Do a Search', the Result of the previous step or even give the response of an API call.

Finally, we must pass the date and time when this backend workflow should run. If you want it to run right away, you can put the Current date/time as the Scheduled date.

Taking our birthday example forward, let's say that you have this simple UI where you ask the user for their birthday.

Assuming you want to send this email immediately, we need to start the backend workflow. We don't need to schedule it. We can trigger the backend workflow either instantly or schedule it for a later date.

We'll add the 'Schedule API workflow' action. The Scheduled date will be the Current date/time as we want it to be sent at the earliest.

Scheduling a backend workflow for a future time in Bubble

We only need to change the Scheduled date to schedule a backend workflow for a future time.

Pick the backend workflow you want to schedule, and then choose when you want it to run.

You can also schedule multiple backend workflows together, but be sure to have some time in between them. To ensure your system is scalable, you should have a 3-5 seconds time gap between two backend workflows.

We only need to make one small change to schedule the above example for a future date.

We'll change the Scheduled date to Date/TimePicker Birthday's value. And that's it.

The backend workflow is scheduled.

Recursive workflows for Beginners | Bubble.io

A recursive workflow is a workflow that can schedule itself to run in the future. They help you work on a large list, one item at a time.

NocodeAssistantHimanshu Sharma

Cancelling a scheduled workflow in Bubble

The 'Schedule API Workflow' action returns an ID. This ID can be used to abort a scheduled workflow.

You can cancel a future workflow execution by using the 'Cancel a scheduled API Workflow' or 'Cancel a list of scheduled API Workflows' actions. This action will require a workflow ID or a list of workflow IDs.

Inspecting the upcoming workflows

The Scheduler section of the Logs tab shows all the upcoming workflows.

You can cancel upcoming events by clicking on the cancel button in each row. This cancels the current row workflow.

Things to look out for

1. Ensure you respect your Bubble application's privacy rules when creating a backend workflow. Check the "Ignore privacy rules when running the workflow" checkbox if you want the backend workflow to override the privacy rules.
2. Ensure you give a 3-5 seconds time gap if you schedule multiple back-end workflows.

5 common mistakes to avoid when building with Bubble

Are you building with Bubble.io? Avoid these 5 common mistakes when building your Bubble.io app.

NocodeAssistantHimanshu Sharma

How are backend workflows different from database triggers?

1. Database triggers start automatically when their trigger condition is satisfied. On the other hand, backend workflows require to be triggered using workflows.
2. You can schedule a backend for a time in future. Database triggers cannot be scheduled.
3. You can override the privacy settings of your Bubble application with backend workflows. Database triggers will always respect your Bubble application's privacy rules.
4. You can manually cancel a backend workflow, but you cannot do the same with a database trigger.

Database triggers in Bubble.io

Database triggers are a way of setting off workflows automatically in the backend when something changes in your database. Learn how to use them in your Bubble app

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

Database triggers are a way of setting off workflows automatically in the backend when something changes in your database. When you change an item of our chosen data type, Bubble checks the trigger's condition to see if the workflow should run.

They're handy when modifying a data type in different parts of your Bubble app.

You can create a database trigger once. It will automatically take care of the required actions—no need to duplicate the workflow.

Use cases include:

• Workflows can be triggered when you modify data in the Data panel of the editor.
• Workflows can be triggered when data is changed through the Data API.
• Implementing a "Schedule API workflow" that will run every time a specific type of modification is made to your data

This feature is valuable. The fact we can reference both the old and new versions of the data entry is convenient.

Honest Bubble.io Review - the most user-friendly and powerful app builder?

Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

NocodeAssistantHimanshu Sharma

When do they run?

When creating a new database trigger, we describe a data type and a field to be checked for updates. These two things work together to create a trigger.

When working with database triggers, you'll need to be familiar with two data types:

• The "Thing Before Change" is the data of the original thing.
• The "Thing Now" is the current data.

The "Thing" is the data type of the trigger.

If a workflow modifies a thing multiple times, it will only fire triggers once.

Triggers are also activated when a thing is created or deleted. If it was created, "Thing Before Change is empty" would be true. And if it was deleted, "Thing Now is empty" will be valid.

Creating a database trigger

Database triggers are available for all paid plans on Bubble. However, they need to be enabled.

Go to Settings > API > Enable Workflow API and backend workflows to enable them.

Then in the page selector dropdown in the upper left, you'll see the "Back-end workflows" page, which includes new kinds of workflows, including database change triggers.

Everyday use cases

Many apps we've seen built by others have complicated logic. They have 20 or 30 workflows that trigger the same API workflow because they all need to share logic.

Using database trigger workflows, you can make your app more straightforward to maintain by deleting all those actions.

Updating the user's slug when the user's name is changed

You want to update the user's slug whenever they update their name.

This is the perfect example of a database trigger because you have a "Thing before", the user's old name, and a "Thing now", the user's new name.

We can create a database trigger to check the data type user and the field fullName.

No matter where we create the workflow to update the fullName of the User, this database trigger will keep a watch and automatically trigger when the name is changed.

Triggering an email when a new record is created

A database trigger can be fired when a new record is created. In this case, the condition will be that the "Thing before" will be empty.

The "Thing before" will be empty as it is a new record.

Scheduling a backend workflow when a new record is created

It is important to remember that a database trigger will not cause another database trigger to fire. So in case you update a data type, say Country, when the State is updated, another database trigger should run whenever the Country table is updated.

In this case, the second database trigger will not be executed.

A workaround is to create a backend workflow to update the Country. Whenever a State is updated, the backend workflow will run to update the Country.

This will help then the database trigger for Country as well.

Backend workflows for Beginners | Bubble.io

Backend workflows are server-side workflows in Bubble.io. Use them to schedule actions in the future or work with a big list.

NocodeAssistantHimanshu Sharma

When should they not be used?

Database triggers have improved a lot since they were introduced. They are more reliable, and there is no reason not to use them.

That being said, there are some things to be considered.

Database triggers don't follow the privacy rules you define for your application

Any searches performed during the workflow will return all results, not just the results the current user can see.

Don't rely on privacy results to filter the results to prevent this. Instead, apply constraints and advanced filters.

A database trigger cannot trigger another database trigger

Suppose a workflow initiated by a trigger modifies data. In that case, Bubble will not start any subsequent triggers, even if those modifications are eligible for starting other trigger events.

You need to use "Thing Now" and "Thing Before Change"

You can only use "Thing Now" and "Thing Before Change" to define the "Only when…" condition. The complete list of data sources is available in the actions kicked off by the trigger.

3 proven tips to make your Bubble.io app searches faster today

Learn how to solve the problem of a slow app (without upgrading your server). 1. Use privacy rules 2. Reduce nested searches 3. Avoid advanced filters

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

Nearly every app we create for our clients has an Admin role. This role allows the user to have almost god-like powers in the application.

They can delete content, remove users, make changes to content etc. This role is for the person who owns the application or their team members. The application owner can invite team members and grant them privileges.

This article will teach you how to create an Admin role in your Bubble application. We’ll work with the example of a Facebook clone, and the Admin should be able to

• Restrict access of certain pages to the Admin.
• Delete posts that violate the application policy.
• If users engage in harmful behaviour, ban them.
• Allow/disallow groups created by users before opening them to the application users.

Creating the role

In our client applications, we assign a role to all the users, even if there is only one role for the application other than the Admin.

Having user roles allows from the beginning will enable you to hide admin pages, restrict functions solely for the admin, etc.

I prefer having an Option set to store the different user roles instead of a Data type. As the user roles are static and universal, it is better to use an Option set – faster and more efficient.

To create a new Option set, go to Data - Option sets - New option set.

I created one additional attribute, “public_name”, to simplify it. The “public_name” attribute will be what the users can see when signing up. This attribute is entirely optional.

Assigning user roles

Since we have only two user roles in this example, we will assign all the users the “General User” role during signing up. In the User data type, we have a field called user_role that stores each user's assigned role.

We ask the user for their name, email and password on the login page. We aren’t asking them to choose a role as they all will be assigned the same role.

If your application has more than one user role for general users, you can create your business logic to give them roles.

We’ll store this role when signing up to keep things simple.

Restricting page access

There can be pages in your Bubble app which you don’t want any users to access except the Admin. It can be the Admin dashboard page, for example.

We'll create a conditional workflow to restrict this page to be only accessible by users whose user_role field in the User data type is Admin.

Create a “Do when condition is true” workflow in the workflows.

Next, we need to create a condition that will run this workflow when true. Simple to guess, the condition will be that if the user_role field is not Admin, the user should be navigated to another page, say the homepage.

So I created a condition that Only when the Current User’s user_role is not Admin, Bubble should navigate the user to the index page.

Delete posts that violate the application policy

To delete posts, we need a field in the data type where the posts are stored to flag them as deleted.

A simple data structure that I’ve created to store the posts and flag them is to have an isVisible field in the Posts data type. This field will decide whether the Posts is visible to the application users or not. This Yes/No type field will be set to Yes by default.

I could simply delete the posts, but it is better to hide the posts than outright delete them as a safe practice. This way, you can retrieve the posts if needed in future and also, it is faster to update a field in Bubble than to delete a record.  

We’ll now create a workflow to allow the ability to update the isVisible field only to the Admin.

In the repeating group displaying the Posts, we have a constraint to search for Posts where the isVisible field is Yes.

Next, we’ll add a small icon. This icon, when clicked, will run a workflow that will update the isVisible field to No. As a result, this post will not show in the repeating group results as the constraint we applied above will filter it out.

Now that we have a workflow to flag a post, we would like only the Admin to have the ability to do this operation.

With the help of conditionals on the icon, we can add a condition that this icon should only be visible to the Admin. This icon will not be visible by default and only be visible to the Admin.

The condition will be Only when the Current User’s user_role is Admin, and the property to change will be to check This element is visible.

If users engage in harmful behaviour, ban them

Like deleting a post, we can also flag users if they indulge in harmful behaviour. We can have a field in the User data type that determines whether the user has permission to use the application or not.

The field named isActive will determine whether the user can use the application. It is a simple Yes/No type field, which, when marked No, will restrict access.

On the Admin dashboard page, we have a repeating group that displays a list of all the users and their information. And in the repeating group, we have a toggle button. This toggle button is linked to the isActive field in the User data type using auto-binding.

Auto-binding is a feature in Bubble.io where the input’s value is associated with a field in a data type. And when the input’s value is changed, the corresponding field is updated in the database. Auto-binding allows you to edit a field’s value without using workflows.

Auto-binding feature in Bubble.io and its use

You can auto-update your Bubble database without using any workflows. Improving your UX for your users

NocodeAssistantHimanshu Sharma

Linking the toggle button with the isActive field in the User data type using Auto-binding, we can easily control a user's access to our application. If the toggle button is unchecked, the user no longer has access to the application.

Now all that is left is to create workflows to

• Prevent the user from logging in if the active field is No
• Logging out the user and navigating them to the login page
  

We’ll create a simple reusable element with required workflows and place this reusable element on each page. Alternatively, if we already have a reusable element on every page, say the header, we can create the workflows in the header element itself. Doing this will save us the trouble of making the workflows again and again on each page.

I created a reusable element called user_access and made the reusable element a popup. This popup won’t be visible to the user, so we can skip creating any visual elements here.

We create a “Do when condition is true” to log users out and navigate them to the login page. As you can guess, the conditional statement will be Only when the Current User’s isActive is No, go to page login.

Whichever page we place this reusable element user_acess on will redirect inactive users to the login page.

We also need to add a condition to the login button on the login page.

In the workflow of the login button, we add another condition: if the isActive field of the user who just logged in is No, the user will be shown an alert and immediately logged out.

Allow/disallow groups created by users

Users can also create groups and build a small community in our social media application. However, we would like to curate the groups and balance quality and quantity.

All the created groups are not made public to the application users unless approved by the Admin. The Admin can see the groups with pending approval, and approve or reject the group.

Doing this is simple in Bubble.io. We simply need a field to store whether a group is approved or not. In the Groups data type, we can create a Yes/No field called isApproved. This field's value will be No by default, but it will turn to Yes once approved.

And wherever we are displaying the list of available groups, we can add a constraint to that repeating group to filter out groups that are not approved. In the repeating group, we can have a constraint to search for Groups where the isApproved field is Yes.

Back in the Admin dashboard, the repeating group displaying the list of groups pending approvals have a checkbox next to the group's name and basic details. When the checkbox is checked, a workflow should trigger to update the isApproved field as Yes.

We’ll create a new workflow that triggers automatically when an input’s value is changed. Click on Add a new event in the workflows - Elements - An input’s value is changed. Now select the checkbox as the element to watch. We’ll add an action to make changes to the current cell’s Group.

We will select Make changes to a thing, and the thing to Thing to change will be the Current cell’s Group.

Now the Admin can approve or reject groups created by users and curate the available groups.

Paywall and page level user access restriction in Bubble.io

You can easily paywall pages or restrict access to certain users. For free in just 5 minutes

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

In this tutorial, you'll learn how to create a Light and Dark mode for your Bubble app. With a few conditional statements in your Bubble application, you can make it more sophisticated and user-friendly.

To enable dark mode in your Bubble app, you will need the following:

1. Toggle button to switch between the two themes
2. Custom state to save the selected theme choice
3. Conditional statements on the visual elements

In the end, we will learn how to store the theme preference in the database and apply the styling changes directly to the element styles. It is a faster way to do things compared to using custom states.

Toggle button to allow switching

You can install the Ionic elements plugin if you don't have it in your Bubble app. This plugin will let you place a toggle button in your app.

Once you have installed it, you can place the toggle button anywhere. The profile section is a good place for users to choose their preferences.

I'll leave the Preset status of this toggle unchecked, but you can check it if you like.

Saving the user's theme choice

We'll use a custom state to keep track of the theme. We only need a simple Yes/No type custom state.

You can create a custom text or number state, but you'll need more complex conditional statements.

We'll use the Toggle button to change the custom state. Having a custom state of Yes/No will help us because we need only one workflow to update it.

The value might be confusing at first, but this is the correct way to toggle a Yes/no custom state. The custom state value will change to Yes if the current value is No, and vice versa.

You can also store the value in the database at this point. I'll go into more detail on this below.

Using custom states in Bubble

Custom state is the one of the most powerful features of Bubble. And many Bubble beginners struggle to use them.

NocodeAssistantHimanshu Sharma

Changing the colour of visual elements

The last step is to change the colour of the visual elements.

I've created a text, a group and a button to help you understand. The conditions remain the same to use this on all sorts of elements.

For example, we can change the font colour.

The conditional statement will need to check if the custom state value is Yes. If Yes, the font will be white. Otherwise, the text will be the same colour as the Style attached.

We can also change the Group's background colour.

Finally, we want to change the background colour of the entire page. We'll use the same conditional statement to change the background colour.

Can we store the user's theme selection in the database?

Absolutely.

You can create a Yes/No field in the User table to store user preferences and modify the conditional statement. Instead of the custom state, you'll check this field to update the element styling.

Just make sure that if you're saving the choice, the Preset status of the Toggle will be Dynamic to pull the value from the database.

Can we apply the conditional statements directly to the element styles?

Absolutely.

1. Go to the Styles section.
2. Select the element.
3. Click on Conditional.
4. Add the condition and the changes you'd like.

Adding conditional statements to the Style will save you time and keep your app organised.

5 common mistakes to avoid when building with Bubble

Are you building with Bubble.io? Avoid these 5 common mistakes when building your Bubble.io app.

NocodeAssistantHimanshu Sharma

What are Bubble templates and why should you care?

When building Bubble apps, you might feel overwhelmed with the work needed. One way to save time and resources is with templates. However, using a template may not be the best choice for everyone.

NocodeAssistantHimanshu Sharma

Editor - https://bubble.io/page?type=page&name=light_dark_theme&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/light_dark_theme

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

URL parameters are a great way to open different popups after the page has loaded.

This could be to show an image, display a message, video or popup etc. You can use URL parameters to do A/B testing and schedule email broadcasts.

If you're interested in using URL parameters, then keep reading this short tutorial.

Say a visitor lands on a specific page and you want to show a popup with a payment alert or a message from the admin. In this Bubble tutorial, I will go over how you can create a workflow which will show a popup on landing on a specific page.

URL parameter and key

We need to decide a URL parameter that we'll be passing. Bubble will check the URL for this parameter, and if found, will trigger a workflow. I've named my parameter as open and the key will be yes.

You can keep anything as the parameter name and the key. It's upto you. Here's a guide that'll get you up to speed on URL parameters.

How to use URL parameters in Bubble.io

You can use URL parameters to pass information between pages and trigger workflows in Bubble.io.

NocodeAssistantHimanshu Sharma

Triggering the workflow

To trigger the workflow everytime a user lands on the page, we'll be using the "Page is loaded" event.

This workflow will be triggered everywhere the page is loaded or refreshed.

Next, we need to put a condition on this workflow as we want it to be triggered only when the URL contains our selected parameter.

Now unless the URL has this parameter, this workflow will not run. We could've defined this condition at the Step level as well rather than the workflow level, but it is always better to have different workflow for different scenarios.

What if we remove this parameter from the URL?

If you remove this parameter from the URL, either manually or using some workflow, the popup will not open. As the Only when condition that we've defined at the workflow level will not get fulfilled, all the steps in that workflow will be disregarded.

How to remove the URL parameter using workflows?

Let's say that you ask the user to fill in some information in the popup and press a button to save it to the database.

You can add another step in the workflow where you're saving the data to your database. That step will be to simply take the user to the same page where they are currently, but without sending this parameter.

How to use URL parameters in Bubble.io

You can use URL parameters to pass information between pages and trigger workflows in Bubble.io.

NocodeAssistantHimanshu Sharma

Editor - https://bubble.io/page?type=page&name=url_param_popup&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/url_param_popup?open=yes

If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.

Bubble is adaptable. Lists are one of the main reasons why it is so. This Bubble tutorial will teach you how to work with lists.

The two main aspects of them are creating and manipulating.

First, let's understand what lists are in Bubble, how we can use them and when we should avoid them (according to Bubble's co-founder Josh). We'll then see how we can create a list and manipulate them.

What are lists in Bubble?

Lists are just what the name implies. A list of 'items'. They can be empty, have one entry, or have multiple entries.

In layman's terms, they are just lists of values.

So if your field's type is 'text', they can contain multiple text values - 'apple', 'banana', and 'cherry'. But they can also be empty. Lists can also be a list of numbers, images, files, dates etc.

What can you store in lists?

You can store a list of texts, images, files, dates, date ranges, data types, and option sets.

While they can store a list of items, they are basic. There is no other data stored with them. There is no way to associate more information with any item on the list.

A more advanced list is created when the field type (so what you would typically have text, number, image) is configured to another data type. It can either be a system one (User - you can have a list of Users who like your Blog Post) or one you created yourself.

So you can create a list of entries in another table/thing. You can add/remove/clear the list just as you can with text values.

When should you avoid lists in Bubble?

Lists are helpful in Bubble. However, you need to consider the use case of the list you create.

A list is helpful when the number of items in the list won't be large. According to Bubble's co-founder, Josh

If your list is short – you know you'll never have more than 20 - 30 invoices per company, for instance – then yes, using a list will load a little faster. However, ... the list will start slowing things down once the total number of invoices goes beyond the number you actually want to display at any one time.

So use lists only when you know the list size will be small. To build a functionality similar to wishlists, likes, retweets etc., where the number of items can be thousands, use a different data type.

List or Searches - Which is faster in Bubble.io?

Is it quicker to fetch data from lists or searches? It depends on a few factors, and no one approach will work in all scenarios.

NocodeAssistantHimanshu Sharma

How to create a list in Bubble?

There are two ways you can create a list in Bubble

1. List in a custom state
2. List in a data type

Typically we use a list in a custom state for temporary purposes. It is not stored in the database, and the value is erased when you refresh the page. Everyday use cases are for calculations, selection of items etc.

To create a list in a custom state, we need to select an element (preferably the page itself) - and create a custom state on the page. Just check the 'This state is a list' checkbox.

A list created in a data type is stored in the database. We keep this list in a data type as a field, and to make changes to the list, we use workflows.

Common Bubble operators with lists

• :plus item - This operation adds an item to a list of things. It returns a new list with the original list plus the new item appended to the end. The new item will be skipped if it is already on the list.
• :minus item - This removes an item from a list of things. It returns an updated list with the original list removed from the list. It will be ignored if the new item is not on the list.
• :first item - Returns a single item from the list of items. The returned item is the first item on the list.
• :last item - Returns a single item from the list of items. The returned item is the last item on the list.
• :random item - Returns a single item from the list of items. The returned item is any random item on the list. The randomness is not guaranteed.
• :count - Returns the total number of items in the list.
• :item # - Returns a single item from the list of items. The returned item is the # item on the list.
• set list - Overwrites the current list with the new list. The new list of things should be of the same type.
• add list - Adds all the new list entries to the existing list. If an item is already on the list, it will not be added again.
• remove list - Returns the current list after eliminating any items common to the current list and the provided list.
• clear list - Deletes the current list and replaces it with an empty list.

Setup

I have created a repeating group for this tutorial. The repeating group is fetching a list of Users and there are two buttons - Add and Remove.

How to display a list in a Repeating Group in Bubble.io

Displaying a list of texts in a RG is tricky, but it is easy once you understand how RGs work.

NocodeAssistantHimanshu Sharma

I want to store the list in a custom state called selected_users with a Type of content of User.

There is also a field named selected_users in the User table which stores a list of Users.

Add a single entry to a list

The simplest workflow. To add an item to a list, we need to use either the :plus item or the add operator.

I have created a repeating group for this tutorial. The repeating group is fetching a list of Users, and there are two buttons - Add and Remove.

You can use any other method to refer to an item you want to add to the list.

Custom state

1. Select the trigger and create a new workflow.
2. Go to Element actions - Set state.
3. Choose the element where the custom state has been created and select the custom state.
4. Put the value as the custom state's value: plus item the value that you want to add.

Database

To save an item to a list stored in the database, the operator changes from :plus item to add.

Assuming that there is an existing record in the User table where we can store a list of Users, the workflow will be

1. Select the record that you want to update.
2. Choose the field where the list is stored.
3. Put the value of the field as - add the record that you want to add.

Remove a single entry from a list

To remove an item from a list, we need to use either the :minus item or the remove operator.

I am using the same setup that I used in the example above. The repeating group fetches a list of Users, and there are two buttons - Add and Remove.

You can use any other method to refer to an item you want to add to the list.

Custom state

1. Select the trigger and create a new workflow.
2. Go to Element actions - Set state.
3. Choose the element where the custom state has been created and select the custom state.
4. Put the value as the custom state's value: minus item the value that you want to remove.

Database

To remove an item from a list stored in the database, the operator changes from :minus item to remove.

Assuming that there is an existing record in the User table where we can store a list of Users, the workflow will be

1. Select the record that you want to update.
2. Choose the field where the list is stored.
3. Put the value of the field as - remove the record that you want to add.

Add a list of items to a list

We have a repeating group that displays a list of users. We want to add all the repeating group's users to a list which may or may not have any existing users.

The Bubble operator we will use for this operation will be merged with or add list.

Custom state

1. Select the trigger and create a new workflow.
2. Go to Element actions - Set state.
3. Choose the element where the custom state is created and select the custom state.
4. Put the value as the custom state's value: merged with the list that you want to add.

As we want to add the entire repeating group's value to the custom state list, the value will be the custom state's value merged with the repeating group list of Users.

Database

To add a list of items to a list stored in the database, the operator changes from merged with to add list.

Assuming that there is an existing record in the User table where we can store a list of Users, the workflow will be

1. Select the record that you want to update.
2. Choose the field where the list is stored. In this case, the repeating group's value.
3. Put the value of the field as - add list the list that you want to add.

Remove a list of items from a list

We have a repeating group that displays a list of users. We want to remove all the repeating group's users from a list which may or may not have any existing users.

The Bubble operator we will use for this operation will be :minus list or remove list.

Custom state

1. Select the trigger and create a new workflow.
2. Go to Element actions - Set state.
3. Choose the element where the custom state is created and select the custom state.
4. Put the value as the custom state's value: minus list with the list that you want to remove.

As we want to add the entire repeating group's value to the custom state list, the value will be the custom state's value :minus list of the repeating group list of Users.

Database

To remove a list of items to a list stored in the database, the operator changes from :minus list with to remove list.

Assuming that there is an existing record in the User table where we can store a list of Users, the workflow will be

1. Select the record that you want to update.
2. Choose the field where the list is stored. In this case, the repeating group's value.
3. Put the value of the field as - remove list the list that you want to remove.

Beginner’s guide to sorting in a Repeating Group in Bubble.io

In this Bubble.io tutorial, we’ll learn how to sort the results in your repeating group. You can sort items in ascending order or descending order.

NocodeAssistantHimanshu Sharma

Joining two lists together in Bubble?

You can join two lists together, provided they are of the same type (Users, text, numbers etc).

Say we have a list of Users whose Status field is Inactive and another list of Users whose Status field is Dormant. We want to merge these two lists together and display the result in a repeating group.

You might think that it's easy.

I'll put two constraints in the data source of the repeating group. Unfortunately, that won't work. The constraints work as AND and not OR. So the result of such a search will be empty as there won't be any Users with both the Status options.

The solution is to use the merged with operator.

The merged with operator will allow us to define the constraints on the same field twice. This will function as a OR search instead of AND.

Honest Bubble.io Review - the most user-friendly and powerful app builder?

Bubble is an amazing platform to build your business. It’s easy to use and can be up and running in a very short time. However, there are some limitations to what Bubble can do. Get an honest review of the pros and cons of Bubble.io.

NocodeAssistantHimanshu Sharma

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.