New features:
Fixes:
Fixed issue on tabindex empty on WizardItem. This issue causes an accessibility error in some Accessibility checkers.
Fixed an issue when clicking on List Items, where the animation was not visible and the <span> element created for it was never removed afterwards
Now native layouts on iOS don't have unnecessary scroll by default.
Fixed an error when changing the container element to attach the Datepicker, through Advanced Format.
Now the AppFeedbackHelper no longer shows any error on the screen when pressing the button "Got It".
Fixed the Animation Label's animation when using it with Chrome's autofill feature.
Fixed an issue that prevented Tabs to be used in combination with lists.
Removed the CSS style rule that broke the SideMenu layout when its behavior is set to "Expandable".
FloatingContent was improved to work with all .absolute-* utility class through ExtendedClass parameter.
Fixes and Improvements:
Fixed an issue that caused the time to not be displayed in an input associated with the DatePicker.
Improved the Popup widget to automatically create a scroll when the content is larger than the space available, this improvement is for both Service Studio and runtime.
Improved the icon positioning when showing a validation message on an Input With Icon.
Improved security to prevent possible DOM based cross site scripting attacks.
Fixed an issue on which the RangeSlider's OnChange event would trigger after changing other widgets on the screen.
For those creative developers out there, you can now use a Carousel inside another Carousel.
Improved the DropdownTag's search prompt.
Tooltip now opens and closes using the enter key only, instead of the space key. This change was made to prevent conflicts while using inputs inside the tooltip.
Improved the List Item Swipe actions while using right-to-left (RTL) mode.
Improved the Service Studio preview of Sub Menu while used inside the Menu block.
Deprecated patterns in September 2019 were removed.
For the last year, OutSystems UI kept 21 deprecated patterns while transitioning to Reactive Web. On this release they were removed.
Applications using deprecated patterns will be impacted by this upgrade and need to be fixed manually. This also applies if applications are using cloned versions of deprecated patterns, where the CSS or JavaScript was not cloned too.
This only applies to applications using the Mobile Base theme. Below, there’s a list with all patterns affected and the related CSS classes or scripts removed with them.
Columns:
Classes: col, gutter, cols-small-right, cols-small-left, cols2, cols3, cols4, cols5, cols6
Master Detail:
Scripts: MasterDetail script.
Gallery
Classes: gallery-wrapper, init, gallery
CardBackground
CardAction
Classes: card-advanced, card-action, expand, card-action-content, card-title, card-content
UserAvatar
Tag
FloatingActions
Classes: floating-actions, floating-actions-items, floating-actions-background, floating-actions-buttons, floating-actions-item-icon, floating-actions-icon
Tabs
Wizard
Classes: wizard
WizardItem
Classes: wizard-item-wrapper, wizard-label, wizard-item
Badge
IconBadge
Counter
Classes: .counter-number-container, .counter-large, .counter-small, .counter-number, .counter-label
ProgressBar
New Pattern:
Improvements:
New pattern:
Fixed an issue while rendering Table Records with custom width. This issue was introduced in OutSystems UI 2.5.5 version;
Fixed a security issue when using Lightbox pattern;
On the last release, we introduced a breaking-change on the AccessibilityConfiguration action. This action was deprecated, in favor of a new layout parameter - EnableAccessibilityFeatures. However, we unintendedly also made the action to stop working and it is being fixed on this version.
Fixed DatePicker error related to ‘opts not defined’.
Fixed DatePicker compatibility with the new accessibility features for focus styles.
Known Issue:
New Features:
We’re updating all UI Patterns and Layouts from OutSystems UI to make sure they are compliant with WCAG 2.1 AA accessibility standards, improving support for keyboard interactions and screen readers.
Layouts now have a new input parameter, EnableAccessibilityFeatures, to apply the correct styles when the accessibility features are enabled. When you set EnableAccessibilityFeatures to true, you activate the following features: Focus States, Skip To Content, Accessible Links, Enhanced Contrasts. These features are implemented in the CSS using the has-accessible-features selector.
Now you can use AdvancedFormat to update and translate the accessibility related text that shows in DatePicker. This improves the accessibility of the widget.
Now you can deactivate the LightBoxImage custom URL to each image to prevent accidental screen reloads. Deactivate the custom URL by adding 'disable-url' in the Extended Class parameter of the pattern. The custom URL is useful to let users navigate in browsers to the previous page, but this navigation can cause the screen to reload, especially when there are validations in the screen.
We improved the robustness of the OutSystems UI Theme by replacing many hard-coded values with the CSS variables.
Notification, one of the OutSystems UI interaction patterns, now closes when users press the Escape key. We fixed a bug in one of the keyboard event listeners.
Fixed an issue on SectionIndex pattern where the pattern wasn't rendered in the layouts without header or in custom layouts.
Fixed SectionIndex issue that was causing duplicate items, after screen navigation.
Fixed the alignment of the validation messages inside Form, below Input and other widgets.
Fixed an issue in FlipContent Pattern where spaces inside an input widget could not be added.
The DatePicker pattern now shows correctly when you place it in the Popup widget.
Fixed InvalidJavascriptType error in DatePicker when the bound input is of type undefined.
DropdownTags widget now works correctly inside the If widget.
Fixed an issue that was preventing Tabs's StartingTab parameter to work in Reactive Web Apps.
Fixed MasterDetail Pattern preview inside Service Studio. The panes of the pattern didn't wrap properly in preview with smaller window size.
The icons in InputWithIcon now properly show inside Forms.
Improved Notch in PreviewInDevices.
Phone and Tablet app templates now use the same theme as Reactive apps:
Consistent UI and CSS variables used across all apps, regardless of which app template you use:
This will only apply to new apps created from this updated version of mobile app templates, existing apps will have no changes.
Widgets and UI patterns were updated for better usage on mobile devices, both in browsers or native apps:
Heading font sizes were decreased
Buttons and Inputs size were increased
Neutral color usages across multiple UI patterns for better visibility and consistency
Tablet and Phone app templates have a new, improved layout, with a configurable menu for Tablet. To configure this option, change the value of the SideMenuBehavior input parameter:
Expandable: Toggle the menu on the side of the screen, pushing the content to the side
Overlay: Toggle the menu on the side of the screen, on top of the content
Visible: Menu is always visible on the side of the screen
Added new client actions to get device information, on the DeviceDetection folder:
GetBrowser - returns name of the browser being used
GetOS - returns the Operating System being used
GetIsTouch - returns True if the current device has touch capabilities
IsRunningAsPWA - returns True if the app is running as a PWA
Learn more about the updated App Templates in the OutSystems UI Website.
When navigating to a screen without permissions and login in, users are now redirected to the original screen instead of the home screen.
GetNetworkStatus was improved to return the right values when in a PWA.
Fixed an issue where the Accordion pattern was not updating with parameters change
Fixes RangeSlider and RangeSliderInterval behavior when resetting the patterns’ values and when setting values using inputs.
When creating a new Tablet or Phone application, the primary color will not be applied automatically:
To apply the primary color, it needs to be through the Theme Editor
There is a CSS workaround to match the old customization with the new version in the app theme
This will only happen until the next update of Service Studio
When navigating back to a previous screen, on mobile apps, the scroll position is not being applied back to the position it was before.
The associated input for DatePicker pattern in the browser is now of the text data type. This improvement ensures better compatibility with the Pikaday library and provides a more robust user experience.
This update may change how DatePicker behaves in your app during runtime, if you previously used non-textual types of input with the input. Review the user experience in Screens where you use DatePicker bound to the Input Widgets of Date or Date Time data types.
Keep in mind the following notes about DatePicker:
Use DatePicker with a text input variable. Then, use a second variable to store the value in the database and to perform validations on the server side.
If you're using other types of input, the number of custom formats is limited to the following:
Server format (as defined for the app)
"YYYY-MM-DDTHH:mm:ss.sssZ"
"YYYY-MM-DD HH:mm:ss"
"YYYY/MM/DD HH:mm:ss"
"YYYY.MM.DD HH:mm:ss"
"YYYY.MM.DD"
"YYYY/MM/DD"
"YYYY-MM-DD"
Fixes
We fixed the DropdownTags OnChange event to run only once, as expected.
DatePicker no longer causes JS console error when setting the input attribute. Previously you got a console error in the browser about a non-existing element.
Known issues
Fixed Issues:
Fixes the AccordionItem Expand and Collapse actions that had an extra input parameter.
Fixed SectionIndex issue when placed after the respective sections on the Screen. Overall improvements on pattern’s performance.
OSUIMobileBase.css was updated with some fixes and improvements in several patterns and layout regarding Notch and the Statusbar Overlay when enabled for iOS and Android.
Now instead of working with inline styles, the value of the Status bar height is calculated using the --status-bar-height variable applied on body tag
The value of status bar height now reacts when the orientation of the device changes.
The CSS for Android Devices when the Statusbar Overlay is enabled is identified following the .android[data-status-bar-height] selector
New CSS Variables were added to identify the environment safe areas for iOS Devices
OutSystemsUI.css was updated with improvements in several patterns and layout regarding Notch when used in a iOS Device
New CSS Variables were added to identify the environment safe areas
Discontinued version.
Fixed the CSS for iPhoneX with Notch, which was commented by mistake on the last release - this is related to Notch and transparent status bar improvements coming at a later date, for Android and iOS
The z-index CSS Property in Popup Widget was increased to be visible when used with MasterDetail Pattern
Fixed issues:
RangeSlider and RangesliderInterval were deprecated and there is a new version available with the following changes:
Updated to noUISlider 14.1.1.
Added keyboard navigation support.
Added support for decimal values and wNumb library for advanced format use cases.
Added a disabled state with the “IsDisabled” parameter.
Added support for vertical range slider with “IsVertical” and “VerticalHeight” parameters.
Note: the library upgrade has changes on the CSS classes used, existing customizations may be lost and need to be applied again.
Carousel navigation with multiple items fixed, after bug introduced in last release.
LayoutSideMenu’s expandable menu behavior, now correctly applies the class menu-visible.
Fixed setDeviceBreakpoints action adding the class tablet on large screen sizes.
Improved behavior of AccordionItem’s to correctly update status of IsExpanded parameter
Fixed an issue on screens with a SectionIndex, that would cause the styles of the active Pagination button to be removed.
Fixed Tabs issue that could cause the pattern to incorrectly load.
Improved DatePicker’s selectInterval UX behavior, to only close on clicking outside the pattern.
Added the ability to translate DatePicker’s “Today” button, using the AdvancedFormat i18n option.
Accessibility
This release brings a lot of improvements on Accessibility compliance across the framework.
There’s a new action on the Layout’s OnReady - AccessibilityConfiguration - with three parameters:
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:
MasterDetailSetContentFocus - Use this action on the ListItemOnClick action from the list in your Master Detail.
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.
Theme and Design System 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.
Layouts Improvements:
Added keyboard interaction and accessibility attributes on Menu, MenuIcon, ApplicationTitle and LoginInfo.
On Login Screen, the App’s name is now an h1 tag.
Pattern Improvements:
Keyboard navigation and accessibility related attributes were added on several patterns:
MasterDetail
Accordion & AccordionItem
Alert
ChatMessage
FlipContent
Tooltip
ActionSheet
Carousel
DropdownSearch
DropdownTag
FloatingActions & FloatingActionsItem
Notification
RangeSlider/ RangeSliderInterval
Search
StackedCards
Pagination
SectionIndex
Submenu
TimelineItem
ProgressBar/ ProgressCircle/ ProgressCircleFraction
ButtonLoading
Added a new public action ScrollToElement, in the Utilities folder. This action allows to automatically scroll to a given element on the page.
When creating new applications, the primary-color customization CSS is no longer in the application theme, it now uses the Theme Editor instead. This requires Service Studio 11.6.11
Added a new public action “AddFavicon”, in the Utilities folder. This action allows to define custom favicon images in your Reactive Web applications.
Fixed alignment issues on time inputs.
Fixed Tooltip issue when used inside Lists with the trigger as hover.
Fixed Gallery CSS Grid in Edge, when used inside Lists.
Fixed Wizard behavior when using both IsVertical and UseTopLabel options.
Fixed SectionGroup behavior in Edge, when using the HasStickyTitles option.
Fixed radio-buttons and checkboxes hovering showing a caret cursor inside a Form.
New Features
Fixed Issues
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 UI patterns:
General Improvements:
UI Patterns improvements
21 patterns were deprecated and replaced by improved versions to support web use cases:
Other changes:
Visit www.outsystems.com/outsystems-ui for more information
Breaking Change:
Improve the consistency of the placeholders names - this will require you to refresh references and all consumers.
Created a toggle action for Sidebar
Updated Licenses block
Improvements
Breaking Change
New Feature:
Breaking change was detected, the new version will be released on Thursday (14th of June 2018)
New:
Fixed Issue
Fixed Issue on PullToRefresh when navigating between two pages with the option set as true.
New
Known Issue
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 JavaScript issue on Orientation Change on Carousel
Added Login Button to the Invalid Permissions screen
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
New Patterns
Silk UI Website
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
Silk UI Mobile 1.1.1 is only compatible with version 10.0.200 and above.
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.
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.
Updated calls to OutSystems Public API calls for the new version
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
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
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
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