Lightning Web Components: Open Source
Lightning Web Components framework is now open source. This will empower to build enterprise-ready web components on any platform. On the Salesforce Platform, you can add a Lightning web component as a custom tab in a Lightning Experience app and in the Salesforce app.
How to do this: Check lwc.dev for complete understanding of framework.
Add Lightning Web Components as Custom Tabs
- Add the lightning__Tab target to the component’s configuration file. The
.js-meta.xml configuration file defines the metadata values for the component, including the setting to allow usage in a custom tab. xml version="1.0" encoding="UTF-8"?>
xmlns="http://soap.sforce.com/2006/04/metadata"> lightning__Tab - Create a custom tab for this component.
- To display the component in a custom tab:
- For a Lightning Experience app, add the component to the App Launcher.
- For the Salesforce mobile app, add the component to the Salesforce app navigation menu.
Share CSS Style Rules
How:
- Create a Lightning web component that contains only a CSS file.
cssLibrary └──cssLibrary.css
/* cssLibrary.css */ h1 { font-size: xx-large; }
- In the CSS file of another Lightning web component, import the style rules.
myComponent ├──myComponent.html ├──myComponent.js ├──myComponent.js-meta.xml └──myComponent.css
/* myComponent.css */ @import 'cssLibrary.css';
- Imported style rules are applied to the template just like non-imported style rules. In the myComponent.html template, the text in the tag uses the xx-large style defined in cssLibrary.css.
Words to the Wise
DOM API Changes
- Document.prototype.getElementById
- Document.prototype.querySelector
- Document.prototype.querySelectorAll
- Document.prototype.getElementsByClassName
- Document.prototype.getElementsByTagName
- Document.prototype.getElementsByTagNameNS
- Document.prototype.getElementsByName
- Document.body.querySelector
- Document.body.querySelectorAll
- Document.body.getElementsByClassName
- Document.body.getElementsByTagName
- Document.body.getElementsByTagNameNS
Lightning Components Can Access Apex Methods Only in the Same Package
A Lightning component installed from a package can’t call an Apex method from an Apex class in another package, even if both packages are in the same namespace. You can’t use the @NamespaceAccessible Apex annotation in an Apex method referenced from a Lightning component.
How: This table shows the access differences for public @AuraEnabled Apex methods in a Lightning component in second-generation managed packages.
Annotation | Winter ’20 Access | Summer ’19 Access |
---|---|---|
public (no @NamespaceAccessible) | Same package only | Same namespace |
public (with @NamespaceAccessible) | Error | Same namespace |
Aura Components in the ui Namespace Are Being Retired
Winter’20 and Earlier | Summer 21 |
---|---|
ui:actionMenuItem | lightning:menuItem and lightning:buttonMenu |
ui:button | lightning:button, lightning:buttonIcon, lightning:buttonIconStateful and lightning:buttonGroup. |
ui:checkboxMenuItem | lightning:menuItem and lightning:buttonMenu |
ui:inputCheckbox | lightning:input using checkbox, toggle, or checkbox-button type. lightning:checkboxGroup for group. |
ui:inputCurrency | lightning:input using number type and currency formatter |
ui:inputDate | lightning:input using date type. |
ui:inputDateTime | lightning:input using datetime type. |
ui:inputDefaultError | lightning:input using built-in field validation |
ui:inputEmail | lightning:input using email type |
ui:inputNumber | lightning:input using number type |
ui:inputPhone | lightning:input using phone type |
ui:inputRadio | lightning:input using radio type |
ui:inputRichText | lightning:inputRichText |
ui:inputSecret | lightning:input using password type |
ui:inputSelect | lightning:select or lightning:combobox. |
ui:inputSelectOption | lightning:select or lightning:combobox. |
ui:inputText | lightning:input using text type. |
ui:inputTextArea | lightning:textarea |
ui:inputURL | lightning:input using url type. |
ui:menu | lightning:buttonMenu |
ui:menuItem | lightning:menuItem and lightning:buttonMenu. |
ui:menuItemSeparator | lightning:menuDivider and lightning:buttonMenu. |
ui:menuList | lightning:menuItem and lightning:buttonMenu. |
ui:menuTrigger | lightning:menuItem and lightning:buttonMenu. |
ui:menuTriggerLink | lightning:menuItem and lightning:buttonMenu |
ui:message | lightning:notificationsLibrary |
ui:outputCheckbox | lightning:input using checkbox type and set readonly to true. |
ui:outputCurrency | lightning:formattedNumber using style set to currency |
ui:outputDate | lightning:formattedDateTime |
ui:outputDateTime | lightning:formattedDateTime or lightning:formattedTime. |
ui:outputEmail | lightning:formattedEmail |
ui:outputNumber | lightning:formattedNumber |
ui:outputPhone | lightning:formattedPhone |
ui:outputRichText | lightning:formattedRichText |
ui:outputText | lightning:formattedText |
ui:outputTextArea | lightning:formattedText |
ui:outputURL | lightning:formattedUrl |
ui:radioMenuItem | lightning:menuItem and lightning:buttonMenu |
ui:menuFocusChange | lightning:buttonMenu |
ui:menuSelect | lightning:combobox |
ui:menuTriggerPress | lightning:buttonMenu |
Override Aura CSS Flipping for RTL Languages
To override the automatic flipping, add a /*@noflip*/ annotation in a comment directly before the property. For example:
.THIS.mycontainer { /*@noflip*/ direction : rtl; }
Navigate Users Directly to an App
How to do this:
Use the lightning-navigation Lightning web component or the lightning:navigation Aura component with the new standard__app page reference type.
- To navigate users to an app, pass either the appId or appDeveloperName URL parameters to the appTarget.
- To navigate users to a specific page in an app, include the pageRef attribute.
Reference : https://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_lc_message_channel.htm