# 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**.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FrG0IooE5FZOjzJfn7IJh%2Fimage.png?alt=media&#x26;token=62b929d0-5ddb-4f30-a161-fc3a8a320425" alt=""><figcaption><p>UI Editor</p></figcaption></figure>
{% 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.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FBMtHFSNA1XQOBzrVc19n%2Fimage.png?alt=media&#x26;token=df8d41e7-3d35-4f64-a8e8-9454600b2391" alt=""><figcaption><p>Test UI Configuration</p></figcaption></figure>
{% 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.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FnawJoM2tM7hPzKWEXCpO%2Fimage.png?alt=media&#x26;token=d00c0047-1247-4b69-859e-823da634155d" alt=""><figcaption><p>Test Lister Configuration</p></figcaption></figure>
{% endstep %}

{% step %}

### Add the editor

Open the **Tabs** tab.

Add a tab named `Definition`. Add a grid inside it.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2Fncyi4GSswJrkACMjySYP%2Fimage.png?alt=media&#x26;token=d5042c8c-0270-48a8-bf12-4931e6318d00" alt=""><figcaption><p>Test Tab &#x26; Grid</p></figcaption></figure>

Click **Add** and create the `name` editor shown below.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FOPp0kAQcMnIBtPecXDSC%2Fimage.png?alt=media&#x26;token=afa8561a-96c3-450d-96f6-ac8a4a501526" alt=""><figcaption><p>Name Editor</p></figcaption></figure>

Click **Apply**. Then click **Save**.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FMn8qxI8Nv8rNNnVItcO0%2Fimage.png?alt=media&#x26;token=8f6c2020-685f-49b4-be07-790331c2cd0c" alt=""><figcaption><p>Created Test UI</p></figcaption></figure>
{% 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**.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FCxtF5dmvse6hJ7H3IMjP%2Fimage.png?alt=media&#x26;token=4165986f-7e17-440d-bc77-a3e1a95ff7a7" alt=""><figcaption><p>Test Source</p></figcaption></figure>

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.

<figure><img src="https://1659095931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcnDk3J1AzTgg2NFrGPlh%2Fuploads%2FijvCeO3ypG35ObnUW5Im%2Fimage.png?alt=media&#x26;token=e438b6d8-8c5c-448b-b2cb-da9e360f3a79" alt=""><figcaption><p>Test Menu</p></figcaption></figure>
{% 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.