# UI Example

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](https://docs.rierino.com/design/user-interface/apps), [UIs](https://docs.rierino.com/design/user-interface/uis), and [API Mapping](https://docs.rierino.com/design/api-mapping) 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&#x26;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](https://docs.rierino.com/design/user-interface/uis/listers) 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&#x26;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&#x26;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&#x26;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&#x26;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 %}