Article Type: Standard / Reference
Audience: Solution Architects, Application Designers, Developers
Module: Fuuz Platform - Mobile Application Design
Applies to Versions: 2025.12+
Template Reference: mobile_screen_standard_template_0_0_1.json

1. Overview

Mobile screens in the Fuuz Application Designer provide task-focused interfaces for smartphones and tablets, enabling industrial operators, technicians, and warehouse personnel to perform critical operations on the shop floor. This mobile-first framework emphasizes layout stability, touch-friendly interactions, and predictable behavior across all device sizes, ensuring reliable data entry and process execution in demanding operational environments where accuracy and speed are paramount.

Design Principles

1. Constrained Flexibility: Leverage responsive layouts while maintaining strict control over growth and overflow to prevent layout instability
2. Predictable Behavior: Screen elements remain stable and do not shift during user interaction—critical for safety-critical operations
3. Task-Focused Design: Each screen accomplishes one primary task with minimal cognitive load for operators in high-pressure environments
4. Touch-First Interaction: All interactive elements meet minimum touch target requirements for gloved or bare-hand operation
5. Layout Stability: Validation messages and dynamic content never cause screen elements to jump or shift position

Target Devices

2. Architecture & Data Flow

Container Hierarchy

The standard mobile template uses a six-level container architecture with branded separators:

ROOT (Screen)
└── ContainerOuter (Layout constraint container)
    ├── ContainerHeader (Fixed: 40px)
    │   ├── ScreenName (left-aligned title)
    │   └── ContainerNavigation (right-aligned menu)
    ├── BrandSeparator (Fixed: 4px gradient)
    ├── ContainerBody (Flexible, scrollable)
    │   └── Form1
    │       └── ContainerInnerBody (Content wrapper with padding)
    │           └── [Form inputs]
    ├── BrandSeparator (Fixed: 4px gradient)
    └── ContainerFooter (Fixed: 60px)

Visual Layout

┌─────────────────────────────────────┐
│  ContainerHeader (40px)             │
│  ┌─────────────────────┬─────────┐  │
│  │ SCREEN TITLE        │  ☰ Menu │  │
│  └─────────────────────┴─────────┘  │
├─────────────────────────────────────┤ ← Brand Gradient (4px)
│                                     │
│  ContainerBody (flexGrow, scroll)   │
│  ┌─────────────────────────────┐    │
│  │ Form1                       │    │
│  │ ┌─────────────────────────┐ │    │
│  │ │ ContainerInnerBody      │ │    │
│  │ │                         │ │    │
│  │ │ ┌─────────────────────┐ │ │    │
│  │ │ │ Input Field 1       │ │ │    │
│  │ │ └─────────────────────┘ │ │    │
│  │ │ ┌─────────────────────┐ │ │    │
│  │ │ │ Input Field 2       │ │ │    │
│  │ │ └─────────────────────┘ │ │    │
│  │ │ ┌─────────────────────┐ │ │    │
│  │ │ │ Select Field        │ │ │    │
│  │ │ └─────────────────────┘ │ │    │
│  │ └─────────────────────────┘ │    │
│  └─────────────────────────────┘    │
│                                     │
├─────────────────────────────────────┤ ← Brand Gradient (4px)
│  ContainerFooter (60px)             │
│  ┌───────────────┬─────────────────┐│
│  │    SUBMIT     │      CLEAR      ││
│  └───────────────┴─────────────────┘│
└─────────────────────────────────────┘

Container Specifications

ContainerOuter

Purpose: Primary layout constraint container that prevents uncontrolled growth in both X and Y axes.

ContainerHeader

Purpose: Fixed navigation and title area with brand styling.

Header Content:

• ScreenName (left): RichText element, 18px bold, black text
• ContainerNavigation (right): 50px container with MenuButton (bars icon, large size)

BrandSeparator

Purpose: 4px visual brand accent between major screen sections.

ContainerBody

Purpose: Main scrollable content area that fills available space between header and footer.

ContainerFooter

Purpose: Fixed action button area for primary and secondary actions.

3. Use Cases

• Inventory Transactions: Scan barcode, verify item details, enter quantity adjustment, confirm transaction—streamlined for warehouse receiving, picking, cycle counting
• Work Order Data Collection: Record production quantities, downtime events, scrap reasons, and quality inspections directly from the shop floor without desktop access
• Equipment Inspections: Complete safety checklists, maintenance verification forms, and pre-shift equipment checks with guided workflows and photo capture
• Quality Control: Perform in-process inspections, record measurement data, capture defect photos, and trigger corrective actions from production areas
• Material Traceability: Scan lot numbers, verify genealogy, record consumption events, and maintain complete chain of custody for regulated materials
• Asset Management: Perform asset verification walks, update locations, record condition assessments, and capture asset identification photos
• Shipping Verification: Scan outbound packages, verify contents against pick lists, record carrier information, and confirm shipment completion
• Maintenance Requests: Report equipment issues, attach photos, select priority levels, and submit work requests directly from production floor
• Time Tracking: Clock in/out of jobs, record indirect labor activities, switch between operations, and capture labor efficiency data
• Kiosk Operations: Deploy shared tablets or phones at workstations for operator data entry without individual device assignment

4. Screen Details

Component Standards

Form Input General Properties

All form inputs on mobile screens should include these base properties:

Input Type Reference

SelectInput Configuration

{
  "type": "select",
  "height": "120px",
  "width": "100%",
  "variant": "outlined",
  "dataFontSize": 24,
  "labelFontSize": 15,
  "dialogMode": "never",
  "optionLimit": 5,
  "isClearable": true,
  "searchPredicate": "contains",
  "orderByDirection": "asc",
  "additionalFilter": {
    "_and": [{ "active": { "_eq": true } }]
  }
}

