Skip to Content (Press Enter)
Community › Forge › Assets list › iOS Inspired Bottom Sheet
ios-inspired-bottom-sheet
Reactive icon

iOS Inspired Bottom Sheet

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 4 Apr (14 hours ago)
 by 
0.0
 (0 ratings)
ios-inspired-bottom-sheet

iOS Inspired Bottom Sheet

Documentation
1.0.0

iOS-Inspired Bottom Sheet

The iOS-Inspired Bottom Sheet is a high-performance, gesture-driven UI component for OutSystems Reactive and Mobile applications. It provides a modern, space-saving way to display secondary content—such as filters, details, or forms—mimicking the native "pull-up" cards found in iOS (e.g., Apple Maps or Apple Music).

1. Key Features

  • Gesture-Driven Interaction: Uses native pointer events for fluid dragging, snapping, and scrolling.

  • Persistent Peek State: Keeps a 60px "handle" always visible at the bottom of the screen, indicating more content is available.

  • Hardware Accelerated: Optimized with CSS transform: translateY to ensure a consistent 60 FPS experience.

  • Fully Responsive: Automatically adapts from a Full-Width Mobile layout to a Centered Floating Panel on Desktop.

  • Dynamic Content Support: Safely handles Tables, Lists, and Forms with internal scroll management.

  • Zero-Dependency: Lightweight implementation using Vanilla JS and CSS only.

2. Component Structure

The component consists of three main parts:

  1. Overlay: A backdrop that dims the background as the sheet opens.

  2. Panel: The main container that moves based on user input.

  3. Handle Area: The "touch target" where users can grab and drag the sheet.

  4. Content Placeholder: Where you place your OutSystems Widgets (Tables, Forms, etc.).

3. Parameters & Events

Input Parameters

ParameterTypeDescription
IsActiveBooleanControls the state of the sheet. If set to True, the sheet expands; if False, it collapses to the peek state.

Events

EventDescription
OnOpenTriggered when the user drags the sheet to the top or it is opened via logic.
OnCloseTriggered when the user drags the sheet to the bottom (peek state).

4. Installation & Setup

Step 1: CSS Configuration

Add the component's CSS to your Block or Theme. It includes media queries to ensure the sheet looks great on both mobile devices and wide desktop monitors.

Step 2: OnReady Logic

The JavaScript must be initialized in the OnReady event of the Block. This script handles:

  • Initial positioning (calculating height).

  • Pointer event listeners (down, move, up).

  • The "Snap" logic (deciding if the sheet stays open or closed when released).

Step 3: Usage

  1. Drag the iOS-Inspired Bottom Sheet block into your Screen.

  2. Place your desired content (e.g., a Table) inside the Content placeholder.

  3. (Optional) Link a button to a client action that toggles the IsActive variable to open the sheet programmatically.

5. Best Practices

  • Data Loading: If the content inside the sheet is dynamic (coming from an Aggregate), the component includes a 350ms delay during initialization to ensure the height is measured correctly after data renders.

  • Height Limits: The component is capped at 90vh (90% of the screen height) to ensure the user can always see the background context and dismiss the sheet easily.

  • Scroll Management: For long lists, the ios-sheet-content area provides an independent internal scroll, preventing the entire page from scrolling while interacting with the sheet.

6. Technical Specifications

  • Technology: JavaScript (ES6), CSS3 (Flexbox & Media Queries).

  • Compatibility: OutSystems Reactive Web, OutSystems Mobile.

  • Browser Support: Chrome, Safari, Edge, Firefox (Mobile & Desktop).