OutSystems UI

Stable Version 2.2.4 (O11)
Also available for 10
Published on 2 Oct (13 days ago) by 
Created on 28 June 2016
What’s new (2.2.4)

OutSystems UI now supports reactive web applications, in order to add these features, several changes took place in the framework.


This version requires all consumers to be republished after upgrading.


New features:

  • Single library of UI patterns, actions and themes that can be reused in both web and mobile apps
  • New template to start creating Reactive Web applications
  • New Theme based on OutSystems UI Web design system using CSS variables
  • 3 new screen layouts for Reactive Web with configurable breakpoints for each device
  • 5 new UI patterns for web and mobile


New UI patterns:

  • DropdownSearch - an enhanced dropdown with search capabilities, similar to Select2/ DropdownSelect
  • DropdownTag - an enhanced dropdown with multiple select capabilities, similar to Select2/ DropdownSelect when used with ListBox widget.
  • SectionIndex - New pattern, useful to organize a screen's content, enabling quick navigation within a page. Must be used with Section pattern, to automatically generate the links to the section’s titles.
  • Breadcrumbs - New pattern, used on the breadcrumbs placeholder of the layout, to present the current user location in applications with a deep page hierarchy
  • InputWithIcon - New pattern, that allows to customize an input with an Icon.


General Improvements:

  • Added ExtendedClass optional input parameter across all patterns.
  • Added support for desktop browsers and an improved device detection mechanism:
    • Detects and adds classes on body for supported browsers (Chrome, Firefox, Edge, Safari)
    • Detects and adds classes on body for supported operating systems (Windows, OSX, Ios, Android)
    • Detects and adds class ‘is--touch’ on body if it’s running on a device with touch events enabled.
  • Added new SetDeviceBreakpoints to be used on the onApplicationReady of your app, this allows setting custom responsive breakpoints for Phone and Tablet.
  • Added IsDesktop() client action, to validate if it’s on Desktop
  • Added TextEllipsis client action
  • Entity Color was deprecated and replaced by a new Color Entity with more color options.


UI Patterns improvements

