1

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>
  • I tried this with Aura Component using force:hasRecordId as well and I am getting component.get("v.recordId") as undefined – daru badnaam Apr 26 '19 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. – davidpanaho Apr 26 '19 at 10:59
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

0

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

0

Use @wire adapter. Ex:

import { getRecord } from 'lightning/uiRecordApi'; 

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for?Browse other questions tagged or ask your own question.