New features:

• New ScrollableArea UI pattern. Simple scrollable placeholder for content. Ideal to display multiple elements in a single, scrollable row or column.

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.

Fixes:

• Now tabs and dropdowns patterns have the correct z-index to prevent the conflicting of elements on the screen.
• Now the tabs pattern displays its content correctly when used list is fetched from other resources.
• Now the tabs pattern renders correctly without any errors when used in custom layouts.
• Now the IsWebApp client action returns the correct value.
• Fixed an issue on the tooltip pattern that was causing multiple event listeners to be added on the screen.
• Now the section group pattern works properly when it's used inside the tabs pattern.

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

Fixes:

• Fixed an issue on RangeSliderInterval's InitialIntervalStart and IntialIntervalEnd parameters, that was causing the sliders not to move on runtime.
• Fixed an issue on RangeSlider InitialValue parameter, that was causing the sliders not to move on runtime.
• Fixes the use of 'UsePadding' on AccordionItem when this parameter is set to False.
• Fixed accessibility errors on DropdownSearch and DropdownTags, due to missing labels and input association.
• OnPullToRefresh is now available on PWAs.
• The detection of changes in the NetworkStatusChanged block is now done automatically.
• Fixes the position of the Upload Widget's validation message when used inside a Form.
• The IsOpen parameter on Sidebar was fixed, to properly work when setting the pattern as open on the screen's render. This may cause the Sidebar to appear as open on opening the page, if you had set a local variable to the IsOpen parameter, with the value as True by default.

New Pattern:

• Rating - Use this pattern to let your users score your products and services.

Fixes:

• Fixed styles for form elements not-valid, when using the EnableAccessibilityFeatures parameter as true.
• Fixed accessibility errors due to empty buttons on LightBoxImage pattern.
• Fixed an issue on SubMenu pattern that was causing multiple click events being added on body.
• Now the content of each screen no longer overlaps in transitions. Added a background color, var(--color-background-body), to Content layout's placeholder to improve and fix the transition of each screen.
• Now the AnimatedLabel has a margin-top when is first child of an accordion pattern.
• Now the AnimatedLabel renders correctly and applies active class on Label, according to the input's value.
• FloatingActions is now correctly positioned on top, when using the Layout Blank.
• Removed aria-role="carousel" from Carousel pattern, to prevent errors on accessibility validators.

Improvements:

• Dropdown disabled CSS was updated to prepare for upcoming change on the html structure. The class .dropdown-disabled will be moved to the parent element, and the attribute disabled will be added to the select html tag.
• On SideMenu layout, the Submenu items are no longer closed on a body click.
• Removed vertical-align: top on textarea inputs, to improve alignment of validation messages.
• Removed min-height: 100% from .layout selector, as it was already being overridden by the min-height: 100vh CSS.

New pattern:

• InlineSVG - use this pattern to render custom SVG markup in you screens. This way it's possible to change the fill and stroke properties, or to animate the SVG paths.
  
  

Fixes:

• Fixed issue on Pagination pattern relative with list virtualization of each element rendered.
• The padding-none class now works when used on CardBackground's ExtendedClass parameter.
• Fixed the Animated Label's behavior when its value is empty
• Fixed the value of aria-hidden of AccordionItem when the content is open/closed.
• Fixed the Accordion Item arrow's animation axis.
• Fixed the scroll position when navigating between screens using the browser's back button.
• Fixed an issue that prevented users from using the optional parameter URL to preview images with the LightboxImage pattern.

Improvements:

• The carousel now sets 3 new CSS Variables on the body of the page to allow custom CSS animations:
  • .var(--{carousel.id}-width)
  • . var(--{carousel.id}-position)
  • . var(--{carousel.id}-items)
  • The name is dynamic, using the caruosel.id, to allow multiple carousel animations on the same screen.
  • You can see an example on how to use this, in the new Onboarding With Animation Screen Template.
• Now it's possible to set full-width on the Sidebar pattern using the full-width utility class on the ExtendedClass parameter.
• New CSS utility classes available:
  • position-relative: apply relative position to elements.
  • position-absolute: apply absolute position to elements.
  • absolute-[top,top-right,top-left, bottom, bottom-right, bottom-left, center, center-top, center-right, center-bottom,center-left]: set the element position in all sides. The CSS classes were added independently for each position. 
  • border-[top, bottom, left, right]: add border lines to elements or using into columns, the border will apply only to each column item. The CSS classes was added independently for each side. 
  • border-radius-[top, bottom, left, right]-soft: modify the border-radius of an element. The CSS classes was added independently for each corner and for each side. 
  • flex-direction-column-reverse: reverse the order of elements.
  • align-items-initial: useful to reset the flex alignment of patterns, using flexbox. 
  • align-items-flex-end: align content with text,using flexbox.
  • align-items-baseline: align content with element's bottom, using flexbox.
  • remove-card-gradient: remove the card background gradient, using the ExtendedClass parameter.
  • scale-up: animation style to scale up elements.
  • break-word: break text inside elements.

