Give us feedback
outsystems-ui
Reactive icon

OutSystems UI

Supported
Stable version 2.15.0 (Compatible with OutSystems 11)
Other versions available for 10
Uploaded on 27 Mar (5 days ago) by 
4.6
 (116 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.15.0)

What's New:

  • ROU-2712 - Now, it’s possible to add gradients to the ProgressBar and ProgressCircle components, by using the client action ProgressApplyGradient, with four gradient types to choose from:

    • LinearHorizontal (90deg)

    • LinearVertical (180deg)

    • LinearDiagonally (135deg)

    • Radial

    • The action also accepts a list of color items, composed of the color itself and the percentage to be used (if not provided, the percentage will be automatically calculated).

  • ROU-4045 - Now, the ProgressCircle component allows defining its size (using px, %, or vw units) by using the new input parameter Size.

  • ROU-4050 - Now, the Sidebar component has an Initialized event to run actions when the component is initialized.
    Created an action called SidebarClickOutsideToClose to toggle the outside click behavior on the Sidebar.
    With this action, it’s possible to override the HasOverlay behavior or add a behavior on the Sidebar component to close it by clicking the body.

  • ROU-4074 - Added support for the latest versions of the iPhone by updating the associated dimensions on the framework when applying the CSS class iphonex.
    We’ll support - iPhone X / iPhone11 / iPhone12/ iPhone13 / iPhone14.

  • ROU-4087 - Now, the Pagination component allows starting on different pages while manipulating the Start Index and when setting the flag to ShowGoToPage = True.

  • ROU-4100 - New extensibility configurations were added to the NoUISliderConfigs structure that contains the properties available on the SetNoUISliderConfigs client action:

    • Margin: set a minimum distance between the handles. Only available for RangeSliderInterval.

    • Limit: set a maximum distance between two handles. Only available for RangeSliderInterval.

    • Behaviour: choose the way to handle user interaction.

    • Range: define the value for each range segment in a non-linear slider.

    • Snap: set to true to force the slider to jump between the specified values when a non-linear slider (Range) has been configured.

  • ROU-4123 - Now, the Submenu component has an Initialized event to run actions when the component is initialized.
    Now, the Submenu component has an OnToggle event to run actions when the component toggles between open and close.

  • ROU-4155 - Now, RangeSlider and RangeSliderInterval will be using the latest version of their library provider (noUISlider v15.7.0).

  • ROU-4189 - Now, the Licenses block has its styles aligned with the similar block on all supported plugins, using only the CSS class license-font for any further customization and having no impact on design time.

 

Fixed Issues and Improvements:

  • ROU-4005 - Fixed an issue on the BottomSheet component that was preventing the ability to select DatePicker, DateRange, MonthPicker and TimePicker components.

    This occurred when these components were added to the top of the BottomSheet, due to a positioning issue.

  • ROU-4022 / ROU-4063 - Now, in order to have consistency in the client action's error handling, we'll have the error code and message outputs for the following client actions:

    AddFavicon / MoveElement / MasterDetailSetContentFocus / SetAccessibilityRole / SetAriaHidden / SetFocus / SetLang / SkipToContent / ToggleTextSpacing / ScrollToElement / SetActiveElement / SetSelectedTableRow / ShowPassword / SetActiveMenuItems / SetBottomBarActiveElement / SetMenuAttributes / SetMenuIcon / SetMenuIconListeners / SetMenuListeners / ToggleSideMenu / MenuHide / MenuShow / IsMenuDraggable / ListItemHint.

  • ROU-4036 - Fixed an issue that caused the Tabs active indicator to appear with the wrong size.

    This occurred when using the Tabs component inside other UI components.

  • ROU-4043 - Fixed an issue that caused the MonthPicker not to update the current view when changing the year. This occurred when the year was changed in runtime directly on the year input with the up/down arrows.

  • ROU-4044 - Fixed an issue that caused the Submenu component not to open or close correctly.

    This occurred when we had multiple Submenu instances inside each other.

  • ROU-4048 - Fixed an issue that caused the Sidebar to be closed when HasOverlay option was set to True. This occurred when starting to select the text inside the sidebar and moving the cursor to the sidebar overlay without releasing it.

  • ROU-4057 - Fixed an issue that caused the ProgressCircle to have an incorrect size when the Size parameter was equal to “auto”.

    This occurred when the Size parameter was ‘auto' (default value / not being used) and consequently, the ProgressCircle size was calculated automatically accordingly to the parent size.

    Now, when the Size parameter has the default ‘auto' value, the ProgressCircle will calculate it’s size based on the block parent size. Between the width and the height properties of the parent block, the lower value is selected to be used as the ProgressCircle size.

    The ProgressCircle block also has changed its CSS display property to 'inline-block', so that other content can be placed close to the ProgressCircle if desired (before the block was 100% width and much bigger than the circle SVG itself).

  • ROU-4059 - Performance improvements on two internal methods used on the internal build of the new Carousel component.

  • ROU-4073 - Fixed an issue that caused some flickering on the Layout Native screen transitions.

    This occurred when using the Tabs component on Android native applications.

  • ROU-4084 - Fixed an issue that caused the SectionIndex to stop working as expected.
    This occurred when the class .main-content was not present on the Layout.

  • ROU-4098 / RPM-2904 - Fixed an issue that caused the Date Pickers input not to be disabled when changing its Enable attribute. This occurred when changing this attribute in runtime.

  • ROU-4102 - Fixed an issue that caused the DropdownServerSide balloon to not appear properly on the screen. This occurred when using the DropdownServerSide component inside a Sidebar, BottomSheet, Popup or Notification.

  • ROU-4107 - RTL improvements were implemented in OutSystems UI layouts, fixing minor issues on layout behaviours and menu animations.

  • ROU-4115 - Fixed an issue that caused the ballon of the DropdownServerSide to not update its position. This occurred when there was an error message to show in the context of the DrodownServerSide.

  • ROU-4119 - Fixed an issue that caused the ProgressBar to have an incorrect border-radius. This occurred when using a very high value on the Height Input Parameter.

  • ROU-4121 - Fixed an issue that caused the BottomSheet to not close correctly. This occurred when dragging outside of the bounds of the BottomSheet and then using a Button to close it.

  • ROU-4123 - Fixed an issue that caused the client action SubmenuOpenOnHover to not work properly. This occurred when using the client action on the Screen or the OnReady event of a block.
    Fixed an issue that caused the Submenu to have UI problems when used on the Content placeholder of the LayoutSideMenu.

  • ROU-4128 - Fixed an issue that caused the DatePicker not to set the Vietnamese language. This occurred when a developer used the DatePickerSetLanguage client action and pass “vi” as the code language for Vietnamese.

  • ROU-4139 - Fixed an issue that caused the TimePicker and MonthPicker to not update the enable/disable state in runtime. This occurred when a variable assigned to the Enable attribute in the TimePicker/MonthPicker input changed in runtime and the picker wasn’t reacting to it.

  • ROU-4140 - Fixed an issue that caused the date and time-related components to run the open, clear and update initial date APIs when disabled. This occurred when the input of the date and time-related components were disabled and their respective open, clear and the update initial date client actions ran.

  • ROU-4141 - Fixed an issue that caused the Submenu to push the content below it. This occurred when using the Submenu on the MainContent placeholder of the LayoutSideMenu.

  • ROU-4143 / RPM-3677 - Fixed an issue that caused the WizardItem to have an incorrect value for the aria-label attribute that contained the element identifier.
    Now, the WizardItem has the correct value in the aria-label attribute, in order to improve the component's accessibility, allowing the screen readers to properly read its content.

  • ROU-4144 - Fixed an issue that caused the Menu to incorrectly perform the drag animation. This occurred when using a Native app on Tablet Landscape and, setting the Menu block MenuBehaviour parameter to Visible.
    Now, the drag gestures won’t be added to the Menu and it updates correctly when changing orientation.

  • ROU-4145 - Fixed an issue that caused the positionElement option from the SetFlatpickrConfigs client action not to work. Now, the option expects the Widget identifier of the target element.

  • ROU-4158 / RPM-4158 - Fixed an issue that caused the DatePicker component not to trigger the OnSelected event. This occurred when the user used the client action DatePickerUpdateDate that uses internally the UpdateInitialDate API and where a flag was not been properly reset.

  • ROU-4180 - Fixed an issue that caused the FloatingActions component to trigger JavaScript errors on the console. This occurred when navigating to another screen.

  • ROU-4198 - Fixed an issue that caused the Tabs component to change tabs when pressing the arrow keys when the focus is on the Tabs content. 

    Now, the Tabs component just changes tabs when the active Tab Header is focused and the right/left arrow keys are pressed.


⚠ This new OutSystems UI version introduces breaking changes.

  • Now, some of the utility client actions that use the OutSystems UI API return an error message, code and success for a more consistent error handling, so consumers will need to have their references refreshed. 
  • Now, the ProgressCircle component has a new parameter called Size in the root of the component, so consumers will need to have their references refreshed. Also, the way of calculating the size of the ProgressCircle has changed, now between the width and the height properties of the parent block, the lower value is selected to be used as the ProgressCircle size.
  • Now, the Sidebar component has the new Initialized event, so consumers will need to have their references refreshed. 
  • Now, the Submenu component has the new Initialized and OnToggle events, so consumers will need to have their references refreshed.
License (2.15.0)
Reviews (12)
by Khuong
28 Mar (4 days ago)
in version 2.15.0
The way to handle ROU-4036 - Tabs with active indicators that appear with the wrong size is quite similar to my previous method, by disabling the indicator, tabs that highlight the bottom will work well, but in return, it will lose animation when sliding between tabs.
9 Feb
in version 2.14.0
Great UI. Some of the newer items are a bit buggy such as the dropdown searches.
2022-12-26
in version 2.13.0
Thanks for this solution!