Posted in Lightning Component, Lightning Web Component, LWC, Salesforce

Lightning Web Components for AURA Developers Part – II

The best way to compare the Aura Component and Lightning Web Components programming models is to look at code for similar components written in the two models. The goal of this post is to help you to leverage your Aura components skills to accelerate learning about Lightning web components. You learn how the two types of components work well together.

Prerequisites

Before you dive into this post, complete the Lightning Web Components Basics module, which gives you a great introduction to the new programming model.
I am assuming that you’re familiar with the Aura Components programming model, and we won’t explain its features, except in comparison to the Lightning Web Components programming model. If you’re not familiar with Aura components, start with the Aura Components Basics module.

Aura Initializers Become Lifecycle Hooks

Replace an init event handler in an Aura component with the standard JavaScript connectedCallback() method in a Lightning web component. The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. Lifecycle hooks are callback methods that let you run code at each stage of a component’s lifecycle.We use the init event in an Aura component to initialize a component after component construction but before rendering.

Here’s an init event handler in the PropertyCarousel Aura component.

<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>

The onInit function in the Aura component’s controller performs any necessary initialization.In a Lightning web component, use connectedCallback() instead in the component’s JavaScript file. Here’s an example inpropertySummary.js.

export default class PropertySummary extends LightningElement {
    ...
    connectedCallback() {
        // initialize component
    }
}

Migrate Base Components

This Aura component uses the lightning:formattedNumber base component.

<aura:component>
<lightning:formattedNumber value="5000" style="currency"
currencyCode="USD"/>
</aura:component>

To migrate this markup to a Lightning web component:

  • Change the colon that separates the namespace (lightning) and component name (formattedNumber) to a dash.
  • Change the camel-case component name (formattedNumber) to a dash-separated name (formatted-number).
  • Change the camel-case attribute name (currencyCode) to a dash-separated name (currency-code).

Here’s the equivalent Lightning web component.

<template>
    <lightning-formatted-number value="5000" style="currency"
      currency-code="USD" >
    </lightning-formatted-number>
</template>

Aura CSS Becomes Standard CSS

Lightning web components use standard CSS syntax. Remove the proprietary THIS class that Aura components use.
Here’s a portion of the CSS file for the PropertyTile Aura component.

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}

Similar CSS for the propertyTile Lightning web component uses standard CSS instead. The THIS keyword is specific to Aura and isn’t used in Lightning web components.

.lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}

Call Apex Methods

Here’s a portion of the js file for the calling apex method “getContacts” in Aura component.

var action = component.get("c.getContacts");
action.setCallback(this, function(data) {
    component.set("v.Contacts", data.getReturnValue());
});
$A.enqueueAction(action);

The JavaScript function calls the getContacts method of the Apex controller. It then populates the attribute named Contacts with the results.

Here’s a portion of the js file for the calling apex method “getContacts” in lightning web component.

import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ApexImperativeMethod extends LightningElement {
    @track contacts;
    @track error;

    handleLoad() {
        getContacts()
            .then(result => {
                this.contacts = result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.contacts = undefined;
            });
    }
}

Also don’t forget to review awesome Salesforce Lightning Web Component Cheat Sheet (Unofficial) prepared by @Santanu Boral

References:

Lightning Web Components for Aura Developers

Working with Aura and Lightning Web Components: Interoperability and Migration

Posted in Release Notes, Salesforce, Summer19

Salesforce Summer’19: Top 19 Features of Lightning Experience

Salesforce published Summer’19 release(Preview) notes. If You are a lightning lover like me then In this release, you can find lot’s of new features as well as new enhancements, for example, Field History Tracking Report, LEX for iPad, Custom colors for Hyperlinks, Record view/Activity component new views, Surveys for free,Duplicate case merge.

Take a look below new features in Summer 19 released for Lightning Experience:

Register today for early access to the brand-new features. Sign up here

1.Keep Record Context When Switching from Salesforce Classic to Lightning Experience

When you switch from Salesforce Classic to Lightning Experience, you land on the same page in Lightning Experience, if it exists. If the same page doesn’t exist in Lightning Experience, you are redirected to your default landing page, which is determined by the org default or your customizations.

