I'm fairly new to salesforce and lwc so apologies if this question has an easy answer.

I'm trying to get the recordId in a component using @api. The component is being used in the Utility Bar.

Using the code below, if I place the component on a record page, it shows up fine. But if the component is in the Utility Bar and loaded on a record page, I get this.recordId: undefined.

My guess is that recordId isn't available in the Utility Bar but I haven't been able to find anything that confirms or denies this. I've seen questions related to aura components but nothing specifically related to lwc.

Simplified code below:


import { LightningElement, api } from 'lwc';

export default class BaseStation extends NavigationMixin(LightningElement) {

    @api recordId;

    connectedCallback() {
        console.log('record id', this.recordId);


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="baseStation">
    <masterLabel>Talkative Base Station</masterLabel>
  • I tried this with Aura Component using force:hasRecordId as well and I am getting component.get("v.recordId") as undefined Commented Apr 26, 2019 at 10:44
  • Yeah, that was probably going to be my next move - try and wrap my component in an aura component and see what happened. At least I won't have to try that now. Commented Apr 26, 2019 at 10:59

4 Answers 4


The solution would use Aura Component and use LWC component inside that. Aura Component:

   <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes"
    <aura:handler name="change" value="{!v.recordId}" action="{!c.onRecordIdChange}"/>

<c:lwc_my_comp record-id="{!v.recordId}" ><c:lwc_my_comp>


    onRecordIdChange : function(component, event, helper) {
        var newRecordId = component.get("v.recordId");

Here is ref doc: https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/sforce_api_console_js_lightning_utility_bar_page_context.htm

  • While this does seem to work with the "marker" property recordId, it doesn't seem to work with sObjectName - ¯\_(ツ)_/¯ (see this question)
    – jbyrd
    Commented Jul 2, 2021 at 19:06

this works for me to get recordId for a component in the Utility Bar:

<aura:component description="Aura Container in Utility Bar for LWC cmp" implements="force:hasRecordId, force:lightningQuickAction, lightning:utilityItem" access="global">

   <c:childLwcCmp recordId="{!v.recordId}"  />  

<!--child LWC Cmp-->
export default class childLwcCmp extends LightningElement {
    get recordId() {
        return this._recordId;
    set recordId(value) {
        this.setAttribute('recordId', value);
        this._recordId = value;

//for the first time NULL comes, but then immediately the current recordID comes from the aura

        if (this.recordId == null) {   
            console.log('-/-NULL-/-', this.recordId);
        } else {

In addition to @vishnu answer, Docs says about Unsupported Experiences and Tools that

Lightning Web Components doesn’t currently support these salesforce experiences and tools. To use a Lightning web component with these experiences and tools, wrap the component in an Aura component.

Lightning Out
Lightning Components for Visualforce
Standalone Apps
Salesforce Console (Navigation Item API, Workspace API, UtilityBar API)
Utility Bars
URL Addressable Tabs
Snap-ins Chat
Lightning for Gmail, Outlook Integration
EMP API, Conversation Toolkit API, Omni Toolkit API, Quick Action API
Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions
Chatter Extensions

Reference:- https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.get_started_supported_experiences

IMPORTANT The recordId is set only when you place or invoke the component in an explicit record context. In all other cases, the recordId isn’t set, and your component shouldn’t depend on it.

Reference:- https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_record_context


Use @wire adapter. Ex:

import { getRecord } from 'lightning/uiRecordApi'; 

@wire(getRecord, { recordId: '$recordId', 'Name' }) contact;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .