Give us feedback
Reactive icon

OutSystems UI

Stable version 2.10.0 (Compatible with OutSystems 11)
Other versions available for 10
Published on 25 Jul (2 weeks ago) by 
 (110 ratings)

OutSystems UI

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

What’s new (2.10.0)

What's New:

  • ROU-3255 - Created a new client action that disables the Dropdown's default behavior to open as a popup on mobile apps.
  • ROU-3288 - Created new client actions to disable/enable Tab Header Items.
  • ROU-3346 - Using the new SetCarouselDirection client action, users can now choose the direction of the Carousel's navigation when in autoplay.
  • ROU-3426 - Added a new client action to the Sidebar pattern to toggle the swipe feature.
  • ROU-3437 - Added a new client action to reset the Progress Bar and Progress Circle to their initial value.
  • ROU-3464 - Created the new DatePickerSetEditableInput and DatePickerRangeSetEditableInput client actions. These client actions allow the date to be set by entering it in the input at runtime.
  • ROU-3386 - Created new client actions to set new values on the Range Slider and Range Slider Interval patterns and to reset the patterns to their initial state.
  • ROU-3502 - Added a new client action to the Date Picker pattern to toggle the native behavior in mobile apps.

Fixed Issues and Improvements:

  • ROU-2520 - Fixed an issue caused by clicking a button multiple times on the Action Sheet pattern preventing the Action sheet from closing.
  • ROU-3098 - The Tooltip balloon is now detached from the tooltip icon which solves several issues related to overflow:hidden contexts. Notice that custom CSS can be affected by this.
  • ROU-3412 - Now, the SetLang client action sets the lang attribute correctly in the HTML.
  • ROU-3457 - Now, when navigating to another screen, the Floating Actions pattern is properly destroyed.
  • ROU-3460 - Fixed an issue with the Dropdown Search and Dropdown Tags patterns that prevented the user from navigating with the browser's back and forward buttons when the URL is entered manually.
  • ROU-3461 - Fixed the Service Studio preview of the Timeline Item pattern.
  • ROU-3490 - Fixed an issue with the Tabs pattern that prevented the element width from being set when the element inside the Tab content was dynamic.
  • ROU-3496 - Fixed an issue with the Dropdown Search and Dropdown Tags patterns that caused the content balloon to overlap the UI element. Now you can lock the width of the columns inside the Gallery pattern. This prevents the elements inside the Gallery pattern from pushing the columns outside of the screen or applying different column widths.
  • ROU-3501 - Fixed an issue with the AddFavicon client action that failed when used on the OnApplicationReady system event.
  • ROU-3509 - Improved Accessibility on UserAvatar UI Pattern by adding a missing aria-role.
  • ROU-3518 - Now, the Dropdown Search and Dropdown Tags patterns are properly destroyed when DropdownEnable or DropdownDisable client actions are used.
    Also, note that the GetAllDropDownItemsInScreen method through OutSystems API (javascript node), was renamed to GetAllDropdowns.
  • ROU-3533 - Fixed an issue that prevented some client actions from working correctly due to the OutSystemsUI.js file not being loaded when the client actions are in use. Now, by default, the OutSystemsUI.js file is loaded for all actions that are not UI pattern related. This includes the DeviceDetection, Utilities, Network and Accessibility actions.
  • Also, the SetLocalLanguage and SetServerDateFormat settings are now private since they're only used internally by the framework and should not be exposed as client actions.
  • ROU-3549 - Fixed an issue with the User Avatar widget when used with an image. The classes in the extended class were not being added to the image classList, causing this parameter to be ignored when an image was provided.
    If some use cases have logic to switch between showing an image and showing initials, and you have an extended class, the User Avatar will work correctly.
  • ROU-3553 - Fixed an issue with the Dropdown Search and Dropdown Tags patterns that caused them to display incorrectly when in popup mode and used inside the Tabs and Accordion patterns.
  • ROU-3570 - Fixed an issue that caused the Checkbox widget to be incorrectly aligned inside a table.
  • ROU-3574 - Created a new LayoutDestroy client action to correctly remove events. For previously created applications, you can get the dependency for this client action and assign it to the Layout block.
    Now, body inline CSS variables containing viewport and header and footer height will be updated when the screen orientation changes.
    The notch property has been removed from the window object (window.notch). Now, to get the notch position, you must use OSUIFramework.Helper.NotchPosition.
  • ROU-3577 - Fixed an issue that was causing the Tabs Patterns to cut 1px pixel of the content, in some browsers and screen sizes.
Reviews (9)
22 Mar
in version 2.8.1
Estoy de acuerdo en que las app requieren actualizar y aplicar funciones que permitan autonomía, optimización y estar a la par de los adelantos desarrollados.  
in version 2.6.6
Hoped that it's working
in version 2.3.2
Best guided app development system for android web-based app
More from OutSystems