CSS class

Actions – Abstract

This action adds or removes one or more CSS (Cascading Style Sheets) classes for a form element.

This action adds or removes one or more CSS (Cascading Style Sheets) classes for a form element.

►NOTE◄ This action is intended for advanced configurations regarding animations or custom styles and requires basic knowledge of Cascading Style Sheets.

images/download/attachments/189432687/image-2024-10-7_9-22-0-version-1-modificationdate-1728285720344-api-v2.png

The CSS class action features the following parameters:

  • The 'Target element' defines which element the action will be applied to. The element containing the action serves as a default.

  • The CSS class name defines which CSS classes should be added or removed for the 'Target element'. HTML conform, the class names are separated by space characters (e.g. class1 class2 class3). Additionally, the class name value will be interpreted as a calculation expression. Therefore, class names can be constructed and concatenated in any suitable way.

  • Depending on the option Add class, CSS classes are being added (checked) or removed (unchecked).

Custom CSS classes for use with this action can be configured as 'Expert settings' in the menu item Styles.

►NOTE◄ Static assignments of CSS classes to Form elements are possible by the 'CSS class' property without executing actions.

Example

When a button in a form is clicked, a Lobster_data profile is run, which may have a relatively long runtime of several seconds.

To inform the user that this profile call is already being executed, the neighbouring image (cog icon) should appear 'in rotation' as long as the profile runs.

This can be achieved by a predefined CSS class 'lb-rotate-z-infinite', which is added and removed by two separate behaviours of the button:

images/download/attachments/189432687/image2019-4-2_17-14-9-version-1-modificationdate-1728283347697-api-v2.png

This screenshot was manipulated, so both behaviours are visible in full and side by side.

  • Both behaviours respond to the Click event of the buttons and are executed in the configured sequence (startRotation, runProfile).

  • The Behaviour name 'startRotation' adds the CSS class name lb-rotate-z-infinite to the icon element labelled as 'Profile' (Add class option checked).

  • 'runProfile' runs the profile per behaviour and removes the CSS class name lb-rotate-z-infinite when finished (Add class option unchecked)

Effect:

When the button is clicked in the operative portal (or in test mode) the icon rotates until the profile is finished.