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/sdkQuick 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 numberContext by Component Type
| Context | Record Component | Side Menu | Global Menu |
|---|---|---|---|
user.id | ✓ | ✓ | ✓ |
user.fullName | ✓ | ✓ | ✓ |
user.organizationId | ✓ | ✓ | ✓ |
record.id | ✓ | — | — |
record.type | ✓ | — | — |
NoteRecord context is only available in Record components. For Side Menu and Global Menu components,
recordwill be empty.
API Methods
The SDK provides four methods for working with Fireberry data:
| Method | Description |
|---|---|
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:
| Parameter | Type | Description |
|---|---|---|
objectType | string | number | The object type to query |
fields | string | Comma-separated list of fields to return |
query | string | Filter expression |
page_size | number | Records per page (optional) |
page_number | number | Page number, 1-indexed (optional) |
Query syntax:
| Operator | Example |
|---|---|
= | status = "active" |
!= | status != "closed" |
AND | status = "active" AND priority = "high" |
OR | status = "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.
| Method | Description |
|---|---|
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:
| Parameter | Type | Description |
|---|---|---|
number | number | The number to display on the badge |
badgeType | 'success' | 'warning' | 'error' | 'info' | Visual style of the badge |
Badge Types:
success— Green badge for positive notificationswarning— Yellow badge for warningserror— Red badge for errors or critical alertsinfo— 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:
| Parameter | Type | Description |
|---|---|---|
callInfo | CallInfo | Information about the current call |
objectConfig | ObjectConfig[] | Configuration for displaying records |
placemment | 'bottom-start' | 'bottom-end' | Position of the callbar |
CallInfo:
| Field | Type | Description |
|---|---|---|
number | number | Phone number of the call |
status | 'Talking' | 'Ringing' | 'Missed' | 'Dialing' | Current status of the call |
ObjectConfig:
| Field | Type | Description |
|---|---|---|
objectType | string | The object type to display records from |
fields | Field[] | Array of fields to show |
order | number | Display order (optional) |
Field:
| Field | Type | Description |
|---|---|---|
name | string | Field 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 AccountComplete 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
Updated about 6 hours ago
