Show TOC

Procedure documentationCreating a Composite Layout

 

You use this when you want to display data in different ways within one UI building block (UIBB).

A composite component is a generic design template in which you can group UIBBs within a single UIBB. For example, you can display a form, a table, and a search component all within one UIBB.

Note Note

Composite UIBBs explicitly do not serve Master/Detail purposes.

End of the note.
Organizing Components in Columns

A Composite UIBB can have one of the following possible layouts:

  • One Column Layout (Standard)

    An unlimited number of UIBBs, arranged vertically in rows above and below each other.

  • Two-Column Layout (50:50)

    The maximum number of UIBBs is 6, and these can be arranged with a maximum of 3 rows and 2 columns. A UIBB can be stretched over several rows or columns in both layouts.

Available Component Types

You can configure the following types of component in a Composite component:

  • Analytics Chart Component – A generic design template for displaying an analytics chart

  • Analytics List Component – A generic design template for displaying an analytics list

  • Form Component – See Creating a Form Layout.

  • Freestyle Component – A freestyle component.

  • List Component – See Creating a List Layout.

  • POWL Component – The Personal Object Worklist (POWL) UIBB can be configured as a master list.

  • Search Component – A generic design template for displaying a search query.

  • Tree Component – A generic design template for displaying data in a hierarchical list or tree

Procedure

Opening the Component Configuration Window

Adding Components to a Composite UIBB

Proceed as follows for each component:

  1. In the Composite UIBB Schema panel, on the toolbar click UIBB.

  2. From the list of UIBBs, select a component type.

  3. Enter the name of the component configuration. This can be a configuration created in the Design Time Tool (for Form, List and Composite components), or created in FPM Configuration Editor (that is, outside of the Design Time Tool).

  4. The component is added to the Preview panel.

Editing Form and List Components

You can open the Component Configuration Editor from the Composite UIBB Schema panel in order to edit Form and List components.

To edit a Form or List component:

  • In the Composite UIBB Schema panel, select a Form or List component and click Configure UIBB. The Component Configuration Editor is opened, displaying the component for editing.

Using the Composite UIBB Schema Panel

This panel outlines the structure of the composite UIBB, and displays its UI elements. In this panel, you can:

  • Move individual elements within the schema by using the Up and Down buttons or by dragging them to a new location.

  • Add elements or buttons.

  • Select elements in the schema and edit their attributes in the Attributes panel.

  • Drag and drop elements between the Repositories panel and the Object Schema panel.

Using the Wire Schema Panel

This panel displays the individual wires between the UIBBs. You use it to add and remove wires, and also to open the Graphical Wire Editor, a tool for displaying the wiring in your application in a graphical, easy-to understand way.

Using the Graphical Wire Editor

You use this editor to view, edit and create the wires you need for your application. The editor supports drag-and-drop. A central work area, the Wiring Pane, displays UIBBs that are currently wired, along with information regarding their outports and connector classes. UIBBs that are not wired are displayed in the Available UIBBs repository panel, and can be dragged into the work area. UIBBs are represented graphically as boxes. Outports are displayed as colored arrows on the edges of the boxes, with labels displaying the outport type.

To create a wire, drag an arrow from one box onto another box. The Connector Data dialog box appears, allowing you to choose the Connector Class and related Connector Parameters. To display this dialog box at any time, double-click the connecting lines between the UIBBs. Labels of connecting lines are provided by the connector interface.

Wires that you created using the Graphical Wire Editor appear on the Wire Schema tab.