# 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
[]
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.api.intratool.de/api-reference/layouts/layout-column-layout-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.