Record Component

Record components appear on individual record pages in Fireberry. They're perfect for features that relate to a specific record — custom views, actions, or integrations tied to that record's data.

When to Use

Displaying or editing record-specific data
Building custom visualizations for a record
Integrating external data related to the record
Adding actions that apply to the current record

Manifest Configuration

components:
  - type: record
    title: "My Record View"
    id: "record-view-uuid"
    path: static/comp/build
    settings:
      iconName: "task"
      iconColor: "#7aae7f"
      objectType: 5

Settings

Setting	Type	Required	Description
`iconName`	string	Yes	Icon shown in the record toolbar
`iconColor`	string	Yes	Hex color code (e.g., `#7aae7f`)
`objectType`	number	Yes	Record type ID where this component appears

iconName

The icon that appears in the record toolbar. Common options:

Icon	Use Case
`CheckList`	Tasks, to-dos
`Info`	Information, details
`ChartBars`	Analytics, metrics
`Clock`	History, activity
`Files`	Documents, files
`User`	People, contacts
`Settings`	Configuration

📘
See All Icons
Browse the complete icon library in the Design System Storybook.

iconColor

Use colors from the Design System palette for consistency:

Purpose	Color	Hex
Success/Positive	Green 8	`#37C998`
Information	Blue 8	`#269DD9`
Warning	Orange 8	`#E58D19`
Danger	Red 8	`#C03A3A`
Neutral	Gray 7	`#8A93A8`

objectType

The numeric ID of the Fireberry object type where this component appears. Your component will only be visible on records of this type.

📘
Finding Object Type IDs
Contact your Fireberry administrator to find the object type IDs for your instance.

Context Access

Record components have full context access — both user and record information:

import FireberryClientSDK from "@fireberry/sdk/client";

const client = new FireberryClientSDK();
await client.initializeContext();

const { user, record } = client.context;

// User info
console.log(user.id); // "a1b2c3d4-e5f6-7890-abcd-ef1234567890"
console.log(user.fullName); // "John Doe"

// Record info (only available in Record components)
console.log(record.id); // "f9e8d7c6-b5a4-3210-fedc-ba0987654321"
console.log(record.type); // 5

Example: Record Data Viewer

A component that displays the current record's data:

import { useEffect, useState } from "react";
import FireberryClientSDK from "@fireberry/sdk/client";
import { DSThemeContextProvider, Typography, Button } from "@fireberry/ds";

function RecordViewer() {
  const [client] = useState(() => new FireberryClientSDK());
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadRecord() {
      await client.initializeContext();
      const { record } = client.context;

      // Fetch the current record's data
      const result = await client.api.query(record.type, {
        fields: "accountid,accountname,status,ownername",
        query: `accountid = "${record.id}"`,
      });

      if (result.success) {
        setData(result.data);
      }
      setLoading(false);
    }

    loadRecord();
  }, [client]);

  if (loading) return <div>Loading...</div>;
  if (!data) return <div>Record not found</div>;

  return (
    <DSThemeContextProvider isRtl={false}>
      <div style={{ padding: 16 }}>
        <Typography type="title">{data.name}</Typography>
        <Typography type="caption" color="neutral">
          Status: {data.status}
        </Typography>
        <Typography type="caption" color="neutral">
          Owner: {data.ownerName}
        </Typography>
      </div>
    </DSThemeContextProvider>
  );
}

Example: Quick Actions

A component that provides actions for the current record:

import { useEffect, useState } from "react";
import FireberryClientSDK from "@fireberry/sdk/client";
import { DSThemeContextProvider, Typography, Button } from "@fireberry/ds";

function RecordActions() {
  const [client] = useState(() => new FireberryClientSDK());
  const [record, setRecord] = useState(null);

  useEffect(() => {
    async function init() {
      await client.initializeContext();
      setRecord(client.context.record);
    }
    init();
  }, [client]);

  const markComplete = async () => {
    if (!record) return;

    const result = await client.api.update(record.type, record.id, {
      status: "completed",
    });

    if (result.success) {
      alert("Marked as complete!");
    }
  };

  const markHighPriority = async () => {
    if (!record) return;

    const result = await client.api.update(record.type, record.id, {
      priority: "high",
    });

    if (result.success) {
      alert("Set to high priority!");
    }
  };

  return (
    <DSThemeContextProvider isRtl={false}>
      <div style={{ padding: 16 }}>
        <Typography type="title">Quick Actions</Typography>

        <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
          <Button
            label="Mark Complete"
            color="success"
            variant="primary"
            onClick={markComplete}
          />
          <Button
            label="High Priority"
            color="warning"
            variant="secondary"
            onClick={markHighPriority}
          />
        </div>
      </div>
    </DSThemeContextProvider>
  );
}

Use Cases

Use Case	Description
Custom Views	Display record data in specialized formats
Actions Panel	Quick actions specific to the record
Integration Display	Show data from external systems
Activity Log	Display history for the record
Related Data	Show computed or related information

Validation Errors

Error	Solution
`iconName is required`	Add `iconName` to settings
`iconColor must be a valid hex color`	Use format `#RRGGBB`
`objectType must be a number`	Provide numeric object type ID

Next Steps

Side Menu Component — Build slide-out panels
Global Menu Component — Create full-page views
SDK — Learn more about context and API