Record Page Components

Record Page Header Component

The Record Page Header is the primary control center for any Record Page. It serves as a persistent anchor at the top of the page, displaying the record's identity and providing global actions like saving, canceling edits, refreshing data, and accessing secondary tools.

---

🚀 Key Features

• Dynamic Identity: Automatically displays the primary name of the record in a bold, prominent typeface.

• Mode Switching: Intelligently toggles between View and Edit states.

• View Mode: Displays the Refresh button and the Action Button Group.

• Edit Mode: Swaps actions for "Save" and "Cancel" buttons to ensure data integrity.

• Integrated Action Group: Host for the ButtonGroup component, allowing you to nest standard buttons (Edit, Delete, Clone) or custom actions within a clean, dropdown-capable interface.

• Auto-Healing Data: Includes built-in "Retry Logic" that attempts to auto-refresh the record if it initially fails to load, ensuring users rarely see a blank state.

• Sticky Positioning: Pre-configured to stay fixed at the top of the viewport (sticky top-0) so actions are always reachable during long scrolls.

---

🛠️ Configuration (App Builder)

The Header is unique because it is a Container Component, meaning you can manage the buttons inside it using a dedicated settings panel.

Properties

• Class Name: Tailwind classes for background, border, and shadow (e.g., bg-white border-b shadow-sm).
• Component Type: RecordPageHeader.

⚙️ Custom Settings Panel

Unlike static components, clicking the Header in the App Builder opens a "Manage Buttons" panel:

• Add a Button: Search the registry for any "Record Page Button" (Edit, Delete, Clone, etc.).
• Primary Action: The first button in your list becomes the visible primary button; all subsequent buttons are neatly tucked into a "More Actions" dropdown.

---

📖 How to Use

1. Saving Changes

When a user interacts with an editable field on the page, the Header automatically detects the shift to "Edit Mode" (based on the global recordPageMode state).

• Save: Commits all changes on the page to the database via a PATCH request.
• Cancel: Reverts the page to "View Mode" without saving.

2. Manual Refresh

Click the Refresh Icon (circular arrow) to fetch the latest data from the server. This is essential for collaborative environments where other users or automated "Drips" might be updating the record simultaneously.

---

🎨 UI Reference

Element	Description
Record Name	Bold text on the left showing the record title (e.g., "John Doe").
Refresh Button	Icon that spins during data fetching; disabled while loading.
Action Group	The container for your configured buttons (Edit, Delete, etc.).
Save/Cancel	High-contrast buttons that appear only when data is being modified.

---

💡 Best Practices

• Placement: This should always be the very first component at the top of your DropZone.
• Button Hierarchy: Put the most frequent action (usually Edit) first in the settings list so it remains visible, while destructive actions like Delete should go further down the list to be hidden in the dropdown.
• Styling: Ensure the Class Name includes a background color (e.g., bg-white or bg-stone-800) to prevent content from bleeding through when scrolling behind the sticky header.

---

Related Files Component

The Related Files component provides a centralized hub for managing documents, images, and other attachments associated with a record. It simplifies the workflow of attaching existing system files or uploading new ones directly from the user's local machine.

---

🚀 Key Features

• Integrated File Upload: Support for drag-and-drop or click-to-upload functionality using the system's secure file utility.

• Public/Private Toggling: Control file visibility during the upload process.

• Quick Search: Instantly filter through the list of attached files by name.

• Dual-Action Addition:

• Link Existing: Search the global file registry to link a file already stored in the system.

• Upload New: Upload local files and automatically create the "Related File" bridge record in one step.

• Direct Access: Quick action buttons to "View" (via modal) or navigate to the file's dedicated record page.

---

🛠️ Configuration (App Builder)

When you drag this component onto your canvas, you will find the following settings:

Properties

• Class Name: Standard Tailwind classes for layout control.
• Component Type: RelatedFiles.

---

📖 How to Use

1. Managing Files

The component lists all files currently linked to the record.

• Viewing: Click the "View" button on a file row to open a preview modal (supports images, PDFs, and text).
• Navigation: Click the file name to navigate to the detailed file metadata page.

2. Adding Files

Click the (+) Plus Icon in the header to switch to "Add Mode."

• Search & Link: Use the lookup field to find files already in your organization.
• Upload: Drag files into the dashed area or click "Choose Files." Note that these are uploaded as "Private" by default for security.

---

Activity Component

The Activity Component is a comprehensive timeline of all interactions related to a record. It consolidates calls, text messages, emails, and events into a single, chronological feed.

