hyperlink to record in LWC is showing recordId url

Question

I am using the below query to get task and lead details

@AuraEnabled(cacheable = true)
public static List<Task>  getRecords(){
    List<Task> latestTasks = new List<Task>();
    
    List<Task> taskList = [SELECT Id, CreatedDate, Status, Subject, TYPEOF who
                        WHEN Contact THEN Name
                        WHEN Lead THEN Id, Name, Company, Phone, Industry, CreatedDate, State , Country, Postalcode , Street, City
                        END
    FROM Task WHERE Type = 'Call Block' Order by CreatedDate DESC];
    system.debug('taskList ' + taskList);
    return taskList;
}

In LWC i am using datatable to display lead details

const columns = [
    { label: 'Company Name', fieldName: 'comLink', type: 'url', typeAttributes: { label: { fieldName: 'Company' }, tooltip: 'Go to detail page', target: '_blank' } },
    { label: 'Contact Name', fieldName: 'Name', type: 'text', wrapText: true },
    { label: 'Address', fieldName: 'Address', type: 'text', wrapText: true },
    { label: 'Industry', fieldName: 'Industry', type: 'text', sortable: true, cellAttributes: { alignment: 'left' } },
    { label: 'Date Added', fieldName: 'CreatedDate', type: 'date', typeAttributes: { timeZone: 'UTC', year: 'numeric', month: 'numeric', day: 'numeric' }, sortable: true },
];

I am trying to make Lead Company and Name to be hyperlink to record Id

  @wire(getTasks)
    tasks({ error, data }) {
        if (data) {
            let recs = [];
            for (let i = 0; i < data.length; i++) {
                let task = {};
                task.rowNumber = '' + (i + 1);
                task.comLink = '/' + data[i].Who.Id;
                task.Name = data[i].Who.Name;
                task.Address = data[i].Who.City + ' ' + data[i].Who.Street + ' ' + data[i].Who.State + ' ' + data[i].Who.Country + ' ' + data[i].Who.Postalcode;
                task.Industry = data[i].Who.Industry;
                task.CreatedDate = data[i].CreatedDate;
                task = Object.assign(task, data[i]);
                recs.push(task);
            }
            this.records = recs;
            this.showTable = true;
        } else {
            this.error = error;
        }
    }

But i am getting the url link instead of Company Name. Any idea where it is going wrong.

Answer 1

As per your definition

{
  label: 'Company Name', 
  fieldName: 'comLink', 
  type: 'url', 
  typeAttributes: { 
    label: { 
      fieldName: 'Company' 
    }, 
    tooltip: 'Go to detail page', 
    target: '_blank' 
  } 
},

You are saying create a Column with label Company Name, of type Url. The link is defined in the field task.comLink and the label to show the link with is defined in the field task.Company

Your problem is that what you have in task does not contain a property called Company (hence, it falls back to the Url it self as label)

As mentioned on my comments, you could add under

task.comLink = '/' + data[i].Who.Id;

A line like

task.Company = data[i].Who.Company || "[ Not provided ]";

Alternatively, you could fetch also the company of the Contacts and use it as fallback in case you display a task for a Contact, so you would need to fetch that extra field (Account.Name) from the controller

@AuraEnabled(cacheable = true)
public static List<Task>  getRecords(){
    return [
        SELECT Id, CreatedDate, Status, Subject, TYPEOF who
            WHEN Contact THEN Name, Account.Name
            WHEN Lead THEN Id, Name, Company, Phone, Industry, CreatedDate, State , Country, Postalcode , Street, City
            END
        FROM Task 
        WHERE Type = 'Call Block' 
        ORDER BY CreatedDate DESC
    ];
}

And add under

task.comLink = '/' + data[i].Who.Id;

something like

task.Company = data[i].Who.Company || data[i].Who.Account?.Name || '[ Not provided ]';

Answer 2

I feel you are on the right track, just one minor change

The fieldName should be name of the field which has the data not the label you are giving to the column.

Change from

{ label: 'Company Name', fieldName: 'comLink', type: 'url', typeAttributes: { label: { fieldName: 'Company' }, tooltip: 'Go to detail page', target: '_blank' } },

To

{ label: 'Company Name', fieldName: 'comLink', type: 'url', typeAttributes: { label: { fieldName: 'Name' }, tooltip: 'Go to detail page', target: '_blank' } },

So the overall columns become.

const columns = [
    { label: 'Company Name', fieldName: 'comLink', type: 'url', typeAttributes: { label: { fieldName: 'Name' }, tooltip: 'Go to detail page', target: '_blank' } },
    { label: 'Contact Name', fieldName: 'Name', type: 'text', wrapText: true },
    { label: 'Address', fieldName: 'Address', type: 'text', wrapText: true },
    { label: 'Industry', fieldName: 'Industry', type: 'text', sortable: true, cellAttributes: { alignment: 'left' } },
    { label: 'Date Added', fieldName: 'CreatedDate', type: 'date', typeAttributes: { timeZone: 'UTC', year: 'numeric', month: 'numeric', day: 'numeric' }, sortable: true },
];