# Control

### Control types

Two categories of controls are available: 

* **Basic**
* **Advanced**.

Basic controls are comparable to simple HTML inputs, such as checkboxes.

Advanced controls are more like mini-applications with specific goals. For example, they could display a list of Entra-ID users or groups as the first step in a Flow.

Both types are implemented on the front-end using [react-jsonschema-form](https://rjsf-team.github.io/react-jsonschema-form/docs/).

### Structure of control configuration

All controls follow the same structure:

```json
{
    "type": "<controlType>",
    "id": "<controlId>",
    "config": {
        "required": true,
        "read_only": false
    },
    "data": "<data>",
    "ui": {},
    "schema": {}
}
```

**type:** Defines what control to be used.

**id:** Unique identifier to the current flow. In subsequent pipe calls the id is sent to the pipe along with value(s) from the control and accessed in the piped using {{request.\<id>}}

**config:** Block of control-specific configuration. Se each control for appropriate values.&#x20;

**data:** Value to be injected in control.&#x20;

**ui:**  Any additional ui-related data sent to frontend, unfiltered. See <https://rjsf-team.github.io/react-jsonschema-form/> UISchema for more information. Typically this is used for layout management.

**schema:** Any additional control-related data not available in current control implementation.

### Binding data to a control

Data binding is typically done using "**data"** configuration for a control. Most likely date is set by using some template *{{flow\.givenName}}.*

{% hint style="info" %}
Not all controls rely on ***data***. Read documentation for appropriate control.
{% endhint %}