# To-do List UI

This exercise builds the Admin UI on top of your to-do API. You will create an App entry, map the UI to the gateway endpoint with a Source, define a JSON Schema, and build a basic CRUD screen.

### Before you start

* You completed [To-do List Gateway](https://docs.rierino.com/examples/in-depth-exercise/to-do-list-gateway).
* The gateway endpoint works: `GET https://[YOUR_ADMIN_API_DOMAIN]/api/request/todo_crud/todo`.
* You can access the [Design](https://docs.rierino.com/design) app.
* You know your Admin UI base URL: `https://[YOUR_ADMIN_UI_DOMAIN]`.

### What you’ll build

* **App ID**: `example`
  * Menu path: `/common/todo`
* **Source ID**: `todo`
  * Default URL: `request/todo_crud/todo`
* **Schema ID**: `todo` (JSON Schema)
* **UI ID**: `todo`
  * Grouped lister by `data.project`
  * Editor fields: `data.name`, `data.project`

{% stepper %}
{% step %}

### Open the App screen

Open the [Apps](https://docs.rierino.com/design/user-interface/apps) screen from the Design app.

Unless you changed routing, the UI is at `https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/app`.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FeHI2va17XURB2z9iiTsf%2FTodo_UI_App.png?alt=media&#x26;token=6e301889-dd1c-4694-ad2f-d3ea99fdced9" alt=""><figcaption><p>App Screen</p></figcaption></figure>
{% endstep %}

{% step %}

### Create an App (example)

Click **CREATE NEW** and set the App ID:

* `example`

Fill in:

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2F7hQR1x1tNN5mS0bdrbR5%2FTodo_UI_App_Define.png?alt=media&#x26;token=fdbe1c70-c3cf-49fa-9779-781c49f654a0" alt=""><figcaption><p>App Definition Screen</p></figcaption></figure>

* **DEFINITION**
  * **App Name:** `Example`
  * **App Status:** `ACTIVE`
  * **Description (optional):** `Application dedicated to list of examples.`
  * **Home Image:** `/image/configuration.png`
  * **Home Title:** `Example Navigator`
  * **Home Description:** `Everything you need to manage your example services.`
* **MENUS**
  * **Label:** `Todo`
  * **Icon:** `rules`
  * **Path:** `/common/todo`

Save the App.

Open `https://[YOUR_ADMIN_UI_DOMAIN]/app/example` to verify:

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FWml3KQhWFImPHn1VvxQ7%2FTodo_UI_App_Home.png?alt=media&#x26;token=e5931e5a-0dcc-4bed-bcdf-6cb03ad237aa" alt=""><figcaption><p>Example App Home Page</p></figcaption></figure>
{% endstep %}

{% step %}

### Open the Source screen

Open the [Sources](https://docs.rierino.com/design/api-mapping) screen from the Design app.

Unless you changed routing, the UI is at `https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/source`.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FjN2iNTWIE9rpGiMPtGQH%2FTodo_UI_Source.png?alt=media&#x26;token=608106d9-3c04-4c8b-88a1-4bdef3bc8cf3" alt=""><figcaption><p>Source Screen</p></figcaption></figure>
{% endstep %}

{% step %}

### Create a Source (todo)

Click **CREATE NEW** and set the Source ID:

* `todo`

Set:

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FcyVLgsVz61hv8envG4Vo%2FTodo_UI_Source_Define.png?alt=media&#x26;token=62b3c165-66f8-4c98-9503-82eb63c28ae9" alt=""><figcaption><p>Source Definition Screen</p></figcaption></figure>

* **Source Name:** `Todo`
* **Source Status:** `ACTIVE`
* **Urls**
  * **Action:** `default`
  * **URL:** `request/todo_crud/todo`

This directs UI CRUD traffic to your gateway channel endpoint:

* `/api/request/todo_crud/todo`

{% hint style="info" %}
**Why do you need a Source?**

Sources decouple UI screens from physical endpoints. You can move services later without rewriting UIs.

Sources are also a control point. Without a Source, the platform treats CRUD access as disabled for UI.
{% endhint %}
{% endstep %}

{% step %}

### Open the Schema screen

Open the [Data Schema](https://docs.rierino.com/design/data-schema) screen from the Design app.

Unless you changed routing, the UI is at `https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/schema`.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2F7IaUNJivmZ4ajhbpst8z%2FTodo_UI_Schema.png?alt=media&#x26;token=0a027e11-b97e-40ec-bd65-3bf303aae24a" alt=""><figcaption><p>Schema Screen</p></figcaption></figure>
{% endstep %}

{% step %}

### Create a Schema (todo)

Click **CREATE NEW** and set the Schema ID:

* `todo`

Paste this JSON Schema and save:

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FB28eQL3kmlD59RipsHvk%2FTodo_UI_Schema_Define.png?alt=media&#x26;token=3354b849-8494-459d-8426-bcc6cb9ee771" alt=""><figcaption><p>Schema Definition Screen</p></figcaption></figure>

```json
{
  "title": "Todo",
  "description": "A todo definition",
  "type": "object",
  "properties": {
    "id": {
      "title": "Todo ID",
      "description": "The unique identifier for a todo",
      "type": "string",
      "readOnly": true
    },
    "data": {
      "title": "Todo Information",
      "description": "Properties of the todo",
      "type": "object",
      "properties": {
        "name": {
          "title": "Todo Name",
          "description": "Name of the todo",
          "type": "string"
        },
        "project": {
          "title": "Project",
          "description": "Related project for the todo",
          "type": "string"
        }
      }
    }
  }
}
```

Schema titles and descriptions populate UI labels. They also standardize your data model.

{% hint style="info" %}
Schema definitions follow JSON Schema. You can reuse them outside Rierino.
{% endhint %}
{% endstep %}

{% step %}

### Open the UI screen

Open the [UIs](https://docs.rierino.com/design/user-interface/uis) screen from the Design app.

Unless you changed routing, the UI is at `https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/ui`.
{% endstep %}

{% step %}

### Create a UI (todo)

Click **CREATE NEW** and set the UI ID:

* `todo`

Fill in:

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FsLaREUi9ETmN6rDLDieF%2FTodo_UI_UI_Define.png?alt=media&#x26;token=b5bb1c19-77fb-4e4f-a91a-e48ff5f233f7" alt=""><figcaption><p>UI Definition Screen</p></figcaption></figure>

* **DEFINITION**
  * **Name:** `Todo`
  * **Status:** `ACTIVE`
  * **Description (optional):** `UI design for todo list management`
  * **ID Field:** `id`
  * **Name Field:** `data.name`
* **LISTER**
  * **Lister:** `Grouped`
  * **Lister Title:** `Todo List`
  * **Group By:** `data.project`

Switch to **TABS** and build the editor:

1. Click **Add Tab**.
2. Set the tab label to `DEFINITION`.
3. Click **Add Grid**.
4. Click **Add** and set **Path** to `data.name`. Select **Text**.
5. Click **Add** and set **Path** to `data.project`. Select **Text**.

You should see:

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2Fw3SMKv2J0LCg5YuSnLf6%2FTodo_UI_UI_Tabs.png?alt=media&#x26;token=dd348bd8-7ced-4bdf-9306-74a94cb3d073" alt=""><figcaption><p>UI Tabs Screen</p></figcaption></figure>

Save the UI.

{% hint style="info" %}
**Why is UI separate from Schema?**

One Schema can power many UIs. This helps with permissions and team-specific views.

It also supports headless usage. Your APIs can work without UI definitions.
{% endhint %}
{% endstep %}

{% step %}

### Test the UI

Open your Example app:

* `https://[YOUR_ADMIN_UI_DOMAIN]/app/example`

Click the **Todo** menu entry.

You should be able to list, create, edit, and delete todos. Items should be grouped by `data.project`.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2F1oSvr0xGrbtfJNXz1gS8%2FTodo_UI_Test.png?alt=media&#x26;token=1715c2c0-8924-4291-ba45-837111e3887b" alt=""><figcaption><p>Todo Screen</p></figcaption></figure>
{% endstep %}
{% endstepper %}

### Next step

Add search support with [To-do List Query](https://docs.rierino.com/examples/in-depth-exercise/to-do-list-query).

### Troubleshooting

* **Todo menu does not show up**: confirm the App is `ACTIVE` and the menu path is `/common/todo`.
* **UI opens but list is empty**: create a record via the runner/gateway first, or confirm Mongo is reachable.
* **403/401 from the UI**: your gateway channel requires auth, or your session/token is missing required claims.
* **404 from the UI**: confirm Source URL is `request/todo_crud/todo` and the gateway channel ID is `todo_crud`.