Insert a link in lightning datatable Column Value

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.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











share|improve this question























  • 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
















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











share|improve this question























  • 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












up vote
1
down vote

favorite









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











share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 3 hours ago

























asked 4 hours ago









Jayati Jaiswal

238




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
















  • 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




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










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;






share|improve this answer




















    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






























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    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;






    share|improve this answer
























      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;






      share|improve this answer






















        up vote
        3
        down vote










        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;






        share|improve this answer












        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;







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 1 hour ago









        David Reed

        20k21540




        20k21540



























             

            draft saved


            draft discarded















































             


            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













































































            Comments

            Popular posts from this blog

            Long meetings (6-7 hours a day): Being “babysat” by supervisor

            Is the Concept of Multiple Fantasy Races Scientifically Flawed? [closed]

            Confectionery