# Layout Types

Layouts let you customize how your data is displayed in three different places:

* [List layout](#h_01FSSM0NA5S95EGYRPR843DS7A)
* [Detail layout](#h_01FSSM0Z6MZZA8DNN30YP406BR)
* [Create layout](#h_01FSSM19TFPDCYT3T46Q5G0ZZW)

Each data table has an independent set of layouts, allowing you different layouts for each data table. Within each layout, you have different customization options. In our example, we'll be looking at the Open Positions page of our HR app.

## List Layout <a href="#h_01fssm0na5s95egyrpr843ds7a" id="h_01fssm0na5s95egyrpr843ds7a"></a>

By default, the List layout will show all rows in your data table. In the case of our HR app, the list view will show all open positions. All pages you open from the app menu are List layouts.

![Screenshot\_2022-05-17\_at\_11.48.58.png](https://support.stackerhq.com/hc/article_attachments/6285322407059/Screenshot_2022-05-17_at_11.48.58.png)

To edit a List layout:

1. Click the page you want to edit in the app menu
2. Click **Edit layout**

### List layout customization options

When you edit a List layout, you will be able to:

* [Filter records depending on a field value](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-filter)
* [Sort your list](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-sort)
* [Add a list header](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-header)
* [Set a cover image for each record](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-cover-image)
* [Set the display type](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types)
* [Enable inline filters](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-inline-filters)
* [Choose which fields will show, and what they will look like](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-field-options)
* [Add action buttons](https://docs.stackerhq.com/stacker-classic/customization/creating-buttons/action-buttons)

{% hint style="info" %}
**Tip**

You can have multiple List layouts for the same table. See the [multiple list layouts article](https://docs.stackerhq.com/stacker-classic/layout-types/list-display-types/list-options/list-duplicate-layout) for more information.
{% endhint %}

## Detail layout <a href="#h_01fssm0z6mzza8dnn30yp406br" id="h_01fssm0z6mzza8dnn30yp406br"></a>

You will see the Detail layout when you click a record in the List layout. In the List Layout example, the Detail layout shows one table row at a time. In our HR app, you would see all details of an open position in the Detail layout. The Detail layout will be identical for all records within the table.

![Screenshot\_2022-05-17\_at\_11.49.26.png](https://support.stackerhq.com/hc/article_attachments/6285322930323/Screenshot_2022-05-17_at_11.49.26.png)

To edit the Detail layout:

1. Click the page you want to edit in the app menu
2. Click any record in the List layout.
3. Click **Edit layout**

### Detail layout customization options

When you edit a Detail layout, you will be able to:

* [Set a Record header](https://docs.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-record-header)
* [Add Action buttons](https://docs.stackerhq.com/stacker-classic/customization/creating-buttons/action-buttons)
* [Add Tabs](https://docs.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-tabs)
* [Choose when to show fields using conditional visibility](https://docs.stackerhq.com/stacker-classic/permissions-and-security/conditional-visibility)
* [Choose which fields will show and what they will look like](https://docs.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-widgets/detail-fields-widget/detail-field-options)
* [Add Highlighted fields for extra emphasis](https://docs.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-widgets/detail-highlights-widget)
* [Display a pipeline with stages](https://docs.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-widgets/detail-pipeline-widget)
* [Show related records](https://docs.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-widgets/detail-related-record-list)
* [Add Embeds](https://docs.stackerhq.com/stacker-classic/layout-types/detail-layout/detail-widgets/detail-embed-widget/embedding-content-on-a-detail-page)

## Create layout <a href="#h_01fssm19tfpdcyt3t46q5g0zzw" id="h_01fssm19tfpdcyt3t46q5g0zzw"></a>

Create layout lets you control what your app users will see when they create a new record. In our HR app, we see the Create layout when we click the **Add new** button to add a new position.

![Screenshot\_2022-05-17\_at\_11.49.52.png](https://support.stackerhq.com/hc/article_attachments/6285277230483/Screenshot_2022-05-17_at_11.49.52.png)

To edit the Create layout:

1. Click the page you want to edit in the app menu
2. Click **Add new**.
3. Click **Edit layout**

### Create layout customization options

You can have only one Create layout per table. By default, you will only see fields that are visible in the Detail layout. If you want to change that, check the **Customize your create layout** in the Edit layout screen. You will then be able to:

* Choose which fields will show and what they will look like
* Choose when to show fields using conditional visibility

Check out a full list of Create Layout Customizations [here](https://docs.stackerhq.com/stacker-classic/layout-types/customize-the-form-layout).

{% hint style="info" %}
**Tip**

If you would like to prevent your users from adding new records, you can remove the add new button with permissions.&#x20;
{% endhint %}


---

# 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.stackerhq.com/stacker-classic/layout-types/layout-types.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.
