Process Timeline

Overview

A process timeline is a visual representation of a linear, multi-step process, such as a workflow.

The process timeline visually indicates the progress made on each step in the process. These steps are displayed horizontally, from left to right.

Each step in the process can be in one of 4 states:

• Incomplete: This step has not yet been completed.
• Complete: This step has been completed.
• Warning: This step is in a state that requires attention.
• Error: This step has failed.

Each step displays an icon indicating which of these 4 states the step is currently in.

Each step in the process can optionally display any number of sub-steps below the step, showing a history of events for the step. The last sub-step indicates the current status for this step and always displays directly below the step. Sub-steps before the last sub-step are hidden by default; the user can press a toggle button at the right of the process timeline to show and hide all sub-steps.

Each step and sub-step can optionally be clickable by the user. Clickable steps and sub-steps display with an underline.

While this pattern applies to linear processes, it is possible to indicate that some subsets of the steps in a process timeline can be performed b. A dashed box displays around concurrent steps. This functionality should be used sparingly.

Development

Web component development

Component reference

rui-process-timeline

Process timeline step object

Process timeline sub-step object

Implementation

Begin by importing the rui-process-timeline module into your application.

// import into app.module
import '@jha/rui-wc/components/rui-process-timeline/rui-process-timeline-imports';

Define the steps and sub-steps of the timeline using an array of step and sub-step objects in your controller. If one or more of the steps are clickable, create a handler to be called when those elements are clicked.

public processTimelineWireSteps = [];

public ngOnInit(): void {
    this.processTimelineWireSteps = [
        {
            name: 'New',
            status: 'complete',
            subSteps: [
                { text: 'Ready' }
            ],
            isClickable: true
        },
        {
            name: 'OFAC',
            status: 'complete',
            subSteps: [
                { text: 'OFAC Pending' },
                { text: 'OFAC Failed', isClickable: true, tooltip: 'The OFAC check failed due to incomplete data' },
                { text: 'OFAC Passed' }
            ],
            tooltip: 'The OFAC Review step is probably the most complex step in the process'
        },
        {
            name: 'Dual-Control Approval',
            status: 'complete',
            subSteps: [
                { text: 'Required' }
            ],
            isClickable: true
        },
        {
            name: 'Verified',
            status: 'warning',
            subSteps: [
                { text: 'Verified' }
            ]
        },
        {
            name: 'Initiated',
            status: 'error',
            subSteps: [
                { text: 'Initiated' }
            ]
        },
        {
            name: 'Process',
            status: 'incomplete'
        }
    ];
}

public stepClicked(e): void {
    console.log(e.detail);
}

Then add an instance of rui-process-timeline to your markup. Specify the titleText to be displayed above the timeline. Bind steps to the array of step objects and define an rui-click event handler to be called when steps or substeps are clicked.

<rui-process-timeline titleText="Wire Validation Status" [steps]="processTimelineWireSteps" (rui-click)="stepClicked($event);">
</rui-process-timeline>

Angular component development

Component reference

jha-process-timeline

JhaProcessTimelineStep

JhaProcessTimelineSubstep

Implementation

Begin by importing the JhaProcessTimelineModule module into your application.

// import into app.module
import { JhaProcessTimelineModule } from '@jha/jharesponsive';

@NgModule({
    imports: [
        ...
        JhaProcessTimelineModule,
        ...
    ]
})

export class AppModule(){}

Import the needed classes into your TypeScript.

import { JhaProcessTimelineStep } from '@jha/jharesponsive/jha-process-timeline/';
import { JhaProcessTimelineSubstep } from '@jha/jharesponsive/jha-process-timeline';
import { JhaProcessTimelineStepStatus } from '@jha/jharesponsive/jha-process-timeline';

Define the steps and substeps of the timeline using an array of JhaProcessTimelineStep and JhaProcessTimelineSubstep objects in your TypeScript. If one or more of the steps are clickable, create a method to be called when those elements are clicked.

public processTimelineWireSteps: JhaProcessTimelineStep[] = [];

