To-do List UI

Open the App Screen

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.

Create an App

Next, you will create a new App, which will have its own home page and route in admin UI.

Click on "CREATE NEW" button on top of the menu lister and enter "example" to ID field. This ID will be used in the app URL path.

Enter the following details:

• DEFINITION

  • App Name: Example

  • App Status: ACTIVE

  • Description (optional): Application dedicated to list of examples.

  • Home Image: /image/configuration.png

  • Home Title: Example Navigator

  • Home Description: Everything you need to manage your example services.

• MENUS

  • Label: Todo

  • Icon: rules

  • Path: /common/todo

Save your new App and browse to https://[YOUR_ADMIN_UI_DOMAIN]/app/example. You should now see your new App home page as follows:

Create a Source

Click on the Source icon on navigation bar to switch to the Source screen on 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 on top of the menu lister of Source screen and provide the unique identifier "todo" and enter the following details as the source information:

• Source Name: Todo

• Source Status: ACTIVE

• Urls:

  • Action: default

  • URL: request/todo_crud/todo

These settings ensure that our UI requests for todo are directed to /api/request/todo_crud/todo endpoint we've created in previous sections.

Create a Data Schema

Click on the Schema icon on navigation bar to switch to the Schema screen on your Design app. Unless you've modified your implementation, this screen is located at https://[YOUR_ADMIN_UI_DOMAIN]/app/design/common/schema.

Click on "CREATE NEW" button on top of the menu lister of Schema screen and provide the unique identifier "todo" and enter the following details as the schema information:

{
	"title": "Todo",
	"description": "A todo definition",
	"type": "object",
	"properties": {
		"id": {
			"title": "Todo ID",
			"description": "The unique identifier for a todo",
			"type": "string",
			"readOnly": true
		},
		"data": {
			"title": "Todo Information",
			"description": "Properties of the todo",
			"type": "object",
			"properties": {
				"name": {
					"title": "Todo Name",
					"description": "Name of the todo",
					"type": "string"
				},
				"project": {
					"title": "Project",
					"description": "Related project for the todo",
					"type": "string"
				}
			}
		}
	}
}

After editing the definition, save your schema. Title and description information entered in this screen populate labels in UI screens.

Create the UI

Click on the UI icon on navigation bar to switch to the UI screen on 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 on top of the menu lister of UI screen and provide the unique identifier "todo" and enter the following details as the UI information:

• DEFINITION

  • Name: Todo

  • Status: ACTIVE

  • Description (optional): UI design for todo list management

  • ID Field: id

  • Name Field: data.name

• LISTER

  • Lister: Grouped

  • Lister Title: Todo List

  • Group By: data.project

Switch to the "TABS" tab and follow below steps:

1. Click on "Add Tab" to create a new tab.

2. Hover on the new tab label, click on edit icon and set tab label as "DEFINITION" on displayed dialog.

3. Click on "Add Grid" to create a new grid.

4. Click on "Add" to add a new field inside the grid.

5. Hover on the new field, click on edit icon and set its path to "data.name" and select "Text" widget for it on displayed dialog.

6. Click on "Add" to add another field inside the grid.

7. Hover on the new field, click on edit icon and set its path to "data.project" and select "Text" widget for it on displayed dialog.

Your screen should look like the following:

Save your UI design.

Test your UI

For testing your new UI, you can simply go back to your Example app (e.g. https://[YOUR_ADMIN_UI_DOMAIN]/app/example) and click on the Todo card. This should display the todo entry we've created in previous steps and allow you to add, edit and remove new todo items, grouped by projects.