3

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];
    }
}

1 Answer 1

2

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 = [];
    
}
3
  • I changed the js code to this but when I click on the account name, a new tab open with the link like this: sample%20account%20for%20entitlements. It does not take me to the account record page Apr 6, 2021 at 18:30
  • I edited the question. please check Apr 6, 2021 at 18:35
  • Have updated - couple of issues with my answer which I've fixed. Apr 6, 2021 at 20:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .