Open topic with navigation

TIBCO Business Studio™ - BPM Edition 5.4.0

# 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 `div`s - 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.

Subtopics

Did you find this helpful?

Yes No
Great!
Thanks for taking the time to give us some feedback.
Sorry about that

Why wasn't this helpful? (check all that apply)

Could not find what I was looking for
Instructions confusing or unclear
Instructions did not work

Want to tell us more?

Please select at least one option or provide details about the issue!!

Error occurred while submitting feedback.

Error2 occurred while submitting feedback.

TIBCO Business Studio™ - BPM Edition

Copyright © 2015-2023. Cloud Software Group, Inc. All Rights Reserved.