# Edit Drawer

## Overview

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.

## Structure

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 ](https://docs.airdev.co/canvas/5.1/canvas-library/popups/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](https://docs.airdev.co/canvas/5.1/canvas-library/updating-asset-rg-data-source).
* Hide and collapse any elements or groups you do not need.
* Update the edit tab by following our documentation [here](https://docs.airdev.co/canvas/5.1/canvas-library/popups/advanced-form-popup).
* Add workflow(s) to **Button Save changes** to save the values in your edit form.