# Create Mobile UI

This section explains how to create the **Mobile User Interface** for the Workforce App using **ONEWEB Page Designer**.\
The sample Mobile UI consists of **two pages**:

* **Page 1: Home Page (Static Page)**
* **Page 2: Benefit Page (Dynamic Page)**

These pages will later be integrated with Microflow services to display dynamic data at runtime.

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FqrAIW3iHMEI71nW9EO6o%252Fimage.png%3Falt%3Dmedia%26token%3D63a25414-0846-4780-bbcd-409d3ae0a439&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=83dceedd&#x26;sv=2" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Sample Mobile UI Overview</em></p>

***

### Objective

After completing this section, you will be able to:

* Create a **Mobile Application** in ONEWEB AppSpace
* Design static and dynamic mobile pages using Page Designer
* Build layouts using containers, grids, icons, labels, and images
* Configure page navigation
* Test the mobile UI using browser and PlayMe emulator

***

### Step 1: Create Mobile Application

1. Log in to the **ONEWEB platform**
2. You are redirected to **ONEWEB AppSpace**
3. Click **Create New App**
4. Configure the application:
   * **Platform**: Mobile
   * **App Name**: `WorkForce_[yourUserName]`
   * **Abbreviation**: `DemoBy[yourUserName]`
   * **Namespace**: `com.team.[applicationname]`
   * Description: Optional
5. Click **Start Develop**

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FhH8QL3JkgQVK68kHi6Cs%252Fimage.png%3Falt%3Dmedia%26token%3D4a6f7a46-fc3d-48c7-a862-23c0c9043fc6&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=67a10890&#x26;sv=2" alt=""><figcaption></figcaption></figure>

The application now appears in the application list.

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FK3SAqiLCuHCj3kuMYCqi%252Fimage.png%3Falt%3Dmedia%26token%3D150ed166-4c59-4502-a931-dbb0dfe38f54&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=b798562e&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

### Page 1: Create Home Page (Static Page)

#### Step 2: Create Home Page

1. Open your application
2. Click **Create Pages**
3. Page Name: **HomePage**
4. Click **Start Design**

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252F4nVaHHcNIaFGGPXoWmIh%252Fimage.png%3Falt%3Dmedia%26token%3Df97ece54-ac70-4580-8fa0-4c3ede5c0446&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=8ba67a25&#x26;sv=2" alt=""><figcaption></figcaption></figure>

> Note: Use the **Edit** icon to open existing pages.

***

#### Step 3: Create Header Toolbar

1. Add a **Container** (Mobile panel)
2. Set:
   * Height: `65px`
   * Background: `rgba(39,61,106,1)`
3. Drag a **Grid** inside the container
4. Create **1 row, 3 columns**

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FEvxUwKfy5DdnepoWwZTz%252Fimage.png%3Falt%3Dmedia%26token%3D0a3bc218-8712-410a-aed9-77d07403f59a&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=118fb042&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

#### Step 4: Add Toolbar Icons and Title

**Column C1 – Menu Icon**

* Icon: `ion-android-menu`
* Size: `32px`
* Color: White
* Padding: Top 14, Left 5

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FJMCGqSo1qj1jbOLN30k6%252Fimage.png%3Falt%3Dmedia%26token%3Dbc2e4d7f-43e7-4f9f-87b3-bdd948915b55&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=333a29e3&#x26;sv=2" alt=""><figcaption></figcaption></figure>

**Column C2 – Title**

* Paragraph text: **Alworks**
* Font size: `20px`
* Alignment: Center

**Column C3 – Notification Icon**

* Icon: `ion-android-notifications-none`
* Size: `32px`
* Color: White
* Padding: Top 14, Right 5

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FGiR9fg3LRTMpiBK2dau3%252Fimage.png%3Falt%3Dmedia%26token%3D6088b9ac-e012-4ad2-b556-77a57fe06c93&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=1416ae12&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

#### Step 5: Upload Required Images

Download all required images from:\
Link: <https://tinyurl.com/y3gzfqud>

***

#### Step 6: Add Banner and Headings

1. Add a **Container**
2. Height: `290px`
3. Background Image: **Easywork.jpg**
4. Add **Heading**:
   * Text: *Easy Work*
   * Size: `20px`
   * Color: White
   * Padding: Top 170, Left 15

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FkVagxg468ZeQX1drqzGz%252Fimage.png%3Falt%3Dmedia%26token%3Dba5d98e3-001e-4a6b-bead-d61ff4156652&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=725a28db&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Add **Label** below:

