New and Changed Lightning Components (Salesforce Spring ’18 Release Notes)

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:formattedAddress

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

lightning:formattedName

Displays a formatted name that can include a salutation and suffix.

lightning:formattedTime

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

lightning:inputAddress

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

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:listView

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

lightning:recordEditForm

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

lightning:pillContainer

A list of pills grouped in a container.

lightning:treeGrid

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: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:fileUpload

The following attribute is new.

• name—Specifies the name of the input element.

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%.

lightning:outputField

The following attribute is new.

• class—CSS class for the outer element, in addition to the component’s base classes.

lightning:recordViewForm

The following attribute is new.

• class—CSS class for the outer element, in addition to the component’s base classes.

lightning:verticalNavigation

The following attribute is new.

• ariaLabel—The aria-label attribute for the navigation component.

Resources :
Salesforce Spring ’18 Release Notes