OutSystems UI

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

Improvements:

• Calendar Pattern now has the name Datepicker

Breaking Change:

• Improve the consistency of the placeholders names - this will require you to refresh references and all consumers. 

Fixed Issues:

• Created a toggle action for Sidebar

• Updated Licenses block

Fixed Issues:

• Add support for the Notch in new iPhones (iPhone XR, XS and XS Max).  

Fixed Issues:

• Add support for the Notch in new iPhones (iPhone XR, XS and XS Max).  

Fixed Issues:

• HideHeaderOnScroll now works properly after screen content change

Fixed Issues

• Improved usage of Lists inside the Carousel.

Improvements

• Updated references from to Charts Mobile 1.1.0.

Breaking Change

• Removed previously deprecated patterns

Improvements

• Upgraded modules to OutSystems 11
• New applications no longer have an empty home screen
• Minor updates to improve Service Studio preview
• Silk UI Mobile is now OutSystems UI Mobile

Fixed Issues:

• JSONSharp license information was removed from the Licenses text

Improvements:

• Silk UI Mobile is now OutSystems UI Mobile
• Calendar Pattern now has the name DatePicker
  
  

Breaking Change:

• Improve the consistency of the placeholders names - this will require you to refresh references and all consumers. 

Fixed issues:

• Created a toggle action for Sidebar

• Updated Licenses block

Fixed issues:

• Add support for the Notch in new iPhones (iPhone XR, XS and XS Max).
• HideHeaderOnScroll now works properly after screen content change

Fixed issues:

• Add support for the Notch in new iPhones (iPhone XR, XS and XS Max).
• HideHeaderOnScroll now works properly after screen content change

New Feature:

• There's a new version for the RangeSlider and the RangeSliderInterval, we added an AdvancedFormat parameter to allow you for deeper and more complex customization. The old versions are now considered deprecated.

Fixed issues:

• Fixed issued on Sticky Headers where the height of the first header would not be calculated properly
• Fixed clicking issues when using Google Maps
• Fixed issues in RangeSlider and RangeSliderInterval related to the pip numbers where on an interval between 0 and 5, the numbers would not be displayed correctly
• Removed the call home from Silk UI which sent analytics for adoption measurement

Breaking change was detected, the new version will be released on Thursday (14th of June 2018)

New:

• In preparation for the next MABS update, applications built with Silk UI Mobile will automatically adjust the layout for the iPhone X and also provide a CSS class "iphonex" so developers can use this information for customizations.

Fixed issues:

• Improved description and removed warnings for the GetNetworkType and GetNetworkStatus actions.
• Fixed an issue on the Sidebar pattern where it would be on the wrong layer, blocking access the content.

Fixed Issue

• Fixed Issue on PullToRefresh when navigating between two pages with the option set as true.

Fixed Issue

• Fixed an issue that caused the PullToRefresh feature to create an empty space on the screen, if controlled by a local variable.

Fixed Issue

• Fixed an issue where it was possible to pan the screen horizontally in Android devices

Fixed Issue

• Fixed the wrap of Carousel items using the If widget inside them

New

• LightboxItem pattern was deprecated to give place to an improved version: it now has a single placeholder for the thumbnail and the full version will load only after a user tap
• Opening the Mobile Theme Customizer from the Application Theme now allows you to directly apply it on your app without the need to copy - paste the CSS

Fixed Issues

• Added an OnDestroy action to the Carousel for improved performance
• Lists in iOS now use the GPU for improved rendering performance
• Fixed an issue with long sentences inside the Carousel
• The Carousel will now adjust to the screen height when used directly inside a LayoutBlank, for improved Onboarding screens
• Improved the calculations on Carousel to adjust the size of certain elements
• Improved the calculations on the TouchEvents and SwipeEvents patterns
• Improved the Menu animation for iOS 11
• Fixed the z-index for the Sidebar to stay below the Menu in certain edge cases

Known Issue

• StickyHeaders of Sections on iOS11 may have an unpredictable behavior and blink during scroll

Fixed Issues

• Addressed an issue caused by a Google Chrome 61 breaking change on the navigator.connection API (requires publishing all consumers)

