# App Designer

This section introduces how to use **App Designer** to create the **user interface screens** for the **Leave Control App**.

App Designer is responsible for designing all **user‑facing screens** that allow employees to create leave requests and approvers to review and process those requests. These screens are tightly integrated with the **workflow defined in Process Designer**, ensuring that user actions and process execution are fully connected.

***

### Purpose of App Designer in Leave Control App

In the Leave Control App, App Designer is used to:

* Build screens for **leave request creation**
* Display leave details for review and approval
* Support different user roles such as requester and approver
* Capture and validate user input
* Trigger workflow actions using Process Buttons

App Designer focuses on **how users interact with the system**, while Process Designer focuses on **how requests flow through the organization**.

***

### App Designer Usage in Leave Control App

Using App Designer, you will design screens that support the leave request lifecycle, including:

* A screen for submitting leave requests
* Screens for reviewing leave details
* Screens used by approvers to make decisions
* Navigation between related data using tabs and dependencies

Each screen is mapped to database tables prepared earlier and interacts directly with the process workflow.

***

### ONEWEB App Designer Features Used

The Leave Control App demonstrates the following App Designer features:

* **Normal Input Fields**\
  Used to enter leave information such as dates, reasons, and remarks.
* **Dynamic List Fields**\
  Used for selectable values such as leave types or predefined options.
* **Dependency Tabs**\
  Used to group related information and display additional details based on context.
* **Process Buttons**\
  Used to submit leave requests or complete approval tasks, directly triggering Process Designer workflows.

These features work together to create intuitive and process‑aware application screens.

***

### Relationship Between App Designer and Process Designer

In the Leave Control App:

* **App Designer** handles:
  * Screen layout and field configuration
  * Data input and display
  * User interactions and validations
* **Process Designer** handles:
  * Workflow routing
  * Task assignment
  * Approval logic and parallel processing

App Designer screens become active at specific points in the workflow when human activities are reached.

***

### What You Will Learn in This Section

In the following sub‑sections, you will learn how to:

* Create entities for leave request screens
* Design input and review forms using App Designer
* Configure tabs and dynamic fields
* Link App Designer screens with workflow actions

Each example will build the UI layer required to support the Leave Control workflow.

***

### Summary

The **App Designer** plays a key role in building the **Leave Control App**, providing the screens that users interact with throughout the leave request process.

By combining App Designer with Process Designer, the Leave Control App becomes a **complete, process‑driven application**, supporting both data management and approval workflows.

In the next sections, you will begin creating the **Leave Control App screens step‑by‑step** using 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/tutorials-examples/leave-control-app/app-designer.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.
