Show TOC

Background documentationCreate Layered iViews Locate this document in the navigation structure

 

In order to define which UI components are visible at the same time in the runtime iView, Visual Composer uses layers to group the components on the Design board. Depending on the mode of layering, transition lines may be required to define the navigation from layer to layer.

Views can be laid out as follows:

  • Tabs, in which each layer is represented as a tab that the user can select to display the UI components within the layer.

    Example Example

    This tabbed view was devised from the BanksB model created in Adding a Data Service for Choosing Banks:

    Tabbed View (Tabbed View)

    Similar to tabbed views are Link lists, in which each layer is displayed by clicking its link from a horizontal row of links, or Link trees, where the links to the layers are displayed in a hierarchical structure.

    End of the example.

  • Wizard, in which each layer is represented as a numbered (and labeled) step. In this guided procedure, the user clicks navigation buttons in the views to move from one to the other step. As a result, the layers must be linked by transitions (navigation lines) that correspond to the actions defined for each button.

    Example Example

    This Wizard was devised from the same BanksB model, as described in Creating a Wizard:

    Wizard (Wizard)

    End of the example.

  • Accordion, in which each layer is displayed as a collapsible panel.

  • Standard layers, which may be used to display different overlapping sets of components. The navigation method may be by means of pushbuttons, links or images, requiring the use of transitions, as with wizards.

    Example Example

    This view was devised from the BanksA model, so that the two outputs of the data service – Bank Address and Bank Details – are displayed in different views, inter-related with buttons that display the other view.

    Layered Views (Layered Views)

    End of the example.

For information about creating different types of layered views, see: