Open Chatter Activity or Other Salesforce Modals from DayBack

In this post, we’ll walk through how to extend the DayBack Calendar’s capabilities by launching custom Visualforce pages as floating modal popovers, all from within your favorite DayBack views. We’ll demonstrate how to trigger these modals via button actions inside your calendar, allowing you to create rich contextual workflows without leaving the calendar.

One practical example we’ll explore is displaying Chatter activity for a given event. This enables you to quickly see if a record has related Chatter posts or comments, and even label events with visual icons to highlight that activity directly in the calendar.

Beyond the Chatter example, the general approach opens the door to a much broader set of use cases. By loading any Visualforce page into a modal, you can embed existing native Salesforce components, such as record detail views, custom forms, or even Aura and LWC-based experiences directly over your calendar interface. Since the modals are launched directly from DayBack, you retain full control over when, how, and with what context these overlays appear.

Why Use Floating Modals Over the Calendar?

This method offers several practical advantages:

• Contextual Interactions: Triggering modals using DayBack’s button actions can allow you to surface additional information about events, resources, or related records without navigating away from your calendar view.
• Reusability: You can reuse existing Visualforce pages and components, minimizing rework and maximizing the existing investment you’ve made in layouts or forms.
• Two-Way Communication: Canvas-to-VF messaging allows you to pass data into the modal (e.g., record IDs), and even send specific details back to the DayBack when a modal closes or completes an action.
• Enhanced UI/UX: Floating modals provide a focused space for user interactions like editing details or viewing related records, all while maintaining the user’s workflow.

What We’ll Cover

In this guide, we’ll show you how to:

• Extend DayBack’s native Visualforce page to add custom modal support.
• Dynamically load Visualforce pages into those modals from DayBack using DayBack’s custom actions.
• Pass data between the DayBack iframe and the outer Salesforce context using Sfdc.canvas.client.publish() and Sfdc.canvas.controller.subscribe()
• Detect and display Chatter activity for any calendar-linked record, and visually annotate calendar events that have active discussions.

How to Launch Custom Modals from a Canvas App

To implement floating Salesforce modal popovers above your DayBack Calendar, we combine three key elements:

1. A modified Visualforce page that hosts the DayBack Canvas app and includes our new modal overlay code.
2. A modified static JavaScript resource that subscribes to events inside the DayBack Canvas app and dynamically loads custom Visualforce content in modals.
3. A Canvas message exchange system that allows the app and host page to communicate securely and bi-directionally.

Let’s walk through the core components.

Overview

A standard DayBack installation consists of two main components:

• A Visualforce page, which embeds the DayBack Calendar as a Salesforce Canvas app.
• A Static Resource (typically named DayBackJS), which contains the supporting JavaScript used to initialize DayBack and handle interactions with your Salesforce data.

Together, these components allow DayBack to render inside your org and communicate with your Salesforce records.

However, because these files are managed and read-only by default, you won’t be able to modify them directly to add custom functionality, such as support for floating modals.

To implement this enhancement, we’ll create custom versions of both the Visualforce page and the static JavaScript resource. Once complete, you can update your DayBack tab or navigation links to load your custom version, replacing the default page without affecting the original installation.

1. Embedding the Canvas App in a New Visualforce Container

We begin by embedding the DayBack app using the <apex:canvasApp> tag inside a new custom Visualforce page. In addition to embedding DayBack, this page includes a hidden modal container that can be shown or hidden dynamically in response to events triggered from within DayBack.

The modal is styled with custom CSS and designed to load any Visualforce page—or other external content—within an <iframe>. This allows for a seamless user experience where additional Salesforce content appears as an overlay without disrupting the calendar view.

To get started, download and install the provided file: DayBackWithModals.vfp

After uploading it to your org, eventually you wire it into your tab navigation settings to replace your default DayBack page.

2. Handling Modal Events via JavaScript

To power the modal interactions, you’ll also need to install a new static JavaScript resource. This script exposes a global DayBack object with helper methods for:

• Subscribing to events published by the DayBack Canvas app
• Dynamically opening and closing the floating modal
• Notifying DayBack when the modal has been closed

Our new Visualforce page references the updated static resource by the name: DayBackWithModalsJS

Download DayBackWithModalsJS.js and upload it to your org under Static Resources, using the same name DayBackWithModalsJS.

If you’re familiar with the default DayBack static resource script, the following changes enable modal functionality:

1. A New dbk.openModal Subscription

This allows your Canvas app (DayBack) to open a modal by publishing a message with the required modal config:

{
    "name": "dbk.openModal",
    "onData": function (e) {
        openModal(e);
    }
}

2. A New openModal() Function

This method accepts the configuration from DayBack and renders the requested Visualforce page (or other URL) inside a floating iframe.

3. A closeModal() Function That Sends a Callback to DayBack

When the modal is closed—either via a button or overlay tap—the following code not only hides the modal but also notifies DayBack using Sfdc.canvas.client.publish:

