Hi there! Welcome to another quick post. In this article, I’ll cover how to show random values on your Bubble app.

Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, including all the features you need to build a site like Facebook or Airbnb. Build out logic and manage a database with our intuitive, fully customizable platform.

Here’s a scenario:

Here’s what you want to achieve: Reload the group with a new random item every x seconds.

Set a source

First, you need to set a source that correctly loads a random item when the page is opened. The source can either be an App Data or Option set.

The Data Tab manages the data that users create when using the app. It is where you configure and see the data within your app's database. It consists of a number of sub-tabs. The app data sub-tab shows you the data in your app's database. You view the data by data type, and you can create custom views of a data type to show a specific set of fields as columns, a filtered subset of data, sorted data, etc.

Note that the development and live versions of your app have separate databases, so you need to switch between them in the upper right in order to see the respective data.

Option Sets allow you to have a static list of choices, "Options", which are global to your app. This is great for situations where you know ahead of time what options are possible for a variable - things like days of the week, marital status, team name for a given user, etc. For any data that’s shared between all Users of the platform and remains fairly static, use an Option Set. Option Sets load faster than data in your database, but they’re not meant to hold any private information.

To set up the database in either, navigate to the Data section using the sidebar.

Create an element group

Next, you want to set up a group.

With the group, add an element and set the data as Parent’s group element.

Set the workflow

Next, you want to update the group with a new random item every 10 seconds. You want to set a workflow to “Do every” event, coupled with the “Show Data in Group” which has the same source query as when the page loads.

In this case, I’m searching random items from option set. You can also us the ‘Search’ to get data from the data set.

First, set a trigger to “Do every 10 seconds”. Then, set an action to “Display data in Group”.

You can view the live action on our app. - https://trymaze.com/download-app

Alternative Solutions I found helpful:

• “Do every” to increment a custom state counter every 1 second, and a “Do when condition is true” to watch for the value hitting 15, then “Show Data in Group” and then reset the custom state counter to 0. This will update the group after the first timer interval, however it may stop updating the group for subsequent triggers.
• When performing a search, sort it randomly, then select a random item. Put the search for a thing:random item in the “Data Source” for a “Group” container

ABOUT ME

I'm Juliet Edjere, a no-code expert focused on design, product development, and building scalable solutions with minimal coding knowledge.

I document all things product stories, MVP validation, and how designs, data, and market trends connect.

Visit my website → built with Carrd and designed in Figma