New

• Added action to disable swipe animations on tabs (DisableTabsSwipe)
•  Added action to disable swipe animations on Carousel (DisableCarouselSwipe)

Fixed Issues

• Fixed CSS class typo align-items-stretch
• Improved Carousel performance and rendering
• Fixed issue on the Carousel, now it's possible to scroll the page above it
• Fixed issue on Carousel on list remove/add and global actions
• Improved Tabs' performance
• Fixed issues with StickyHeaders
• RangeSlider and RangeSliderInterval now limit the amount of pips if the number is too large
• Improved the performance and rendering animations of bottom bar items and list-item
• Improved NetworkStatusChanged performance

 Fixed Issues

• Fixed the CSS for the events' color on Calendar 
• Fixed issue with the z-index of the select inputs on the Calendar
• When the orientation is changed, Charts used within a Carousel will now adapt to the right width

New

• Added new Useful Classes to Silk Mobile (border, paddings, margins and flex properties among others)

• Provided a hint that tabs are scrollable

• New public action on Tabs to go to specific tab

 Fixed Issues

• Fixed JavaScript issue on Orientation Change on Carousel

• Added Login Button to the Invalid Permissions screen

Fixed Issues

• Fixed an error when opening and closing the ActionSheet introduced in version 1.3.0

Fixed Issues

• Improved the HideHeaderOnScroll feature of the layout
• Improved performance for Android devices

New

• New Block to display the new Mobile App Feedback instructions

Fixed Issues

• Javascript selectors 'querySelector(id)' were replaced with 'getElementByID'

• Description was added to the following client actions: GetNetworkStatus(), GetNetworkType()

• Animation issues inside List Item fixed

• Added bold font weight to strong and b elements

• Updated Icons and Description of Base Templates

• Warning added on ServiceStudio when using list without "Disable-virtualization=True" inside Interaction Patterns

• Fixed issues with Active Tab when dragging between tabs.

New

• Added a new Client Action to toggle the active state of Cards and List Items, quickly allowing them to be marked as selected. It can also be used for other elements if they support rules for the “active-element” CSS class.

Fixed Issues

• Corrected the vertical alignment of items inside the Header Left placeholder. This issue was caused by improving the Touch area of the Menu Icon in a previous release.

New Patterns

• StackedCards: Stacked cards for multiple swipeable items that can be dragged to the left, right or top, firing different events. Developers can now call public actions to trigger methods on the Block from the screen directly. Preview on Website
• Carousel: A Carousel with multiple items in an horizontal scroll. We’re releasing a new Carousel Pattern with improved functionality, performance and extensibility. The old Carousel Block is still available so you won’t get any breaking changes, but please update your apps soon :) Developers can now call public actions to trigger methods on the Block from the screen directly. Preview on Website

Fixed Issues

• Pressing the Enter button will now trigger the Login action
• Fixed incompatibility issues with Dropdown inside Tabs
• Fixed an issue where elements inside the HorizontalScroll would use display: inline
• Sidebar now allows multiple instances on the same screen
• FloatingActions now doesn’t open if there are no buttons or links inside. This allows developers to trigger the Click event to perform other actions directly from the main button

Silk UI Website

• We now have Cheat Sheets for both Web and Mobile versions of Silk UI on the Website
• There’s a cool easter egg for you to find on the Mobile Patterns page, good luck!

Silk UI Mobile 1.1.2 is only compatible with version 10.0.200 and above.

Improvements and Bug Fixing:

• Added ability to horizontal scroll when tabs' header don't fit in the viewport

• Fixed issue on Lightbox using images from local storage
• Improved scroll on iOS devices

Silk UI Mobile 1.1.1 is only compatible with version 10.0.200 and above.

Improvements and Bug Fixing:

• Fixed an issue where the VerticalAlign pattern content was always aligned to the left, even inside right or center aligned Containers

• Fixed a problem where the Menu block was not able to scroll to view additional links inside Service Studio

• Fixed an issue with Submenu items not opening in Android 4.4.2

