First page Back Continue Last page Graphics

Defining a Sequence of Steps


Using a Train Component

If you have a set of pages that users should visit in a particular order, consider using the af:train component on each page to display a series of navigation items to guide users through the multistep process. Not only does a train display the number of steps in a multistep process, it also indicates the location of the current step in relation to the entire process.

Suppose you have eight steps in a multistep process, such as creating a new item in an inventory system. When configured properly, the af:train component would render all eight steps on a page, with each step represented as a train stop, and with all the stops connected by lines. Each train stop has an image (for example, a square block) with a label underneath the image. The slide shows an example of how this train could look on a page.

Each train stop corresponds to one step or one page in your multistep process. Users navigate the train stops by clicking an image or label, which causes a new page to display. Typically, train stops must be visited in sequence, that is, a user cannot jump to step 3 if the user has not visited step 2.

As shown in the slide, a train is actually a specialized type of task flow with linear steps.

Note: Internationalization of the text displayed for a train stop is currently not supported.