> For the complete documentation index, see [llms.txt](https://docs.rierino.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rierino.com/examples/training-examples/ui-example.md).

# UI Example

This page lists example UIs which can be viewed from UI and Source screens in Design app

This training UI is a small admin screen on top of the `dummy` data model. The data is served by the `train_crud` runner. It is a quick way to see how a UI, a source mapping, and a backend endpoint fit together.

You can browse the configuration in the Design app:

* **UIs**: the screen layout, lister, editors, and widgets.
* **Source**: the API endpoint mapping used by the UI.
* **Apps**: a minimal `training` app that exposes only this screen in its menu.

If you are new to UI building, skim [Apps](/design/user-interface/apps.md), [UIs](/design/user-interface/uis.md), and [API Mapping](/design/api-mapping.md) first.

### Record editor (tabs + widget types)

The record editor uses tabs to group fields. It combines a few common widget types. You can compare how each widget reads and writes values.

This example includes:

* a text editor for simple string fields
* a select editor backed by option values
* a Markdown editor for rich text
* a JSON editor for the full record payload

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FIo7Q3Eb50Qg7qZrE0lS8%2Fimage.png?alt=media&amp;token=6f99cfb3-11c4-4c29-adf4-791984779250" alt=""><figcaption><p>Tabs Example</p></figcaption></figure>

### Lister (columns + filters)

The list view uses a table lister. The visible columns are configured in the UI definition. The same goes for which filter inputs are available to users.

This is the part to copy when you want a “browse + search + click to edit” admin experience. See [Listers](/design/user-interface/uis/listers.md) for the available types and options.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FX2u5FndSGSbGkq7n4wlb%2Fimage.png?alt=media&amp;token=1b9643c8-9741-43cd-9701-f96841b2ecd9" alt=""><figcaption><p>Lister Example</p></figcaption></figure>

### Source mapping (CRUD via `train_crud/dummy`)

On the Source screen, the `train_crud/dummy` endpoint is set as the UI’s data source. This enables standard CRUD behavior without writing custom API calls per action. The UI can list records, open a record, create, update, and delete using the default method mappings.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FcKlePRKleCK5ZlTXbqtp%2Fimage.png?alt=media&amp;token=4870a352-3ebd-4843-ab01-d13c1882de5e" alt=""><figcaption><p>Source Example</p></figcaption></figure>

### App packaging (`training`)

A small `training` app is included as a container for the menu and navigation. It exposes only the `dummy` UI. This is the simplest pattern for shipping a focused admin experience to a specific user group.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2F7a4Tp2vWDYl0andwCqpc%2Fimage.png?alt=media&amp;token=a29eaf76-6fe6-42cf-aee2-d8694989ffdb" alt=""><figcaption><p>Training App Design</p></figcaption></figure>

### Run it

Navigate to `[{UI_SERVER}]/app/train` to open the app. You should see the lister first. From there you can filter, open a record, edit fields, and save changes.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FkZ1GnGtLrxhv7RfdgaNF%2Fimage.png?alt=media&amp;token=4a404596-7980-4cd9-847b-800773314450" alt=""><figcaption><p>Training App</p></figcaption></figure>

{% hint style="info" %}
If the screen is empty or CRUD operations fail, verify the `train_crud` runner and gateway route are reachable first. The UI is only a client. It depends on the backend endpoint.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.rierino.com/examples/training-examples/ui-example.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.