Sfdc.canvas.controller.publish({
    name: 'dbk.modalClosed',
    payload: {
        message: 'Modal has been closed.',
        callbackName: internalModal.dataset.callbackName || 'defaultCallback',
        callbackReference: internalModal.dataset.callbackReference || ''
    }
});

This is especially useful if you want to trigger additional actions in DayBack after something happens inside the modal—such as saving a form, creating a record, or completing a review.

3. Triggering Modals from Inside the DayBack

Once your Visualforce and JavaScript infrastructure is in place, you can trigger modals directly from within DayBack using fbk.publish()—a helper function that sends messages from inside the DayBack Canvas app to the Visualforce container.

This allows you to launch floating modals from button actions, event actions, or any other part of your custom DayBack logic, passing in contextual data such as record IDs or custom Visualforce page URLs.

Download and install the sample action script: open_chatter_button_action.js.

fbk.publish() Configuration Parameters

The fbk.publish() call offers the following configuration parameters to use when opening modals:

By using fbk.publish() in conjunction with DayBack actions, you can inject Visualforce overlays that respond to calendar-specific logic—whether that’s a button click, event drag, or custom keyboard shortcut.

4. Creating a Visualforce Page to Display Chatter Activity

To complete the example, we’ll create a new Visualforce page that displays Chatter activity for a calendar-linked record. In this case, we’re showing Chatter for the Technician_Assignment__c object, but the same pattern can be reused for any standard or custom object that supports Chatter.

<apex:page standardController="Technician_Assignment__c" title="Technician Assignment Chatter Feed">
    <apex:pageMessages />
    <!-- Renders the Chatter feed and publisher for the custom object record -->
    <chatter:feedWithFollowers entityId="{!Technician_Assignment__c.Id}" />
</apex:page>

You download and install EventChatter.vfp component and modify it to reference your specific object.

After uploading, feel free to customize the layout, include additional sections like related lists, or swap in a different object type depending on your use case.

Once connected, this modal lets users view and interact with a record’s Chatter thread without ever leaving the calendar, making it easy to stay in context.

5. Listening for Modal Closure Events in DayBack

In our basic example, nothing specific happens in DayBack when a modal (like the Chatter overlay) is closed. However, many real-world use cases benefit from being able to respond to modal closure—such as refreshing calendar data, updating UI elements, or triggering follow-up modals or actions.

For example, if a user logs a Chatter post in the modal, you might want to reload that event’s details or show a status icon to indicate activity.

To support this, you can subscribe to the 'dbk.modalClosed' event inside DayBack. This event is published by the Visualforce host page whenever a modal is closed.

Download and install bcr-subscribe-to-modal-closure.js and include it in your DayBack action setup to handle these callbacks.

Sample Listener

Sfdc.canvas.client.subscribe(fbk.client(), {
    name: 'dbk.modalClosed',
    onData: (data) => {
        const callbackName = data?.callbackName;
        const callbackReference = data?.callbackReference;

        if (callbackName == 'chatterActivity') {
            // If the modal was closed for a chatter activity, we can perform actions here.
            console.log(`Closed chatter activity for ${callbackReference}`);
        }
        // You can add more conditions here for different modal types if needed.
    }
});

Other Use Case Ideas

Now that you’ve added the infrastructure to launch and respond to modals from DayBack, here are some creative ways to apply it:

• Edit Related Records
  • Launch modals that let users edit Contacts, Opportunities, or Work Orders linked to the calendar event.
• Upload Files or Log Activities
  • Use existing Visualforce pages for file uploads or custom activity tracking, displayed in a focused modal view.
• Display Analytics or Audit Logs
  • Surface dashboards, field history, or custom reporting interfaces tied to the selected event.
• Trigger Approvals or Status Updates
  • Provide inline approval buttons or workflow controls that open briefly in a modal without disrupting the calendar.

Optional Steps: Highlight Events Containing Chatter Activity

In our Chatter example, we added an additional enhancement to visually identify which calendar events have associated Chatter activity. In this case, we applied a visual border and added a clickable icon to the events as they are displayed in DayBack.

Of course, you can tailor this behavior to your own needs, for example, showing Chatter activity icon inside the event’s Edit Event popover. What matters is having a reliable way to flag which records have activity.

Here’s how this works step-by-step:

1. Add a Custom Field: Has_Chatter_Activity__c

To let DayBack know whether a record has Chatter activity, we begin by adding a new Checkbox field called Has_Chatter_Activity__c to the Technician_Assignment__c object.

Once created, we map this field inside DayBack’s field mapping configuration so that DayBack can use it when rendering events.

This boolean field will be updated by Salesforce anytime new Chatter activity is detected.

2. Detect Chatter Activity with a Salesforce Trigger

To automatically update this field when a user posts to Chatter, we’ll create a trigger on the standard FeedItem object. This trigger will monitor for new posts, comments, or file shares, and mark the related Technician_Assignment__c record accordingly. Here’s how it works:

