Show TOC

Procedure documentationDesigning the User Interface Locate this document in the navigation structure

 

When your model is completed on the Design board, you can configure the way each UI element is displayed in the runtime environment. This enables you to define the runtime look-and-feel of each element, its position in the application, and its controls and data fields. You define these items using the Layout board.

For more information, see Laying Out the UI.

Procedure

  1. Click the Layout button to display the model on the Layout board, and click the Configure button in the task-panel toolbar.

  2. Reposition the different view elements (forms and tables) in the layout. Click outside the layout (no element is selected) and choose an option from the Layout dropdown list in the Configure task panel. You can choose Vertical flow or Horizontal flow to automatically align all view elements vertically or horizontally in the component. You can also use drag and drop to change the order in which elements are displayed.

    Note Note

    To make it easier to reposition the view elements, you can change the zoom level of the workspace or scroll up/down or right/left as needed.

    End of the note.

  3. Display the properties of each UI element, such as an input form, by selecting its border and choosing the Configure button in the task-panel toolbar. The Configure task panel is displayed, showing the properties of the selected element, for example, the element title, whether it has a toolbar, and its frame style.

  4. Modify the properties of each UI element using the options in the Configure task panel. The results of some property value modifications, such as Show title and Show toolbar, are reflected immediately on the Layout board.

    For explanations of the properties relevant to each type of UI element, see Configure <Element> Task Panel in the Visual Composer Reference Guide.

  5. Add controls to views by dragging them from the Compose task panel to the relevant view on the Layout board.

    To add a toolbar and toolbar buttons, select the required view and check the Show toolbar checkbox in the Configure task panel. You can then add buttons to the toolbar by dragging them from the Compose task panel to the toolbar in the view.

    Note Note

    You can remove a control from a view by selecting the required control on the Layout board and pressing the Del key.

    End of the note.

  6. Display the properties for each control in each view by selecting the control on the Layout board and choosing the Configure button in the task-panel toolbar. The Configure task panel displays properties relevant to defining the appearance and behavior of the selected control.

  7. You can modify the properties of each control using the options in the Configure task panel. The results of some property value modifications, such as Label, are reflected immediately on the Layout board.

    For explanations of the properties relevant to each type of control, see Configure <Element> Task Panel in the Visual Composer Reference Guide.

  8. Continue until you have fully configured all the elements and controls in the component. The items in the task panel change according to the currently selected element or control.

    For more information about configuring the complete range of elements and controls, see Compose Model Task Panel in the Visual Composer Reference Guide.

Result

At this stage, your model is close to completion, ready to be deployed to the runtime environment.