SDK

Access Fireberry context and data from your embedded applications

Fireberry SDK

The Fireberry SDK (@fireberry/sdk) enables your app to communicate with the Fireberry platform. Use it to access information about the current user and record, and to perform data operations.

Resources:


Installation

npm install @fireberry/sdk

Quick Start

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

// 1. Create the client
const client = new FireberryClientSDK();

// 2. Initialize (required before using context or API)
await client.initializeContext();

// 3. Use context and API
const { user, record } = client.context;
const { fullName } = user;
console.log(`Hello, ${fullName}!`);

const results = await client.api.query(1, {
  fields: "accountid,accountname",
  query: 'status = "active"',
});

How It Works

Your app runs in an iframe inside Fireberry. The SDK handles all communication with the parent window:

sequenceDiagram
    participant App as Your App (iframe)
    participant SDK as Fireberry SDK
    participant FB as Fireberry Platform

    App->>SDK: initializeContext()
    SDK->>FB: Request context
    FB-->>SDK: User + Record info
    SDK-->>App: Context ready

    App->>SDK: api.query(...)
    SDK->>FB: Query API request
    FB-->>SDK: Data response
    SDK-->>App: Results

Context

Context provides information about who's using your app and what they're looking at.

Accessing Context

await client.initializeContext();

const { user, record } = client.context;

// User info (always available)
console.log(user.id); // User's unique ID
console.log(user.fullName); // User's display name
console.log(user.organizationId); // User's organization ID

// Record info (only in Record components)
console.log(record.id); // Current record ID
console.log(record.type); // Object type number

Context by Component Type

ContextRecord ComponentSide MenuGlobal Menu
user.id
user.fullName
user.organizationId
record.id
record.type
📘

Note

Record context is only available in Record components. For Side Menu and Global Menu components, record will be empty.


API Methods

The SDK provides four methods for working with Fireberry data:

MethodDescription
api.query()Retrieve records
api.create()Create a new record
api.update()Update an existing record
api.delete()Delete a record

query

Retrieve records based on criteria.

const results = await client.api.query(objectType, {
  fields: "accountid,accountname,status,createdon",
  query: 'status = "active"',
  page_size: 20, // optional
  page_number: 1, // optional
});

Parameters:

ParameterTypeDescription
objectTypestring | numberThe object type to query
fieldsstringComma-separated list of fields to return
querystringFilter expression
page_sizenumberRecords per page (optional)
page_numbernumberPage number, 1-indexed (optional)

Query syntax:

OperatorExample
=status = "active"
!=status != "closed"
ANDstatus = "active" AND priority = "high"
ORstatus = "open" OR status = "pending"

create

Create a new record.

const result = await client.api.create(objectType, {
  name: "New Project",
  status: "active",
  priority: "high",
});

if (result.success) {
  console.log("Created:", result.data.id);
}

update

Update an existing record.

const result = await client.api.update(objectType, recordId, {
  status: "completed",
});

if (result.success) {
  console.log("Updated successfully");
}

delete

Delete a record.

const result = await client.api.delete(objectType, recordId);

if (result.success) {
  console.log("Deleted");
}

Response Format

All API methods return the same structure:

interface ResponseData {
  success: boolean;
  data: any;
  error?: {
    status: number;
    statusText: string;
    data: { Message?: string };
  };
  requestId: string;
}

Handling responses:

const result = await client.api.query(1, {
  fields: "accountid,accountname",
  query: 'status = "active"',
});

if (result.success) {
  console.log("Data:", result.data);
} else {
  console.error("Error:", result.error?.data.Message);
}

System Methods

In addition to data operations, the SDK provides methods to control UI elements in the Fireberry platform.

MethodDescription
system.badge.show()Display a badge notification
system.badge.hide()Hide the badge notification
system.callbar.show()Display a callbar with call info
system.callbar.hide()Hide the callbar

Badge

Display notification badges to alert users about important information or status updates.