• When a FeedItem is inserted,
• The trigger checks whether the ParentId belongs to your custom object,
• If it does, the trigger sets Has_Chatter_Activity__c = true.

Important: Salesforce assigns a unique prefix to every object. For Technician_Assignment__c, this prefix might look like a09 (as seen in the record ID). Update the trigger to reflect the correct prefix for your object.

You can find the prefix by inspecting the URL of any record. For example:

https://yourInstance.lightning.force.com/lightning/r/Technician_Assignment__c/a09Do000001m1CuIAI/view

In this case, the prefix is a09.

Sample Trigger:

trigger FeedItemTrigger on FeedItem (after insert) {
    Set<Id> techAssignmentIds = new Set<Id>();

    // Step 1: Collect all Technician_Assignment__c ParentIds from new FeedItems
    for (FeedItem fi : Trigger.new) {

        // replace 'a01' with your object's prefix if different
        if (fi.ParentId != null && String.valueOf(fi.ParentId).startsWith('a09')) { 
            techAssignmentIds.add(fi.ParentId);
        }
    }

    if (!techAssignmentIds.isEmpty()) {
        List<Technician_Assignment__c> updates = new List<Technician_Assignment__c>();

        for (Technician_Assignment__c ta : [
            SELECT Id, Has_Chatter_Activity__c
            FROM Technician_Assignment__c
            WHERE Id IN :techAssignmentIds AND Has_Chatter_Activity__c = false
        ]) {
            ta.Has_Chatter_Activity__c = true;
            updates.add(ta);
        }

        if (!updates.isEmpty()) {
            update updates;
        }
    }
}

Download and the FeedItemTrigger.trigger and be sure to modify the record prefix if your object uses a different one.

Once this trigger is installed and the field is mapped in DayBack, we can start adding logic inside DayBack’s rendering hooks to:

• Add an icon to events with Has_Chatter_Activity__c = true
• Apply a special style or class
• Allow users to click directly into the modal to view Chatter content

3. Add Notification Icon

Next, we’ll add a Chatter indicator icon (in this case, a comment icon) to calendar events that have Chatter activity.

To add the icon, you’ll first need to add it to your Event’s display settings. In your DayBack calendar source settings, under the Display tab, prepend the following HTML to the event’s display settings:

<span class="chatterIcon"><i class="fa fa-comment"></i></span>

At this point, this will add a comment icon to every event. To display it only when Chatter activity is present, we’ll apply conditional logic using a custom action.

4. Show Chatter Icons Conditionally

To display the icon only for events with Chatter activity, add a “Before Event Rendered” event action. This script checks whether the event’s Has_Chatter_Activity__c field is true, and if so, appends a special CSS class (hasChatter) to that event:

// Before Event Rendered 
//
// Adds Chatter Activity Class to Events that have Chatter Activity

if (event[dbk.getCustomFieldIdByName('Has_Chatter_Activity__c', event.schedule)]) {
  event.className = 'hasChatter';
}

This class will then be used by CSS rules to show or hide the icon accordingly.

5. Styling the Events using CSS

Now we’ll add custom CSS to:

• Hide the icon by default
• Style events that do have Chatter activity
• Visually differentiate these events with a border and color effect

/* Hide icon for events with no Chatter */
.fc-event:not(.hasChatter) .chatterIcon {
  display: none !important;
}

/* Style events with Chatter activity */
.fc-event.hasChatter {
  box-shadow: 0px 0px 10px #ec03fc;
  border: 1px solid #ec03fc !important;
}

/* Style the comment icon */
.fc-event.hasChatter .chatterIcon {
  color: #ec03fc;
  text-shadow: 0px 0px 3px white;
  float: right;
}

5. Clicking the Comment Icon to Open the Modal

To add interactivity, we’ll allow users to click the comment icon to directly open the Chatter modal.

• Download and install aer-open-chatter-on-click.js

This script listens for clicks on the .chatterIcon element and opens the modal with the appropriate record context.

However, since the comment icon is placed on top of the event, clicking it may unintentionally trigger the event’s Edit Event popover. To prevent this:

• Download and install oec-prevent-popover-from-opening.js

This script disables the default popover behavior only when the comment icon is clicked, ensuring a smooth experience. Set the “On Event Click” action with Prevent Default Action set to Yes

This ensures clicking the icon doesn’t open the popover behind the modal.

Summary

And that’s it! While this walkthrough covered several steps, the full strategy brings everything together:

• Modals launched dynamically from DayBack via fbk.publish()
• Custom Visualforce pages rendered in an overlay
• Bi-directional Canvas messaging
• Visual indicators for contextual insight
• Click icons to launch a modal with a clean user experience.

With this system in place, your DayBack calendar can become fully interactive with various new aspects of your Salesforce environment, blending custom record views and native Salesforce UI into a unified experience.

If you’d like help implementing this strategy with your workflow, please reach out to our support team. We’d love to help.