* Text: *for Happy Life*
* Size: `16px`
* Color: White

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FyDj7SVeHy0HVB8zcqNm6%252Fimage.png%3Falt%3Dmedia%26token%3D4f0b2b15-b600-4f2c-84d5-fbf5e4f610bf&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=7b67f9f5&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

#### Step 7: Add Feature Icon Grid

1. Add a container
2. Insert Grid
3. Create **5 columns**
4. Add icons and labels:
   * Clock
   * Work
   * Benefits
   * Calendar
   * Shopping

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FQ8VtLbfHjnGpz6jdCVDs%252Fimage.png%3Falt%3Dmedia%26token%3Dbbf8ec03-cf51-40cb-997b-6b48ed7518d2&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=8f2ecacc&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

#### Step 8: Add Promotion Section

1. Add paragraph: **Promotion for employee**
2. Add image: **promo1.jpg**
3. Create container → grid (2 columns)
4. Add:
   * Text: *Buy 1 and get 1 for employee*
   * Heart icon with label

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252F7afs08OIRscdvhUB2RiM%252Fimage.png%3Falt%3Dmedia%26token%3D3791b6a7-cb87-48e4-b6a8-a2f112ce764b&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=f25f0a86&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Duplicate components to create Promotion 2.

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FlSLSKAoZwHgs3fVwn9bI%252Fimage.png%3Falt%3Dmedia%26token%3D4116b833-9067-40d6-b1ff-a80088414107&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=6627697&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Set **HomePage** as default homepage.

***

#### Step 9: Build and Test Home Page

1. Click **PlayMe**
2. Access generated URL
3. Review UI in browser

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FqCnY4hS6R7okqZAQCxOJ%252Fimage.png%3Falt%3Dmedia%26token%3D8c7dd456-caaa-45a6-aaa5-109eddce6a04&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=19d18539&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

### Page 2: Create Benefit Page (Dynamic Page)

#### Step 10: Create Benefit Page

* Page Name: **Benefit**
* Template: Blank
* Click **Start Design**

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FZVFAvFUr5ZgSX0pwWVNJ%252Fimage.png%3Falt%3Dmedia%26token%3D11b9839c-994f-4db0-97ec-01a7be5ab1d3&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=c71b632f&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

#### Step 11: Enable Toolbar and Layout

* Enable Toolbar + Back Button
* Title: **Benefits**
* Add background image **travelling.jpg**

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FrZOKWBtkVopUcS214t7b%252Fimage.png%3Falt%3Dmedia%26token%3D511080c2-a985-4c1e-b9b1-175e6978794d&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=7fe95cf0&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

#### Step 12: Create Card Layout

1. Set page background: `rgba(39,61,106,1)`
2. Add paragraph: **Recent Activity**
3. Add Card
4. Insert Grid (4 columns)

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FjmUXtfUdPl4TB9Fo0FIy%252Fimage.png%3Falt%3Dmedia%26token%3D5e2fb088-6454-4ee5-a603-2794dd01364c&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=3266eda6&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Add labels & headings for DATE, PROJECT, TYPE, AMOUNT

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FFGF40NHSWEayguim5yL6%252Fimage.png%3Falt%3Dmedia%26token%3D3185a659-210c-439b-aa82-9bd63d33d511&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=21e96c4d&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

#### Step 13: Link Pages

1. Open **HomePage**
2. Select Benefit icon
3. Configure navigation to **Benefit Page**

<figure><img src="https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FALe7AY7379MMN1txvNZD%252Fimage.png%3Falt%3Dmedia%26token%3Da772655a-15a0-4314-b822-8de244a9375d&#x26;width=768&#x26;dpr=1&#x26;quality=100&#x26;sign=4cf00ee1&#x26;sv=2" alt=""><figcaption></figcaption></figure>

***

### Summary

You have successfully:

* Created a mobile application
* Designed Home Page (static UI)
* Designed Benefit Page (dynamic UI)
* Built layouts with Page Designer
* Linked pages together

In the next section, you will **integrate the Benefit Page with Microflow** to display real‑time data dynamically.


---

# 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/workforce-app-mobile/create-mobile-ui.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.