2.Power Up Your Related Lists with Enhanced Related Lists

Take your related lists to the next level. With Enhanced Related Lists, you can show up to 10 columns, resize and sort your columns, perform mass actions, and wrap text.

How: From the related lists component in the Lightning App Builder, select Enhanced List from the Related List Type dropdown (1). You can customize how many records to display at once, and choose whether to show the list view action bar.

Choosing Enhanced List affects all related lists in the component . To customize which columns appear in a particular related list, edit the related list in the page layout editor and add more fields.

Related list component in the Lightning App Builder with the Related List Type field highlighted. Underneath that image, an Account page with the enhanced related lists highlighted.

3.Access Lightning Experience from Safari on iPad Devices (Beta)

Give your users the ability to run the full desktop version of Lightning Experience on their iPad device when they’re away from their desktop or laptop.

How: In Setup, enter Lightning Experience in the Quick Find box, and then select Lightning Experience on iPad Browsers (Beta).

Lightning Experience on iPad Browsers (Beta) setup page, showing a toggle to enable the feature

4.See More in Item Menus on the Navigation Bar

We increased the number of recent items shown in item menus from three to five. We also made some styling enhancements, including bold section names and separators, to make it easier to tell the different sections apart.

Why: An object’s item menu now displays up to five items each in the Favorites, Recent records, and Recent lists sections.

A view of an Opportunities menu item showing five recent records

5.Assign Custom Colors to Hyperlinks

Complete the look and feel of your company’s theming and branding in Lightning Experience by defining a hyperlink color.

How: In Setup, enter Themes and Branding in the Quick Find box, and then select Themes and Branding. Update an existing custom theme or create a new one. For Link Color, select Use brand color.

Themes and Branding, New Custom Theme setup page, showing Link color’s Use brand color checkbox

6.Zoom Through Related Lists with Quick Filters

Use quick filters in your related lists to find the data that you’re looking for. Related list quick filters are different from regular list view filters in that they aren’t saved, persist only throughout your current session, and can’t be shared.

How: Open a related list, and select  to add quick filters.

Opportunities related list open quick filter icon highlighted and quick filter panel open.

Quick filters aren’t available for the Assets, File, Other Related People, and Attachments related lists. For Enterprise Territory Management users, quick filters are available only for Accounts and only in the Assigned Territories and Users in Assigned Territories related lists.

7.Choose from Two Record View Options

Now you have two record page view default options. Choose between the current view—now called Grouped view—and the new Full view. Full view displays all details and related lists on the same page. If you’re transitioning to Lightning Experience, this view is similar to Salesforce Classic.

A record page showing Full view and Grouped view

If you turn on Lightning Experience after Summer ’19, you configure these settings in the Lightning Experience Transition Assistant before you enable Lightning Experience, or in Setup after enabling Lightning Experience.In Setup, enter Record Page Settings in the Quick Find box, and select Record Page Settings.

8.Set Org Defaults for How Activities Display on Record Pages

Control how your users view activities on record pages. Set the default view to the newer expandable activity timeline, or choose the activities related lists view that will feel familiar to Salesforce Classic users. Users can switch between options whenever they want.

An example of an activity timeline

Related lists shows details for each task, event, and email in the Open Activities and Activity History related lists. Users who are familiar with Salesforce Classic might feel more at home working with the related lists activities view.

An example of a related lists view

How: To change the default activities view, in Setup, enter Record Page Settings in the Quick Find box, and select Record Page Settings.

Record Page Settings setup page, showing the Related Lists and Activity Timeline activities views

9.Send Surveys for Free

Licenses can be tricky, so we got rid of them. You no longer need a license to create and send surveys. Anyone who has been assigned one of the provided four profiles can create and send unlimited surveys for free.

Enable surveys, and assign one of the profiles to users who create and send surveys.

  • Contract manager
  • Marketing user
  • Standard user
  • System administrator

10.Merge Duplicate Cases (Beta)

Get rid of accidental copycats in your case list by merging up to three cases into one case. If the to-be-merged cases have different information in their case fields, you can choose which version you want to use in the merged case.

11.Path: Celebrate Sales Milestones

