Details and Comments Drawer

Use this drawer to display information and leave comments


This details and comments drawer is ideal for apps where you need users to view details for a data type and allow them to leave messages or comments on that data type without leaving the current page (e.g., users collaborating on a project or a sales deal).


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

  • Group Inner title

    • This group includes a title and a description.

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

  • Group Inner tabs

    • Manage your drawer tabs here.

  • Group Info tab

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

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

  • Group Messages/Comments tab

    • This group includes an imessage chat/comment UI from our Chat Messenger Page. Users will be able to collaborate by sending messages and attachments.

      • The chat/comment UI will be in a reusable element called imessagecomments_template.

How to set up

  • On the current page, add a workflow to show the FloatingGroup Details and Comments 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 Details and Comments'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 Details and Comments.

  • Update any hardcoded values in the drawer to reference dynamic data values.

  • 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 Messages/Comments tab by following our documentation here for the iMessage setup instructions.