Edit Drawer

Use this drawer to display details with the option to edit the fields


This edit drawer is ideal for apps where you need users to view details for a data type and allow them to make edits to that data type without leaving the current page. A drawer UI would also be a better native mobile experience than a similar edit popup UI.


This block will be pasted into your app as FloatingGroup Edit Drawer that is right-justified and fits 100% to the current page's height. It will include the following:

  • Group Details tab

    • This group will include various placeholder fields that you can modify and edit.

    • Clicking on Group Inner close will close and hide the floating group.

    • Group Edit button_edit yes/no? controls the edit mode and will toggle between Group Details tab and Group Edit tab if the group's value is set to 'yes'.

    • RepeatingGroup uploaded files includes a placeholder UI for attachments. By default, the repeating group uses Bubble's Arbitrary text expression for demo purpose. Clicking on Link will open the attachment in a new tab.

    • RepeatingGroup images includes a placeholder UI for a list of images. This repeating group also uses the Arbitrary text expression for demo purpose.

  • Group Edit tab

    • This group will be visible when Group Edit button_edit yes/no?'s value is set to 'yes'.

    • For more details on the structure of this tab, please read our Advanced Form Popup documentation which has a similar setup.

How to set up

  • On the current page, add a workflow to show the FloatingGroup Edit Drawer. For example, you might want to click an entry or button in a data table to show the drawer.

    • You may also want to set the FloatingGroup Edit Drawer's type of content to an existing data type in your app (for example, a 'Project' data type). When an entry or button in a data table is clicked, in the same workflow you've added above, you'd also want to add a workflow to display the data in FloatingGroup Edit Drawer.

  • Update any hardcoded values in the drawer to reference dynamic data values (i.e., the data source you displayed in FloatingGroup Edit Drawer).

  • Update the repeating groups' data sources to reference your app's own data types. To learn more on how to change the data source, read our documentation on Arbitrary text here.

  • Hide and collapse any elements or groups you do not need.

  • Update the edit tab by following our documentation here.

  • Add workflow(s) to Button Save changes to save the values in your edit form.