Enhanced User Interface

The default styling of forms is enhanced by using widely accepted Bootstrap styles.

In addition to the current set of custom CSS classes, the forms are rendered with a specific set of predefined classes applied by the run time.

You can enhance the UI that uses Bootstrap, or integrate another CSS framework by making changes to the default configuration properties in the common resource bundle as follows:

  • By overriding the specific entries for each component type in the common resource bundle
  • By adding style declarations in the relevant CSS file

The keys for static panes are different to the keys for the controls in a static pane. Also, there are different keys for list controls.

For each pane and control on a form, two keys are used:

  • A generic key for a pane with the name pane_class_defs
  • A generic key for a control with the name control_class_defs
Note: You can use a generic key control_custom_class_defs to write class definitions for custom controls, which are similar to the class definitions for built-in controls.

The format for the second key is control_<control_type>_class_defs, where the <control_type> is the last part of the control type in the model. For example, for the control type "com.tibco.forms.controls.textinput", the key is control_textinput_class_defs. For the form itself, the key is form_class_defs.

For information on control types, see Control Type.

Definitions for each control or pane are in a JSON format, that is a JSON array containing JSON objects with the following properties:

  • selector: Mandatory. This property specifies the path of an element inside the control or pane from its top level div unless specified explicitly using the target property. The path must be an absolute path in the DOM. You need not provide the top level node. If you do, start the expression with //. In the expression, you can use the HTML attributes in the DOM using the syntax [attribute=value].
  • classes: Mandatory. This is a space-separated list of CSS classes to be applied on the element matching the selector expression.
  • when: Optional. The value can be valid or invalid, specifying when to add the respective classes. If not specified, the classes are always applied on the element.
  • where: Optional. It is applicable only to controls. The value can be in-grid or not-in-grid. If it is in-grid, the classes are applied only when the control is in a grid. If it is not-in-grid, the classes are applied only when the control is not in a grid. If not specified, the classes are always applied irrespective of where the control is.
  • target: Optional. Its value can be widget, label, or list-edit-widget. When not specified, the path in the selector starts from the outer div of the component. If the path has to start from the widget, the value must be set to widget. Similarly it must be set to label if the path is taken from the label. The value must be set to list-edit-widget if the path is taken from the edit widget in a list control. With the target property, you can define styles specifically for when the control is in a grid or not in a grid.

Note: Both, controls and panes have a top-level div that contains two divs - one represents the label and the other contains the actual widget, such as an input box for a Text control and its corresponding hint.

To know more, see Keys for Enhanced User Interface and Customizing Property Resource Bundles.