Exercise: Create a UI Screen

This page lists an exercise for creating a minimal UI and source mapping for the /test CRUD endpoint.

This exercise creates a tiny admin UI for the test collection. It assumes you already created the backend CRUD endpoint in Exercise: Test State.

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.

1

Create a new UI

Open the UI screen from the Design app.

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

Click Create New.

UI Editor

2

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

3

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

4

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

5

Create a source mapping

Open the Source screen from the 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.

Fastest path is duplicating the existing dummy source. Then change any dummy path segments to test. Save as a new source.

6

Add it to the Training app menu

Open the App screen from the 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

7

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.

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.