Drag/Drop to Create a New Record?

  • Note: my pasted image is a VERY rough outline to prove functionality.

I am creating an online community of sorts. When my members create a user profile, they will add their family members. I would like for the user to select an icon and then drag it to their “place” in the family. The image inside the purple draggable group then gets written to the database, so that the user’s family composition can be displayed on their profile on a different page.

I have read through other drag/drop tutorials, but they all seem to depend on dragging/dropping records that have already been created. I want to use drag/drop in the record creation process. Help?

image

1 Like

@calicass83,

Create a data type in your database to store all the family member options. So you can call it “Family Option” or something, with a field for the image and a field for the name (to identify). and you’d have 4 records (based off your screenshot)

Family Option

  • Picture (image)
  • Name (text)

Record 1: Dad
Record 2: Mom
Record 3: Daughter
Record 4: Son

Your Profile data type should have a field “Family Member” that is type Family Member so that you can link each profile to one of your FM records.

Set the type of content to the draggable group (purple) to Family Option.

Create a workflow: When draggable group is dropped on drop area (thing: Family Member) > Create a new Profile: Family Member = Current Workflow’s Family Option

Since each Profile has a link to a Family Member, which contains the image and also the name (and anything else), you’ll be able to display however you want from there.

Hope this helps!


Gaby at Coaching No Code Apps (formerly Coaching Bubble)

Courses & Products, Tutorials, Private Coaching, and High-level Development

Start Learning Today :mortar_board:

1 Like

Thanks Gabby! I think I’m almost there, but I have a few questions:

  1. How do I get the image to “stick” to the drop zone?
  2. Once I get the image to stick, how would I autobind the image to the drop zone?
  3. For some reason, the droppable item’s image and title are not saving to the database. I have included a link to my editor - would you be willing to take a look and see what I’m doing wrong?

https://bubble.io/page?type=page&name=employer_profile&id=newchristiancarenetwork&tab=tabs-1