Omniscript as Lightning Utility Bar

The Utility Bar is a footer that gives users quick access to frequently used tools and components. Each Utility Bar Item is a single-column lightning page that includes standard or custom lighting components.

Let's see how to add an Omniscript in a utility bar.

1. Once the Omniscript is activated, we have to embed it into an Aura component using the component tag. For example:

<c:verificationLauncherEnglish layout="lightning" prefill="{!v.prefill}"/>

where you need to specify type, subtype and language as the component name such that type should start with lower case even it is in upper case in the Omniscript.

2. Also, to access the standard methods which control the utility bar we have to add the lightning:utilityBarAPI component in the aura component.

<aura:component implements="flexipage:availableForAllPageTypes, force:appHostable">
    <lightning:utilityBarAPI aura:id="UtilityBarEx" />
    <aura:attribute name="prefill" type="Object" />
     <c:VerificationLauncherEnglish layout="lightning" prefill="{!v.prefill}"/>
</aura:component>

3. Next, we have to add this aura component into a lightning app as below:

• Setup -> Quick Find -> Enter App and select App Manager

• To add a utility bar item to an existing app, click Edit in the dropdown menu next to your app

• Click the Utility Items tab and click on Add Utility Item button and then search and select the aura component that you want to add. We can specify utility properties, like the label, icon, panel width, and height.

4. We can view the utility item added above in the footer of the app pages

NOTE: To use the LWC component as a utility item in an app’s utility bar, set isExposed to true and define a lightning__UtilityBar target in the component’s meta.xml file as below:

<isExposed>true</isExposed>
<targets>
<target>lightning__UtilityBar</target>
</targets>