Bubble Best Practices

Details and Comments Drawer

Use this drawer to display information and leave comments

Overview

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

Structure

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.

PreviousMap Location Details DrawerNextConfirmation Popup