OutSystems UI Web

Stable Version 1.8.0 (OutSystems 11)
Published on 13 Jan (10 days ago) by 
Created on 09 August 2018
Create amazing web responsive applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
Read More

Speed up UI creation with a collection of pre-built, reusable and fully integrated UI Patterns that can be totally customizable and extendable with the OutSystems visual language or your Code. Easily create Right-to-Left Interfaces and ensure compliance with the Accessibility Guidelines.

Visit www.outsystems.com/outsystems-ui for more information.

What’s new (1.8.0)
  • Notice:  Due to an unintended breaking change in OutSystems UI Web 1.7.9, versions 1.7.9 and 1.7.10 will be discontinued, while this version (1.8.0) continues the upgrade path from version 1.7.8:

    • If you are on version 1.7.8 or older: normal upgrade

    • If you are on version 1.7.9 or 1.7.10, all applications need to be republished

Fixed Issues:

  • DatePicker was deprecated and a new version was created with the capability to select an interval of dates. This was done in 1.7.9 but caused an unintended breaking change, so this version rolled back the change and added the DatePicker as a new pattern to avoid it. On the new DatePicker pattern, the library was updated to version 1.8.0 and was added ability to translate the today button, using the AdvancedFormat option.

  • RangeSlider and RangesliderInterval were deprecated. A new version was created updating the library  to version 14.1.1, with several improvements: 

    • Decimal values support and the wNumb library for advanced format use cases.

    • IsDisabled parameter. 

    • IsVertical and VerticalHeight parameters, to easily change to a vertical range slider.

    • Note: the library upgrade has changes on the CSS classes used, existing customizations may be lost and need to be applied again.

  • DropdownSelect was improved when used inside Modal and Popup Pattern.

  • The Modal Pattern was improved to have a scrollable area inside it’s content.



This release brings a lot of improvements on Accessibility compliance across the framework.
There’s a new parameter on the Layout blocks - AccessibilityConfiguration - with four options:

  • ResetTabindex - if set to true, this will reset the tabindex of all elements to ‘0’, to prevent misbehaviors from positive tabindex values

  • ShowFocus - if set to true, this will add a class to the body - is-focusable - that makes the outline on focus visible.

  • ShowSkipToContent - if set to true, this will show a link (visible only on focus), that allows you to skip navigation and focus on the first element in content.

  • Lang - use it to define the language of the html. This should be filled with the correct ISO language code.

New Accessibility server actions:

  • SetAriaHidden - Use this action to toggle the status of the aria-hidden attribute of an element.

  • SetFocus - Use this action to set the focus to an element.

Other improvements:

  • The values of the semantic colors - color-info, color-error and color-success were changed, to improve contrast.

  • Text color on FeedbackMessage of type Warning, is now black, to improve contrast.

  • The values of the text-neutral-colors (7-10)  and color-primary were changed, to improve contrast.

  • On Login Screen, the App’s name is now an h1 tag.

  • ToggleElement server action received improvements with tabindex and aria attributes manipulation, when toggling the element. Added a new optional input parameter for triggerButtonId, so that the trigger receives focus after closing.

  • LayoutPopup now has focus trapped inside when open, to allow cycling between elements when Tabbing.

  • Accordion now has aria-disabled and tabindex=”-1” when disabled

  • ButtonGroup has a new optional parameter - RadioButtonId. Use this parameter to bind the Id of the radio-button inside, to the For attribute on the label. 

  • Carousel now correctly changes the focus on navigation.

  • Dropdown now correctly shifts tabindex value when open or closed. 

  • Added hidden label around search input, on DropdownSelect.

  • FloatingActions now correctly changes aria and tabindex attributes dynamically.

  • Added tabindex=”-1” to all elements inside Modal, when closed, to disable navigation with tab.

  • Removed onBlur event on Tooltip.

  • Removed tabindex from links inside NavigationBar.

  • Sidebar now has focus trapped inside when open, to allow cycling between elements when Tabbing. Added tabindex=”-1” to all elements inside it, when closed, to disable navigation with tab.

  • On Tabs, added logic in order to manage the tabindex and the arrows keyboard behaviours, and reset all the “aria-labelledby” attributes for the TabsContentItems

  • On Timepicker, added role=”option”.

  • Disabled keyboard events on ButtonLoading, when IsLoading is true.

Reviews (0)
Components, Libraries, Themes, UI & Widgets
Support Options
OutSystems Supported
Customers entitled to Support Services may obtain assistance through Support.
See all 1 dependencies
Component Consumers
See all 8 consumers
Weekly Downloads