[SalesForce] Add hyperlink to record page in lwc

I have a lightning web component that fetch account record from Salesforce. When a user clicks on the Account name, I want to take the user to the Account record page. How can I achieve this?

.html

<template>
    <lightning-card title="Datatable styling in lwc">
        <template if:true={tableData}>
            <div class="myTable">
            <lightning-datatable 
                key-field="Id" 
                data={tableData} 
                columns={columns}
                hide-checkbox-column>
            </lightning-datatable>
            </div>
        </template>
    </lightning-card>
</template>

.js

    import { LightningElement, wire } from 'lwc';
    import getAccounts from '@salesforce/apex/tableController.getAccounts'
    import {loadStyle} from 'lightning/platformResourceLoader'
    import COLORS from '@salesforce/resourceUrl/colors'

    const COLUMNS = [
            {label:'Account Name', fieldName: 'Name',
    type: "url",
    typeAttributes: { label: { fieldName: "Id" }, target: "_top" },
    cellAttributes:{ 
        class:{fieldName:'accountColor'},
    }},
        
        {label:'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency', 
        cellAttributes:{ 
            class:{fieldName:'amountColor'}
        }},
    
        {label:'Industry', fieldName: 'Industry', type: 'text'},
    
        {label:'Phone', fieldName: 'Phone', type: 'phone'}
    ]
    
    export default class DatatableDemo extends LightningElement {
tableData
column = COLUMN

...... other code
}

.cls

public with sharing class tableController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, AnnualRevenue, Industry, Phone from Account];
    }
}

Best Answer

For a hyperlink you need two fields: The Name field and the Id field of whatever data you are wanting to show.

So for your Account version above, your configuration for an Account hyperlink would be:

COLUMNS = [
    {label: 'Account Name', fieldName: 'LinkUrl', type: "url",
     typeAttributes: { label: { fieldName: "Name" }, target: "_top" },
     cellAttributes:{ class:{fieldName:'accountColor'}}
    },
    ....other columns

One you have the data, you need to add another acct field - the url one:

connectedCallback() {
    getAccounts()
      .then(result => {
        let tempAccts = [];
        result.forEach(acct=>{
          let newAcct = JSON.parse(JSON.stringify(acct));
          newAcct.LinkUrl = `/${acct.Id}`;
          tempAccts.push(newAcct);
        });
        this.tableData = tempAccts;
      })
      .catch(error => {
        this.error = error;
      });
  }

The JSON.parse... bit is because the Acct data is immutable.

Finally, you need to use the LinkUrl field in the columns - note, I had the Id/Name fields the wrong way around - I've corrected above.

Couple more things - you will need to assign your COLUMNS to a class member.

export default class DatatableDemo extends LightningElement {
    columns = COLUMNS;
    tableData = [];
    
}

Related Solutions

[SalesForce] Hyperlink record name LWC datatable

here is a solution that works perfectly. I display a list of opportunity and add a hyperlink on the column name of the data table. To do that, you have to create a wrapper class in you apex controller like this:

public with sharing class GetAllOpportunities {
   @AuraEnabled(cacheable=true)
    public static List<DataTableWrapper> getAllOpps() {
        List<Opportunity> listOpp = [SELECT Id, Name ,StageName, CloseDate 
                                     FROM Opportunity Order By Name asc];

        List<DataTableWrapper> response = new List<DataTableWrapper>();
        for(Opportunity opp : listOpp){
            DataTableWrapper obj = new DataTableWrapper();
            obj.oppId = opp.Id;
            obj.name = opp.Name;
            obj.nameUrl = '/'+opp.Id;
            obj.stageName = opp.StageName;
            obj.closeDate = opp.CloseDate;
            response.add(obj);
        }

        return response;
    }

    private class DataTableWrapper {
        @AuraEnabled
        public Id oppId {get;set;}
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String nameUrl {get;set;}
        @AuraEnabled
        public String stageName {get;set;}
        @AuraEnabled
        public Date closeDate {get;set;}
    }


}

note the nameUrl attribute, I'll use it in the js file.

here is the html file:

<template>
    <lightning-card  title="Opportinity List">
        <lightning-datatable data={opportunities} columns={columns} key-field="Id"></lightning-datatable>        
    </lightning-card> 
</template>

And Finally, the js file:

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

export default class OpportunityList extends LightningElement {
    @track columns = [
        {
            label: 'Opportunity name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'name' }, 
            target: '_blank'},
            sortable: true
        },
        {
            label: 'Stage Name',
            fieldName: 'stageName',
            type: 'text',
            sortable: true
        },
        {
            label: 'Close date',
            fieldName: 'closeDate',
            type: 'date',
            sortable: true
        }

    ];

    @track error;
    @track opportunities = [];


    @wire(getAllOpps)
    wiredOpps({error,data}) {
        if (data) {
            this.opportunities = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.opportunities = undefined;
        }
    }
}

==========================================================================

Update

=========================================================================

This code below does the same thing without creating any wrapper class. We can only use JS.

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

export default class OpportunityList extends LightningElement {
    @track columns = [
        {
            label: 'Opportunity name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Name' }, 
            target: '_blank'},
            sortable: true
        },
        {
            label: 'Stage Name',
            fieldName: 'StageName',
            type: 'text',
            sortable: true
        },
        {
            label: 'Close date',
            fieldName: 'CloseDate',
            type: 'date',
            sortable: true
        }

    ];

    @track error;
    @track opportunities = [];


    @wire(getAllOpps)
    wiredOpps(result) {
        const { data, error } = result;
        if(data) {
            let nameUrl;
            this.opportunities = data.map(row => { 
                nameUrl = `/${row.Id}`;
                return {...row , nameUrl} 
            })
            this.error = null;
        }
        if(error) {
            this.error = error;
            this.opportunities = [];
        }
    }
}

Apex class

public with sharing class GetAllOpportunities {
   @AuraEnabled(cacheable=true)
    public static List<Opportunity> getAllOpps() {
        return [SELECT Id, Name ,StageName, CloseDate FROM Opportunity Order By Name asc];
    }

}

[SalesForce] How to use concatenation for columns of lightning datatable

Why not do it it apex? and keep LWC as is?

    public wrapp(Account acct){
        id = acct.Id;
        name = acct.Name + '-'+acct.Master_Customer_ID__c;   
        mdm = acct.Master_Customer_ID__c;     
    }

Best Answer

Related Solutions

[SalesForce] Hyperlink record name LWC datatable

[SalesForce] How to use concatenation for columns of lightning datatable

Related Topic