Styling field names and values with CSS

Applies to version: 2022.1.3 and above; author: Krystyna Gawryał

Introduction

The wide range of form fields and features offered by WEBCON BPS makes it possible to create forms, reports, etc. not only tailored to the user's preferences, but also aesthetically diverse. However, if the user would like to further distinguish the information contained on the workflow instances or highlight specific items on the form, emphasizing their significance, the option to style form field names and field values may come to their aid.

This article presents methods for customizing text appearance on forms with Cascading Style Sheets (CSS). The parameters discussed are: text and background color, font size, font weight and style, and text alignment.

The article is based on information available at: CSS: Cascading Style Sheets | MDN (mozilla.org).

Dynamic solution vs. static solution

Before configuring the style of form fields / field values, it is worth considering what is actually expected from the form. If you want the appearance of the form to be dynamic and responsive, i.e. to change depending on the entered value, path transition or page refresh, then it will be beneficial to use Form rules.

If, on the other hand, you want the appearance of the workflow instance to remain unchanged regardless of the actions taken, i.e. to be static, then you should use the options offered by the Style and behavior tab in the section dedicated to form fields configuration.

Definition of CSS

Cascading Style Sheets (CSS) is a simple language that defines how a browser will display web page elements. CSS are responsible for the appearance of websites and are most often used together with markup languages such as HTML or XML. Markup languages are the foundation of web documents and all their elements (text, images, tables, links), while CSS are responsible for how those elements will look.

Defining selected styles of field names and values

Styling field names and values is possible already at the form field selection and configuration stage – i.e. in the Style section, after going to the Style and behavior tab.

• Text color and background color

If you want a form field name to stand out with a custom text color, enter the color property in the Field name style section and the name of the color or its HEX or RGB code after a colon.

Example 1):

alternatively: color: rgb(255, 0, 0)  or  color: #ff0000 .

Output:

The same applies to the background color, except that the property required in this case is background-color.

Note: for the sake of legibility, you should also set the appropriate text color, then separate individual properties with a semicolon and a space (; ).

Example 2): background-color: #3c8398; color: white

Output:

• Font size

In WEBCON BPS, a custom (larger) font size is set by default only for the names of field groups. To specify a text size other than automatic, use the font-size property. One of the recommended font-size units is px.

Example 3): font-size: 22px

Output:

Original size:

If you prefer the font size to change relative to the default size, the following text constants can be helpful (in order from smallest to largest): xx-small, x-small, small, medium, large, x-large, xx-large, as well as smaller (smaller text size than the default) and larger (larger text size than the default).

Example 4): font-size: smaller

Output:

In turn, if you want the form field name to be in uppercase letters only, then in the Field name style section enter a value as below:

 Example 5): text-transform: uppercase

Output:

• Font weight: bold

CSS allows you to change the weight, i.e. the "thickness" of the font through a property called font-weight. To make the font bold, use the text constant bold or the numeric value 700. In addition to the "standard" bold, it is possible to set the font-weight from 100 to 900 (in increments of 100, where 100 is the lightest font, 400 is the value of the “normal” font weight, and 900 corresponds to the heaviest font).

Example 6): font-weight: bold  or  font-weight: 700

Output:

• Font style: italic

The field name and/or its value on the form can also be italicized. If you want your text to be gently italicized to the right, use the italic text constant preceded by a colon and the font-style property.

Example 7): font-style: italic

Output:

• Text alignment

text-align is the property responsible for text alignment, and it determines how the content of the field name or field value is arranged in a dedicated area. The most common values in this case are: left, center, right, and justify.

The text of all form fields and values is left-aligned by default, except for numeric values that are right-aligned, to facilitate their possible export to a spreadsheet.

However, if your form is to look coherent, that is to have the amount also left-aligned, then style the field value as follows:

Example 8): text-align: left

Output:

Summary

By making the above settings for the style of field names and values, you can create a form that looks like this:

Of course, this is just an example of the possibilities offered by styling in WEBCON BPS with the use of CSS – you can create forms that will be tailored to the individual needs of your enterprise. 

The following table summarizes the properties of the Cascading Style Sheets discussed in the article:

Table 1. Examples of CSS properties and their effect on text/font style