Help your teams celebrate their successes. Toss some virtual confetti when reps reach a designated path stage, for example, winning an opportunity. You can choose the frequency, such as always for those hard-won victories or only sometimes for daily occurrences. Celebrations don’t work on the status Converted on leads.

Screen full of confetti on an opportunity where the rep just reached Closed Won stage

How: In Setup, use the Quick Find box to find Path Settings. Enable Path and create a path, or edit one.

12.Add Opportunity Contact Roles More Efficiently in Lightning Experience

To add a contact role from within an opportunity, click Contact Roles, and then click Add Contact Roles. A list of all the contacts for the account appears.

Screen shot of Add Contact Roles screen

To assign or edit a primary contact for an opportunity, or modify contact roles, click Edit Contact Roles. The current primary contact is shown, along with a list of the opportunity contact roles that have already been added.

Screen shot of Edit Contact Roles screen

13.Filter and Search Events in List Views

Gone are the days of sales reps scrolling endlessly through their calendars to find events. Reps can find exactly what they need by using filters to customize their list views. Reps can use predefined list views to review their daily agenda, upcoming events, or recent events.

Why: Reps can scan events and details easily without clicking through weeks or months to get a better idea of what their calendar looks like.

View of upcoming events in the table view




14.Quip for Sales: Standardize Sales Processes Using Quip

Boost productivity throughout the deal cycle with collaborative docs directly inside Sales Cloud. Configure the Quip Document Lightning component to deploy customizable Quip document templates in context of your Sales Cloud record pages. With Quip templates, you can even use mail-merge syntax to auto-fill new documents with data from corresponding Salesforce fields.

If you haven’t already done it, connect Salesforce to Quip. In Setup, enter Quip in the Quick Find box, and follow the steps. Then launch Lightning App Builder, and add the Quip Document component to the Sales page that you want to update.

Account page showing red circles around a Quip Document embedded in the Acount Plan tab and the option to open document with Quip

15. Let Reps Choose Which Email Composer to Use When Clicking Email Addresses

When sales reps click an email address to write an email, the Salesforce email composer now opens by default. Reps can choose to have their computer’s default email composer open instead.

How: In personal settings, enter My Email Settings in the Quick Find box, then select My Email Settings. Select which composer you want to use when you click an email address.

My Email Settings

16.Choose to Get Task Notifications by Email

Sales reps can control whether they’re notified by email when they’re assigned a task. In personal settings, enter Activity in the Quick Find box, then select Activity Reminders.

My Email Settings

Increase Manager Productivity with a New Task Filter

Sales managers want to focus on the tasks that their team is working on. Now it’s easy to do with the My team’s tasks filter.Why: Within your list view, select the My team’s tasks filter.

Filter by owner

17.Evaluate Each Record in Reports with Row-Level Formulas (Beta)

With row-level formulas, you don’t need to export report data to a spreadsheet or ask an admin to create a one-off custom formula field. Instead, write a row-level formula directly in the Lightning report builder.

Add a row-level formula from the Columns section of the Overview pane by clicking  | Add Row-Level Formula (Beta)

Adding a row-level formula

Name the row-level formula column Time to Close .Choose Number as the Formula Output Type .Then write the formula.

CLOSE_DATE - DATEVALUE(CREATED_DATE)
Writing a row-level formula

The row-level formula appears as a column on the report.

A row-level formula in a report

How: Enable the row-level formulas beta feature from Setup. Enter Reports in the Quick Find box, then click Reports and Dashboards Settings. Select Enable Row-Level Formulas (Lightning Experience Only) and click Save.

18.Create Historical Tracking Reports In Lightning

You no longer need to switch back to Salesforce Classic to create meaningful reports on how your business is changing. Create, edit, and view all your historical tracking reports in Lightning Experience. Historical tracking reports (also called historical trending reports) help you capture changes in key business metrics over time.

19.Get Notified When Reports Conditions Are Met

Don’t wait to find out when an important aggregate in your Salesforce report reaches a meaningful threshold. When a change affects a report that you rely on, report subscribers can receive the updated information right away. For instance, set conditions to send email when average case age is greater than one day, or opportunity count rises above 100. Choose whether the email contains a summary of the conditions that were met or a summary plus the whole report.

