# App Designer

In this section, you will learn how to use **App Designer** to create the **web application screens** for the **Order Management App**.

App Designer is used to design all **user‑facing screens**, including data entry forms, review screens, and work queues that support the order request lifecycle. These screens are tightly integrated with the **Process Flow** and **Business Logic** created using Process Designer and Microflow Designer.

***

### Purpose of the App Designer Section

By completing this section, you will understand how to:

* Build **web‑based order request screens**
* Capture and display order and item information
* Support different user roles (Requester, BackOffice, Approver, Admin)
* Integrate UI screens with backend workflows and data
* Design scalable and maintainable enterprise UI using ONEWEB App Designer

***

### Overview of Order Management Screens

The Order Management App consists of multiple screens designed for different responsibilities and stages of the order process.

The following screens will be created using **App Designer**.

***

#### Create Order Request Screen

This screen is used by end users to:

* Submit a new order request
* Select project, request type, and hardware category
* Enter request details and remarks

This is the **starting point** of the order management workflow.

***

#### Create Order Item Screen

This screen allows users to:

* Add individual hardware items to an order request
* Specify quantities, specifications, and remarks
* Build a complete order before submission

Each order request may contain **multiple order items**.

***

#### Order Request Screen for BackOffice

This screen is used by the **BackOffice team** to:

* Review incoming order requests
* Validate request details
* Prepare supplier‑related information
* Perform internal processing before approval

This screen typically works in conjunction with **work queues**.

***

#### Order Item Screen for BackOffice

This screen focuses on:

* Managing item‑level details for an order
* Recording supplier information and pricing
* Preparing data for approval or further processing

It supports deeper operational handling at the item level.

***

#### Order Request Screen for Approval

This screen is designed for **approvers** (e.g. Supervisor, Head, HR, Authorization roles) to:

* Review request summaries
* Approve or reject order requests
* Provide remarks and decisions

Approval logic is controlled by the **Process Flow**, while App Designer handles presentation and interaction.

***

#### Order Item Screen for Approval

This screen allows approvers to:

* Review individual order items
* Evaluate pricing, quantities, and remarks
* Make item‑level decisions if required

It provides detailed visibility into the contents of an order during approval.

***

#### Order Request Screen for Admin PO

This screen is used by **Admin or Purchase Order (PO)** roles to:

* Review approved requests
* Finalize purchase processing
* Manage supplier and ordering actions
* Complete the order lifecycle

This screen typically represents the **final stage** of the process.

***

### Relationship Between App Designer and Process Designer

In the Order Management App:

* **App Designer** handles:
  * Screen layout
  * Data input and display
  * Navigation and work queues
* **Process Designer** handles:
  * Workflow orchestration
  * Approval logic
  * Role‑based task routing

The two designers work together to deliver a complete, end‑to‑end enterprise application.

***

### Summary

In this section, you are introduced to how **App Designer** is used to build the **web UI layer** of the Order Management App.

You will design screens for:

* Order creation
* Item management
* BackOffice processing
* Approval workflows
* Admin PO operations

In the following sections, each screen listed above will be **designed step‑by‑step**, showing how to configure fields, bind data, and integrate with the underlying process flow.


---

# 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/tutorials-examples/order-management-app-web/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.