1

I am trying to insert a link in a result column of lightning:datatable

Below is the code snippet :

Datatable Code:

    <lightning:datatable data="{! v.contactList }" 
                 columns="{! v.mycolumns }" 
                 keyField="id"
                 onrowselection = "{!c.checkboxFetch}"
                 hideCheckboxColumn="false"
                 onrowaction="{!c.checkboxFetch}"
                 class="tableCss"
                 tabindex="1"/> 

Controller Code:

{label: 'Customer Name', fieldName: 'CustomerName__c', type: 'url', 
                        sortable:"false", 
                        typeAttributes: {
                        label: 'Customer Name',
                        fieldName: 'CustomerName__c',
                        title: 'View',
                        disabled: false,
                        value: 'view',
                        iconPosition: 'left',
                        url: 'www.google.com',
                    }, },

However, in the result I am not able to link the column with the mentioned url and when clicking on the hyperlink it is redirecting to a localhost url like 172.9.0.1 (something like this)

Any idea on how to redirect to the url : www.google.com ? Also, the customer result from the variable iteration component.set('v.mycolumns' is not displaying the result. Rather it displaying the static value : Customer Name

8

Your Type Attributes, and likely the underlying data, aren't set up properly for a url type entry.

Your url item should correspond to the column in your data that contains a URL value (not the link's title or the column title). You can use the typeAttributes map to supply three additional parameters:

  • label
  • target
  • tooltip

Your columns entry should look something like this:

{
    label: 'Customer Name', 
    fieldName: 'CustomerName__c', // This field should have the actual URL in it.
    type: 'url', 
    sortable: "false", 
    typeAttributes: {
        label: {
            fieldName: 'UserReadableName__c' 
            // whatever field contains the actual label of the link
        },
        target: '_blank', // or as desired
        tooltip: 'Open the customer page' // or as desired
    }
}

Then, your CustomerName__c column in your data must contain an actual URL (not a Salesforce Id or anything else). If it doesn't, you can add a synthetic column to your data, such as

contactsList.forEach(function(contact) {
    contact.SearchURL = 'https://google.com/search?q=' + contact.CustomerName__c;
}
  • Thanks for the reply I am still not able to populate the url and getting the below error when tired the foreach approach : This page has an error. You might just need to refresh it. Action failed: c:dataTableCmp$controller$doInit [contactList is not defined] Failing descriptor: {c:dataTableCmp$controller$doInit} Adding the label, target, tooltip to the datatable typeAttributes does not work as it is showing blank value on the UI. – Jayati Jaiswal Sep 17 '18 at 9:32
  • 1
    Well, you can't paste my code into a location where contactList is not defined. You may need to adapt this to fit the architecture of your component, and you certainly will need to wait to execute it until your server callback returns, if you're executing a query in an Apex controller. – David Reed Sep 17 '18 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.