Forum Academy Marketplace Showcase Pricing Features

New FREE Template - Just a bunch of CRUD!

Hey all,

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…

Some things to note:

  • 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.

Comments / feedback welcome.

-Steve

3 Likes

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.

Questions / feedback welcome.

-Steve

If you acquired this template…

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…