UI Aura Components – Time to say goodbye

Salesforce is going to end support for UI aura components. Take necessary steps to replace UI components with respective lightning components.

Posted by Vinay Vernekar 28th March 2020

There were lot of rumors stating that aura components with UI namspace will be going to be deprecated, but there was no official announcement till now. As part of Spring 20 release, Salesforce announced that Aura components having UI namespaces going to be deprecated on 1st May 2020.

Why this action has been taken by Salesforce?

Salesforce planning to focus more on latest web standards considering performance, scalability , accessibility and user experience.

What will happen for the developement done with UI components?

It’s nothing like they will stop working, Salesforce is planing to end support for Aura components in the UI namespace on 1st May 2021. However existing components will be working beyond May 1, 2021. Any issues reported with UI components will no more supported by Salesforce after 1st May 2020.

What precautions needs to be followed?

  • Do not make use of UI components for any new developement.
  • Replace the deprecated UI component with related lightning component.

What are the components going to be deprecated? whats their replacement?

Below is the list of UI components that needs to be replaced with corresponding lightning component

  • ui:actionMenuItem : Use lightning:menuItem with lightning:buttonMenu instead.
  • ui:button : Use lightning:button, lightning:buttonIcon, or lightning:buttonIconStateful. For button groups, use lightning:buttonGroup.
  • ui:checkboxMenuItem : Use lightning:menuItem with lightning:buttonMenu instead.
  • ui:inputCheckbox : Use lightning:input with checkbox, toggle, or checkbox-button type instead. For checkbox groups, use lightning:checkboxGroup.
  • ui:inputCurrency : Use lightning:input with number type and currency formatter instead.
  • ui:inputDate : Use lightning:input with date type instead.
  • ui:inputDateTime : Use lightning:input with datetime type instead.
  • ui:inputDefaultError : Use lightning:input with built-in field validation instead.
  • ui:inputEmail : Use lightning:input with email type instead.
  • ui:inputNumber : Use lightning:input with number type instead.
  • ui:inputPhone : Use lightning:input with phone type instead.
  • ui:inputRadio : Use lightning:input with radio type instead. For radio groups, use lightning:radioGroup.
  • ui:inputRichText : Use lightning:inputRichText instead.
  • ui:inputSecret : Use lightning:input with password type insted.
  • ui:inputSelect : Use lightning:select or lightning:combobox instead.
  • ui:inputSelectOption : Use lightning:select or lightning:combobox instead.
  • ui:inputText : Use lightning:input with text type instead.
  • ui:inputTextArea : Use lightning:textarea instead.
  • ui:inputURL : Use lightning:input with url type instead.
  • ui:menu : Use lightning:buttonMenu instead.
  • ui:menuItem : Use lightning:menuItem with lightning:buttonMenu instead.
  • ui:menuItemSeparator : Use lightning:menuDivider with lightning:buttonMenu instead.
  • ui:menuList : Use lightning:buttonMenu instead.
  • ui:menuTrigger : Use lightning:buttonMenu instead.
  • ui:menuTriggerLink : Use lightning:buttonMenu instead.
  • ui:message : Use lightning:notificationsLibrary instead.
  • ui:outputCheckbox : Use lightning:input with checkbox type and set readonly to true.
  • ui:outputCurrency : Use lightning:formattedNumber with style set to currency.
  • ui:outputDate : Use lightning:formattedDateTime instead.
  • ui:outputDateTime : Use lightning:formattedDateTime or lightning:formattedTime instead.
  • ui:outputEmail : Use lightning:formattedEmail instead.
  • ui:outputNumber : Use lightning:formattedNumber instead.
  • ui:outputPhone : Use lightning:formattedPhone instead.
  • ui:outputRichText : Use lightning:formattedRichText instead.
  • ui:outputText : Use lightning:formattedText instead.
  • ui:outputTextArea : Use lightning:formattedText instead.
  • ui:outputURL : Use lightning:formattedUrl instead.
  • ui:radioMenuItem : Use lightning:menuItem with lightning:buttonMenu instead.
  • ui:spinner : Use lightning:spinner instead.
Tags: