Using Mobile and Reactive Patterns

Components and UI patterns specially designed to address common application use cases in mobile development.

OutSystems UI Mobile Framework offers you different patterns that you can drag and drop to the screen for a great mobile experience.

• Date Picker
• Carousel
• Columns
• Gallery
• Lightbox Image
• Master Detail
• Range Slider Interval
• Range Slider
• Stacked Cards
• Swipe Events
• Tabs
• Touch Events

Articles in this Section

• Columns

  The Columns UI Pattern splits content into separate columns.

• Display on Device

  Display on Device improves the way information is displayed on different devices.

• Gallery

  Displays content (such as cards) in a specific set of columns, configurable per device type and orientation.

• Master Detail

  Displays a master list and the details for the currently selected item.

• Accordion

  Accordion expands vertically-stacked content by clicking on the header.

• Alert

  Alert gets the end user's attention and highlights important information, errors or warnings on the screen.

• Blank Slate

  Blank Slate informs end users when they start using the application, complete a task or when there is no data available for display.

• Card

  Card groups small pieces of information and highlights them on the screen.

• Card Background

  Card Background groups short pieces of information and highlights them on the screen while providing additional relevance by using a background image.

• Card Item

  The Card Item widget allows you to list items with multiple content types, such as an image or icon, a title and description, and an action to the right.

• Card Sectioned

  Card Sectioned groups short pieces of information in sections and highlights them on the screen.

• Chat Message

  Chat Message displays conversation posts in notifications or chat screens.

• Flip Content

  Flip Content prioritizes information display, keeping the interface uncluttered.

• Floating Content

  Floating Content displays a panel that floats over content (like a map or an image), docked to a screen corner or direction.

• List Item Content

  List Item Content is used to layout content such as icons, text, and actions inside a list in a readable way.

• Section

  Section separates content into groups, easing visual organization.

• Section Group

  Use the Section Group UI Pattern to keep the context of the header while progressively viewing more content by scrolling.

• Tag

  Tag styles small texts in a colored tag format.

• Tooltip

  Tooltip dynamically displays simple informative content on end user interaction.

• User Avatar

  User Avatar displays user information in a circular badge.

• Action Sheet

  Option menu, which slides from the bottom of the screen, triggered by a user action.

• Animate

  Animate adds default animations to emphasize elements as they appear on the screen.

• Animated Label

  The Animated Label animates a label when there is user input.

• Carousel

  Displays multiple items in a horizontal slide.

• Date Picker

  Date Picker allows the end user to select a single or a range of dates using a calendar.

• Dropdown Search

  The Dropdown Search UI Pattern offers a choice of available options that the user can search.

• Dropdown Tags

  The Dropdown Tags UI Pattern offers multiple choice options to the user when using a dropdown search.

• Floating Actions

  Floating Actions displays an action that floats in the bottom right corner of the screen.

• Horizontal Scroll

  The Horizontal Scroll displays a subset of a category, a finite amount of sections, slides, or content that's larger than the screen.

• Input with Icon

  Input with Icon allows the end user to input data with the help of a hint.

• Lightbox Image

  Displays an image thumbnail that can be clicked to open a fullscreen image.

• Notification

  The Notification UI Pattern is a contextual short message that provides important information to the user.

• Map

  Use the Map pattern to ad Google Map to your app.

• Range Slider

  Allows the user select a single value between two range values.

• Range Slider Interval

  the Range Slider Interval UI Pattern allows users select a single value between two range values.

• Search

  Search allows the user to find pieces of content without the use of navigation.

• Sidebar

  Sidebar shows additional content on the side of the screen.

• Stacked Cards

  Adds swipeable cards that can be dragged in multiple directions triggering events, such as deny, approve, and archive.

• Video

  Video allows you to embed a native video player.

• Bottom Bar Item

  The Bottom Bar Item provides access to a bottom navigation drawer

• Breadcrumbs

  Breadcrumbs present the location of the user within the hierarchy of applications.

• Pagination

  The Pagination UI Pattern helps users find a specific item on long listings.

• Section Index

  Section Index organizes the content of a screen, enabling quick navigation within the page.

• Submenu

  Submenu is used to create a menu contained within another menu.

• Tabs

  Displays large sets of information, which can be split into different areas, while always remaining a click away.

• Timeline Item

  Timeline Item indicates related events in chronological order.

• Wizard

  Wizard splits complex tasks and process into steps.

• Badge

  Badge display numerical information as notification.

• Counter

  Counter shows the total number of occurrences of several values regarding a single topic.

• Icon Badge

  Icon Badge displays numerical information as notification.

• Progress Bar

  Progress Bar displays the progress of a task by incrementing values in a bar.

• Progress Circle

  Displays the current progress of a task using circular or semi-circular progress indicators.

• Progress Circle Fraction

  Display fraction values by incrementing values in a circular badge.

• Align Center

  Align Center places content horizontally or vertically within a container.

• Button Loading

  Use the Button Loading pattern to call actions that don't run immediately.

• Center Content

  Use the Center Content pattern to align the content to the center of its container.

• Margin Container

  Use the Margin Container and easily add symmetrical padding around a container.

• Mouse Events

  The Mouse Events UI Pattern enables click events on a specific widget or pattern.

• Swipe Events

  Swipe Events UI Pattern enables swiping on a specific widget.

• Touch Events

  The Touch Events UI Pattern enables touch events on a specific widget.

• Public Actions