Salesforce Console navigation App Utility using Lightning Web Component

Salesforce Console navigation App Utility using Lightning Web Component

lightning__UtilityBar should be used as the target in the Lightning Web Component for Salesforce Console navigation App Utility.

Sample Lightning Web Component:

HTML:

<template>      
    <lightning-card class="slds-var-p-around_small">  
        <lightning-record-edit-form 
            object-api-name="Case"
            onsuccess={handleSuccess}>
            <lightning-messages></lightning-messages>
            <lightning-input-field 
                field-name="Subject">
            </lightning-input-field>
            <lightning-input-field 
                field-name="Description">
            </lightning-input-field>
            <lightning-input-field 
                field-name="Priority">
            </lightning-input-field>
            <lightning-input-field 
                field-name="Status">
            </lightning-input-field>
            <lightning-input-field 
                field-name="Origin">
            </lightning-input-field>
            <lightning-button
                type="submit"
                name="submit"
                label="Create Case"
                class="slds-var-p-around_medium">
            </lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ConsoleUtility extends LightningElement {

    handleSuccess() {

        console.log( 'Inside Handle Success' );
        this.dispatchEvent(
            new ShowToastEvent( {
                title: 'Case Creation',
                message: 'Case Created Successfully!!!',
                variant: 'success'
            } ),
        );

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
  <targets>
      <target>lightning__UtilityBar</target>
  </targets>
</LightningComponentBundle>

App Utility Configuration:

Output:

Leave a Reply