Login to follow
MobileUI

MobileUI (ODC)

Supported
Stable version 1.1.1 (Compatible with ODC)
Uploaded on 16 Mar (3 weeks 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

  • Table Records Widget: Added the Table Records widget to the toolbox for Mobile UI Apps. The widget is now directly available within the IDE toolbox for mobile development, featuring a refreshed look and feel aligned with the Mobile UI design system. (ROU-12462)
  • CSP Support: Added Content Security Policy (CSP) support for all Mobile UI widgets. Note that the Icon widget requires additional manual configuration — see the Known Issues documentation for details. (ROU-12574)
  • Dynamic Widgets:
    • Dynamic Accordion Group: Added support for dynamic Accordion Group widgets via new Items Type and Source properties. Developers can now automatically generate a set of Accordion Items from a data list, eliminating the need to manually add and configure individual widgets for every option. (ROU-12434)
    • Dynamic Radio Group: Added support for dynamic Radio Groups via new Items Type and Source properties. Developers can now automatically generate a set of radio buttons from a data list, eliminating the need to manually add and configure individual widgets for every option. (ROU-12433)
  • Carousel:
    • Static Images: Added the ability to select static images for the Carousel widget. Previously, the Carousel only accepted lists provided via a data source. (ROU-12454)
    • Pause on Interaction: Added the ability for Carousel widgets to pause automatically when users interact with a slide. When autoplay is enabled, users can now pause the Carousel by pressing on any slide, making it easier to view content at their own pace. (ROU-12451)
  • Hue Property:
    • Badge: Enhanced the Badge widget with a new Hue property for better visual control. The Hue can now be set to either Subtle or Bold, depending on the desired prominence. All existing badges will default to the Subtle style to maintain the current design. (ROU-10871)
    • List Swipe Actions: Added a new Hue property to the List Swipe Actions component. Also added a Pressed state specifically for Android devices, ensuring users receive immediate visual feedback when interacting with swipe actions. (ROU-10785)
  • Accordion — Has Dividers: Enhanced the Accordion component with a toggle for item dividers. Using the new Has Dividers property, separators between items can now be easily removed to better match the application's design language. (ROU-12455)

Improvements & Changes

  • Tabs:
    • OnTabChange Event: Improved the Tabs widget by adding an ActiveTab parameter to the OnTabChange event. This simplifies development by passing the currently selected tab's information directly into the event handler. (ROU-12471)
    • Tab Headers Overflow: Enhanced the Tab Headers component to handle overflow with horizontal scrolling. When the combined width of tab items exceeds the container width, the widget now automatically enables horizontal scrolling, keeping all tabs accessible. (ROU-12463)
  • Card — Dismiss Button Android: Improved the Card component dismiss button on Android devices by adding a visual pressed state. When users press and hold the dismiss button, it now provides clear visual feedback that matches the design system. (ROU-12461)
  • Badge Positioning: Improved badge positioning and size on Avatar, Bottom Bar, and Button widgets to match design specifications. (ROU-12460)
  • Datepicker:
    • Property Labels: Standardized the DatePicker property labels to improve readability and visual consistency, displaying them as 'Min Date and Max Date' with proper spacing for a more intuitive experience in the ODC designer and Storybook. (ROU-12452)
    • Form Scaffolding: Enhanced form scaffolding to automatically map date-related attributes to the Datepicker widget with the correct data type. (ROU-12529)
  • Textarea — Minimum Height: Improved the Textarea widget to ensure the minimum height matches the number of rows set by the developer. The component's initial height now correctly reflects the Rows property, providing a more predictable layout at both design-time and runtime. (ROU-12443)
  • Tag — Text Truncation: Improved the Tag widget to automatically truncate text that exceeds its container width. This prevents Tags from overflowing their parent containers, ensuring a cleaner and more consistent user interface. (ROU-12441)
  • Checkbox & Switch — Design-Time Placeholders: Improved the design-time placeholders for the Checkbox and Switch widgets in ODC Studio. The updated placeholders now provide a clearer visual preview, making it easier to manage layouts without checking the widget tree. (ROU-12496)
  • FeedbackMessages: Improved the look and feel of FeedbackMessages for apps using Mobile UI, providing a more polished design for mobile notifications that is visually consistent with the rest of the application's interface. (ROU-12453)
  • Avatar:
    • Fallback Logic: Improved the Avatar fallback logic at both design-time and runtime. (ROU-12368)
    • Datepicker Variable: Fixed an issue when dynamically changing the DatePicker variable. (ROU-12368)

Bug Fixes

  • Design Time:
    • Canvas Scrolling: Fixed an issue that prevented components from being selectable in the ODC Studio canvas. This occurred when scrolling to the bottom of long screens or blocks, where components would often become unreachable. (ROU-12429)
    • Widget Icons: Fixed an issue that prevented the correct rendering of widget icons in ODC Studio. (ROU-12428)
    • Layout Side Menu: Fixed an issue that caused Layout Side Menu property visibility to misbehave when toggling specific configuration properties in the IDE. (ROU-12616)
    • Checkbox & Switch Helper Text: Fixed an issue where helper text was not correctly placed within the adorner of the Checkbox and Switch widgets when the Structure property was set to Custom. (ROU-12571)
  • Dropdown:
    • App Crash: Fixed an issue that caused the application to crash or fail to open when using the Dropdown widget. This occurred when the Dropdown's Option Label was set to a data type other than Text or Integer. (ROU-12583)
    • Items Cut Off: Fixed an issue that caused dropdown items to be cut off and inaccessible at runtime. This occurred when a list was too long to fit within the viewport and the component failed to trigger a scrollbar. (ROU-12442)
  • Button Group: Fixed an issue that caused the Button Group to fail to select the correct button. This occurred when an Integer variable was used to bind the selection state. (ROU-12628, RPM-6613)
  • Tag — Full-Width Expansion: Fixed an issue that caused the Tag widget to incorrectly expand to the full width of its container when placed inside a Card widget. The Tag now correctly wraps to the length of its text. (ROU-12440)
  • Avatar & Icon Button: Fixed an issue that caused the Avatar and Icon Button status badge to not be round in some situations. (ROU-12593)
  • Widget Styling Classes: Fixed an issue that would cause certain Mobile UI widgets to have incorrect styling classes, both in ODC Studio and in a runtime application. (ROU-12587)
  • Accordion:
    • Nested Interaction: Fixed an issue that caused the Accordion to close inadvertently when interacting with a nested accordion inside an existing accordion item. (ROU-11973)
    • Keyboard Navigation: Fixed an issue that allowed disabled Accordion items to be accessed via keyboard navigation. This occurred when the Disabled property was set to True, but the item remained in the page's focus order (tabindex). (ROU-12588)