If you have ever worked on a high-volume Service Cloud project, you know the Salesforce utility bar is a lifesaver for multitasking agents. We’ve all seen the scenario: a call comes in, the agent clicks the screen pop, and then they wait. And wait. While that Contact record is spinning, the customer is already talking, and the agent has nowhere to put those notes. It is a frustrating gap that usually leads to agents scribbling on post-it notes or opening Notepad.
Why the Salesforce utility bar beats standard page layouts
The beauty of the Salesforce utility bar is that it stays put. It doesn’t care if the main workspace tab is still loading or if the agent is jumping between three different sub-tabs. By putting a lightweight case creation tool right at the bottom of the screen, you give agents a “scratchpad” that actually saves data back to the system. One thing that trips people up, though, is how LWC handles context in this specific area.
In my experience, LWC is great for almost everything, but it can be flaky when trying to grab the recordId directly from the utility bar context. Sometimes it’s there, sometimes it isn’t. To fix this, I always use a thin Aura wrapper. It might feel like a step backward, but the Aura force:hasRecordId interface is much more reliable for this specific use case. It ensures that if an agent is looking at a Contact, that ID is passed into our component every single time without fail.
Setting up the Aura wrapper and LWC
So, how do we actually build this? We need three parts: an Aura “shell,” our LWC for the actual work, and a simple Apex controller. This setup follows the standard LWC component communication pattern where the parent (Aura) handles the context and the child (LWC) handles the UI. Here is the breakdown of the Aura side:
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes,lightning:utilityItem">
<aura:attribute name="recordId" type="String" />
<c:createCaseUtility contactId="{!v.recordId}"/>
</aura:component>
It is simple, direct, and it works. The Aura component just sits there, grabs the ID of whatever record the agent is looking at, and hands it off to the LWC. This keeps your LWC “clean” so it can focus on the form logic and the save process.
The LWC Logic
Now, the LWC is where the heavy lifting happens. We want to make sure we’re actually on a Contact record before we let them save. But we also want to let them start typing even if the ID hasn’t arrived yet. I’ve seen teams try to use Flow for this, but when you need specific UI behavior or complex validation, choosing code over automation is often the better move for performance.
import { LightningElement, wire, api } from 'lwc';
import createCase from '@salesforce/apex/CreateCaseController.createCase';
import { minimize, EnclosingUtilityId } from 'lightning/platformUtilityBarApi';
export default class CreateCaseUtility extends LightningElement {
@api contactId;
@wire(EnclosingUtilityId) utilityId;
handleSave() {
if (!this.contactId || !this.contactId.startsWith('003')) {
// Show a quick error - needs to be a contact!
return;
}
// Call your Apex here
}
}
Making it useful for agents
Look, a form is just a form. To make the Salesforce utility bar version actually helpful, you should add a few small touches. I like to include a “Minimize on Save” feature. Once the agent hits save and the case is created, the utility bar window should automatically tuck itself away. It’s a small UX win, but call center agents will love you for it because it clears their screen for the next task.
Pro Tip: Always add a check to see if the recordId starts with ‘003’. If an agent opens the utility bar while looking at an Account or a custom object, you don’t want them accidentally trying to link a Case to the wrong record type.
You can also use the getRecord wire adapter to pull in the Contact’s name or phone number. Showing the agent “You are creating a case for [Contact Name]” right in the utility window gives them the confidence that they’re attaching the data to the right person.
Key Takeaways
- The Salesforce utility bar is the best place for “always-available” tools that shouldn’t be tied to page loads.
- Use an Aura wrapper to pass
recordIdto your LWC to avoid the common “undefined ID” bugs. - Always validate the record context (like checking for the ‘003’ prefix) before allowing a save.
- Keep the UI compact. The utility bar is a small space, so don’t overcomplicate the form.
- Automate the “minimize” action after a successful save to keep the agent’s workspace clean.
Wrapping it up
Building a custom case creator for the Salesforce utility bar isn’t just about writing code; it’s about understanding how agents actually work. They are in a rush, they are talking to customers, and they don’t have time for slow pages. This pattern gives them a fast, reliable way to do their jobs without fighting the CRM. Give it a try in your next Service Cloud build – your users will thank you.








Leave a Reply