How is your experience with the OutSystems Community?
outsystems-ui
Reactive icon

OutSystems UI

Supported
Stable version 3.0.0 (Compatible with OutSystems 11)
Other versions available for 10
Uploaded
 on 9 Nov (2 days ago)
 by 
OutSystems
4.6
 (139 ratings)
outsystems-ui

OutSystems UI

Created on OutSystems 11

Version 3.0.0

Stable
Current
Uploaded on 9 Nov (2 days ago) by OutSystems
Compatible with:
Version 11
↳11.12.0 or higher
Database:
All
Release notes:

New Features

  • New Default Theme: Introduced a new default theme for OutSystems UI, built on a design token system that centralizes colors, typography, spacing, and shapes. Instead of each component carrying its own hardcoded styling, every pattern and widget now resolves its appearance from a shared set of tokens, so the look of an application can be adjusted centrally and stays consistent across the component set. These are the same design tokens used by Mobile UI, so web and mobile applications share a single styling foundation. The previous theme was renamed to OutSystems UI Classic and remains fully available, and existing applications keep the theme they already use.
    • Dark Mode: Introduced a dark mode. Component text and surface colors are driven by paired light and dark tokens, so every component keeps the correct contrast when the dark mode is active. A new SetDarkTheme client action, available under Utilities, enables or disables the dark mode at runtime, for scenarios such as a dark and light theme toggle, by applying or removing the dark mode class on the document root, so the theme changes across components without requiring a page reload. It receives an IsDark boolean input and returns Success and ErrorMessage, consistent with the other client actions. (ROU-13004)
    • Typography: Inter is the default font family of the new theme, replacing Roboto. (ROU-13005)
    • Dynamic Font Support: Dynamic fonts are supported by default. All default font-size and line-height variables react to the base font size defined on the HTML element, so applications follow the font scaling preferences set by the user. (ROU-12959)
    • Accessibility: Focus states are standardized across all patterns and widgets through a shared focus mixin and global CSS variables, replacing the individual focus styles each component defined before.
    • New component defaults: Alerts use the Light (subtle) styling and form controls use the Soft shape by default, each with utility classes available to apply the alternative looks: bold for Alerts, rectangular and round for form controls.
    • Table on mobile and tablet: The Table widget keeps its table layout with horizontal scroll on every device, instead of changing its appearance on smaller screens, which improves row readability. (ROU-13056)


Improvements & Changes

  • Video:
    • Base64 Sources: Improved the Video component to support Data URIs (data:content/type;base64) as valid source URLs. This allows video streams to be embedded directly as data URLs without specifying a MIME type on the source tag, although large video payloads should still be used with caution due to the increased memory footprint. (ROU-11717)
    • Sources Without a File Extension: Improved the Video component to support source URLs without a file extension. This ensures video playback works as expected as long as the endpoint returns a valid video stream, regardless of the URL structure. (ROU-13023)
  • iPhone Dimensions: Added support for the latest iPhone models (iPhone 16e, iPhone 17e, and the iPhone 18 series) by updating the associated dimensions applied through the iphonex CSS class. (ROU-13081)
  • Library Providers:
    • Floating UI: Updated the DropdownServerSide, Tooltip, and OverflowMenu components to Floating UI Core and Floating UI DOM v1.8.0. (ROU-13088)
    • Smooth Scroll Polyfill: Updated the SectionIndex component to smoothscroll-polyfill v0.4.4. (ROU-13087)
    • Deprecated components: Updated DEPRECATED_DatePicker component to Moment.js v2.31.0 ; DEPRECATED_ProgressCircle and DEPRECATED_ProgressCircleFraction components to ProgressBar.js v1.1.1 ; DEPRECATED_SectionIndex component to smoothscroll-polyfill v0.4.4. (ROU-13087)


Bug Fixes

  • Datepicker:
    • Fails to Open on Android: Fixed an issue that caused the DatePicker component to fail to open. This occurred specifically on Android devices running Chrome version 154 or higher. (ROU-13095 / RPM-7277)
    • Intermittent Failure to Open in Native Apps: Fixed an issue that caused the Datepicker component to fail to open intermittently. This occurred on certain Android devices and OS versions. (ROU-13122 / RPM-7313)
    • Flickering on Runtime Property Updates: Fixed an issue that caused the Datepicker component to flicker. This occurred when a property was updated at runtime, causing the underlying input element to be unnecessarily recreated. (ROU-13147 / RPM-7319)
  • Dropdown Search & Dropdown Tags: Adding Options to an Empty List: Fixed an issue that prevented users from adding a new option to the Dropdown Search and Dropdown Tags components. This occurred when the options list was empty while using the allowNewOption extensibility property configured through the SetVirtualSelectConfigs client action. (ROU-13034)
  • Lightbox - Blocked Page Inside Carousel: Fixed an issue that caused the Lightbox component to misbehave and block the page. This occurred when the Lightbox was used inside a Carousel component with the Loop property enabled. (ROU-13067)


Breaking Change

  • URL.IsValid Removed: Removed the deprecated OSFramework.OSUI.Helper.URL.IsValid JavaScript function, which was affected by a potential ReDoS (catastrophic backtracking) vulnerability. Use the native URL constructor instead. (ROU-13054 / RPM-7202)
Application Objects:
OutSystems UI does not affect the count of AOs.

Version 2.30.0

Stable
Uploaded on 22 Aug by OutSystems
Compatible with:
Version 11
↳11.12.0 or higher
Database:
All
Release notes:

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).
Application Objects:
OutSystems UI does not affect the count of AOs.
Created on OutSystems 10

Version 1.6.7

Stable
Uploaded on 22 October 2019 by OutSystems
Compatible with:
Version 11
Version 10
Stack:
.NET
Database:
All
Release notes:

Improvements

  • Changed icons for CarouselGoTo, CarouselNext and CarouselPrevious actions.
  • Fixed Lightbox issues previewing a recent uploaded image.


Version 1.6.6

Stable
Uploaded on 25 February 2019 by OutSystems
Compatible with:
Version 11
Version 10
Stack:
.NET
Database:
All
Release notes:

Fixed Issues:

  • JSONSharp license information was removed from the Licenses text