Show Badge

Display a badge with a number and type indicator.

await client.system.badge.show({
  number: 5,
  badgeType: "info",
});

Parameters:

ParameterTypeDescription
numbernumberThe number to display on the badge
badgeType'success' | 'warning' | 'error' | 'info'Visual style of the badge

Badge Types:

  • success — Green badge for positive notifications
  • warning — Yellow badge for warnings
  • error — Red badge for errors or critical alerts
  • info — Blue badge for informational messages

Example:

// Show unread messages count
await client.system.badge.show({
  number: 12,
  badgeType: "info",
});

// Show error count
await client.system.badge.show({
  number: 3,
  badgeType: "error",
});

Hide Badge

Remove the badge notification.

await client.system.badge.hide();

Callbar

Display a callbar interface with call information and related records.

Show Callbar

Display a callbar with call status and associated record information.

await client.system.callbar.show({
  callInfo: {
    number: 1234567890,
    status: "Talking",
  },
  objectConfig: [
    {
      objectType: "1",
      order: 1,
      fields: [
        { name: "accountname" },
        { name: "email" },
      ],
    },
  ],
  placemment: "bottom-end",
});

Parameters:

ParameterTypeDescription
callInfoCallInfoInformation about the current call
objectConfigObjectConfig[]Configuration for displaying records
placemment'bottom-start' | 'bottom-end'Position of the callbar

CallInfo:

FieldTypeDescription
numbernumberPhone number of the call
status'Talking' | 'Ringing' | 'Missed' | 'Dialing'Current status of the call

ObjectConfig:

FieldTypeDescription
objectTypestringThe object type to display records from
fieldsField[]Array of fields to show
ordernumberDisplay order (optional)

Field:

FieldTypeDescription
namestringField name

Example:

// Display callbar for incoming call
await client.system.callbar.show({
  callInfo: {
    number: 5551234567,
    status: "Ringing",
  },
  objectConfig: [
    {
      objectType: "1",
      fields: [
        { name: "accountname", },
        { name: "phone"},
        { name: "email" },
      ],
    },
  ],
  placemment: "bottom-end",
});

Hide Callbar

Remove the callbar from display.

await client.system.callbar.hide();

TypeScript Support

The SDK includes full TypeScript definitions. You can provide generic types for stronger typing:

interface Account {
  accountid: string;
  accountname: string;
  status: string;
}

const client = new FireberryClientSDK<Account>();
await client.initializeContext();

const results = await client.api.query(1, {
  fields: "accountid,accountname,status",
  query: 'status = "active"',
});

// results.data is typed as Account

Complete Example

A React component that displays and updates data:

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

function TaskList() {
  const [client] = useState(() => new FireberryClientSDK());
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function init() {
      await client.initializeContext();

      const result = await client.api.query(1, {
        fields: "accountid,accountname,status",
        query: 'status != "completed"',
      });

      if (result.success) {
        setTasks(Array.isArray(result.data) ? result.data : [result.data]);
      }
      setLoading(false);
    }

    init();
  }, [client]);

  const completeTask = async (taskId) => {
    const result = await client.api.update(1, taskId, { status: "completed" });
    if (result.success) {
      setTasks(tasks.filter((t) => t.accountid !== taskId));
    }
  };

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.accountid}>
          {task.accountname}
          <button onClick={() => completeTask(task.id)}>Complete</button>
        </li>
      ))}
    </ul>
  );
}

Cleanup

When your component unmounts, clean up the SDK:

// Clean up event listeners and pending requests
client.destroy();

In React:

useEffect(() => {
  const client = new FireberryClientSDK();
  // ... setup

  return () => client.destroy();
}, []);

Timeouts

API requests timeout after 60 seconds by default. If a request takes longer, the promise rejects with a timeout error.


Next Steps

  • Design System — Build UIs with Fireberry components
  • Component Types — Understand context availability by component type
  • CLI — Deploy and manage your apps