Tasks

Organizing views, components and services in user journey

Overview

The User Interface Tasks are the main building block of the application user experience. The purpose of the task is to define and organize the rest of the app's building block together to present the desired user journey.

The developer can use special API's to "start" the specific task by the task's unique identifier. There must be at least one task in the app.

An app may have one or more tasks. Every task contains one or more steps.

Task anatomy

The diagram above outlines a simple task, which defines the flow and UI components to allow the app's user to see a list of Customers on the screen and be able to add new customers and modify them.

We have implemented views - Customer List and Customer presented as rectangles on the right side of the diagram.

The task defines 3 steps - CustomerListStep , AddCustomerStep, EditCustomerStep, where we consider that the first step in the task is CustomerListStep.

Task execution and navigation

When a task is started, the system will "run the first step - e.g. CustomerListStep. The CustomerListStep "points" to a view CustomerList, so the user will see the CustomerList view rendered on the screen.

Let's also assume that our CustomerView has 2 buttons besides the list of customers - Add and Edit. Add button click will instruct the system to transition over a route called add and click over button Edit will instruct the system to transition over a route called edit.

When the user clicks the Add button, the system will lookup for a route called "add" and it will see that the "add" route ( the green arrow) points to step called AddCustomerStep. The system will lookup for the view associated with the step and will render the Customer view on the screen. Now, the user will provide the customer details and will eventually click the SAVE button, which will instruct the system to navigate over a route called "confirm". The system will go back to the CustomerListStep.

Alternatively the user may click the Edit button from the CustomerListStep, which will navigate over the edit route and will display the Customer view again.

Task, step, route attributes

The developer can define a new task by creating a new file under the src/Tasks folder where the filename must end with the string task.json. Examples for task names: Customers.task.json Home.task.json SystemInfo.task.json

Each task has the following attributes:

Attribute

Type

Required

Description

id

string

yes

unique id of the task

steps

array

yes

holds the steps within the task. The first step is displayed on task launch

Every step within a Task's steps array has the following attributes:

Attribute

Type

Required

Description

id

string

yes

unique id of the step within the task

view

string

yes

relative path to the view to be rendered

routes

array

yes

holds the routes defining the possible navigation paths from this step

Each route within a step has the following attributes:

Attribute

Type

Required

Description

id

string

yes

unique id of the route within the step

target

string

no

one of the following: - name of a step within the view

- task: id of another task

validate

boolean

no

Default: false

indicates if the view's validate and commit methods will be called before the actual navigation takes place

preserveContext

boolean

no

Default: false true value will indicate that the task context must NOT be cleared and remain available for the next task

Task definition example

The Customers task shown in the diagram above can be defined as follows:

{
"id": "Customers",
"steps": [
{
"id": "CustomerListStep",
"view": "Views/CustomerList",
"routes": [
{
"id": "add",
"target": "AddCustomerStep"
"validate": true
},
{
"id": "edit",
"target": "EditCustomerStep",
"validate": true
}
]
},
{
"id": "AddCustomerStep",
"view": "Views/Customer",
"routes": [
{
"id": "cancel",
"target": "CustomerListStep"
},
{
"id": "confirm",
"target": "CustomerListStep",
"validate": true
}
]
},
{
"id": "EditCustomerStep",
"view": "Views/Customer",
"routes": [
{
"id": "cancel",
"target": "CustomerList"
},
{
"id": "confirm",
"validate": true,
"target": "CustomerList"
}
]
}
]
}