Footer Buttons

Buttons in ContainerFooter should fill available space with consistent styling:

Button Color Coding

Disabled State Logic

Submit Button Pattern: Disabled when ANY required field is empty

$isNilOrEmpty($components.Form1.formState.values.field1) 
or 
$isNilOrEmpty($components.Form1.formState.values.field2)

Clear Button Pattern: Disabled when ALL fields are already empty

$isNilOrEmpty($components.Form1.data.field1)
and
$isNilOrEmpty($components.Form1.data.field2)
and
$isNilOrEmpty($components.Form1.data.field3)

Navigation

The MenuButton in ContainerNavigation provides app-wide navigation:

• Home: Explicit "Home" page as primary navigation hub (required)
• Function Pages: Task-specific pages accessible from Home
• Menu Icon: "bars" (hamburger), large size

Common Patterns

Pattern 1: Simple Data Collection

Use Case: Collect 2-3 pieces of information and submit

ContainerHeader (Screen Title + Menu)
BrandSeparator
ContainerBody
  └── Form1
      └── ContainerInnerBody
          ├── Input 1 (required)
          ├── Input 2 (required)
          └── Input 3 (optional)
BrandSeparator
ContainerFooter
  ├── Submit Button (50%, green)
  └── Clear Button (50%, amber)

Pattern 2: Scan and Verify

Use Case: Scan barcode, display related data, collect additional input

ContainerHeader (Screen Title + Menu)
BrandSeparator
ContainerBody
  └── Form1
      └── ContainerInnerBody
          ├── Scan Input (TextInput with scan button)
          ├── Display Data (read-only, loaded after scan)
          ├── Additional Input 1
          └── Additional Input 2
BrandSeparator
ContainerFooter
  ├── Submit Button (50%, green)
  └── Cancel Button (50%, amber)

Pattern 3: Selection and Confirmation

Use Case: Choose from list, review selection, confirm action (two-screen pattern)

Pattern 4: Multi-Step Process

Use Case: Complex task requiring multiple inputs in sequence

5. Technical Details

Layout Principles - Responsive Layout Thought Process

1. Start with Structure, Not Content

Think: "What needs to be fixed, and what needs to be flexible?"

• Fixed Elements: Header (40px), Footer (60px), BrandSeparators (4px)
• Flexible Elements: ContainerBody, ContainerInnerBody

2. Control Growth Explicitly

Think: "Where should expansion occur, and where must it stop?"

• Set flexGrow: false on containers that must maintain size
• Set flexGrow: true only on content areas that should fill available space
• Use height: 0px with flexGrow: true to prevent initial overflow
• Always set flexShrink: false on fixed-height elements

3. Manage Overflow Intentionally

Accessibility

Touch Target Sizing

• Minimum touch target: 44×44px (iOS standard), 48×48dp (Android standard)
• Footer buttons: height: 100% fills 60px footer (exceeds minimum)
• Input fields: height: 120px provides ample touch area
• Minimum spacing between interactive elements: 8px

Font Sizing

6. Resources

• Fuuz Industrial Operations Platform
• Application Designer Documentation
• Webflow Design Patterns
• Barcode Scanning Configuration
• mobile_screen_standard_template_0_0_1.json

7. Troubleshooting

• Issue: Screen scrolls horizontally • Cause: ContainerOuter missing overflow-x: hidden; child element width exceeds 100%; fixed-width elements too wide for mobile • Fix: Set ContainerOuter overflow-x: hidden; check all child elements for width: 100%; verify no fixed-width elements exceed 320px minimum screen width
• Issue: Screen content behind footer • Cause: ContainerBody not using proper flexbox configuration; missing flexGrow: true on ContainerBody • Fix: Set ContainerBody height: 0px and flexGrow: true; verify ContainerOuter has justifyContent: space-between; ensure footer has fixed height (60px)
• Issue: Layout shifts when validation errors appear • Cause: Input height set to auto instead of fixed height; error messages adding to container height • Fix: Set all inputs with validation to height: 120px; never use height: auto on validated form inputs
• Issue: Cannot scroll content area • Cause: ContainerBody missing overflow-y: auto; ContainerOuter has overflow-y: auto (wrong place) • Fix: Set ContainerBody overflow-y: auto; set ContainerOuter overflow-y: hidden; verify body has height: 0px and flexGrow: true
• Issue: Submit button always disabled • Cause: Disabled logic checking wrong data path; typo in field reference; logic using "and" instead of "or" • Fix: Verify disabled logic uses formState.values not just data; check exact field path; use "or" between required field checks (disabled if ANY empty)
• Issue: Clear button doesn't work • Cause: No webflow attached to Clear button; webflow not configured to reset form • Fix: Create webflow attached to Clear button; use form reset action in webflow; verify form element name matches (Form1)
• Issue: SelectInput shows inactive/deleted records • Cause: Missing additionalFilter on SelectInput; filter not checking active status • Fix: Add additionalFilter with active status check; verify field name (active, isActive, status); use _eq: true for boolean active fields
• Issue: Text too small to read on mobile • Cause: Using default font sizes instead of mobile-optimized sizes • Fix: Set dataFontSize: 24 for all input fields; set labelFontSize: 15; set button customTextSize: 24
• Issue: Footer buttons too small to tap reliably • Cause: Footer height too small or buttons not filling height • Fix: Set ContainerFooter height: 60px; set buttons height: 100%, width: 50%; verify minimum touch target of 44x44px met
• Issue: Brand separators not visible • Cause: Missing BrandSeparator containers or gradient not applied • Fix: Add two BrandSeparator containers (after header, before footer); set height: 4px; apply gradient: linear-gradient(90deg, #39005a, #5b30df, #03caaf)

8. Revision History