Insert a link in lightning datatable Column Value

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
1
down vote

favorite

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

edited 3 hours ago

asked 4 hours ago

Jayati Jaiswal

238

You have to set the column type as url and in in data, you have to separately define the link you want the users to redirect to. Have a look at this example provided in the documentation, developer.salesforce.com/docs/component-library/bundle/â€¦
â€“Â Ranga
3 hours ago

add a commentÂ |Â

up vote
1
down vote

favorite

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

edited 3 hours ago

asked 4 hours ago

Jayati Jaiswal

238

You have to set the column type as url and in in data, you have to separately define the link you want the users to redirect to. Have a look at this example provided in the documentation, developer.salesforce.com/docs/component-library/bundle/â€¦
â€“Â Ranga
3 hours ago

add a commentÂ |Â

up vote
1
down vote

favorite

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

edited 3 hours ago

asked 4 hours ago

Jayati Jaiswal

238

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

lightning lightning-experience slds datatable lightning-datatable

edited 3 hours ago

asked 4 hours ago

Jayati Jaiswal

238

edited 3 hours ago

asked 4 hours ago

Jayati Jaiswal

238

edited 3 hours ago

asked 4 hours ago

Jayati Jaiswal

238

asked 4 hours ago

Jayati Jaiswal

238

asked 4 hours ago

Jayati Jaiswal

238

You have to set the column type as url and in in data, you have to separately define the link you want the users to redirect to. Have a look at this example provided in the documentation, developer.salesforce.com/docs/component-library/bundle/â€¦
â€“Â Ranga
3 hours ago

add a commentÂ |Â

You have to set the column type as url and in in data, you have to separately define the link you want the users to redirect to. Have a look at this example provided in the documentation, developer.salesforce.com/docs/component-library/bundle/â€¦
â€“Â Ranga
3 hours ago

You have to set the column type as url and in in data, you have to separately define the link you want the users to redirect to. Have a look at this example provided in the documentation, developer.salesforce.com/docs/component-library/bundle/â€¦
â€“Â Ranga
3 hours ago

add a commentÂ |Â

1 Answer
1

active

oldest

votes

up vote
3
down vote

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;

answered 1 hour ago

David Reed

20k21540

add a commentÂ |Â

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "459"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f232660%2finsert-a-link-in-lightning-datatable-column-value%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
3
down vote

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

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;

answered 1 hour ago

David Reed

20k21540

add a commentÂ |Â

up vote
3
down vote

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

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;

answered 1 hour ago

David Reed

20k21540

add a commentÂ |Â

up vote
3
down vote

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

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;

answered 1 hour ago

David Reed

20k21540

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

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;

answered 1 hour ago

David Reed

20k21540

answered 1 hour ago

David Reed

20k21540

answered 1 hour ago

David Reed

20k21540

answered 1 hour ago

David Reed

20k21540

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky