> For the complete documentation index, see [llms.txt](https://docs.jetadmin.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jetadmin.io/classic-app-builder/classic-tutorials/quickstart/set-the-layout.md).

# Build UI

Discover how to utilize components to build your app's user interface

Components are prebuilt UI elements your users engage in, such as `Tables`, `Forms`, `Buttons`. In this example, only a limited number of components are used; you can explore 50+ Components in the UI Component Library. Drag-and-drop components within **Layout** `Columns`, `Tabs`, and `Modals`, facilitating the building of your app.

You'll be building an app that enables the creation and updating of **Deals** data. To enable this functionality, you'll add `Table`, `Forms`, and `Modals`. Learn more about [Jet UI Concept](/classic-app-builder/design-and-structure/core-concept/jet-ui.md) in our documentation. Additionally, if you want to implement this functionality swiftly (Create, Update, Delete flow), you can generate it in seconds using [Page Templates](/classic-app-builder/classic-tutorials/ui-in-seconds.md).

### 1. Set the Layout

`Columns` are used to set the horizontal component of the layout. You can add multiple columns and resize them. 

{% @arcade/embed flowId="qqlSdR0LVUOSNZRMPOO4" url="<https://app.arcade.software/share/qqlSdR0LVUOSNZRMPOO4>" %}

### 2. Display Deals

When you select the **Table** component, the right panel automatically updates to display the properties of the component. Components come with a wide range of properties that you can configure. Properties are accessible from other components and queries, allowing for a more integrated and dynamic user interface experience.&#x20;

Click **Data Source** – **Jet Tables** and the **Deals** collection that you've created.

{% @arcade/embed flowId="jU26kc5IVQRR4HeOLBMj" url="<https://app.arcade.software/share/jU26kc5IVQRR4HeOLBMj>" %}

Modify the **Logo** column to have a circular frame and position it as the first column.

{% @arcade/embed flowId="2SmD0N6RcbanMEkUyAed" url="<https://app.arcade.software/share/2SmD0N6RcbanMEkUyAed>" %}

### 3. Bind your components

**Component Binding** allows the passing of values between components. In this case, we will bind the `Table` and `Filter` components, enabling users to filter Deals by criteria such as `Name`, `Priority`, and `Amount`.

{% @arcade/embed flowId="WeYMccrK3MnPjQeVxhCk" url="<https://app.arcade.software/share/WeYMccrK3MnPjQeVxhCk>" %}

### 4. Update Deal with a Form component <a href="#id-3-add-user-management-options-with-a-split-button-component" id="id-3-add-user-management-options-with-a-split-button-component"></a>

The final component to add is a Form component. This component will allow you to generate [Forms](/classic-app-builder/design-and-structure/components/form.md) automatically based on your Collections fields.

{% @arcade/embed flowId="CSycxxwLOkyFXhQrqax6" url="<https://app.arcade.software/share/CSycxxwLOkyFXhQrqax6>" %}

Every field in the Form is individually configurable: you can add or remove fields from the Form, alter the field type, rearrange the order of the fields, and change appearance.

{% @arcade/embed flowId="mEmk4at1wRPLQJIEsc7p" url="<https://app.arcade.software/share/mEmk4at1wRPLQJIEsc7p>" %}

To update a deal, the user must select the corresponding row in the Table. You can configure the first row to be selected by default in a `Table`. To do this, go to the Display tab in the `Table` properties and choose **Select the first row by default.**

{% @arcade/embed flowId="A9bZJki3hDolQGhFqDZu" url="<https://app.arcade.software/share/A9bZJki3hDolQGhFqDZu>" %}

{% content-ref url="/pages/nhWBWmKblyqZ86cq7ImS" %}
[Run Actions](/classic-app-builder/classic-tutorials/quickstart/run-actions.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.jetadmin.io/classic-app-builder/classic-tutorials/quickstart/set-the-layout.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.