> For the complete documentation index, see [llms.txt](https://docs.api.intratool.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.api.intratool.de/api-reference/layouts/layout-column-layout-elements.md).

# LayoutColumnLayoutElements

## Introduction

After defining a [Layout](/api-reference/layouts/layouts.md) with [LayoutRows](/api-reference/layouts/layout-rows.md) and [LayoutColumns](/api-reference/layouts/layout-columns.md) you probably want to add items to the defined [LayoutColumns](/api-reference/layouts/layout-columns.md).

The layout system is capable of managing different entity types in one [LayoutColumns](/api-reference/layouts/layout-columns.md). Information about `LayoutElements` that should be displayed on a [LayoutColumns](/api-reference/layouts/layout-columns.md) is managed by the `LayoutColumnLayoutElements` intermediate model.

To access information of this intermediate model such as the `sort_number`, you should make use of the `pivot` information that will always be returned when including the `layoutElements` relation described in [LayoutColumns](/api-reference/layouts/layout-columns.md) or the `layoutColumns` relation on `LayoutElements`. You can find the available entity types that can be attached to a [LayoutColumn](/api-reference/layouts/layout-columns.md) below.

## Model Definition

### Relations

| Key             | Relation                                                 | Type       | Relation Field(s)                          |
| --------------- | -------------------------------------------------------- | ---------- | ------------------------------------------ |
| `layoutColumn`  | [LayoutColumn](/api-reference/layouts/layout-columns.md) | Belongs to | `layout_column_id`                         |
| `layoutElement` | `LayoutElement`                                          | Morph to   | `layout_element_type`, `layout_element_id` |

### LayoutElement types

* `formField` ([FormField](/api-reference/forms/form-fields.md))

{% hint style="warning" %}
`LayoutElement` types are keys for different entities existing in our system. Every `LayoutElement` type listed here has itself a relationship to [LayoutColumns](/api-reference/layouts/layout-columns.md) which can be accessed with the key `layoutColumns`.

When retrieving such a relation (internally utilizing this intermediate model), there will always be a `pivot` object attached holding the information described in this section.

You can use the pivot information for sorting and such.

Affected entities are marked with the trait `LayoutElement`.
{% endhint %}

### Traits

* `Sortable`
* `SoftDeletes`

## Attach

Attaches a `LayoutElement` to a [LayoutColumn](/api-reference/layouts/layout-columns.md) and returns all [LayoutColumns](/api-reference/layouts/layout-columns.md) the given Element is related to after.

**Definition**

<mark style="color:yellow;">`POST`</mark> `/api/layouts/elements/columns/attach`

**Request Keys**

| Key                      | Type    | Default            | Description                                                                                                          |
| ------------------------ | ------- | ------------------ | -------------------------------------------------------------------------------------------------------------------- |
| `layout_element_type` \* | string  | `null`             | The title for the layout                                                                                             |
| `layout_element_id`\*    | string  | -                  | Layoutable type (see above)                                                                                          |
| `layout_column_ids`\*    | array   | -                  | Layoutable ID (see above)                                                                                            |
| `sort_number`            | integer | Current highest +1 | The index of the `LayoutElementLayoutColumn` related to the [LayoutColumn](/api-reference/layouts/layout-columns.md) |

Keys with `*` are required.

**Example Request**

{% tabs %}
{% tab title="PHP" %}

```php
$client = new GuzzleHttp\Client(['base_uri' => 'https://{tenant}.intratool.de']);
$response = $client->request('POST', '/api/layouts/elements/columns/attach', [
    'headers' => ['Authorization' => "Bearer {accessToken}"],
    'json' => [
        "layout_element_type": "formField",
        'layout_element_id' => 1,
        'layout_column_ids': [1]
    ]
]);
```

{% endtab %}
{% endtabs %}

**Example Response**

```json
[
  {
    "id": 1,
    "title": null,
    "layout_row_id": 1,
    "width": 6,
    "sort_number": 1,
    "created_at": "2021-10-25 19:07:59",
    "updated_at": "2021-10-25 19:07:59",
    "deleted_at": null,
    "pivot": {
      "layout_element_id": 1,
      "layout_column_id": 1,
      "layout_element_type": "formField",
      "created_at": "2023-04-17 21:23:07",
      "updated_at": "2023-04-17 21:23:07",
      "id": 2,
      "sort_number": 1
    }
  },
  {
    "id": 2,
    "title": null,
    "layout_row_id": 2,
    "width": 6,
    "sort_number": 2,
    "created_at": "2021-10-25 19:07:59",
    "updated_at": "2021-10-25 19:07:59",
    "deleted_at": null,
    "pivot": {
      "layout_element_id": 1,
      "layout_column_id": 2,
      "layout_element_type": "formField",
      "created_at": "2023-04-28 14:14:04",
      "updated_at": "2023-04-28 14:14:04",
      "id": 104,
      "sort_number": 1
    }
  }
]
```

## Sync

Attaches the given `LayoutElement` to many [LayoutColumns](/api-reference/layouts/layout-columns.md) and detaches the element from any [LayoutColumn](/api-reference/layouts/layout-columns.md) that is not posted.

**Definition**

<mark style="color:yellow;">`POST`</mark> `/api/layouts/elements/columns/sync`

| Key                      | Type    | Default            | Description                                                                                                           |
| ------------------------ | ------- | ------------------ | --------------------------------------------------------------------------------------------------------------------- |
| `layout_element_type` \* | string  | `null`             | The title for the layout.                                                                                             |
| `layout_element_id`\*    | string  | -                  | Layoutable type (see above).                                                                                          |
| `layout_column_ids`\*    | array   | -                  | Layoutable ID (see above).                                                                                            |
| `sort_number`            | integer | Current highest +1 | The index of the `LayoutElementLayoutColumn` related to the [LayoutColumn](/api-reference/layouts/layout-columns.md). |

**Example Request**

{% tabs %}
{% tab title="PHP" %}

```php
$client = new GuzzleHttp\Client(['base_uri' => 'https://{tenant}.intratool.de']);
$response = $client->request('POST', '/api/layouts/elements/columns/sync', [
    'headers' => ['Authorization' => "Bearer {accessToken}"],
    'json' => [
        "layout_element_type": "formField",
        'layout_element_id' => 1,
        'layout_column_ids': [1]
    ]
]);
```

{% endtab %}
{% endtabs %}

**Example Response**

```json
[
  {
    "id": 1,
    "title": null,
    "layout_row_id": 1,
    "width": 12,
    "sort_number": 1,
    "created_at": "2021-10-25 19:07:59",
    "updated_at": "2021-10-25 19:07:59",
    "deleted_at": null,
    "pivot": {
      "layout_element_id": 1,
      "layout_column_id": 1,
      "layout_element_type": "formField",
      "created_at": "2023-04-28 14:16:16",
      "updated_at": "2023-04-28 14:16:16",
      "id": 105,
      "sort_number": 5
    }
  }
]
```

## Detach

Detaches a `LayoutElement` from a [LayoutColumn](/api-reference/layouts/layout-columns.md) and returns all [LayoutColumns](/api-reference/layouts/layout-columns.md) the given Element is related to after.

**Definition**

<mark style="color:yellow;">`POST`</mark> `/api/layouts/elements/columns/detach`

**Request Keys**

| Key                     | Type    | Default            | Description                                                                                                           |
| ----------------------- | ------- | ------------------ | --------------------------------------------------------------------------------------------------------------------- |
| `layout_element_type`\* | string  | `null`             | The title for the layout.                                                                                             |
| `layout_element_id`\*   | string  | -                  | Layoutable type (see above).                                                                                          |
| `layout_column_ids`\*   | array   | -                  | Layoutable ID (see above).                                                                                            |
| `sort_number`           | integer | Current highest +1 | The index of the `LayoutElementLayoutColumn` related to the [LayoutColumn](/api-reference/layouts/layout-columns.md). |

Keys with `*` are required.

**Example Request**

{% tabs %}
{% tab title="PHP" %}

```php
$client = new GuzzleHttp\Client(['base_uri' => 'https://{tenant}.intratool.de']);
$response = $client->request('POST', '/api/layouts/elements/columns/detach', [
    'headers' => ['Authorization' => "Bearer {accessToken}"],
    'json' => [
        "layout_element_type" => "formField",
        "layout_element_id" => 1,
        "layout_column_ids" => [1]
    ]
]);
```

{% endtab %}
{% endtabs %}

**Example Response**

```json
[]
```