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:
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.
|
listmask[VALUE="PLM"] |
Attribute | There are several different attributes supported in Agile e6. |
|
Attribute Condition | ![]() |
[VALUE="PLM"] |
Attribute Value |
|
"PLM"
|
Declaration | A declaration is the combination of a property and a value followed by a semicolon. |
background-color:#FFFFFF;
|
Declaration Area | The declaration area describes how the style should look. You can define more than one declaration. |
{background-color:"#FFFFFF";}
|
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:
|
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
|
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 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 /* */.
Example of original layout in list:
Property | Description | Layout in List |
background-color | Defines the background color of the field. |
listmask[VALUE="Circuit Board"]{ |
border-color | Defines the color of the border. |
listmask[VALUE="Circuit Board"]{ |
border-width |
Defines the width of the border. Value is entered in pixel (px).
|
|
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-size |
Defines the font size. Value is entered in pixel (px).
|
|
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"). |
listmask[VALUE="Circuit Board"]{ |
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"]{ |
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"]{ |
strike-through | The text is struck through. |
listmask[VALUE="Circuit Board"]{ |
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"]{ |
|
text-align | The alignment of the text (possible values are: right/left/center) |
listmask[VALUE="Circuit Board"]{ |
content |
Overwrites the visible value of a field with a newly defined value.
|
listmask[VALUE="Circuit Board"]{ |
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"]{ |
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"]{ |
Colors can be defined in two different ways:
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.
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.