public ngOnInit(): void {

    this.processTimelineWireSteps = [
        new JhaProcessTimelineStep('New', JhaProcessTimelineStepStatus.Complete, [
            new JhaProcessTimelineSubstep('Ready')
        ], true),
        new JhaProcessTimelineStep('OFAC', JhaProcessTimelineStepStatus.Complete, [
            new JhaProcessTimelineSubstep('OFAC Pending'),
            new JhaProcessTimelineSubstep('OFAC Failed', true, 'The OFAC check failed due to incomplete data'),
            new JhaProcessTimelineSubstep('OFAC Passed')
        ], false, 'The OFAC Review step is probably the most complex step in the process'),
        new JhaProcessTimelineStep('Dual-Control Approval', JhaProcessTimelineStepStatus.Complete, [
            new JhaProcessTimelineSubstep('Required')
        ], true),
        new JhaProcessTimelineStep('Verified', JhaProcessTimelineStepStatus.Warning, [
            new JhaProcessTimelineSubstep('Verified')
        ]),
        new JhaProcessTimelineStep('Initiated', JhaProcessTimelineStepStatus.Error, [
            new JhaProcessTimelineSubstep('Initiated')
        ]),
        new JhaProcessTimelineStep('Process', JhaProcessTimelineStepStatus.Incomplete)
    ];

}

public stepClicked(stepName: string) {
    console.log(stepName);
}

Then add an instance of jha-process-timeline to your markup. Specify the jhaTitle to be displayed above the timeline. Bind jhaSteps to the array of JhaProcessTimelineStep objects and jhaClick to the method to be called when steps are clicked, both defined in the TypeScript.

<jha-process-timeline jhaTitle="Wire Validation Status" [jhaSteps]="processTimelineWireSteps"
 (jhaClick)="stepClicked($event);">
</jha-process-timeline>

Design

Figma design

Start by dragging a process timeline container to your artboard. Change the title to an appropriate value. Lock the container.

Next, drag instances of process timeline steps to your artboard for each step in your process timeline — Incomplete, Complete, Warning, and Error — and vertically center them with each other and within the container.

If you’re showing the process timeline collapsed, then drag a process timeline expand/collapse button to the right of all of the steps and switch off its Expanded property. Vertically center it with the steps.

If you’re showing the process timeline expanded, then drag a process timeline expand/collapse button to the right of all of the steps and switch on its Expanded property. Horizontally center it with the steps. Then drag instances of the process timeline sub-step below their relevant step in the container, stacking them vertically. Horizontally center each step and its sub-steps.

Then drag a process timeline bar to the container. Position it below the steps. Resize its width until its left side starts at the first step and its right side ends at the last step.

If you’re showing concurrent steps in your process timeline (which is rare), drag a process timeline concurrent steps bar to the container. Position it just above the steps, with it starting halfway between the first concurrent step and the step before that, and with it ending halfway between the final concurrent step and the step after that.

Adobe XD design

Start by dragging a process timeline container to your artboard. Change the title to an appropriate value. Lock the container.

Next, drag instances of process timeline steps to your artboard for each step in your process timeline — Incomplete, Complete, Warning, and Error — and vertically center them with each other and within the container.

If you’re showing the process timeline collapsed, then drag a process timeline expand/collapse button to the right of all of the steps and switch off its Expanded property. Vertically center it with the steps.

If you’re showing the process timeline expanded, then drag a process timeline expand/collapse button to the right of all of the steps and switch on its Expanded property. Horizontally center it with the steps. Then drag instances of the process timeline sub-step below their relevant step in the container, stacking them vertically. Horizontally center each step and its sub-steps.

Then drag a process timeline bar to the container. Position it below the steps. Resize its width until its left side starts at the first step and its right side ends at the last step.

If you’re showing concurrent steps in your process timeline (which is rare), drag a process timeline concurrent steps bar to the container. Position it just above the steps, with it starting halfway between the first concurrent step and the step before that, and with it ending halfway between the final concurrent step and the step after that.