Add conditions to your report subscriptions, and subscribers receive an email when the selected aggregates meet the specified thresholds.

Adding conditions to a report

References:

Salesforce Summer ’19 Release Notes 

Salesforce Summer19 release quick summary

Posted in Lightning Component, Lightning Web Component, LWC, Salesforce

Lightning Web Components for AURA Developers Part – I

The best way to compare the Aura Component and Lightning Web Components programming models is to look at code for similar components written in the two models. The goal of this post is to help you to leverage your Aura components skills to accelerate learning about Lightning web components. You learn how the two types of components work well together.

Prerequisites

Before you dive into this post, complete the Lightning Web Components Basics module, which gives you a great introduction to the new programming model.
I am assuming that you’re familiar with the Aura Components programming model, and we won’t explain its features, except in comparison to the Lightning Web Components programming model. If you’re not familiar with Aura components, start with the Aura Components Basics module.

Component Bundles

The component bundle file structure is different for an Aura component and a Lightning web component. Here’s how the files map between the two types of component.

(Source: Trailhead )

Migrate Markup

  • An Aura component contains markup in a .cmp file. The file starts with an <aura:component> tag and can contain HTML and Aura-specific tags.
  • A Lightning web component contains markup in a .html file. The file starts with a <template> tag and can contain HTML and directives for dynamic content.

Attributes Become JavaScript Properties

Migrate attributes from tags in the markup (.cmp) of an Aura component to JavaScript properties in the JavaScript file (.js) of a Lightning web component.

Aura component:

 <aura:attribute name="recordId" type="Id" />
 <aura:attribute name="account" type="Account" />

LWC :

import { LightningElement, api, track } from 'lwc';
export default class AccountSummary extends LightningElement {
    @api recordId;
    @track account;
        ...
}

The recordId and account attributes in the Aura component become the recordId and account JavaScript properties in the Lightning web component.

The two Lightning web component properties have different decorators. The @api and @track decorators both make a property reactive, which means that when the property value changes, the component’s HTML template rerenders.

The @api decorator marks recordId as a public reactive property. A public property is part of the public API for the component, which means that it can be set in Lightning App Builder, or by a parent component that uses the component in its markup.

The @track decorator marks property as a private reactive property, also known as a tracked property. These properties are used to track internal component state and aren’t part of the component’s public API.

Basic Aura Expressions Become HTML Expressions

Migrate basic expressions from markup in an Aura component to expressions in HTML in a Lightning web component. An example of a basic expression is a reference to an attribute in an Aura component.
For example, the AccountPaginator Aura component uses basic expressions to display the values of the page, pages, and total attributes.

<aura:component >
    <aura:attribute name="page" type="integer"/>
    <aura:attribute name="pages" type="integer"/>
    <aura:attribute name="total" type="integer"/>
    
    <div class="centered">{!v.total} Accounts • page {!v.page} of {!v.pages}</div>
</aura:component>

Here’s the equivalent syntax in the HTML file of the accountPaginator Lightning web component.

<template>
    {totalItemCount} items • page {currentPageNumber} of {totalPages}
</template>

The HTML references the totalItemCount property in paginator.js. The {currentPageNumber} and {totalPages} expressions reference getters that process the pageNumber and pageSize properties.

import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
    /** The current page number. */
    @api pageNumber;
    /** The number of items on a page. */
    @api pageSize;
    /** The total number of items in the list. */
    @api totalItemCount;
    get currentPageNumber() {
        return this.totalItemCount === 0 ? 0 : this.pageNumber;
    }
    get totalPages() {
        return Math.ceil(this.totalItemCount / this.pageSize);
    }
}

Aura Conditionals Become HTML Conditionals

Migrate <aura:if> tags in an Aura component to if:true or if:false directives in a Lightning web component’s HTML file.
Here’s some conditional markup in the AccountDetails Aura component.

<aura:if isTrue="{!v.spinner}">
    <lightning:recordForm recordId="{!v.accountId}"
      objectApiName="Account"
      fields="{!v.accountFields}" columns="2"/>