---

🚀 Key Features

• Unified Timeline: View a chronological "vertical line" feed of all historical interactions.
• Type-Specific Detail: Each activity type (Call, SMS, Email, Event) displays specialized information (e.g., call duration, message delivery status).
• Interactive Expansion: Click any activity to expand the "Details" section for that specific event.
• Status Indicators: Visual cues for delivery status of messages and outcomes of calls.
• Standardized Navigation: Deep-link directly to the specific activity record for full audit logs.

---

📖 How to Use

1. Reviewing History

Activities are sorted with the most recent at the top.

• Expand Detail: Click the icon or the text body of any activity.

• Calls show from/to numbers and duration.

• Messages show the full body and delivery status.

• Emails show the subject line and content snippet.

• Filtering: Use the scrollable area to look back through the complete interaction history.

2. Refreshing Data

This component is highly dynamic. If a call or text just occurred, use the Refresh button in the Record Page Header to update the timeline.

---

🎨 UI Reference (Activity Types)

Icon	Activity Type	Primary Data Shown
📞	Call	Formatted Phone Numbers, Duration, Disposition.
💬	Message	Contact Name, Message Body, Delivery Status (Sent/Delivered).
✉️	Email	Sender Name, Subject line, Text snippet.
📅	Event	Event Title, Status, and meeting notes.

---

💡 Best Practices

• Activity Visibility: This component is high-density. It is best placed in a wide middle column or its own dedicated tab to ensure long message bodies are readable when expanded.
• Data Accuracy: Ensure your "Record Page Header" is configured with a refresh action to keep the timeline live during active customer interactions.

---

Drip Viewer Component

The Drip Viewer is a high-visibility lifecycle management tool used to track and control automated outreach campaigns (Drips) attached to a record. It provides a real-time "stepper" visualization of where a contact is in a sequence, allowing users to manually intervene, pause, or skip steps.

---

🚀 Key Features

• Live Stepper Visualization: Displays the entire campaign journey, showing completed steps, the current active step, and upcoming actions in a vertical timeline.
• Real-time Status Management: Change an enrollment's status (Active, Paused, Exited) directly from the component header.
• Manual Step Control: An "intervention" feature that allows users to manually set a specific step as the current one, skipping or re-running parts of the sequence.
• Intelligent Error Logging: If a drip fails (e.g., due to an invalid email or phone number), an error banner appears within the component showing the specific system log for quick troubleshooting.
• Multi-Enrollment Support: Lists all drip campaigns the record has ever been part of, with active campaigns expanded by default.

---

🛠️ Configuration (App Builder)

When you drag this component onto your canvas, you will find the following settings:

Properties

• Class Name: Standard Tailwind classes for layout.
• Component Type: DripViewer.

---

📖 How to Use

1. Monitoring Progress

The component automatically fetches all "Drip Enrollments" for the current record.

• Checkmarks: Indicate successfully completed steps.
• Blue/Active Icon: Shows the step currently being processed or waiting for its delay timer.
• Timeline: Shows the exact "Wait" time (delay in minutes) configured for each step.

2. Controlling the Drip

Click the Status Chip (e.g., "Active" or "Paused") in the header to open the control menu:

• Resume: Restarts a paused drip.
• Pause: Halts the timer and prevents the next step from firing.
• Stop (Exit): Completely removes the record from the campaign.

3. Skipping Steps

Expand the campaign view, find a future step you wish to trigger next, and click "Set as Current". The system will immediately update the enrollment to that point in the sequence.

---

🎨 UI Reference

Element	Description
Status Chip	Color-coded badge (Green=Active, Yellow=Paused, Red=Error). Clickable to change status.
Step Icon	Visual indicator of the action type (Phone for Calls, Envelope for Emails, SMS for Texts).
Next Run Date	Displayed in the header to show exactly when the system will execute the next step.
Error Banner	Red alert box that only appears if the campaign hits a logic or API error.

---

💡 Best Practices

• Placement: Because this component uses a vertical stepper, it is best placed in a narrow side column where it can grow vertically without pushing down primary data.
• Intervention: Use the "Set as Current" feature if a customer responds via a different channel and you want to skip introductory steps to get to more relevant middle-of-funnel content.

---

Duplicate Record Component

The Duplicate Record component is a data-integrity tool designed to identify and resolve redundant data within your system. It automatically scans for records that share identical identifying information (like phone numbers or emails) and provides a specialized interface to merge them into a single "Master" record.

---

🚀 Key Features

• Automatic Duplicate Detection: Scans the database in real-time based on core fields (e.g., Phone, Second Phone, and Email for Contacts).
• Side-by-Side Comparison: Displays potential duplicates in a list view, showing key fields like Name, Phone, Email, and Salesforce ID for quick verification.
• Intelligent Merging: Allows users to designate one record as the "Master" and select multiple other records to be merged into it.
• Unified Data Flow: During a merge, related data (like notes, files, and activities) is reassigned to the Master record, and redundant duplicates are removed.
• Direct Verification: Includes a "View" icon for every detected duplicate, allowing users to open those records in a new tab to verify data before committing to a merge.

---

🛠️ Configuration (App Builder)

When you drag this component onto your canvas, it remains invisible if no duplicates are found, ensuring a clean UI for unique records.

Properties

• Class Name: Standard Tailwind classes (e.g., mb-4 shadow-md border-red-200).
• Component Type: DuplicateRecord.

---

📖 How to Use

1. Identifying Duplicates

If the component appears on a record page, it means the system has found other records with matching criteria.

• Review the List: Look at the "Phone" and "Email" columns to confirm they are indeed the same person or entity.
• View Details: Click the Eye Icon to open a potential duplicate record in a new tab if you need to double-check its history.

2. Performing a Merge

1. Designate Master: Click the checkbox in the "Master" column for the record you wish to keep (usually the one with the most complete history or the most recent Salesforce ID).
2. Select Duplicates: Click the checkbox in the "Select" column for all records you want to fold into the Master.
3. Execute: Click the Merge Selected button in the header. The system will process the data and automatically navigate you to the updated Master record.

---

🎨 UI Reference

Element	Description
Master Checkbox	Radio-style selection to choose the surviving record.
Select Checkbox	Multi-select checkboxes to identify records to be deleted/merged.
Merge Button	Primary action button; disabled until at least one duplicate is selected.
Criteria Icons	Visual indicators showing which fields triggered the duplicate alert.

---

💡 Best Practices

• Placement: Place this component at the very top of a record page. It is critical information that should be addressed before a user adds new notes or makes phone calls.
• Data Selection: Always verify the "Salesforce ID" or "Created Date" when choosing a Master record to ensure you are keeping the "System of Record" version.
• Context: This component is currently optimized for the Contact object but can be extended for other objects with unique identifiers.

---

Related Records Component

The Related Records component acts as a high-level navigation hub for the current record. It automatically discovers all database relationships (children and generic lookups) and displays them as a collection of actionable shortcuts, providing an immediate count of how many items exist in each category.

---

🚀 Key Features

• Auto-Discovery: Scans the database schema to find every object type related to the current record (e.g., Opportunities, Cases, or custom objects).
• Live Record Counts: Displays exactly how many records exist for each relationship (e.g., "Cases (3)" or "Opportunities (25+)").
• Generic Relationship Support: Specifically identifies and includes records linked via "relates_to_any_object" generic pointers.
• Instant Navigation: Every category acts as a deep link, navigating the user directly to a filtered list view of those specific related items.
• Dynamic Visibility: The component remains hidden if no related records exist, keeping the interface clean and relevant.

---

🛠️ Configuration (App Builder)

When you drag this component onto your canvas, you can customize its appearance to match your page layout.

Properties

• Class Name: Tailwind classes to control layout (e.g., grid grid-cols-2 gap-4).
• Component Type: RelatedRecords.

---

📖 How to Use

1. Quick Audit

View the list of buttons to see the breadth of data attached to the record. If you see (25+), it indicates a high-volume relationship that may require filtering once you navigate to it.

2. Deep Diving

Click any button in the list. The application will immediately switch tabs to show you the full list of those specific related records. The navigation path is automatically handled to preserve the context of the parent record.

---

🎨 UI Reference

Element	Description
Title Header	Labeled "Related Records" with a styled gray background for section separation.
Relationship Button	A clickable badge showing the Object Title and the count of records found.
Overflow Indicator	The + symbol (e.g., 25+) appears when the system reaches the query limit for a single relationship type.

---

💡 Best Practices

• Placement: This component is best utilized in the Sidebar or at the Bottom of the main content area. It serves as a secondary navigation tool rather than primary data entry.
• Layout: Use a flex-wrap class in the Class Name property (e.g., flex flex-wrap gap-2) to ensure that buttons stack gracefully on smaller screens or sidebars.
• Data Context: Use this alongside the Activity and Related Notes components to give users a 360-degree view of a record's footprint across the entire system.