# 2‑Layer Tab

The **2‑Layer Tab** design is used for **complex Smart Forms** where business data requires a **hierarchical tab structure** consisting of an **upper layer** and a **lower layer** of tabs.

This design helps break down long or complex forms into multiple logical pages, significantly improving **user experience and navigation clarity**.

***

### Purpose of 2‑Layer Tab

The 2‑Layer Tab is designed to:

* Organize complex forms into hierarchical sections
* Separate high‑level information from detailed sub‑sections
* Improve usability for forms with large amounts of data
* Support business scenarios with grouped or categorized data
* Reduce scrolling and visual clutter

Use 2‑Layer Tab when a **flat (Normal Tab)** structure is no longer sufficient.

***

### Tab Hierarchy in 2‑Layer Design

A 2‑Layer Tab consists of **two hierarchical levels**:

#### Upper Layer (Primary Tab)

* The topmost tab in the layout
* Always assigned the **Tab Description = `General`**
* **System‑defined** and **cannot be edited**
* Used to display general or high‑level information

#### Lower Layer (Secondary Tabs)

* Tabs displayed **under the General Tab**
* Consists of:
  * **Main Tab** (first tab in lower layer)
  * **Child Tabs** (subsequent tabs)

This structure creates a **parent–child tab relationship** within the Smart Form.

***

### 2‑Layer Tab Configuration

All configurable properties for 2‑Layer Tabs are available in the **Tab Configuration** panel.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F27DJXSeHeLtghRG7xKdr%2F0?alt=media" alt=""><figcaption></figcaption></figure>

#### 2‑Layer Tab Properties (Upper Layer – General Tab)

| Tab Item            | Mandatory | Description                                         |
| ------------------- | --------- | --------------------------------------------------- |
| **Tab ID**          | Yes       | System‑generated unique identifier                  |
| **Tab Description** | Yes       | Defaults to **General** and cannot be edited        |
| **Table Name**      | Yes       | User‑defined tab name based on business requirement |
| **TabType**         | Yes       | Indicates a 2‑Layer tab configuration               |

***

### Lower Layer Tabs (Main Tab & Child Tabs)

Within the 2‑Layer structure:

* The **first lower‑level tab** is always marked as **Main Tab**
* All additional lower‑level tabs are marked as **Child Tabs**
* Lower tabs are created by dragging **Normal Tabs** into the Entity under the General Tab
* Each lower tab can contain:
  * Modules
  * Fields
  * Buttons
  * Actions

***

### Example: 2‑Layer Tab Layout

#### Example Structure

* **General Tab** (Upper Layer)
  * **Main Tab:** RM Classification
  * **Child Tabs:**
    * Patient
    * Solution
    * Attachment

In this example:

* **Occurrence Information** is displayed as the **General Tab**
* Business‑specific sections are organized as lower‑level tabs

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F3ElzczZYgU7cohdqjSBh%2F1?alt=media" alt=""><figcaption></figcaption></figure>

***

### Facade Screen vs Configuration Screen

The following illustration shows how the 2‑Layer Tab design appears in:

* **Facade Screen (End‑User Experience)**
* **Configuration Screen (App Designer)**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fy1XkHzKxf8Gy8Hn4l0GL%2F2?alt=media" alt=""><figcaption></figcaption></figure>

This layout allows users to:

* Navigate between major sections easily
* Focus on one logical subset of data at a time
* Understand data hierarchy intuitively

***

### Best Practices for 2‑Layer Tab Design

* Use **2‑Layer Tabs** only when form complexity demands it
* Place **general or summary information** in the General Tab
* Use **Main Tab** for the most frequently accessed details
* Group related Child Tabs logically
* Avoid excessive nesting or too many Child Tabs
* Combine with **Tab Condition** for dynamic visibility control

***

### Normal Tab vs 2‑Layer Tab

| Aspect            | Normal Tab   | 2‑Layer Tab         |
| ----------------- | ------------ | ------------------- |
| Navigation Level  | Single       | Two‑Level           |
| Complexity        | Low–Medium   | Medium–High         |
| Best Use Case     | Simple forms | Complex forms       |
| Hierarchy Support | ❌ No         | ✅ Yes               |
| User Experience   | Simple       | Structured & Guided |

***

### Summary

The **2‑Layer Tab** design enables structured, hierarchical Smart Forms suitable for complex business requirements.

Key points:

* Supports upper and lower tab layers
* Upper tab is always **General Tab**
* Lower tabs consist of **Main Tab + Child Tabs**
* Improves usability for data‑heavy forms
* Ideal for enterprise‑grade applications

When used appropriately, 2‑Layer Tabs provide **clear structure, better usability, and scalable form design** in ONEWEB App Designer.


---

# 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.onewebstack.com/oneweb-platform-th/designer-reference/app-designer/entity/create-new-entity/tabs/2-layer-tab.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.