New and Changed Lightning Components

Build user interfaces quickly with a bevy of new components.

New Components

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

lightning:carousel (Beta)
A collection of images that are displayed horizontally one at a time.

lightning:carousel is a collection of images displayed horizontally

lightning:formattedAddress
Displays a formatted address that provides a link to the given location on Google Maps.

lightning:formattedAddress displays an address with a link to Google Maps

lightning:formattedName
Displays a formatted name that can include a salutation and suffix.

lightning:formattedName displays a name that can include a salutation and suffix

lightning:formattedTime
Displays a formatted time based on the user’s locale.

lightning:formattedTime displays a formatted time.

lightning:inputAddress
Represents an address compound field with support for street, city, province, postal code, and country.

lightning:inputAddress represents an address compound field

lightning:inputField
An editable field with a label, help text, and value that corresponds to a field on a Salesforce object. This component must be nested in a lightning:recordEditForm component.
lightning:inputName
Represents a name compound field with support for salutation, first name, middle name, last name, informal name, and suffix.

lightning:inputName representst a name compound field

lightning:listView
Represents a list view of records that you own or have read or write access to, and records shared with you.

lightning:listView represents a list view of records for the specified object.

lightning:recordEditForm

A record edit or record create layout that displays one or more fields provided by lightning:inputField.

lightning:recordEditForm can contain one or more lightning:inputField components, providing a record edit or record create layout

lightning:pillContainer
A list of pills grouped in a container.

lightning:pillContainer displays a list of pills in a container

lightning:treeGrid
A hierarchical view of data presented in a table.

lightning:treeGrid represents a hierarchical view of data presented in a table

lightningsnapin:prechatAPI
Enables customization of the user interface for the pre-chat page in Snap-ins Chat.

Changed Components

The following components have changed.

lightning:buttonIcon
The following variant is new.
  • brand—Creates an icon-only button with the blue Salesforce style.
lightning:buttonIconStateful
The following variant is new.
  • border-filled—Creates an icon-only button with a white background.
lightning:combobox
The following attribute has changed.
  • name—This attribute is no longer required.
lightning:datatable
Text wrapping and clipping within a column is now supported. Text wrapping expands the height of the rows to reveal more content. Content is clipped by default if the number of characters is more than what the column width can hold. To toggle between the two views, select Wrap text or Clip text from the dropdown menu on the column header.
Other features that are now supported include:
  • Appending icons to the header column
  • Header-level actions
  • Infinite loading of rows
  • Row-level actions
  • Selecting rows programmatically
  • Using a button as a data type

These features are captured by the following lists of attributes, column properties, and data types.

The following attributes are new.
  • enableInfiniteLoading—Enables or disables infinite loading. The default is false.
  • isLoading—Specifies whether more data is being loaded, and displays a spinner if there is. The default is false.
  • loadMoreOffset—Determines when to trigger infinite loading based on how many pixels the table’s scroll position is from the bottom of the table. The default is 20.
  • selectedRows—Enables programmatic row selection with a list of keyField values.
  • maxRowSelection—Maximum number of rows that can be selected. Checkboxes are used for selection by default, and radio buttons are used when maxRowSelection is 1.
  • onheaderaction—The action triggered when a header action is clicked. By default, it also closes the header actions menu.
  • onloadmore—The action triggered when infinite loading loads more data.
  • onresize—The action triggered when the table renders columns each time it resizes a column.
  • onrowaction—The action triggered when a row action is clicked. By default, it also closes the row actions menu.
  • rowNumberOffset—Determines where to start counting the row number. The default is 0.
  • showRowNumberColumn—Shows or hides the row number column. Set to true to show the row number column. The default is false.
The following column properties are new.
  • actions—Appends a dropdown menu of actions to a column.
  • cellAttributes—Provides additional customization, such as appending an icon to the output. You can pass in these attributes: iconName, iconLabel, iconPosition.
  • iconName—The Lightning Design System name of the icon. Names are written in the format standard:opportunity. The icon is appended to the left of the header label.
The following data types are now supported.
  • action—Displays a dropdown menu using lightning:buttonMenu with actions as menu items. This data type supports these typeAttributes properties: rowActions and menuAlignment.
  • button—Displays a button using lightning:button. This data type supports these typeAttributes properties: disabled, iconName, iconPosition, label, name, title, variant.
The url data type now supports the following typeAttributes property.
  • label—The text to display in the link.
The date type now supports the following typeAttributes properties.
  • day—Valid values are numeric and 2-digit.
  • era—Valid values are narrow, short, and long.
  • hour—Valid values are numeric and 2-digit.
  • hour12—Determines whether the time is displayed as 12-hour. If false, time displays as 24-hour. The default setting is determined by the user’s locale.
  • minute—Valid values are numeric and 2-digit.
  • month—Valid values are 2-digit, narrow, short, and long.
  • second—Valid values are numeric and 2-digit.
  • timeZone—The time zone to use. Implementations can include any time zone listed in the IANA time zone database. The default is the runtime's default time zone. Use this attribute only if you want to override the default time zone.
  • timeZoneName—Valid values are short and long. For example, the Pacific time zone displays as PST if you use short or Pacific Standard Time if you use long.
  • weekday—Valid values are narrow, short, and long.
  • year—Valid values are numeric and 2-digit.
lightning:dualListbox
The following attribute has changed.
  • name—This attribute is no longer required.
lightning:fileUpload
The following attribute is new and has changed since its initial release.
  • name—Specifies the name of the input element. This attribute is no longer required.
lightning:flow
The onstatuschange attribute returns additional parameters.
  • activeStages—The current value of the $Flow.ActiveStages variable in the flow. (Flow stages are a beta feature.)
  • currentStage—The current value of the $Flow.CurrentStage variable in the flow. (Flow stages are a beta feature.)
  • guid—The interview’s GUID.
  • helpText—The help text for the current screen.
lightning:helptext
This component no longer requires version 41.0. It’s now usable with any API version 37.0 and later.
lightning:input
The following attribute has changed.
  • formatter—The percent-fixed formatter is new for type="number". It displays your input value as is, for example, entering 10 results in 10%. Additionally, the percentage value is now rounded off to the last decimal point when the step value is provided. For example, when step="0.001" and a value of 0.12345 is provided with the percent formatter, you see 12.345% instead of 12% on blur. Similarly, when step="0.001" and a value of 12.3456 is provided with the percent-fixed formatter, you see 12.346%.
  • name—This attribute is no longer required.
lightning:inputRichText
The following attributes are new.
  • ariaLabel—Label describing the rich text editor to assistive technologies.
  • ariaLabelledby—An element ID that provides a label for the rich text editor.
  • ariaDescribedby—A space-separated list of element IDs that provides descriptive labels for the rich text editor.
lightning:outputField
The following attribute is new.
  • class—CSS class for the outer element, in addition to the component’s base classes.
lightning:radioGroup
The following attribute has changed.
  • name—This attribute is no longer required.
lightning:recordViewForm
The following attribute is new.
  • class—CSS class for the outer element, in addition to the component’s base classes.
lightning:select
The following attribute has changed.
  • name—This attribute is no longer required.
lightning:textarea
The following attribute has changed.
  • name—This attribute is no longer required.
lightning:verticalNavigation
The following attribute is new.
  • ariaLabel—The aria-label attribute for the navigation component.