How to apply conditional formatting in OutSystems lists (e.g. highlight rows meeting criteria)?

Applying Conditional Formatting in OutSystems Lists

Applying conditional formatting in OutSystems allows you to dynamically highlight rows in a list based on specific criteria. This can enhance data visualization and allow end users to quickly identify significant data, contributing to a better user interface (UI) experience. This step-by-step guide will walk you through the process to apply conditional formatting in your OutSystems applications.

Prerequisites

• An OutSystems account with access to Service Studio.
• Basic understanding of OutSystems, particularly concerning entities and list widgets.
• An application in OutSystems where you wish to implement conditional formatting.

Understanding Conditional Formatting

• Conditional formatting involves setting rules that apply specific styles to UI elements based on data criteria.
• This guide focuses on highlighting rows in OutSystems aggregate-based lists when certain conditions are met, using styles applied through CSS classes or inline styles.

Setting Up Your List in OutSystems

• Ensure you have a screen where a list widget will display data from an aggregate or local variable.
• Bind this list widget to the desired aggregate which pulls data from your database entities.
• Understand the conditions under which certain rows should be highlighted (e.g., values exceeding a threshold).

Applying CSS Classes for Conditional Formatting

• Navigate to the "Interface" section in OutSystems to define global CSS classes for your application.
• Create CSS classes for the conditional formatting, such as:

  <pre>
  .highlight-row {
    background-color: #f8d7da; /_ Light red background _/
  }
  </pre>
  

• Add these classes to your module stylesheet (in the Style Sheets section).

Implementing Conditional Logic in the Interface

• Go to the screen where your list widget is implemented.
• Inside the list item block, you must apply a condition to decide when to apply the styles. This is usually done using the ListItem's Attribute setting or if utilizing CSS classes, the "Style Class" property directly.
• For simple conditions, use expressions to evaluate your rule and apply a class based on the result.

  <pre>
  If(CurrentItem.MyEntity.AttributeName > ThresholdValue, "highlight-row", "")
  </pre>
  

• Assign the above expression to the "Style Class" or "Extended Properties" of your list item widget, where applicable.

Using Inline Styles (Alternative Approach)

• If you prefer using inline styles instead of predefined CSS classes, set conditions directly within the list item block.
• Access the "Extended Properties" of the list item or cell widget and add a conditional style like:

  <pre>
  style=If(CurrentItem.MyEntity.AttributeName > ThresholdValue, "background-color: #f8d7da;", "")
  </pre>
  

• Inline styling allows for quick styling adjustments but is less reusable across different project parts.

Testing Your Implementation

• Upon saving changes, run your OutSystems application within Service Studio or deploy it to a testing environment.
• Validate that the conditional formatting rules are working correctly — rows meeting the criteria should display with their set styles or CSS classes.

Deploying and Maintaining Your Application

• After verifying the implementation, deploy your OutSystems application following your organization's deployment process.
• Regularly review and adjust the conditional formatting rules and styles as necessary to align with changing business requirements or UI standards.

By following these steps, you can implement dynamic conditional formatting in your OutSystems list widgets to improve data presentation and usability of your application interface.