Using CSS to Customize the Rendering of a Form Control

TIBCO Business Studio - BPM Edition Forms supports the use of Cascading Style Sheets (CSS) for customizing how form controls are rendered. You can use CSS with Business Studio Forms to apply styling to a form control.

Explanation

This task covers the case where you want to apply special styling to a specific control in a form.

In order to design the rendering of a control, it is useful to know how the control is rendered in the browser. TIBCO Forms makes use of CSS classes attached to the HTML DOM nodes in order to control rendering. Generally, it is not necessary to know which actual HTML elements are being used in the rendering, and as a practice you should try to use only the CSS classes in devising CSS selectors in your stylesheets, as this approach is the most portable across different target platforms.

Shown here is a representation of the CSS classes that are used to render a control, and their relationship to one another within the nested DOM: 

     —component, customclass
          —label
          —container
               —control
               —hint

See Reference for a detailed description of the CSS classes used in rendering forms.

The customclass is the name of a CSS class specified in the design time model.

Procedure

  1. Create a form that contains one or more controls.
  2. Link the form to a custom CSS stylesheet.
    Tip:
    To create a CSS file in your project
     In the Project Explorer, right-click the Presentation Resources folder for your project and click New > File. The New File dialog opens, where you indicate the parent folder where the CSS file for this form will be contained, and the file name. If there is already a css folder within your Presentation Resources folder, you can choose that one or, if not, create a folder with that name. But whether you use a subfolder, and if so, what it is named is unimportant. What is important is that the CSS file be placed in or under the Presentation Resources folder and that its filename ends with the extension .css. When you click Finish, the CSS file is created and opened in the editor.
    Tip:
    To link a form to a CSS stylesheet
     Be sure the CSS file is already present in the Presentation Resources folder. Then, in the Properties view for the form, click the Resources tab. Click the plus sign (+) to add a resource. The Pick Resource dialog opens, displaying a list of the resources currently residing in the Presentation Resources folder, including CSS files, JavaScript, and image files, if any. Select the desired CSS file and click OK. Your CSS file has now been added as a resource to your form. The definitions it contains will be used to render the form in HTML.
  3. With the form open and visible in the editor, click one of the controls on the form to open the Properties view for the control.
  4. Enter a name in the Style Class Name(s) box on the General tab of the Properties view for the control.
  5. Change the label font properties for this control. For example, add the following lines in the linked CSS stylesheet: 
        .highlight .label,
    {
        color: #FF0000;
        font-family: Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
    }

    The CSS selector used here is .highlight .label. This is used for clients that use GWT, which is the rendering used in TIBCO BPM Enterprise.

  6. Put a border around the highlighted control and change the background color. For example, add the following lines to the linked CSS stylesheet: 
        .highlight,
    {
        border-style:solid;
        border-width: thin;
        background-color: #DDFFDD;
    }