Creating a screen flow

You can create a screen flow by adding sketches, screen flows, or generic (undefined) elements to the editor. All elements are represented in the editor as thumbnail images. Generic elements can later be associated with sketches or screen flows. You can connect the elements with transition lines that indicate the sequence of user interface processes.

About this task

To watch a movie that shows you how to create a screen flow, click here.

Procedure

  1. Click File > New > Screen Flow.
  2. In the New Screen Flow window, type a name for the new screen flow.
  3. Browse to a project and folder for the screen flow.
  4. (Optional) Add a tag to the screen flow.
  5. (Optional) Select a template for initial content for the screen flow.
  6. (Optional) To add attribute groups to the screen flow, click Next.
  7. Click Finish. The screen flow editor opens.
  8. To add an element to the screen flow, click an icon in the Palette and click a position in the screen flow editor.
  9. For sketches and screen flows, select an existing artifact from the Select window.
  10. Type a title for the element and press Enter.
  11. For generic elements, you can leave them undefined (generic) or click a button in the generic element to create a new sketch or screen flow to associate with the element. You can also drag an artifact from the Project Explorer to the element to create an association.
  12. To add a transition line between two elements, click the Transition icon in the Palette, select an element in the editor, and then select the next element in the sequence. The transition icon remains selected so you can add multiple transition lines quickly. When you are done, click another element or control in the palette.
  13. To add a label to a transition line, do one of the following actions:
    • Select the line and begin typing.
    • Right-click the line and click Edit Text.

      Type the text for the label and press Enter

  14. To reposition an element in the editor, select the element and drag it to a new location. Any transition lines that are connected to the element are relocated with it.
  15. Click File > Save.

Feedback