• Discontinued due to a bug introduced related to missing border radius utility classes.

Fixes:

• 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;
  
  
  
  

Fixes:

• Fixed button text alignment on legacy OutSystems UI Base Theme, to be correctly centered.
• Fixed an issue that was causing the runtime errors when the Menu block was empty.
• Fixed an issue that was causing some flickering on the screen transitions in Native Apps.
• Fixed an issue that was causing runtime errors when the 'app-menu-links' element wasn't present on the Menu block.

Fixes:

• Changed AccordionItem line-height CSS property, to correctly display the alignment between the title and the arrow icon. This might cause a visual breaking-change, as the overall height of the AccordionItem's title will be reduced;
• Fixed DropdownTags behavior when manipulating the SelectedItemsList parameter on the OnChange event;
• Now it's possible to scroll horizontally on Tabs header when they have multiple items and don't fit on screen;
• Fixed an issue that prevented the Tabs pattern to be used inside another Tabs pattern;
• Now the labels and inputs are side-by-side when a width is applied to each element inside form. The validation messages were revisioned to appear in the right places, below each element;
• The AdvancedFormat parameter of the DatePicker pattern now has two keys. We added the i18nAccessibility key, a new category to translate the accessibility text in DatePicker. The i18n is the same to prevent the breaking changes in the existing apps. This issue resulted in "Cannot read property '0' of undefined" error and it was introduced as a side effect of the recent accessibility improvements;

Notice: 

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.

Fixes:

• Fixed DatePicker error related to ‘opts not defined’. 

• Fixed DatePicker compatibility with the new accessibility features for focus styles.

Known Issue:

• At the moment, there is an issue on the DatePicker, introduced as a side effect of the Accessibility improvements done recently. So, what is the problem exactly? The i18n option requires to translate all the fields, or else an error is thrown.
  
  After the Accessibility improvements, there are new strings that need translation, so your previous configuration does not work in this version, What will OutSystems do? We will analyse the possibility of supporting the partial translation, so a normal translation like the one on this thread works like before. We will also support the translations for Accessibility.
  
  As a workaround, you can translate all the strings through AdvancedFormat parameter, including the Accessibility ones, as described bellow:
  
  "
  {
      i18n: {
              // Accessibility attributes and text to be displayed
              ariaLabelIsDisabled : "Disabled. ",
              ariaLabelIsToday   : "Is Today. ",
              ariaLabelDaySelected : "Day selected. ",
              ariaLabelHasEvent : "Has event. ",
              ariaLabelDaysInRange : "Day is in range. ",
              ariaLabelStartRange  : "Start range. ",
              ariaLabelEndRange : "End range. ",
              ariaLabelNavigation  : "navigation",
              ariaLabelMonth : "month",
              ariaLabelYear : "year",
              ariaLabelPreviousMonth : "Previous month",
              ariaLabelNextMonth : "Next month",
              ariaLabelKeyboardShortcuts : "keyboard shortcuts",
              ariaLabelCalendarDates : "Calendar dates",
              keyboardShortcutsDialog : ['The following keyboard shortcuts are available','LEFT / RIGHT to move day to day.','UP / DOWN to move week to week.','DELETE to reset the date.','ESCAPE to close the calendar.','PAGE UP to move to the previous month.','PAGE DOWN to move to the next month.','SPACE / ENTER to select a date.'],
              keyboardShortcutsDialogButton : "Got it!",
              ariaLabelDateSelected : "Date selected: '",
              ariaLabelCalendar : "Calendar",
              ariaLabelGoToToday : "Go to today",
              ariaLabelOpenCalendar : "Open. Press Enter to close the Calendar",
              ariaLabelCloseCalendar : "Closed. Press Enter to open the Calendar",
              ariaLabelEnterCalendar : "Press Tab to enter the Calendar",
      }
  }
  "

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.

