The following app was created to demonstrate one approach to implementing a basic Master-Detail relationship in Bubble. It implements basic CRUD (Create, Retrieve, Update, Delete) operations for both the master and detail objects.
You might find it helpful if you’re coming from a more traditional development background and/or could use a hands-on example of one approach to implementing this common data relationship…
With Bubble, as with most programming languages, there’s nearly always more than one means to the same end; and the “best” way to implement something really depends on a number of factors related to the specific use case. There isn’t always a clear-cut right or wrong way to go about doing things. Performance and UX considerations come into play. This example is just a learning tool - not a proposed “best approach” to the UI.
A dropdown menu was originally to be used for Master selection, but I encountered a snag related to the Reset relevant inputs action. (Basically, Bubble was resetting the dropdown along with the entry form inputs, which resulted in an undesirable UX. There appears to be no way to target inputs for resetting.) Instead, I used a Group Focus, Repeating Group, and Text element to create a “fake” drop-down.
In a real-world application, Privacy Rules (data roles) would be used to enforce data access privileges. Privacy rules determine at the server level who can do what. This demo uses only client-side (browser) techniques to control access - such as preventing editing when the View or Delete buttons are clicked.
The color-coded workflows hold the DB interactions. The gray workflows are mostly UI-related. Also, the workflows are grouped into folders based on whether they pertain to the Master or Detail object. As you might already know, the workflow folders and hierarchy can be accessed by clicking the vertical divider…
Edit mode access is available for this app. It will also be released as a free template if you’d prefer your own copy. I’ll post here when it’s available in the marketplace.
I was overlooking the Reset a group/popup action, which eliminated the need for the Reset relevant inputs action and thus enabled a dropdown to be used after all.
The demo and the template have been updated with the following improvements:
A dropdown is now used to select the master item. This simplifies things by eliminating the elements and extra logic required for a “custom” UI element.
Both CRUD popups have been combined into a single unified popup with separate “views” (initially-hidden groups) for master and detail. Conditionals are used to show/hide the relevant UI elements as needed. This also simplifies things by eliminating some redundancy.
If you’ve already acquired the template, you can simply delete it and get the latest version.
When I get a chance, I’ll add some busy indicators for better user feedback during prolonged operations.
An edge case was discovered that would prevent entering master records on a fresh DB - i.e. if no master records exist in the DB. The solution is simple. Just disable field validation on the master selection dropdown…
This FREE template has been updated with some UX enhancements and a few other tweaks. The update was just approved by Bubble, so get it while it’s hot!
This is not a design template; rather, it provides a working example of a master-detail CRUD implementation and is intended as a learning tool (although it could certainly be used as the basis for an app).
It has the following features:
Master and detail CRUD (create, read, update, delete) via a single popup.
Prevents duplicate entry names.
Leverages option sets for better Bubble logic “readability” and fewer bugs.
Processes entries (example of how one might sanitize or validate entries).
Initially-hidden groups are used to for a more flexible approach and to promote reusability of elements.
Good use of conditionals to control appearance and functionality.
Leverages custom events to reduce redundant code
Minimalist design for easier maintenance and “lighter weight”.
The design is clean, lean, and mean. If you understand all aspects of this template, you’re well on your way to mastering Bubble.