21 patterns were deprecated and replaced by improved versions to support web use cases:

  • Columns:
    • These patterns are now deprecated. Please, replace with the new version. Beware that the new version no longer has parameters for setting columns for Landscape breaks.
    • ColumnsMediumRight and ColumnsMediumLeft were added.
    • GutterSize optional parameter was added to define the space between columns.
  • DisplayOnDevice
    • Added placeholder for Desktop
  • Gallery
    • This pattern is now deprecated. Please, replace with the new version. Beware that the new version no longer has parameters for setting items for Landscape breaks.
    • New Gallery created, now built using CSS Grid
    • New optional parameter for ItemsInDesktop, to support Desktop
    • GutterSize optional parameter was added to define the space between items.
  • MasterDetail
    • This pattern is now deprecated. Please, replace with the new version of MasterDetail (previously named SplitScreen)
  • SplitScreen
    • Changed name to MasterDetail.
    • Added the new optional parameter - Height - to set this block’s max-height
    • Changed the default. The height is equal to the window, minus title and header height.
    • If using the Height parameter, the height can be manually set, using ‘px’ or ‘%’
  • Accordion
    • New UI pattern, to arrange the content by having vertically stacked tabs that expand when clicked. This pattern should be used with AccordionItems (previously named SectionExpandable).
  • CardAction
    • Due to low usage metrics and weak compliance with UX best practices, this pattern is now deprecated. Please, beware that there’s no direct replacement for it.
  • CardBackground
    • This pattern is now deprecated. Please, replace with the new version of CardBackground.
    • New CardBackground created, with new Color Entity
  • CardSectioned
    • Added new placeholder - Image
    • Added the new optional parameter - ImagePadding -  to apply (default) or remove the padding around the Image
    • Added the new optional parameter - IsVertical - to toggle this pattern orientation.
  • Section
    • Removed unnecessary div around Title placeholder.
    • Added div around the whole pattern, with the new class “section”, which also is affected by the ExtendedClass parameter.
  • SectionExpandable
    • Renamed to AccordionItem. It can now be used with new pattern Accordion, to take advantage of  accordion behaviours
    • Added the new optional parameter - IsDisabled - to remove click events and give disabled styles
  • SectionGroup
    • Removed StickyHeaders script. Now uses CSS with position: sticky
    • Added new optional parameter - TopPosition - to set the top position.
  • Tag
    • This pattern is now deprecated. Please, replace with the new version of Tag.
    • New Tag created, with new Color Entity and added new behaviours:
    • Optional parameter for Size
    • Optional parameter for Shape
    • Optional parameter for IsLight
  • Tooltip
    • Added the new optional parameter - IsHover - that allows the trigger to be “hover”, instead of “click”
  • UserAvatar
    • This pattern is now deprecated. Please, replace with the new version of UserAvatar.
    • New UserAvatar created, with new Color Entity and added new behaviours:
    • Optional parameter for Size
    • Optional parameter for Shape
    • Optional parameter for IsLight
  • AnimatedLabel
    • Improved the AnimatedLabel behaviour with autofill across all browsers
  • Carousel
    • Added support for Mouse events on Desktop.
    • Added optional input parameters for ItemsTablet and ItemsDesktop
    • Improved the pagination behavior with multiple items per page and the positioning of the last page if it has any blank spaces
  • DatePicker
    • Added optional input parameter InputWidgetId - this allows to bind it to an Input Element that will trigger the datePicker to be visible.
    • Added optional input parameter ButtonWidgetId - this allows to bind it to a Button Element that will trigger the datePicker to be visible.
    • Added optional input parameter StartEmpty - this allows to define if the input (when InputWidgetId is used) starts empty.
    • Added optional input parameter DateFormat - this allows to define custom date formats. Defaults to the date format defined in the server configuration.
    • Added optional parameter - ShowTodayButton
  • FloatingActions
    • This pattern is now deprecated. Please, replace with the new version of FloatingActions.
    • The new version of FloatingActions now contains specific placeholders for Button Icon and for Items
    • Added the new optional parameter - IsHover - that allows the trigger to be “hover”, instead of “click”
  • FloatingActionsItem
    • New pattern, to be used inside FloatingActions Items placeholder.
  • Notification
    • Fixed an issue where the notification doesn’t open after closed by tap.
  • Sidebar
    • Added optional OnToggle event
  • StackedCards
    • Added support for MouseEvents
  • Video
    • New client actions for Video Pattern - Pause and Play
  • Tabs
    • This pattern is now deprecated. Please, replace with the new version of Tabs.
    • Created new Tabs Pattern, along with TabsContentItem and TabsHeadertItem
    • The new version of Tabs now contains specific placeholders for TabsHeaderItem and for TabsContentItem
    • New Tabs have new optional parameters
    • IsVertical
    • IsRight
    • IsJustified
    • Removed swipe events on Tabs, on non-native apps
    • Supports having only one content with multiple headers
  • TimelineItem
    • Added the new optional parameter - Color
  • Wizard
    • This pattern is now deprecated. Please, replace with the new version of Wizard.
    • Created a new one, with the optional parameter: Orientation
  • WizardItem
    • This pattern is now deprecated. Please, replace with the new version of WizardItem.
    • Created a new one, with the optional parameter: UseTopLabel, to change label position.
    • New placeholder for icon.
  • Pagination
    • New pattern, to allow page navigation on tables and lists.
  • Badge
    • This pattern is now deprecated. Please, replace with the new version of Badge.
    • New Badge created, with new Color Entity and added new behaviours:
    • Optional parameter for Size
    • Optional parameter for Shape
    • Optional parameter for IsLight
  • Counter
    • This pattern is now deprecated. Please, replace with the new version of Counter.
    • New Counter created, with new Entity Color.
    • Added the new optional parameter - IsVertical
  • IconBadge
    • This pattern is now deprecated. Please, replace with the new version of IconBadge.
    • New IconBadge created, with new Entity Color.
    • Added the new optional parameter - IsLight
  • ProgressBar
    • This pattern is now deprecated. Please, replace with the new version of ProgressBar.
    • New ProgressBar created, with new Entity Color.
    • Added the new optional parameter - Shape
  • Separator
    • Added new optional parameter IsVertical, to change the orientation between horizontal and vertical
    • Added new optional parameter Space, to choose the margins of the separator
    • Added new optional parameter Color, to choose the color of the line.
    • On refresh, it will be needed to add the new used Entity: Space
  • MouseEvents
    • New pattern, to Enable mouse events on a specific widget.
  • VerticalAlign
    • Changed name to AlignCenter
    • Added new optional parameter IsVertical, to choose between aligning on the Y or X axis


Other changes:

  • OutSystems UI Mobile was renamed to OutSystems UI
  • OutSystems UI module is now a library type of module (see more about libraries) and static entities from this module cannot be used in aggregates, which may be a breaking change if you are already doing it on existing mobile apps. As a workaround, these entities can be copied to another module.
  • App Templates to create Phone and Tablet Apps were moved to OutSystems Templates Mobile
  • Template Universal was removed


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

Details
Create amazing applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
Read More

Start creating amazing applications that run on any platform, iOS, Android and web, with one single framework. Take leverage of the pre-built reusable and fully integrated UI Patterns that can be totally customizable and extendable with the OutSystems visual language.

Reviews (4)
18 Jul
in version 2.1.0
Broke the User Registration Flow that I was using. I think deprecation should still allow for compatibility with earlier modules and not just drop the feature.
21 Jun
in version 2.0.9
It has great components and easy to use. 
11 Jun
in version 2.0.9
Great and simple to use!
Category
UI & Widgets, Libraries, Components, Themes
Support Options
OutSystems Supported
Customers entitled to Support Services may obtain assistance through Support.
Dependencies
OutSystems UI has no dependencies.
Requirements
Platform:
11.0.606.0
Database:
All
Stack:
.NET
Component Consumers
See all 5 consumers
Weekly Downloads