Component Types

Every Fireberry app is made of components. A component is a standalone piece of UI that appears in a specific location within Fireberry. Choosing the right component type is one of the first decisions you'll make.

The Three Types

Choosing a Component Type

flowchart TD
    Start[What are you building?] --> Q1{Does it relate to<br/>a specific record?}
    Q1 -->|Yes| Record[Use Record Component]
    Q1 -->|No| Q2{Does it need<br/>full-page space?}
    Q2 -->|Yes| Global[Use Global Menu]
    Q2 -->|No| Side[Use Side Menu]

Record Component

Use when:

• Your feature works with a specific record
• You're building a custom view of record data
• You need access to the current record's information

Examples:

• Activity timeline for a contact
• Custom form for editing record fields
• Integration data related to a deal

Side Menu Component

Use when:

• You need a quick-access tool
• The feature doesn't need full-page space
• Users will use it frequently while working

Examples:

• Quick action panel
• Search tool
• Notification center

Global Menu Component

Use when:

• You're building a dashboard or report
• The feature is standalone (not tied to records)
• You need lots of screen space

Examples:

• Analytics dashboard
• Admin settings panel
• Data import tool

Context Availability

Different component types have access to different context information via the SDK:

📘

Note

All components can access user information. Only Record components know which record the user is viewing.

Component Structure in Manifest

Components are defined in your manifest.yml:

app:
  id: "your-app-id"
  name: "Your App"

components:
  - type: record
    title: "My Record View"
    id: "unique-id-1"
    path: static/record/build
    settings:
      # Type-specific settings

  - type: side-menu
    title: "Quick Actions"
    id: "unique-id-2"
    path: static/panel/build
    settings:
      # Type-specific settings

Each component type has different required settings. See the individual guides for details.

Multi-Component Apps

An app can include multiple components of any type:

components:
  # Record view for detailed info
  - type: record
    title: "Contact Details"
    id: "contact-details"
    path: static/record/build
    settings:
      iconName: "user"
      iconColor: "#3498db"
      objectType: 1

  # Quick actions panel
  - type: side-menu
    title: "Quick Actions"
    id: "quick-actions"
    path: static/panel/build
    settings:
      icon: "lightning"
      width: "S"

  # Analytics dashboard
  - type: global-menu
    title: "Analytics"
    id: "analytics"
    path: static/dashboard/build
    settings:
      displayName: "Analytics"

💡

Tip

Each component must have a unique id. All components share the same app ID.

Next Steps

Learn about each component type in detail:

• Record Component — Settings, context, and examples
• Side Menu Component — Width options and use cases
• Global Menu Component — Full-page layouts