Lightning Web Components (LWC) in Utility Bar

In this post, we will implement the functionality of adding Lightning Web Components (LWC) in the Utility Bar. Utility Bar is displayed at the bottom of the page in Lightning Application and we can access it on any page. Let’s get into the implementation.

Implementation

In this implementation, we are creating a Form using Lightning Web Components using lightning-record-form to create and view Account records. And we will display this Lightning Web Component (LWC) in Utility Bar. If you want to know how lightning-record-form works in detail, please check this post.

Create a component ldsRecordForm. Add lightning-record-form tag and provide required attributes to display the Account record with Name, Phone, and Website Fields. Provide the object-api-name as Account and mode as View. View mode will display the blank record if record-id is not provided. If you want to show a blank record in Edit mode, use the Edit mode. If the record-id is available, it will show the respective record else it will display the blank one and we can create a new record.

ldsRecordForm.html

<template>
    <lightning-card title={strTitle}>
        <div class="slds-p-horizontal_small">
        
            <lightning-record-form object-api-name="Account" fields={arrayFields}
            columns="1" mode="view"></lightning-record-form>
        </div>
    </lightning-card>
</template>

In the JS Controller, we will only create arrayFields array to provide a list of Fields to display. Create strTitle to display the lightning:card title dynamically.

ldsRecordForm.js

import { LightningElement, api } from 'lwc';

export default class LdsRecordForm extends LightningElement {

    @api strTitle;
    arrayFields = ['Name', 'Phone', 'Website'];
}

Metadata File

To use Lightning Web Components in Utility Bar, we need to make it available first by making changes in the Metadata file. A metadata file is created for every Lightning Web Component to provide the configuration related details. In this file, we can provide a target as lightning__UtilityBar. Check below metadata file for our component.

ldsRecordForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__UtilityBar</target>
    </targets>
    <targetConfigs>
      <targetConfig targets="lightning__UtilityBar">
          <property name="strTitle" type="String" />
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Here, targets is used to make the component available for a particular Lightning section like App Page, Home Page, or Utility Bar. We are making it available for App Page and Utility Bar.

We can also provide targetConfigs to allow users to add some properties while adding the component on any page or Utility Bar, just like design attributes in Aura components. We are adding strTitle to allow the user to provide the title for our lightning-card. strTitle should be declared as @api to make it available on App Builder or on the Add Utility Item page.

Once the component is available for Utility Bar, we need to add Lightning Web Components (LWC) in Utility Bar. Go to App Manager from the Quick Find box. Edit the App, Click on Utility Items in the sidebar. Click on Add Utility Item and select our component. In the Component Properties section, we should be able to see the strTitle property that we can provide, which is used to display the title of our lighting-card.

Add Lightning Web Components in Utility Bar
Add Lightning Web Components in Utility Bar

Lightning Web Components in Utility Bar

This is how our implementation looks like:

Lightning Web Components in Utility Bar
Lightning Web Components in Utility Bar

That is all from this post. Please Subscribe here if you don’t want to miss new posts. See you in the next implementation!

1 thought on “Lightning Web Components (LWC) in Utility Bar”

  1. Hi I am trying to call LWC on Utility from another LWC which is placed on recordpage on click of button. If there is any workaround you know please help me.

    Reply

Leave a Comment