Lightning Web Component in Utility Bar example

Here I will show how to make lightning web component available to be used as Utility Bar Item.

First create new Lightning Web Component.

sfdx force:lightning:component:create --type lwc --componentname UtilityBarExample --outputdir force-app\main\default\lwc

Open meta configuration XML file utilityBarExample.js-meta.xml and change it – add targets lightning__UtilityBar and lightning__AppPage and change
isExposed to true, so the file looks like this:

Create Scratch org if you don’t have one (quick command that uses default config and 30 duration day for Scratch org):

sfdx force:org:create -f config\project-scratch-def.json --setalias LightningWebComponents --durationdays 30 --setdefaultusername --json --loglevel fatal

Push code to your scratch org:

sfdx force:source:push --json --loglevel fatal

Go to Setup –> Apps –> App Manager.

Select the app that you want to add Utility Item to and select Edit. Then go to Utility Items and add Utility Item.

You should be able to see your custom component in the list of available components.Now you can add this Lightning Web Component in Utility Bar.



Your email address will not be published. Required fields are marked *