To-do List UI

Create an Admin app, Source mapping, JSON Schema, and UI layout so users can manage to-do items from the Rierino Admin 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.

• The gateway endpoint works: GET https://[YOUR_ADMIN_API_DOMAIN]/api/request/todo_crud/todo.

• You can access the 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

1

Open the App screen

Open the Apps screen from the Design app.

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

App Screen

2

Create an App (example)

Click CREATE NEW and set the App ID:

• example

Fill in:

App Definition Screen

• 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:

Example App Home Page

3

Open the Source screen

Open the Sources screen from the Design app.

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

Source Screen

4

Create a Source (todo)

Click CREATE NEW and set the Source ID:

• todo

Set:

Source Definition Screen

• 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

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.

5

Open the Schema screen

Open the Data Schema screen from the Design app.

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

Schema Screen

6

Create a Schema (todo)

Click CREATE NEW and set the Schema ID:

• todo

Paste this JSON Schema and save:

Schema Definition Screen

{
  "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.

Schema definitions follow JSON Schema. You can reuse them outside Rierino.

7

Open the UI screen

Open the UIs screen from the Design app.

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

8

Create a UI (todo)

Click CREATE NEW and set the UI ID:

• todo

Fill in:

UI Definition Screen

• 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:

UI Tabs Screen

Save the UI.

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.

9

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.

Todo Screen

Next step

Add search support with 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.