# Permissions popup

## Overview

A popup that includes a custom input dropdown UI to copy link to clipboard, a user search input, and a list of users, each with a permissions dropdown and toggle.

## Structure

This responsive popup consists of three main groups

* **dropdown\_copytoclipboard\_template**\
  This custom input dropdown includes UI for displaying a link, allowing the user to manage its visibility rule, and an icon button to copy the url input to your browser's clipboard.
* **Group Main invite user**\
  This group contains the input that searches users by name or email. We use a **Fuzzy Search & Autocomplete** plugin here for the search. For the fuzzy search to work, the *Search\&Autocorrect fuzzy search element* should always be visible on page load and **Input Invite user** should have an ID *input\_users\_invite* attribute. When Input invite user is not empty, **RepeatingGroup User list** will be filtered if the fuzzy search returns a match, otherwise **Group Inner empty state** will be shown. The user can click on **Group Clear input** to clear he value in **Input invite user**.
* **Group Main users list**\
  This group contains a **RepeatingGroup User list** for displaying users that have permissions. Each entry includes an image, a name, a hidden email, a **menufocus\_permissions\_template**, and a toggle.
  * In **menufocus\_permissions\_template**, it use a RepeatingGroup Dropdown to display a list of menu options. For demo purpose, we use Arbitrary Text as a data source. [Click here](https://docs.airdev.co/canvas/canvas-library/updating-asset-rg-data-source) to learn how to change the data source.

## How to set up

* Update the **Permissions Popup's** content type. For example, you might want to set the popup's content to a 'Project' data type. You'll need to trigger the popup from a button on the page and display a 'project' value in the popup.
* Go to **dropdown\_copytoclipboard\_template** reusable element and update any copy. Add workflows to when a dropdown option is clicked (e.g. setting the 'project's' link visibility to private when the private option is clicked). Change **Input URL's** value to a dynamic value.
* Update **Search\&Autocorrect fuzzy search's** search criteria.
* Update **RepeatingGroup User's** data source if needed.
* Add a workflow to **CanvasToggle share access**. For example, you might want to add a workflow like '*when CanvasToggle share access is changed, update parent group's user's access permission to yes'*.
* Go to **menufocus\_permissions\_template** and update **RepeatingGroup Dropdown's** data source. For example, you might want to use an option set here. Add an additional workflow to when *Group Option 1 is clicked, update menufocus\_permissions\_template user's permission* (you need to add this fields to whichever data type you are using).