# Details and Comments Drawer

## 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](https://docs.airdev.co/canvas/canvas-library/updating-asset-rg-data-source).
* Hide and collapse any elements or groups you do not need.
* Update the Messages/Comments tab by following our documentation [here](https://docs.airdev.co/canvas/page-templates/chat-messenger-page#how-to-set-up) for the iMessage setup instructions.