Login to follow
MobileUI

MobileUI (ODC)

Supported
Stable version 1.3.0 (Compatible with ODC)
Uploaded on 19 Jun (12 days ago) by OutSystems
MobileUI

MobileUI (ODC)

Details
Detailed Description

Mobile UI is a beautiful mobile-focused UI framework designed to build mobile apps with a long-term app strategy, where excellent user experience, modern design, and fast development are top priorities.

It brings new mobile-specific widgets built on a modern architecture, new icons, updated patterns and gestures, a mobile-first theme, and an improved developer experience.

Release notes 

New Features

  • Gallery: Added a new Gallery widget to display multiple images simultaneously.
    This new addition replaces rigid, traditional grids with a clean, modern layout designed to showcase media-heavy content beautifully right out of the box. (ROU-12468)
  • Dropdown:
    • Support for Images in Options: Added thumbnails to the Dropdown widget options. This update introduces a Thumbnail property for items within the Dropdown widget. This allows developers to display images by URL alongside each option, providing a visual reference that helps users identify and select options more intuitively. (ROU-12465)
    • Support for Descriptions in Options: Added descriptions to the Dropdown widget options. This update introduces a Description property for items within the Dropdown widget. This allows developers to provide secondary supporting text beneath each primary option, giving users more context and clarity when selecting from a list. (ROU-12466)
    • Interface Headers: Added header title support to the Dropdown widget for the Modal and Bottom Sheet interfaces. This update introduces a Header Title property for the Dropdown widget, specifically when it is configured to open in Modal or Bottom Sheet mode. (ROU-12695)
  • Range Slider - Ticks: Updated the Range Slider widget to include visual tick marks when steps are enabled. This update introduces automatic visual tick marks on the Range Slider track when the Has Steps property is enabled. (ROU-12467)
  • Carousel - Programmatic Navigation API: Introduced a programmatic API for the Carousel widget. This update provides a set of new JavaScript API that allow developers to control the Carousel navigation programmatically (calling it directly on a JavaScript node). (ROU-12694)
  • Tag - Extended Colors Palette: Added 10 new extended colors to the Tag widget. This update expands the Tag color palette with ten new options: Pumpkin, Orange, Lime, Teal, Aqua, Indigo, Violet, Purple, Magenta, and Pink.
    Each of these colors supports both Subtle and Bold variants, providing a total of 20 new styling combinations to help categorize and emphasize content more effectively. (ROU-12705)
  • Date Picker - Appearance Type Parameter: Added Fill Type configuration to the DatePicker widget. This update introduces a Fill property for the DatePicker input, allowing developers to choose between Outlined and Filled visual styles. (ROU-12736)
  • Bottom Bar - Blurred Background & Hide on Scroll: Enhanced the Bottom Bar with blurred background support and scroll-aware visibility. This update introduces a Blurred Background option to the Bottom Bar, creating a modern frosted-glass effect. Additionally, a new HideOnScroll property has been introduced, allowing the bar to automatically tuck away when the user scrolls down and reappear when they scroll up, maximizing screen real estate for content. (ROU-12740)


Improvements

  • List Item:
    • List Swipe Action Expansion: Introduced a new full-swipe animation for the List Item widget. This update enables a 'Full Expand' animation that triggers when a user swipes a List Item past a predefined threshold. (ROU-12664)
    • Refined Swipe Physics: Improved the swipe animations for executing actions and closing list items. This update refines the visual physics of Swipe Actions, ensuring that both the 'full swipe' trigger and the closing transition feel more fluid and responsive to user input. (ROU-12715)
  • Bottom Sheet:
    • IDE Commands: Updated the BottomSheet widget with new IDE commands and an improved design-time experience. This update introduces context-aware IDE commands for the Modal widget, allowing developers to trigger open and close actions directly within the Service Studio environment. (ROU-12672)
    • Animation Performance: Updated Bottom Sheet transition animations to improve performance. (ROU-12702)
  • Modal - IDE Commands: Updated the Modal widget with new IDE commands and an improved design-time experience. This update introduces context-aware IDE commands for the Modal widget, allowing developers to trigger open and close actions directly within the Service Studio environment. (ROU-12673)
  • Input OTP - Responsive Slot Sizing: Updated the Input OTP widget to support responsive slot sizing and gaps. This update introduces adaptive logic for the Input OTP widget, automatically shrinking the individual digit slots and narrowing the spacing between them when the available container width is restricted. This ensures that the OTP input remains fully visible and usable on smaller mobile screens or within narrow layout sidebars. (ROU-12693)
  • Dropdown - Text Overflow Handling: Improved the Dropdown widget to handle text overflow with ellipsis. This update adds automatic text truncation (ellipsis) to the Label and Description attributes within the Dropdown widget. (ROU-12791)


Bug Fixes

  • Layout / List - Design Time Footer Alignment: Fixed an issue that caused the layout to misbehave in design time when wrapped with a List widget. (ROU-12671)
  • Input OTP - Runtime Variable Sync: Fixed an issue that caused the Input OTP widget to fail to update when its bound variable changed. (ROU-12722)
  • Radio Group - Boolean Value Handling: Fixed an issue that caused the Radio Group to behave unexpectedly when dealing with Boolean values and variables. (ROU-12730)
  • Button - Inconsistent Sizing Across Fill Types: Fixed an issue that caused the Button widget to have inconsistent heights across the same size setting. This occurred when comparing different fill types (such as Filled or Outline) using the same size property. (ROU-12733)
  • Bottom Bar - PWA flickering: Fixed an issue in the '.screen-container' styling that caused the BottomBar to flicker during screen transitions. This occurred due to differences between 'vh' and 'dvh' viewport units on mobile browsers, leading to layout shifts. (ROU-12734)
  • Badge - Limit Number Truncation: Fixed an issue that caused the Badge widget to ignore the defined Limit. This occurred when the Badge value exceeded the set Limit in design time, causing the full number to be displayed instead of the expected truncated format (e.g., '99+'). (ROU-12737)
  • Checkbox / Switch - Widget Interactivity inside Lists: Fixed an issue that prevented the Checkbox and Switch widgets from triggering events when placed inside a List widget. This occurred when the Checkbox or Switch was used within a list with virtualization enabled. (ROU-12775/RPM-6777)
  • Date Picker - Design time issue: Fixed an issue that caused the Date Picker preview to render incorrectly. This occurred when switching between different calendar views. (ROU-12830)