How to apply CSS transforms in OutSystems (e.g. rotate icons) using custom classes?

Applying CSS Transforms in OutSystems to Rotate Icons Using Custom Classes

Incorporating CSS transforms in your OutSystems applications offers enhanced presentation capabilities, such as rotating icons or images, thus improving user interface aesthetics and interactivity. This guide provides a comprehensive, step-by-step approach to applying custom CSS transforms within the OutSystems environment.

Prerequisites

• An active OutSystems account with sufficient access to modify and customize styles.
• A basic understanding of CSS, specifically the `transform` property and its usage.
• Familiarity with OutSystems, including creating custom themes and adding CSS to your application.

Understanding CSS Transforms

• The `transform` property allows you to modify the coordinate space of the CSS visual formatting model. This includes operations such as translation, rotation, scaling, and skewing elements.
• To rotate an icon, the `rotate` function of the `transform` property is used, where degrees (e.g., `rotate(45deg)`) determine the angle of rotation.

Setting Up a Custom Class in OutSystems

• Open your OutSystems application in Service Studio.
• Navigate to the Interface tab to access your application's screens and styles.
• Find the "Styles" section, typically linked within your chosen theme, or create a new theme if necessary.
• Create a new custom CSS class by adding it to the theme. For example, name it `.rotate-icon { transform: rotate(45deg); }` to rotate an element 45 degrees.

Applying the Custom CSS Class to Icons

• Identify the icon or element you wish to rotate on your application's screen.
• Click on the element to bring up its properties panel in the interface.
• Locate the "Style Classes" input field. Enter the name of your custom CSS class, such as `rotate-icon`. You can apply multiple classes by separating each class with a space.
• Save and publish the changes to your application, ensuring that the styling is correctly rendered.

Testing and Refining CSS Transforms

• Use the preview functionality provided by OutSystems to see your changes in real-time and ensure that the icon rotates as expected.
• If adjustments are needed, you can modify the angle of rotation directly within the CSS in your theme, such as changing `rotate(45deg)` to `rotate(90deg)` for a more pronounced effect.
• Reload the preview to verify that the modifications behave as intended.

Advanced Custom Transformations

• Consider using other transform functions like `scale()` to change the size of the icon alongside rotation. For instance, `.rotate-scale-icon { transform: rotate(45deg) scale(1.5); }`
• Introduce animations for smoother transitions between different states. Example: `transition: transform 0.25s ease-in-out;` applied alongside your transform property.
• Test these advanced styles to ensure performance remains optimal and that they enhance user experience without causing confusion.

Deploying Your Changes

• After thorough testing, deploy your changes to your production environment through the LifeTime environment management tool in OutSystems.
• Monitor user feedback to ensure the rotations are visually appealing and intuitive.
• Make adjustments as necessary based on user interaction data and any new requirements that emerge.

By following these steps, you can enhance your OutSystems applications with effective CSS transformations, improving both form and functionality through careful styling and customization.