• We also added the SetLang action. Use it in the OnReady action of a Layout to specify the language of the element content (for example, "en-EN").
• We added the ToggleTextSpacing action in Logic > OutSystemsUI > Accessibility. Use it to let the users increase the letter spacing, word spacing, and line-height across the app.
• We added the SetAccessibilityRole action to improve accessibility compliance. Use the action if you need to change the default role of a component. We also revised Screen Templates and included this accessibility feature.

Improvements:

• Improved ActionSheet keyboard interactions to only focus content when it's open, and to create a focus trap inside the pattern.
• We've improved OutSystems UI to include the following WCAG 2.1 compliant features: enhanced contrast for non-graphic elements like inputs, checkboxes, radio buttons; enhanced focus states; enhanced links.
• Added improvements to the accessibility compliance of the MasterDetail pattern on mobile devices.
• The Warning Alert has had its styles changed to improve the contrast ratio of the colors, as required by WCAG 2.1. Note this is a visual breaking change if you have not customized this component.
• Added the missing hover styles in Checkbox and Switch widgets.
• The text links are now underlined when you hover over them.

Fixes:

• Fixed the exception that happened when you set the menu as hidden. The issue was caused by invalid event listeners.
• Note: We now prevent the "cannot read property 'children' of null" JavaScript error on screens when you change the default base structure or classes of the menu block.
• Fixed issue that was preventing the initialDate to appear as selected on the DatePicker.
• Fixed the visibility of tabs content when using it inside popups.

Improvements:

• 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.

Fixes:

• Fixed an issue that was causing DropdownSearch to call multiple events and create multiple requests.
• Fixed the content of the tooltip that appeared above the header. Now the tooltip content is only visible above the header when the balloon is opened.
• Now screen readers ignore the mobile menus that are closed. This improves the accessibility of the apps.
  

Improvements:

• We improved the robustness of the OutSystems UI Theme by replacing many hard-coded values with the CSS variables.

Fixes:

• 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.

What’s new:

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.

Improvements:

• 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.

Fixes:

• 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. 

Known issues:

• 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

• If DatePicker doesn't show, make sure that you place the DatePicker Block after the input widget in the Screen.

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 Issues:

• 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 

Improvements:

• Improved DatePicker behavior when used with Date and DateTime type inputs. Now it always changes the type of the input to text in runtime.
• Added a title attribute on DropdownSearch and DropdownTags, to improve Accessibility compliance.
• DropdownTags now correctly apply primary-color to border when being focused or opened.

Fixed Issues:

• Fixed an issue where MasterDetail would focus on the content area content while used in Phone.
• Fixed an error when using MasterDetail in screens with a layout that did not have a “.content” container.
• Fixed a misbehavior when dragging the Carousel and opening Accordion items in Firefox.
• DropdownSearch and DropdownTags now render even when used with an empty list.
• Fixed error on DropdownTags that caused duplicated items to appear.

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.

Improvements:

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

• UserAvatar

• Tooltip

• ActionSheet

• Carousel

• DropdownSearch

• DropdownTag

• FloatingActions & FloatingActionsItem

• Notification

• RangeSlider/ RangeSliderInterval

• Search

• StackedCards

• Pagination

• SectionIndex

• Submenu

• Tabs

• TimelineItem

• Wizard

• ProgressBar/ ProgressCircle/ ProgressCircleFraction

• ButtonLoading

Improvements:

• Added a new public action ScrollToElement, in the Utilities folder. This action allows to automatically scroll to a given element on the page.

Fixed Issues:

• Fixed Tooltip issue when used inside Lists with the trigger as hover.
• Fixed setDeviceBreakpoint client action. Now it correctly adds the classes on body.
• Improved Gallery responsive behavior.
• Sidebar, ActionSheet and Notification Patterns now renders properly inside Tabs.
• AnimatedLabel Pattern was improved to work properly with autofill from the Browser.
• On Mobile Templates, on pages that contain the MasterDetail Pattern, the calc of height in main-content was removed.

Improvements:

• 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

• Added new UI Pattern - Button Loading. This pattern comes with a button widget that can be set to a loading state, with a spinner animation.

Fixed Issues

• Removed unused dependencies to improve the compilation of each app.
• Fixed Lightbox issues previewing a recent uploaded image.
• Fixed issue that prevented containers to be correctly used on Title and Actions placeholders
• When DatePicker is used Inside AnimatedLabel, with an input type Date, the native calendar is now hidden.

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

Improvements

• Changed icons for CarouselGoTo, CarouselNext and CarouselPrevious actions.
• Fixed Lightbox issues previewing a recent uploaded image.

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