# Getting Started

## Definition of Styles

The Style Specification is a script language that is used to write formatting instructions (rules). These rules decides how a content (of a field) should ‘look’— in terms of:

- Layout:
  position, alignment, width, height, etc.
- Style:
  type face, font weight, color, border, etc.

### Rule

Definition | Description | Example
Rule | A CSS rule comprises of a selector and a property value pair (a declaration). A rule can contain several property value pairs (a declaration area). | listmask[VALUE="PLM"] {background-color:#FFFFFF;}
Selector | Defines how content can be selected for a style. Here, the selector always starts with "listmask". A rule with a more specific selector will override a rule with a less specific selector. A selector can be extended with a condition. It is also possible to combine selectors with AND / OR (see table below). A condition of a selector can specify a certain field more specific. | listmask[VALUE="PLM"]
Attribute | There are several different attributes supported in Agile e6. | VALUE If the value of a field matches the VALUE-ATTRIBUTE-CONDITION in the style rule, the assigned declaration is used. VALUEREGEXP This value is a regular expression. If the value of a field matches the regular expression VALUEREGEXP in the style rule, the assigned declaration is used. The used regular expression syntax is similar to Perl's Perl-derivative regular expressions. Here we use the java.util.regex library. FIELDNAME If the name of a field (without the table name) matches the VALUE-ATTRIBUTE-CONDITION in the style rule, the assigned declaration is used. FULLFIELDNAME If the name of a field (including the table name) matches the VALUE-ATTRIBUTE-CONDITION in the style rule, the assigned declaration is used. MODULO MODULO has two possible values: FALSE: for every odd row the assigned declaration is used. TRUE: for every even row the assigned declaration is used. HEADER Not recommended ! If the titel of a field matches the VALUE-ATTRIBUTE-CONDITION in the style rule, the assigned declaration is used.
Attribute Condition | All attribute condition values are case sensitive. | [VALUE="PLM"]
Attribute Value | All attribute values are case sensitive. It is not recommended to use special characters like ä, ö, ü, ß. | "PLM" The attribute value is always written within quotation marks.
Declaration | A declaration is the combination of a property and a value followed by a semicolon. | background-color:#FFFFFF; A declaration always ends with a semicolon (;).
Declaration Area | The declaration area describes how the style should look. You can define more than one declaration. | {background-color:"#FFFFFF";} A declaration area is within curly braces { }.
Property | Explains how a presentation attribute of an element can be targeted. For example, the font-family property refers to the typeface the content should be displayed in. | background-color: Properties are always written with small letters. Between a property and a property value is always a colon (:).
Property Value | Describes the values permitted for each property. For example, a color can be set using a keyword: red, green, blue; or a hexadecimal code: #f00, #0f0, #00f. | #FFFFFF The property value is only written within quotation marks if there is more than one value. If only one value is defined, it is forbidden to be written within quotation marks. Property values for "oracle-styles" are already within quotation marks. Except for color coding, the property value is always written with small letters.

Combination of Selectors

Operator | Syntax
AND | listmask[attribute1 = "attribute1-value"][attribute2 = "attribute2-value"]
OR | listmask[attribute1 = "attribute1-value"], listmask[attribute2 = "attribute2-value"]
AND and OR | listmask[attribute1 = "attribute1-value"][attribute2 = "attribute2-value"][attribute3 = "attribute3-value"], listmask[attribute4 = "attribute4-value"][attribute5 = "attribute5-value"]

### Comments

Comments are allowed anywhere in a style definition (e.g. before or after a rule, before or after a declaration, etc.) Comments are always written within /* */.

### Possible Properties and Property Values

Example of original layout in list:

Property | Description | Layout in List
background-color | Defines the background color of the field. | listmask[VALUE="Circuit Board"]{ background-color : green; }
border-color | Defines the color of the border. | listmask[VALUE="Circuit Board"]{ border-color : green; border-width : 5px; }
border-width | Defines the width of the border. Value is entered in pixel (px). A border must have a border-width greater than 0 otherwise no border is visible.
border-style | Defines the form of the border line (only rounded).
font-family | Defines the font family. (All fonts, which are available on the PC where the Java Client is running, can be chosen.) | listmask[VALUE="Circuit Board"]{ font-family : forte; font-size : 30px; font-style : italic; }
font-size | Defines the font size. Value is entered in pixel (px). The field size is not adjusted to the font size.
font-weight | Defines the weight of a font. Possible value is bold.
font-style | Defines the style of a font. Possible value is Italic.
icon | All icons can be included that are part of the Agile e6 Java client. url("icon_name.extension") > e.g. url("Error.png"). Alternatively, the URL to an accessable icon can be entered (e.g. url("http://www.xy.png"). Because the icon would be loaded every time it is opened, it is not recommended to define the icon via http://! It depends on the network accessibility and speed. | listmask[VALUE="Circuit Board"]{ icon : url("Error.png"); }

oracle-style

oracle-style gives a special possibility to modify font styles.

The oracle-style is capable of modifying only parts of the text in a field.

All oracle-styles can be combined.

Property | Description | Layout in List
startRange | Defines the character in the text, where the modification starts. | listmask[VALUE="Circuit Board"]{ oracle-style : "startRange:3 endRange:9 fgc:red"; }
endRange | Defines the range of characters in the text directly after the startRange.
waved | The text is underlined with a waved lined. | listmask[VALUE="Circuit Board"]{ oracle-style : "waved lc:green"; }
strike-through | The text is struck through. | listmask[VALUE="Circuit Board"]{ oracle-style : "strike-through lc:red"; }
double-strike-through | The text is struck through twice. |
subskript | The text is subskripted. |
superskript | The text it superskripted. |
dotted | The text is underlined with a dotted line. |
underlined | The text is underlined. |
lc | Defines the line color. |
bgc | Defines the background color behind the text (not of the whole field). |
fgc | Defines the font color of the text. |
bold | Sets the text in bold. |
Italic | Sets the text in Italic. |
| combined example: | listmask[VALUE="Circuit Board"]{ oracle-style : "startRange:3 endRange:9 fgc:red lc:green bgc:yellow dotted bold double-strike-through"; }
text-align | The alignment of the text (possible values are: right/left/center) | listmask[VALUE="Circuit Board"]{ text-align : right; }
content | Overwrites the visible value of a field with a newly defined value. Only the visible value is affected. The value in the repository is not overwritten. Because the QuickFilter and the sorting refer to the values in the repository, a result is returned. | listmask[VALUE="Circuit Board"]{ content : "A modified text"; }
no-content | Deletes the text of a field (e.g. if only an icon should be displayed in a field. Possible values are: true/false). | listmask[VALUE="Circuit Board"]{ no-content : true; icon : url("Error.png"); }
oracle-font-filter | When selecting a row where an oracle-style (line color, font color, background color) is applied to, the modified text is then displayed in different colors. All other font styles will not change their color when they are selected. | listmask[VALUE="Circuit Board"]{ oracle-style: "fgc:red"; oracle-font-filter : invert; }

### Colors

Colors can be defined in two different ways:

- Specific color name (e.g. red, blue, green, etc.)
- Hex-Code (e.g. #FFFFFF for white, #FF0000 for red, etc.)

### Row Style

Styles can be defined for a complete row, not only for a special field. A calculatory field ROW_STYLE_DEFINITION has to be assigned to the respective Form Data mask where a row style should be applied to. The content (style rule) of the calculatory field is applied to every field of this row. The content of the calculatory field can be filled, e.g. with LogiView.

The value of the calculatory field and how it is filled is within the responsibility of the customizer.

For example: if the value of the status has been set to "250" the complete row is colored in orange.

### Which Style Should be Used?

As described in the document Visualization in Stylesheets, the styles of the stylesheets (SYSTEM, CUSTOM, and USER) are loaded to the system in a specific order. In general, if several rules have been defined, the rule defined last, or the rule with the most specific selector is applied to the list.

To determine which style from these stylesheets should be applied, it is possible to define a declaration as important, or to prioritize a declaration area.

Important Declaration

A declaration can be marked as important by adding !important at the end of the property value.

E.g. listmask[VALUE="PLM"]{background-color:red !important;}.

This declaration has now a higher priority than a declaration of a subsequent rule that also would be valid, thus it is used.

Declaration Areas with Priority

Priorities can be defined for a declaration area and are added before the property rule. The higher the priority number (1 - 999999), the higher the priority of the declartion area.

E.g. listmask[VALUE="PLM"]{priority : 78; background-color:red;}

Every declaration within the prioritized declaration area has the same priority.

A prioritized declaration area has a higher priority than an important declaration.