lightning__UtilityBar Target
lightning__UtilityBar Target
Enables a component to be used as a utility item in an app's utility bar.
Syntax
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__UtilityBar</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__UtilityBar">
<property name="greeting" type="String" description="Enter a greeting"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>targetConfigs
Configures the component and defines component properties. The targetConfigs tag contains at least one targetConfig tag.
targetConfig
Configures a page type with this attribute.
| Attribute | Description | Required |
|---|---|---|
targets | Specify one or more page types in the targets attribute, such as <targetConfig targets="lightning__UtilityBar"> or <targetConfig targets="lightning__UtilityBar,lightning__AppPage">. The targets attribute value must match one or more of the page types that you listed under <targets>. | Yes |
The targetConfig tag includes at least one property tag.
property
Specifies a public property of a component that can be set in App Manager. The component author defines the property in the component’s JavaScript class using the @api decorator. See the Usage section.
Use the property tag with these attributes.
| Attribute | Type | Description | Required |
|---|---|---|---|
name | String | The attribute name. This value must match the property name in the component’s JavaScript class. | Yes |
type | String | The attribute's data type. The following values are valid for all targets. Make sure that this value matches the type assigned to the property in the component's JavaScript module. If the types don't match, the value in the configuration file takes precedence.
| Yes |
datasource | String | Renders a field as a picklist, with static values. Supported only if the type attribute is String. For example: datasource="value1,value2,value3". You can also set the picklist values dynamically using an Apex class, such as: datasource="apex://MyCustomPickList". For more information, see Create Dynamic Picklists for Your Custom Components. | |
default | String | The default value for the attribute. | |
description | String | Displays as an i-bubble for the attribute in Lightning App Builder. | |
label | String | Displays as a label for the attribute in Lightning App Builder. | |
max | Integer | The maximum allowed value for an attribute of type Integer. | |
min | Integer | The minimum allowed value for an attribute of type Integer. | |
placeholder | String | Input placeholder text for the attribute when it displays in Lightning App Builder. This text is the ghost text in text fields and text areas before a user starts typing. Supported only if the type attribute is String. | |
required | Boolean | Specifies whether the attribute is required. The default value is false. |
Usage
To expose a component property, define the property in the component’s JavaScript class using the @api decorator. You can also update the property value in the App Manager page.
import { LightningElement, api } from "lwc";
export default class UtilityBarExample extends LightningElement {
@api greeting;
}<template>
<lightning-card
title="UtilityBarAPIComponent"
icon-name="standard:scheduling_workspace"
>
{greeting}
</lightning-card>
</template>See Also
Release Preview