When we have a element that is not visible that acts as a datasource from the database, and the database updates, the not visible element details are not updated until the element is made visible again. Is there anyway to force an invisible element to update it’s data as soon as the database updates?
Best Practices:
- Use Custom States for Triggers:
Create a custom state that listen to a repeating group or database condition even hidden elements.
- Add a Conditional Workflow
Use the “Every X seconds” workflow action (plugin may be needed) to check the database & then use Show + Hide tricks to temporarily trigger a refresh, or update custom states linked to hidden elements.
- Backend Workflow + Webhooks
Backend workflow (via webhook) triggers performing updates via external services or APIs.
- Show, Then Hide
A simple workaround we have done is briefly showing the hidden group, letting it update & immediately hiding it again using a short delay.
In a recent inventory app we built for a retail chain, we used backend workflows to flag changes and auto-update dashboards even when hidden by tab navigation. Using a combination of backend triggers + custom states saved us unnecessary rendering logic.
Really?
Yes, Once you start working with dynamic content in hidden groups (like in multi-tab apps or dashboards), you will notice Bubble doesn’t always re-fetch or refresh data when the element becomes visible again. That can break the UX, when users expect real-time data updates.
have you had to deal with something like this in your apps? If yes, how did you approach it?
Does it need to be invisible in the first place?
A workaround could be to keep the RG visible, and set its opacity to 0
1 Like
This is not the issue I’m trying to solve, as it typically does refetch, unless developer set up datasource to be static. The issue I’m trying to solve for is that when hidden it doesn’t update. And I want to update without waiting for it to become visible.
I can’t say I’ve ever had that issues specifically (aside from general poor real-time data that is to be expected with Bubble).
What data are you specifically referring to? User data, or other datatypes?
It was because of it being in another non-nested Reusable (two separate reusables), that when a specific reusable is in view, the other reusable is not visible. The not visible reusable has a group that is a datasource for a property on the reusable so to be able to pass that property value down into the other reusable element that was currently visible.
So, RE #1 has Group DataSource that is default value of RE#1 property, and the RE#2 has a property of the same type, and it’s source is the RE#1. Since RE#1 is always invisible when RE#2 is visible, the Group DataSource of RE#1 is not visible also, and not getting updated, so the Property value it passes from RE#1 into RE#2 is not up to date.
I fixed the issue for this particular setup by just putting RE#2 into RE#1 and running the conditional visibility for RE#2 inside of RE#1 so that the Group Datasource is always visible when either RE#2 is visible or the ‘content_container’ of RE#1 is visible.
I was just hoping there might have been a way to run some script to force it to update without it being required to be visible.