When you open the UI Designer, the interface appears as shown in the following example. The design interface is divided into four areas: The (A) Menu Bar, (B) Navigation Panel, (C) Properties Panel, and (D) Current Form View:
Each is described in the following table:
Ref | Name | Description | Image |
A | Menu Bar | File operations, including Save¸ Save As, Import, and Close. |
|
B | Navigation Panel | On the left, there are six tabs. These tabs allow you to show/hide the current panel or switch to another panel. Add: Shows input controls for users to build a form with Field: Shows all form fields in the form and allows users to manage their mapping Data: Shows options to create a data table and any existing data tables in form Views: Displays different views of form and allows users to manage the views Elements: In complex forms with many elements, it can become difficult to select specific elements, especially if they are nested with no padding. The Elements Panel provides an alternative way to visualize and manage the elements in a view, through a tree representation of the underlying HTML. With the elements panel, elements can be selected for modification, or deleted from the view. JavaScript: Opens a code editor for more complex JavaScript functions to be declared and used in “call JS” action rules |
|
C | Properties Panel | Displays the Properties of the selected control, field or view. This panel will show/hide automatically based on the item selected by the user. For example, when a section of the form is selected the properties panel will appear with options to view “data binding” or “style” properties with their respective gear or paintbrush icons on the left. |
|
D | Current Form View | See what the form looks like when rendered by eCASE. By utilizing drag and drop controls from the control panel, you can quickly build required forms with different controls and appearances |
