Show TOC

Procedure documentationLay out the Model Locate this document in the navigation structure

 

When you have configured the attributes of the model elements, using the Configure Elements task panel, the next step is to lay out the UI components as the user should see them in runtime. You do this on the Layout board. In Layout mode, you can also configure the controls and fields of each of the UI components, using the Configure Elements task panel in conjunction with the Control Properties dialog box.

Procedure

  1. On the Layout board, view the location of each of the UI components and decide in which order they should be placed.

  2. To move a component, click the edge of the item and drag it to the location on the layout. You should leave a bit extra room between elements to compensate for changes between design time and runtime. To move a control or field within a component, select the item itself (not the label) and drag it as needed.

    Note Note

    You can use the X spinner in the toolbox at the bottom of the Layout board to move UI elements horizontally pixel-by-pixel, and the Y spinner to move them vertically.

    End of the note.

  3. You can fine-tune the components by clicking the Configure button in the task-panel toolbar in order to display the attributes of the selected component. For example, you may wish to change the look of a table by changing the Row colors attribute from Standard to Alternating. Or you may wish to add the standard portal bar of paging buttons to the bottom of a form, by choosing Show from the Paging bar drop-down menu.

    Note Note

    You can arrange the components in the Form view in different ways. You can align components with each other using the Vertical or Horizontal layout options, or you can freely arrange the components according to your preference using the Absolute option. Notice that when using the latter option, long labels may not appear in full. Detailed explanations of the different layout options are provided in the Form View section of the SAP NetWeaver Visual Composer Reference Guide.

    End of the note.

  4. At all points of the layout process, you can access the right-click context menu for each component, which, among other options, enables you to:

    • Edit the component title

    • Create and customize a toolbar for the component (see How to . . . Create a Toolbar)

    • Select all the fields and controls of the component

    • Resize the component

  5. To change the type of field or control – and to hide or show it in the component – you use the table at the bottom of the Configure Element task panel. With forms and tables, the following columns are displayed (from left to right):

    • Show/Hide (Show/Hide)

    • Data Type (Data Type)

    • Field

    • Control

      You use the Control column to edit the type of control, or to access the Control Properties dialog box (using the drop-down menu).

      With charts, the columns displayed are:

      • # (series ID number)

      • Data Series

      • Formula (for selecting the field of the data series)

  6. To add a control to the selected component, click the Add (plus) button at the bottom right, and in the New UI Control dialog box, select the type of control to add and define its Data type and Field name. To delete a control from the component, select it from the table and click the Remove (minus) button.

  7. By right-clicking on a specific field or control in the component on the Layout board, you can access options relevant to configuring that field or control. To define the properties of the selected control, choose Properties from the context menu. The Control Properties dialog box is displayed. The tabs of the dialog box – which change according to the type of control selected – may include the following:

    • General

      The name and type of data control, along with attributes for showing/hiding it and providing a default value

    • Display

      Labeling and position of the control

    • Range

      Minimum/maximum values and step sizes of specialized controls

    • Styles

      Font information

    • Formatting

      Special formats for dates, numbers and text

    • EntryLists

      Definitions of dynamic or static lists of entries (enumerations) for lists and button groups

    • Validation

      Rules for definition validation values and for displaying errors when invalid data is encountered

    • Image

      Selection and sizing of an image control

    • Action

      Definition of an action that can be triggered by the selected field or control

    • HTML

      HTML text for the field

    Detailed explanations for defining each type of control (filling in the fields of each tab per control) are provided in the Control Properties Dialog Box section of the SAP NetWeaver Visual Composer Reference Guide.

    Note Note

    You can configure different controls in a component, leaving the Control Properties dialog box open as you select each different control. The contents of the dialog box change dynamically according to the selected control.

    End of the note.

  8. For further information about defining the properties of controls, see:

Result

You have laid out the components of your iView and defined the properties of the controls in the elements.