How to customize built-in OutSystems widgets by tweaking their properties and classes?

Customizing Built-in OutSystems Widgets by Tweaking Their Properties and Classes

Customizing OutSystems widgets allows developers to refine user interfaces to align with the specific needs of their applications. By altering properties and applying custom CSS classes, you can seamlessly adapt existing widgets to fit design guidelines or enhance functionality. This guide thoroughly outlines the process of customizing built-in OutSystems widgets through property adjustments and class modifications.

Prerequisites

• An OutSystems environment with access to Service Studio.
• Basic understanding of web technologies, including HTML and CSS.
• Knowledge of how the OutSystems platform works, particularly the use of widgets within applications.

Understanding OutSystems Widgets

• OutSystems provides a range of widgets out-of-the-box that expedite the development process while maintaining flexibility.
• Widgets are components such as buttons, input fields, or data displays, each coming with a set of properties and styling options.

Accessing Widget Properties in Service Studio

• Open your application in OutSystems Service Studio.
• Navigate to the screen where your widget is placed, or insert a new widget from the widgets panel.
• Select the widget; its properties will be displayed in the Properties pane.
• Common properties include Label, Value, Visible, and Enabled, depending on the widget type.

Modifying Widget Properties

• Use the Properties pane to adjust specific attributes that control the widget’s behavior and functionality.
• For instance, change the 'Label' to give context appropriate text or adjust 'Visible' to toggle widget display based on logic.
• Utilize expressions in properties to make them dynamic; for example, using conditionals to set visibility.

Applying Custom CSS Classes to Widgets

• Select the widget and find the property field for 'Style Classes' or 'Extended Class' (nomenclature may vary based on the widget).
• Assign a meaningful class name that describes the intended style modification, e.g., 'custom-button-style'.
• Proceed to define this class in the application’s CSS rules – you can create and edit styles under the "Themes" tab in Service Studio.
• Example CSS for customizing a button:

      .custom-button-style {
        background-color: #4CAF50;
        color: white;
        border-radius: 15px;
        padding: 10px 24px;
      }
      

Advanced Styling with CSS

• Beyond simple style changes, you can leverage CSS for pseudo-classes and transitions, enriching interactive behavior.
• For instance, create hover effects or animations to enhance user interactions:

      .custom-button-style:hover {
        background-color: #45a049;
        transition: background-color 0.3s ease;
      }
      

Testing Customizations

• Utilize the OutSystems preview mode or publish your application to see the customizations in effect.
• Verify that property changes and CSS styles render correctly across different screens and devices.
• Ensure that custom classes are not conflicting with default styles or other existing styles in use.

Deploying Your Customized Application

• Once testing is complete, deploy your application to production via Service Studio.
• Perform user acceptance testing to ensure a seamless experience with the applied customizations.
• Monitor user feedback to iteratively improve styling and layout based on real-world use cases.

By following these steps, developers can effectively customize OutSystems widgets, creating user interfaces that are both functional and visually appealing, well-integrated into the overall application design. This allows for an unmatched stakeholder experience through thoughtful design and careful customization.