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"
                }
            ]
        }
    ]
}