New and Changed Lightning Components

New Components

The following components are new and require API version 41.0 and later.

Note

For more information about setting your API version in the Developer Console, see Update Your Components to the Latest API Version to Use New lightning: Components.

lightning:accordion

Displays a collection of vertically stacked sections with multiple content areas, only one of which is expanded at a time. When you select a section, it’s expanded or collapsed. Each section can hold one or more Lightning components.

This component is used together with the following sub-component.

• lightning:accordionSection—Keeps related content in a single container.

lightning:buttonIconStateful

An icon-only button that retains state. The state changes when you press the button.

lightning:checkboxGroup

A checkbox group that enables selection of single or multiple checkboxes.

lightning:clickToDial

A component that renders a valid phone number as click-to-dial enabled for Open CTI or Salesforce Call Center. This field respects existing click-to-dial commands for computer-telephony integrations (CTI) with Salesforce.

For more information, see Create Click-to-Dial Phone Numbers with the lightning:clickToDial Component.

lightning:combobox

A read-only input field that contains a dropdown list of selectable options. Multiple selection is currently not supported.

lightning:datatable

A table that displays columns of data, formatted according to type.

lightning:dualListbox

Represents two side-by-side list boxes. Select one or more options in the list on the left. Move selected options to the list on the right. The order of the selected options is maintained, and you can reorder options. You can also specify required options.

lightning:dynamicIcon

Represents various dynamic icons with different states. For example, you can use this component to visually display an event that’s in progress, such as a graph that’s loading. The following options are available.

• Ellie: A pulsing blue circle, which pulses and stops after one animation cycle
• EQ: An animated graph with three bars that rise and fall randomly
• Score: A green filled circle or a red unfilled circle
• Strength: Three animated horizontal circles that are colored green or red
• Trend: Animated arrows that point up, down, or straight
• Waffle: A square made up of a 3x3 grid of circles, which animates on hover

lightning:fileCard

Displays a representation of content uploaded as an attachment.

lightning:fileUpload (Beta)

Enables multiple files to be uploaded to a record. The file uploader includes drag-and-drop functionality and filtering by file types.

lightning:flexipageRegionInfo

A sub-component that provides Lightning page region width information to the component that contains it. See Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo.

lightning:flow

Represents a flow interview in Lightning runtime.

lightning:formattedEmail

Displays an email address as a hyperlink with the mailto: URL scheme.

lightning:formattedLocation

Displays a geolocation in decimal degrees using the format [latitude, longitude].

lightning:formattedPhone

Displays a formatted phone number as a hyperlink with the tel: URL scheme. Only North American phone numbers are currently supported.

lightning:formattedRichText

Displays rich text that’s formatted with whitelisted tags and attributes. Other tags and attributes are removed and only their text content is displayed.

lightning:formattedText

Displays text, replaces newlines with line breaks, and creates hyperlinks within a text block.

lightning:formattedUrl

Displays a URL as a hyperlink.

lightning:helptext

An icon with a text popover. The popover is displayed when you hover or focus on the icon that’s attached to it. Manual positioning of the popover is currently not supported.

lightning:inputLocation

Represents a geolocation compound field that accepts a latitude and longitude value.

lightning:notificationsLibrary

Provides messaging functionality via notices and toasts. Notices alert users to system-related issues and updates.

Toasts enable you to provide feedback and serve as a confirmation mechanism after the user takes an action.

lightning:omniToolkitAPI (Beta)

Provides methods that can be used from Lightning components in the utility bar for Omni-Channel. The component doesn’t affect the UI.

lightning:overlayLibrary

Messages can be displayed in modals and popovers. Modals display a dialog in the foreground of the app, interrupting a user’s workflow and drawing attention to the message.

Popovers display relevant information when you hover over a reference element.

lightning:outputField

Represents a read-only display of a label, help text, and value for a field on a Salesforce object. You must provide the record ID in the wrapper lightning:recordViewForm component.

lightning:path (Beta)

A Path derived from a picklist that is specified by an admin in setup. Includes Key Fields and Guidance, and a Mark Complete action button.

lightning:picklistPath (Beta)

A Path derived from a picklist, which is specified by the picklistFieldApiName attribute and does not have Key Fields, Guidance, or action buttons.

lightning:progressBar

A horizontal progress bar that indicates the progress of an operation from left to right, such as for a file download or upload.

lightning:progressIndicator (Beta)

Provides a visual indication on the progress of a particular process. You can create two types of indicators: base (default) or path.

lightning:radioGroup

A set of radio buttons that can have a single option selected.

lightning:recordViewForm

Represents a record view that displays one or more fields fields based on their field types, provided by lightning:outputField.

lightning:slider

A slider that enables numerical input between two specified numbers.

lightning:tree

Provides visualization of a structure hierarchy. Tree items, also known as branches, can be expanded or collapsed.

lightning:verticalNavigation

A vertical list of links that takes the user to another page or parts of the page that the user is on.

This component is used with the following sub-components.

• lightning:verticalNavigationItem—A text-only link within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow.
• lightning:verticalNavigationItemBadge—A link and badge within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow.
• lightning:verticalNavigationItemIcon—A link and icon within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow.
• lightning:verticalNavigationOverflow—An overflow of items that can be expanded and collapsed. The overflow section does not adjust automatically based on the view port.
• lightning:verticalNavigationSection—A section within lightning:verticalNavigation.

This example shows a lightning:verticalNavigation component with a Reports and Folders sections.

Changed Components

The following components have changed.

forceCommunity:waveDashboard

The following attribute is new.

• showHeader—Controls the visibility of the header of an embedded Analytics dashboard. If true, the dashboard is displayed with a header bar that includes dashboard information and controls. If false, the dashboard appears without a header bar. Note that the header bar automatically appears when either showSharing or showTitle is true.

lightning:button

The following attribute has changed.

• variant—The success variant has been added. This variant creates a green button.

lightning:buttonStateful

The following attribute has changed.

• variant—The destructive and success variants have been added.

lightning:datatable

The following attribute has changed.

• columns—The cellAttributes property name has been changed to typeAttributes.

lightning:formattedDateTime (Beta)

The following attribute has changed.

• value—ISO 8601 date formats are now supported. You no longer have to convert your ISO string to a Date object or timestamp when working with date fields in Salesforce records.

lightning:input (Beta)

The following type is new.

• checkbox-button—Enables you to select one or more options with an alternative visual design.

lightning:tabset (Beta)

The following variant is new.

• vertical—Displays tabs vertically to the left of the content area.

lightning:utilityBarAPI

This component has moved from the force namespace to the lightning namespace.

lightning:verticalNavigation

The following attribute is new.

• onbeforeselect—Action fired before an item is selected. The event parameters include the name of the selected item. To prevent the onselect handler from running, call event.preventDefault() in the onbeforeselect handler.

lightning:workspaceAPI

This component has moved from the force namespace to the lightning namespace.

ui:outputNumber

ui:outputNumber ignores non-number values and doesn’t output anything. Previously, ui:outputNumber displayed an error that was hard to debug for non-number values, such as: <ui:outputNumber value="abc" />.

wave:waveDashboard

The following attribute is new.

• showHeader—Controls the visibility of the header of an embedded Analytics dashboard. If true, the dashboard is displayed with a header bar that includes dashboard information and controls. If false, the dashboard appears without a header bar. Note that the header bar automatically appears when either showSharing or showTitle is true.