Getting the recordId in lightning web component in the utility bar

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:

baseStation.js

import { LightningElement, api } from 'lwc';

export default class BaseStation extends NavigationMixin(LightningElement) {

    @api recordId;

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

baseStation.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="baseStation">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Talkative Base Station</masterLabel>
    <targets>
        <target>lightning__UtilityBar</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

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

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

</aura:component>

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

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

Method 2

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}"  />  
</aura:component>

<!--child LWC Cmp-->
export default class childLwcCmp extends LightningElement {
   
    _recordId;
   
    @api
    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 {
            this.doInit();
        }
    }

Method 3

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
Flows
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

Method 4

Use @wire adapter.
Ex:

import { getRecord } from 'lightning/uiRecordApi'; 

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0