outsystems-ui
Reactive icon

OutSystems UI

Supported
Stable version 2.30.0 (Compatible with OutSystems 11)
Other versions available for 10
Uploaded
 on 22 Aug (2 weeks ago)
 by 
OutSystems
4.6
 (139 ratings)
outsystems-ui

OutSystems UI

Details
The OutSystems UI framework for Reactive Web and Mobile apps with dozens of responsive UI patterns on top of a solid design system, fully customizable to your Style Guide needs.
Read more

With dozens of responsive UI patterns, this framework is integrated with OutSystems and allows you to build the UI of your app using low code. 

Key features:

  • More than 70 UI patterns
  • Easily customizable and extendable design system
  • Responsive UI
  • Right-to-left support
  • Accessibility compliance with WCAG 2.1
  • Actions to deal with different device types
  • Built for Reactive Web and Mobile apps 


Find out more at www.outsystems.com/outsystems-ui

Release notes (2.30.0)

What's New

  • ROU-12566 - Enhanced the InlineSvg pattern with a new accessibility API and a dedicated client action called InlineSVGSetAccessibilityType to manage accessibility behavior effectively across different scenarios.
    This improvement introduces explicit built-in configurations to seamlessly support decorative, informative, and interactive SVG use cases out of the box.
  • ROU-12568 - Deprecated the Wizard and WizardItem components and created a new, accessibility-focused version built on the new architecture.
  • ROU-12913 / RPM-12913 - Added a new ForceIsLoadingDisabledState JavaScript API to the ButtonLoading component, enabling explicit control over the disabled state when IsLoadingis active. This will add support to edge cases where loading state and button interactivity must be handled independently. To use it simply call the following function on a JS node: OutSystems.OSUI.Patterns.ButtonLoadingAPI.ForceIsLoadingDisabledState()
  • ROU-12946 - Now, Dropdown Search and Dropdown Tags will be using the latest version of their library provider (VirtualSelect v1.4.0).
    This version also brings new extensibility configurations that were added to the VirtualSelectConfigs structure, which contains the properties available on the SetVirtualSelectConfigs client action: searchResultsText, searchResultText, selectedText, noOptionsSelectedText and loadingText.
    Consumers will need to have their references refreshed.


Fixed Issues and Improvements

  • ROU-12349 - Removed the JavaScript that forced a static pixel value into the --viewport-height CSS variable, which was breaking iOS layouts (e.g. .ios-ounce and the ServerSide Dropdown balloon) once the hardcoded cordova/iOS code is removed in the upcoming MABS 13 release. Layout CSS now uses layered 100vh/100dvh fallbacks instead, so it tracks the real visible viewport.
  • ROU-12799 / RPM-6828 - Fixed an issue that caused the Input widget with a "search" type to display a default icon, and that caused the Search component not to properly display the default icon. This occurred after the last minor release, where an unintended style rule forced a search icon into the input field.
  • ROU-12905 / RPM-6995 - Fixed an issue in the DatePicker component where manually selecting a date one day before the current date could result in incorrect behavior under certain timezone conditions. This occurred when the system timezone was behind the user’s current timezone, causing inconsistencies between the selected date and the variable value assign when interacting with the Today button or manually editing the input.
  • ROU-12928 - Fixed an issue that caused the Carousel component to fail to render properly when placed inside an Accordion Item. This occurred because the Carousel was initialized while its parent Accordion Item was in a closed state
  • ROU-12934 - Improved mobile app connectivity detection by adopting standard browser online and offline events. The NetworkStatusChanged component has been upgraded to leverage standard web browser online and offline events for detecting network status transitions.
    This modernization provides more reliable connectivity detection while maintaining complete backward compatibility with no change in behavior for existing applications.
  • ROU-12937 / RPM-7059 - Fixed an issue that caused the Carousel component to break with a "removeChild" JavaScript error when a screen action refreshed the data feeding it.
    This occurred when the Carousel component displayed images and the refreshed data source also controlled an If widget around the Carousel.
  • ROU-12938 / RPM-7084 - Fixed an accessibility issue that caused the Dropdown component to incorrectly skip group headers during keyboard navigation.
    This occurred when navigating through grouped multi-select dropdown options using the keyboard, which prevented assistive technologies and keyboard users from focusing on section headers.
    The issue was fixed by updating the Virtual Select library.
  • ROU-12939 - Enhanced Carousel accessibility with real-time ARIA state synchronization and image slide warnings. The Carousel component has been updated to improve screen reader navigation by dynamically announcing active slides, synchronizing aria-current attributes, and refining underlying ARIA roles for lists, items, and image-based slides.
    Additionally, it now raises a helpful one-time console warning when image slides are detected without the required container structure.
  • ROU-12940 - Changed the behavior of the GetNetworkType client action that returned the value "webbrowser" when it was called before OutSystems UI framework finished loading.
    This affected applications running as PWAs on browsers that don't expose the Network Information API, particularly Safari on iOS. The value "unknown" is now returned, following the web standard for when the network type can't be determined.
  • ROU-12945 - Fixed an issue that caused multiple components to be misrepresented at design time in the IDE. This occurred due to recent changes in the IDE environment that affected the visual rendering of the Range Slider, Progress Bar, Month Picker, Date Picker, Time Picker, Chat Message, Carousel, and ButtonLoading components.
  • ROU-12950 - Fixed an issue that caused the Section Index Item component to throw a console error when users navigated back to a page containing the component.
    This occurred because the component attempted to access or clean up unmounted DOM nodes during browser back-navigation state restoration.
  • ROU-12960 - Improved popup positioning for DatePicker, DatePickerRange, MonthPicker, and TimePicker components based on available vertical space.
    These components have been updated to dynamically adapt their popup direction to the area with the most available vertical space. This enhancement removes the previous limitation that forced pickers to always open below the input.


This new OutSystems UI version introduces a potential breaking change

  • Any logic that checks for the "webbrowser" value now receives "unknown", so review any conditions or mappings that depend on "webbrowser" literal (ROU-12940).
License (2.30.0)
Reviews (31)
by 
24 Jun
in version 2.28.1
Awesome work.
by 
2025-06-13
in version 2.23.0
Works perfectly.
by 
2025-05-28
in version 2.23.0
Excellent work on this release. I truly value the focus on accessibility and functionality enhancements. it is really helpful.
Team
OutSystems
Other assets in this category