• Fixed an issue with the viewport not reacting to keyboard opening and closing on Android 4.4.2

• Increased the touch area of the RangeSlider pattern to easily change values

• Increased the touch area of the Menu and Back buttons on iOS devices

• Removed pointer events from the List Item animation, to prevent other patterns from misbehaving inside List Items

• Added support for Transparent Status Bar - Knowledge Base

Silk UI Mobile 1.1.0 is only compatible with version 10.0.200 and above.

New Pattern:

• CenterContent - a Pattern that allows developers to center any content vertically inside the Layout content or other Patterns - Link to website

Improvements and Bug Fixing:

• Fixed a problem in the Calendar, where sometimes the time was not being set

• Fixed a problem with RangeSlider, where sometimes the displayed pips were not matching the min and max values

• Fixed a problem with Bottom Bar items, where disabled links would throw a runtime error

• Added an option to manually set the active BottomBar item, for advanced use cases where developers need the same screen with different parameters

• Removed Pattern specific CSS classes from the Styles dropdown menu

• Improved Fade screen transitions

• Added touch feedback to List items and BottomBar items

• Improved Service Studio preview on Timeline items, FlipContent, Columns, MasterDetail, ChatMessage and Tooltip

• Removed sample content when dragging simple Patterns like Cards

• Several performance improvements and verifications to prevent runtime errors

• Added a new screen to obtain licence information - Knowledge Base

Silk UI Mobile 1.0.2 is only compatible with version 10.0.200 and above.

Breaking Change:

• Updated calls to OutSystems Public API calls for the new version
  
  

Fixed Issues

• Background Color classes are now compatible with Button Group buttons

• Lightbox performance improved when using multiple images

• Blank Slate FullHeight feature changed from JavaScript to CSS only

• Fixed an issue where Floating Actions was moved out of the BottomBar in certain circumstances

• Fixed the Submenu arrow animation for Android 4.4.2

• Calendar line height fixed for certain device sizes

• Pull to Refresh is now working with Split Screen and Master Detail

• Removed border-left from Split Screen and Master Detail

• Fixed the color of the Section Expandable icon when expanded

• Fixed a small visual bug on the Timeline separator

Improvements and Bug Fixing:

• Solved issue with switching Tabs after a canceled drag
• Solved issue with the Menu on Tablet Landscape
• Refreshing an aggregate used in a Carousel now doesn't reset to the initial position
• Added references to new List actions

Breaking Changes:

• Removed input parameter “sharing options” from Lightbox

• Changed MasterDetail

• Layout, Menu and Menu Icon structure changed

• Layout, Menu and Menu Icon actions moved to Silk Core

Improvements and Bug Fixing:

• Improved screen transitions

• Solved issues with LightboxImage rendering and using integers as groups input parameter

• Merged styles from Phone Theme to Base Theme, now all style classes are on Base and responsive rules are on Phone and Tablet themes

• Solved issues in SplitScreen Pattern regarding positioning and swapped the cross icon by a back icon in the app header

• Tablet Theme now depends of base theme directly, without importing the Phone Theme

• Added a new Input Parameter on Tabs to be able to define an initial open tab index
  
  

New Pattern:

• Calendar

Theme / Patterns UI

The overall UI of the Layout and Patterns was reviewed to improve consistency and bring mobile apps close to a native look and feel:

• Better use of margins and paddings across all patterns

• Removed gradients and most shadows, as the trend for native apps is to go Flat

• Improved cross platform experience for several patterns

Pattern changes

• Floating Actions: new placeholder to add an icon

• Progress Circle: changed default height value

• Range Slider: added “active” state when dragging the handler

• Search: improved UI when used on the Header Right Actions placeholder

• Wizard: added placeholder for a label below the circle

Animations

All animations in Silk Patterns were reviewed to increase performance by reducing the usage of the CPU and relying on Hardware Acceleration

Gestures

It is now possible to open the Menu or the Sidebar by pulling them from the side with a swipe gesture, this also works to close them. The notification can also be dismissed by swiping up.

Login Experience

Added a spinner to the Login button to be displayed when the login action is running

18 Bug fixes