Styles
In Lobster Data Platform / Orchestration, the term 'style' refers to a set of definitions for properties that centrally control the overall appearance of the application (colors, shapes, etc.) in the browser.
By configuration, several different Styles can be created, which are used for a browser session depending on different assignment mechanisms:
|
Entity (Class) |
Field |
Selection mechanism |
Comments |
|
Company accounts |
'Style name' |
If a style (see Styles) is specified in the account of the Company of session, it is always valid for the associated Lobster Data Platform / Orchestration session. ►NOTE◄ After logging out of a Lobster Data Platform / Orchestration session, the style selected by the last logged in Company of session remains in effect until one of the following events occurs:
|
|
|
Site configurations |
'Default style' (defaultStyle) |
Site configurations can refer to a 'Default style' from the configured Styles, which applies to a browser session depending on the URL used to access Lobster Data Platform / Orchestration, as long as it is not overridden by an assignment for the Company of session. If no Site configurations exist or none of the relevant Site configurations for a browser session require a selection for the 'Default style', then default Styles (see below) are searched for. |
|
|
Styles |
'Style name' |
If the evaluation of the Company of session (see above) and the Site configurations (see above) do not dictate a style selection, Styles will be searched for whose 'Style name' (styleName) qualifies them as the default style. By convention, the following 'Style names' qualify candidates for the default style:
Of course, both Styles can also be addressed directly (from Company accounts or Site configurations) and will then be considered with higher priority. |
|
►IMPORTANT◄ Do not use 'default' style name
Unlike what was recommended in previous versions of this documentation, the default 'Style name' should NOT be assigned as a 'Style name' to define a default style.
Conflicts with the internal use of the same name in the context of Styles can lead to undesired results in special cases.
We recommend using pro as the 'Style name' for the default style.
If the default 'Style name' is already used, the default style should be renamed to pro or replaced by a copy with this name. If explicit references to the default name exist (starting from Company accounts or Site configurations), these must be subsequently changed from default to pro.
The screenshot shows the dialog for configuring styles.
(1) Default ribbon: Styles can be created, saved, deleted and copied.
(2) Style Name: The name is used to identify the style settings. This name must be selected uniquely per style declaration. To define a default style setting for the system, the style name only has to be set to 'default'. Before version 4.6.0 it was 'scm'.
(3) Style Template: The Style Vorlage for the available properties and settings. Available templates must be managed through the Style templates.
(4) Style properties: In this tab the values of the style properties can be edited.
(5) Expert settings: Allows the definition of custom Cascading Style Sheets (CSS) (for details, see below).
(6) Preview/Reset: The selected style is temporarily set when Preview is clicked, so that settings can be checked in the current session. By clicking on Reset, the saved state for the style of the session can be reactivated.
The style is only updated and released in the system when saved (1). Other logged-in sessions must reload their client to see changes.
►NOTE◄
If the style selected when clicking on 'Preview' is the one that applies to the current session, the preview shows the edited state, if applicable, including the adjustments that have not yet been saved. 'Reset', on the other hand, takes into account the saved state for all features. However, the changes themselves are not reset to the saved state, so that editing can be continued or saved 'as seen in the preview'.
If the changes should really be discarded after viewing them in the preview, the Cancel button in the ribbon (1) should be pressed or a change to another style in the list (4) should be executed.
Changes to a style only take effect for all users when they log in again. Even if the style applicable in the current session has just been edited, the new state is not automatically visible when saving. However, clicking on Reset immediately shows the formatting, which would otherwise only be taken into account at the next login.
Properties
The screenshot shows the overview of the properties of the selected style.
The value of the selected property (1) can be edited (3). If possible, a preview (2) is displayed in the overview.
If the selected property corresponds to the default value of the template, only an Override default (3) button will be displayed. If this is pressed, the value can be changed accordingly.
The 'Overridden' column also shows whether the set value differs from the template or not.
Add custom property (4) eallows the user to define custom properties. Both the name and the type of the property can be defined (see image).
The name of the property must not yet appear in the list of previous properties. After clicking OK, the new property will be displayed in the list like the others.
Edit/Reset properties
Depending on the type of property (e.g. image, size, color, ...) different editing elements (1) are displayed. Here in the example it is a property of the type 'image', therefore an image picker element with preview is offered.
With the trash icon (2), the value of the property can be reset to the template default.
In addition to setting a fixed value, the value of another property can also be inherited using the selection box (3) (see next subchapter).
Value inheritance
To simplify configuration, many style properties are defined in the default style declaration so that the value is inherited from another value.
Whether a property inherits its value or not is shown in the column Inherited (1). It can also be filtered accordingly. When adjusting the basic color palette, it is recommended to search for all 'non-inherited' properties, since other colors will then automatically adopt the correct color value.
An inherited value can be set via the selection box (3) of the selected property. This is also displayed in the 'Style value' column of the list.
Property types
As mentioned above, there are several types of properties.
The following are distinguished:
|
Type |
Description |
Component |
|
Color |
A static color value |
|
|
Image |
A relative image URL (see alsoWorking with image resources (Icons)) |
Clicking the Select button opens icons and images available on the system. |
|
Size |
A size value with predefined units.
|
|
|
Font size |
Font size as a fixed value. |
|
|
Number |
A number with any CSS unit. The unit is entered as free text. |
|
|
Alpha |
A value which describes an opacity (CSS opacity). |
|
|
External theme |
A free text to set themes from external libraries (e.g. ACE Editor). |
|
|
Boolean value |
A Boolean value (true/false). |
|
Expert settings
In the Expert settings tab, CSS style settings for the HTML client can be specified or overridden. This is how special cases regarding formatting can be regulated. In conjunction with the action for manipulating the CSS class of form elements, among other things, this results in interesting extension possibilities for dynamic formatting logic in forms.
The 'Expert settings' dialog offers a management of user-defined Cascading Style Sheets (CSS). Already created style sheets are displayed in the tree on the left (1). New style sheets can be created, activated/deactivated or deleted via the context menu (right-click) or via the three points of a tree element.
The style sheet tree is divided into two sections 'Pre' (A) and 'Post' (B). Style sheets in the 'Pre' section are evaluated before the native Lobster Data Platform / Orchestration application styles, whereas the style sheets in the 'Post' section are evaluated after them.
In addition, priorities can be stored for the style sheets. The higher the priority, the later they are evaluated. If they have the same priority, they are evaluated in the listed order.
Priorities only have to be set if the overwriting of CSS definitions and rules with which the Style Vorlage is to be controlled in a targeted manner.
If a style sheet is selected in the tree, it can be edited in the right pane.
In the header (2) the name and priority can be set, as well as whether the style sheet is active or not. If a style sheet is not active, it is not evaluated.
In the editing area (3) standardized CSS3 code can be written, which will be taken over directly into the loaded style sheet of the client.
Tip: Properties from the palette can be used via the Lobster Data Platform / Orchestration proprietary macro «PROPERTY NAME».
These variable values can also be selected directly via the palette symbol 
(4) and inserted directly at the cursor position.
.myClass { color: «primaryColor»;}
►WARNING◄
These options should only be used by CSS experts and with consideration of negative influences on browser performance. Adjustments in the expert settings and the investigation of resulting problematic issues are explicitly not the subject of Lobster Data Platform / Orchestration support. In addition, the compatibility of expert settings with later releases can generally not be guaranteed.
In particular, changing the font size, style, or font can cause unforeseen layout problems, since all field sizes and layout dimensions have been aligned to the Lobster Data Platform / Orchestration default font and font size!
Particularly when changing the font size, it should be kept in mind that FontAwesome icons also belong to a font and are therefore scaled as well, if they have not been explicitly set to a size!
The following examples explain the problem with other fonts:
