updatePanel() for Lightning Experience

Arguments

Optional parameters are passed into an object as the last argument of the method.

heightTransition

An optional object that describes the CSS transition for the utility panel's height. Pass this object to panelAttrs and use with height. Optional arguments include:

• durationMs—The time in milliseconds. It takes for the height transition to complete. The default value is 0.
• timingFunction—The transition timing function that sets the rate for panel height changes. Applies any CSS easing function that’s supported by your target browser. The default value is ease.
• delayMs—The wait time in milliseconds before the height transition starts. The default value is 0.

widthTransition

An optional object that describes the CSS transition for the utility panel's width. Pass this object to panelAttrs and use with width. Optional arguments include:

• durationMs—The time in milliseconds. It takes for the width transition to complete. The default value is 0.
• timingFunction—The transition timing function that sets the rate for panel width changes. Applies any CSS easing function that’s supported by your target browser. The default value is ease.
• delayMs—The wait time in milliseconds before the width transition starts. The default value is 0.

LWC Sample Code

This component opens a utility using the enclosing utility ID.

1import { LightningElement, wire } from 'lwc';
2import { updatePanel, EnclosingUtilityId } from 'lightning/platformUtilityBarApi';
3
4export default class UpdatePanelExample extends LightningElement {
5    @wire(EnclosingUtilityId) utilityId;
6
7    panelAttrs = {
8        label: 'Account Insights',
9        icon: 'einstein',
10        iconVariant: 'success',
11        height: 600,
12        width: 600
13    }
14
15    handleUpdate() {
16        if (this.utilityId) {
17            return updatePanel(this.utilityId, this.panelAttrs);
18        }
19    }
20}

To make your component available for use in a utility bar, specify the lightning__UtilityBar target in the component’s configuration file.

Response

Returns a promise that resolves to true if successful. The promise is rejected on error.