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.

Lightning Web Component Datatable example with sorting and search functionality.

Many people are familiar with lightning datatable component and how to use it in Aura Component. In this article I want to show example how to use lightning component in Lightning Web Component and build simple search by name and column sorting.

First we need to create an apex class.

You can create it either in Salesforce UI or Developer Console or do it in Visual Studio Code with SFDX command:

sfdx force:apex:class:create --classname GetAccounts --template DefaultApexClass --outputdir force-app\main\default\classes

Code for Apex class:

Second we will need to create Lightning Web Component budle.

sfdx force:lightning:component:create --type lwc -n LightningDatatableExample -d force-app/main/default/lwc

Code for html component:

JS controller:

To make sure component is visible in Lightning App Builder you need to add targets and change isExposed to true in LightningDatatableExample.js-meta.xml file:

How to create Popup Using Lightning Web Components?

Lightning Web Components is the new programming model that you can use to build Lightning components in Salesforce. Here Is how you can create a Popup in Salesforce using LWC.

The following is the JavaScript that foes in the filename.js

import { LightningElement , track } from 'lwc';

export default class PopUpExample extends LightningElement {
    @track openModal;
    openPopUp() {
        this.openModal = true;
    }
    closePopUp() {
        this.openModal = false;
    }
    saveAction(){
        // eslint-disable-next-line no-console
        console.log( 'saveaction is called');
        this.closePopUp();
    }
}

Here is the xml file

When you create a new lwc, make sure the isExposed is updated to True in the xml file. The default is false, the component will not show up in the Lightning Builder even if you deploy the component to your org. Also update the <targets> based on what your requirements are.

That’s it.. Hope it helps.

How to use static resource to style Lightning Web Components?

Here is a sample code on how to import and use static resources for styling your lwc.

I zipped my CSS file into folder and uploaded this into a static resource called ‘myResource’. Here is the JS code you would need to import this static Resource into your component.

import { LightningElement, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import myResource from '@salesforce/resourceUrl/myResource';
export default class CssExample extends LightningElement {
    @track textVal;
    changeHandler(event) {
        this.textVal = event.target.value;
    }
    renderedCallback() {
        Promise.all([
            loadStyle(this, myResource + '/styleSheet.css')
        ]).catch(error => {
             // eslint-disable-next-line no-console
             console.log(error);
            
        });
    }
}

Here is how you can use a style class that you have defined inside the static resource:

That’s it. Hope it helps 🙂