Hyperlink a Record in lightning-datatable in Lightning Web Components(lwc)

 This post explains how to add the Hyperlink to name in the lightning data table using Lightning web components(lwc).

Example:

HTML Code:

<template>
    <lightning-card title="Hyperlink to The Name in Lightning Datatable"><br/>
         <div if:true={consData}>
            <lightning-datatable data={consData} 
                                 columns={columns} 
                                 key-field="Id"
                                 hide-checkbox-column="true"></lightning-datatable>
        </div>
    </lightning-card>
</template>

Javascript Code:

import { LightningElement, wire, track } from 'lwc';
import getContacts from '@salesforce/apex/LWCExampleController.getContacts';


// datatable columns
const columns = [
    {
        label: 'Name',
        fieldName: 'ConName',
        type: 'url',
        typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}
    }, {
        label: 'FirstName',
        fieldName: 'FirstName',
        type: 'text',
    }, {
        label: 'LastName',
        fieldName: 'LastName',
        type: 'text',
    }, {
        label: 'Phone',
        fieldName: 'Phone',
        type: 'phone'
    }
];

export default class HyperlinkNameInDatatable extends LightningElement {
    consData = [];
    columns = columns;

    @wire(getContacts)
    contacts({ error, data }) {

        if (data) {
            let tempConList = []; 
            
            data.forEach((record) => {
                let tempConRec = Object.assign({}, record);  
                tempConRec.ConName = '/' + tempConRec.Id;
                tempConList.push(tempConRec);
                
            });
            
            this.consData = tempConList;
            this.error = undefined;

            console.table(this.consData);

        } else if (error) {
            this.error = result.error;
        }
    }
}

Apex Code:

public inherited sharing class LWCExampleController {

    @AuraEnabled(Cacheable = true)
    public static List<Contact> getContacts() {
        return [SELECT Id, Name, FirstName, LastName, Phone, Email 
                FROM Contact 
                WHERE Email != null 
                AND Phone != null 
                ORDER BY CreatedDate DESC NULLS LAST limit 10];
    }
}

Result:

Address Lookup in Lightning Web Components(LWC) using Google Maps Places API

To Enable the address lookup in lightning-input-address first we need to enable the permission for Maps and Location Settings in our salesforce org.

Note: 

Maps and Location Settings feature only available in Professional, Enterprise, Performance, and Unlimited editions.

Path:

From Setup, enter Maps in the Quick Find box, and then select Maps and Location Settings

Once the permission is enabled, we need to provide the show-address-lookup attribute to display the Address Lookup field.

Example:

<template>
   <lightning-card title="Address Lookup using Google Maps Places API">
      <lightning-input-address  address-label="Shipping Address"
         street-label="Street"
         city-label="City"
         country-label="Country"
         province-label="Province"
         postal-code-label="PostalCode"
         street="Default Street Line"
         city=""
         country=""
         province=""
         postal-code=""
         required
         field-level-help="Select Shipping Address"
         show-address-lookup>
      </lightning-input-address>
   </lightning-card>
</template>

Output:

Safe Navigation Operator – Avoid Null Pointer Exceptions

Safe Navigation Operator (?.) first evaluates the Left-Hand-Side of the chain expression. If it is NULL, the Right-Hand-Side is evaluated and returns NULL. We can use this operator in variable, method, and property chaining.

To use the Safe Navigation Operator, we just need to replace the dot (.) with “?.“.

For Example,  Account?.Type.

Example: 1

// Creating a NULL reference.
Account objAcc; 

// it throws Null Pointer Exception.
System.debug(objAcc.Type); 

// it prints the NULL because we used the safe operator
System.debug(objAcc?.Type); 

Example: 2

Without Safe Navigation Operator:

String str = 'Salesforce Code Crack';
if(!String.isEmpty(str)){
    System.debug(str.capitalize());
}

With Safe Navigation Operator:

String str = 'Salesforce Code Crack';
System.debug(str?.capitalize());

Example: 3

Without Safe Navigation Operator:

list<Account> lstAccs = [SELECT Type FROM Account WHERE Id='0013z00002TAEwaAAH'];
if(lstAccs != null && !lstAccs.isEmpty()){
    System.debug(lstAccs[0].Type);
}

With Safe Navigation Operator:

System.debug([SELECT Type FROM Account WHERE Id='0013z00002TAEwaAAH' LIMIT 1]?.Type);

References:

https://developer.salesforce.com/docs/atlas.en-us.228.0.apexcode.meta/apexcode/langCon_apex_SafeNavigationOperator.htm