Enhanced User Interface

TIBCO Forms uses an enhanced user interface from the 3.1.0 release. The default styling of forms is now enhanced using the widely accepted Bootstrap styles.

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

In the case of projects deployed from a previous version of TIBCO Business Studio (up to 3.8.0) to its compatible run time (up to 3.0.0), the forms are not rendered in the enhanced user interface. If you redeploy the project after upgrading to the latest release, its forms are rendered in the enhanced user interface.

You can enforce the enhanced user interface using the URL parameter, tibco_enhanced_ui.

The values permissible for the parameter are:
  • default: All the newly deployed forms are rendered in the enhanced user interface, while the forms deployed in previous releases (up to and including TIBCO Business Studio 3.8.0) are rendered as before.
  • enable: All the forms, including the older ones, are rendered in the enhanced user interface.
  • disable: All the forms are rendered in the old interface. If you are opening the forms in a new window every time, you must pass the value as part of the parent window URL.

If the URL parameter is missing, the run time considers a meta declaration for gwt:property in the host HTML file with the name tibco_enhanced_ui with the same set of values as mentioned above. For example, 

<meta name="gwt:property" content="tibco_enhanced_ui=enable"/>

If both the URL parameter and the meta declaration are missing, the run time considers the value defined in the common bundle of the respective forms. For example, 

tibco_enhanced_ui=enable

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 than 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.