Exercise: Test UI

This example describes how to create a new UI for managing contents of the new Test state.

Create a New UI

Open the UI screen from your Design app. Unless you've modified your implementation, this screen is located at https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/ui. Click on 'Create New' button to create a new UI entry.

UI Editor

Configure UI & Lister

Set ID of the new UI as 'test', which will be used to define the URL path for accessing this new UI. Set name, status, id & name field values and switch 'Customizable ID' field as true.

Test UI Configuration

On the 'Lister' tab, select 'Menu' lister and enter a lister title, which will list all test entries on a simple navigation list.

Test Lister Configuration

Add Editors

Switch to 'Tabs' tab, add a new tab named 'Definition' and add a new grid to this tab.

Test Tab & Grid

Click on 'Add' button to add the following new editor to this grid:

Name Editor

'Apply' and click on 'Save' button to create the simple UI.

Created Test UI

Create a New Source

Open the Source screen from your Design app. Unless you've modified your implementation, this screen is located at https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/source. Click on 'Create New' button to create a new Source entry.

Test Source

You can also open 'dummy' source and select 'Duplicate' from its action menu to quickly create a replica and edit as well.

Add to Training App

Open the App screen from your Design app. Unless you've modified your implementation, this screen is located at https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/app. Select already available 'Training' app and add a new menu entry for the 'Test' UI.

Test Menu

Test Your UI

Navigating to [UI_SERVER]/app/train, you can now see your new UI in action.