# Exercise: Create a UI Screen
This exercise creates a tiny admin UI for the `test` collection. It assumes you already created the backend CRUD endpoint in [Exercise: Test State](https://docs.rierino.com/examples/training-examples/exercise-create-a-crud-service).
### Before you start
* You can access the **Design** app.
* The `/test` CRUD endpoint exists under `train_crud`.
* You can reach the UI at `https://[YOUR_ADMIN_UI_DOMAIN]`.
### What you’ll build
* A new UI with ID `test`.
* A lister that shows test records.
* An editor with a single `name` field.
* A source mapping that points the UI to the `train_crud/test` endpoint.
* A menu entry under the `Training` app.
{% stepper %}
{% step %}
### Create a new UI
Open the [UI](https://docs.rierino.com/design/user-interface/uis) screen from the [Design](https://docs.rierino.com/design) app.
Unless you changed routing, the UI is at `https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/ui`.
Click **Create New**.
UI Editor
{% endstep %}
{% step %}
### Configure UI basics
Set the UI **ID** to `test`. This becomes the UI path segment.
Fill in name and status. Set the ID and name field mappings as shown.
Enable **Customizable ID**. This allows creating new records with custom IDs.
Test UI Configuration
{% endstep %}
{% step %}
### Configure the lister
Open the **Lister** tab.
Select the **Menu** lister. Set a title.
This lister type is simple. It works well for small datasets.
Test Lister Configuration
{% endstep %}
{% step %}
### Add the editor
Open the **Tabs** tab.
Add a tab named `Definition`. Add a grid inside it.
Test Tab & Grid
Click **Add** and create the `name` editor shown below.
Name Editor
Click **Apply**. Then click **Save**.
Created Test UI
{% endstep %}
{% step %}
### Create a source mapping
Open the **Source** screen from the [Design](https://docs.rierino.com/design) app.
Unless you changed routing, the UI is at `https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/source`.
Click **Create New**.
Test Source
Configure the source to target the `train_crud/test` endpoint. This is what connects your UI actions to CRUD calls.
{% hint style="info" %}
Fastest path is duplicating the existing `dummy` source. Then change any `dummy` path segments to `test`. Save as a new source.
{% endhint %}
{% endstep %}
{% step %}
### Add it to the Training app menu
Open the [App](https://docs.rierino.com/design/user-interface/apps) screen from the [Design](https://docs.rierino.com/design) app.
Unless you changed routing, the UI is at `https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/app`.
Select the existing **Training** app. Add a menu entry for the new `test` UI.
Test Menu
{% endstep %}
{% step %}
### Run it
Go to `[{UI_SERVER}]/app/train`.
Open the **Test** menu entry. Create a record. Save it.
You should see it appear in the lister afterwards.
{% endstep %}
{% endstepper %}
### Troubleshooting
* **Menu entry not visible**: confirm you edited the `Training` app. Save it.
* **Lister is empty after creating records**: confirm source points to `train_crud/test`.
* **Save fails**: confirm the backend `/test` endpoint exists. Retry after rebuild.
---
# 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.rierino.com/examples/training-examples/exercise-create-a-ui-screen.md?ask=
```
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.