</aura:if>

Here’s similar HTML in the accountDeatils Lightning web component.

<template if:true={spinner}>
    <lightning-record-form object-api-name="Account" 
      record-id={accountId} fields={accountFields} 
      columns="2">
    </lightning-record-form>
</template>

The HTML file of a Lightning web component starts with the standard HTML <template> tag, and it can also contain other <template> tags in its body. In this example, the content in the <template> tag conditionally renders depending on the result of the if:true directive.

Aura Iterations Become HTML Iterations

Migrate <aura:iteration> tags in an Aura component to for:each directives in a Lightning web component’s HTML file.
Here’s the Aura syntax in Sample.cmp.

<aura:iteration items="{!v.items}" itemVar="item">
    {!item}
</aura:iteration>

Here’s similar HTML in the sample Lightning web component.

<template for:each={items} for:item='item'>
    <p key={item.id}>{item}</p>
</template>

Stay tuned for next blog post for Lightning Web Components for AURA Developers Part- II.

References:

Lightning Web Components for Aura Developers

Working with Aura and Lightning Web Components: Interoperability and Migration

Posted in Lightning Web Component, LWC, Salesforce

Introducing New Lightning Web Components

Introducing Lightning Web Components

In case you missed it, Salesforce recently announced Lightning Web Components (LWCs) — a new programming model that developers can use in addition to the existing Aura-Based programming model to build Lightning components. 

Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, can coexist and interoperate with the original Aura programming model, and delivers unparalleled performance.It’s not same as Lightning Components or built on top of Aura framework but it’s a different model which will co-exist with Lightning Components.
For more information Trailhead Project: Quick Start with Lightning Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Lightning Web Component mainly consists of below mentioned files :

  • HTML provides the structure for your component.
  • JavaScript defines the core business logic and event handling.
  • CSS provides the look, feel, and animation for your component.
  • Component Configuration File(.js-meta.xml) –  This file provides metadata for Salesforce, including the design configuration for components intended for use in Lightning App Builder.

Here’s take a look simple Lightning web component that displays “Hello World” in an input field.

HTML

<template>
    <input value={message}></input>
</template>

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {   
message = 'Hello World'; 
}

CSS

input {
   color: blue;
}

Component Configuration File

<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”helloWorld”>
<apiVersion>45.0</apiVersion>
<isExposed>true </isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
  • Required
    • apiVersion binds the component to a Salesforce API version.
    • isExposed (true or false) makes the component available from other namespaces. Only set this to true to make a component usable in a managed package or by Lightning App Builder in another org.
  • Optional
    • targets specify which types of Lightning pages the component can be added to in the Lightning App Builder.
    • targetConfigs let you specify behavior specific to each type of Lightning page, including things like which objects support the component.

See the documentation for the full list of supported syntax.

Decorators

The Lightning Web Components programming model has three decorators that add functionality to a property or function.
The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components.

@api
To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of a reactive property changes, the component’s template rerenders any content that references the property.
See Public Properties.
To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.
See Public Methods.
@track
To track a private property’s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties.
See Tracked Properties.
@wire
To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.
See Use the Wire Service to Get Data and Call Apex Methods

What happens to Lightning Components?

Lightning Components are not going away and they will continue to exist in parallel to Lightning Web Components. It’s something similar when Lightning Components were available and we started thinking that if it’s going to replace Visualforce pages.
As VF pages and Lightning Components co-existed, now they are being joined with Lightning Web Components. It will be more of a choice of the framework that you will want to choose when building UI components. With the standard Web development model, it looks like Lightning Web Components definitely will be the choice in future.

Migration Strategy

The programming model for Lightning Web Components is fundamentally different than the model for Aura Components. Migrating an Aura component to a Lightning web component is not a line-by-line conversion, and it’s a good opportunity to revisit your component’s design. Before you migrate an Aura component, evaluate the component’s attributes, interfaces, structures, patterns, and data flow.

To understand more about migration strategy stay tuned for my next blog posts where i will explain in details about Lightning Web Components for AURA Developers.

Lightning Web Components for AURA Developers Part – I

References :

Lightning Web Components Basics

Introducing Lightning Web Components

Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org